/* Styles propres à la page Projets : bandeau de filtres, cartes projet
   posées sur photo (exception au rayon 0, cf. charte), pagination. */

.cerese-filtres {
  background: var(--cerese-beige);
  padding: clamp(14px, 1.6vw, 20px);
  margin-top: 18px;
}
.cerese-filtres__titre { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cerese-fonce); font-weight: 700; margin-bottom: 12px; }
.cerese-filtres__ligne { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.cerese-filtres__champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.cerese-filtres__champ label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cerese-gris); font-weight: 700; }
.cerese-filtres__champ select {
  font-family: var(--cerese-font);
  font-size: 16px;
  color: var(--cerese-encre);
  background: var(--cerese-blanc);
  border: 1px solid var(--cerese-bordure);
  border-radius: 0;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}
/* border/color !important : conflit de spécificité avec le reset de hello-elementor (voir plus bas) */
.cerese-filtres__reset {
  font-family: var(--cerese-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--cerese-fonce) !important;
  background: transparent;
  border: 1px solid var(--cerese-fonce) !important;
  padding: 12px 18px;
  min-height: 48px;
  cursor: pointer;
  flex: 0 0 auto;
}
/* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux <button type="button"> au
   survol/focus. !important nécessaire : le sélecteur `[type=button]:hover` du reset a la même spécificité
   qu'une classe, et reset.css se charge après notre CSS dans le <head> (vérifié), donc il gagne l'égalité sans ça. */
.cerese-filtres__reset:focus { background: transparent !important; border-color: var(--cerese-fonce) !important; color: var(--cerese-fonce) !important; }
@media (hover: hover) {
  .cerese-filtres__reset:hover { background: transparent !important; border-color: var(--cerese-fonce) !important; color: var(--cerese-fonce) !important; }
}
.cerese-filtres__compte { margin-top: 12px; font-size: 14px; color: var(--cerese-gris); }

.cerese-grille-projets { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.5vw, 20px); }
@media (min-width: 620px) { .cerese-grille-projets { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1140px) { .cerese-grille-projets { grid-template-columns: repeat(3, 1fr); } }

.cerese-page .cerese-carte-projet {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 15 / 16; /* portrait depuis le 04/09/2026 à la demande du
    client (remplace une hauteur fixe de 300px, qui donnait une carte paysage),
    raccourci d'un cinquième le 06/09/2026, également à sa demande.

    15/16 n'est pas un chiffre choisi à l'œil : c'est exactement l'ancien 3/4
    moins un cinquième de hauteur. En 3/4 la hauteur vaut 4/3 de la largeur ;
    en retirer un cinquième donne 0,8 × 4/3 = 16/15 de la largeur, soit un
    rapport largeur/hauteur de 15/16. Sur une colonne de 387px, la carte passe
    donc de 516px à 412px.

    Un rapport plutôt qu'une hauteur en dur : la hauteur se déduit de la
    largeur réelle de la colonne, le format tient donc aux trois paliers de la
    grille sans valeur à maintenir. Le cadre reste de hauteur déterminée, ce
    qui préserve le comportement d'origine : la description est masquée au
    repos (voir .cerese-carte-projet__resume plus bas), et le panneau grandit
    vers le haut au survol sans jamais dépasser le cadre, contenu par
    overflow:hidden ci-dessous.

    Contrainte à respecter si ce rapport bouge encore : au survol, le panneau
    déployé (titre + résumé + lien + marges) doit tenir dans le cadre, sinon le
    haut du texte est coupé sans prévenir. Mesuré carte par carte à 1440px sur
    les 18 projets (3 pages de grille) et les 6 projets de recherche : aucun
    débordement, pire cas 270px de panneau pour 412px de cadre, soit 142px de
    marge. Le pire cas est un projet de recherche, dont les titres sont plus
    longs que ceux des projets. Un cadre plus court que ~300px couperait donc
    du texte : refaire cette mesure avant tout nouveau raccourcissement. */
  text-decoration: none;
  color: var(--cerese-blanc);
  background-color: #0F2C30;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 14px);
  border-radius: 24px 24px 0 0; /* seule exception tolérée au rayon 0, cf. charte */
  overflow: hidden;
}
/* Vraie photo (quand le projet en a une) : plein cadre derrière l'entête et
   le panneau, qui restent au-dessus grâce à l'ordre d'insertion dans le DOM
   (voir cardEl() dans projets.js) — pas besoin de z-index. Le motif rayé
   défini plus haut sur .cerese-carte-projet reste le repli visuel pour les
   projets sans photo. */
.cerese-carte-projet__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Voile dégradé en haut ET en bas (06/09/2026, validé par Louis sur l'aperçu
   comparatif). Il remplace à la fois l'ancien scrim de tête, qui ne couvrait
   que le haut, et le fond opaque du panneau de pied, qui masquait en
   permanence ~95px sur les ~510px de la carte, soit près d'un cinquième de la
   photo. Le principe vient des cartes projet de haskoning.com : on ne réserve
   pas une bande à la couleur de marque, on assombrit la photo juste là où du
   texte a besoin de contraste, et on la laisse intacte ailleurs. Transparent
   entre 26% et 38%, donc la scène reste lisible sur l'essentiel du cadre.
   Les paliers du bas sont calés sur le pire cas rencontré (une table en béton
   en plein soleil pile derrière le titre, photo du projet Promo Fruits), pas
   sur une photo moyenne : c'est le pire cas qui décide de la lisibilité. */
.cerese-carte-projet--photo .cerese-carte-projet__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,44,48,0.55) 0%, rgba(15,44,48,0) 26%),
    linear-gradient(180deg, rgba(15,44,48,0) 38%, rgba(15,44,48,0.55) 62%, rgba(15,44,48,0.88) 82%, rgba(15,44,48,0.96) 100%);
  transition: background 320ms ease;
}
/* Voile assombri quand le résumé se déploie : le texte révélé remonte sur une
   zone de photo qui, au repos, n'a pas besoin d'être couverte. Mêmes
   déclencheurs que le résumé lui-même (:focus-visible au clavier, .is-ouvert
   au toucher, :hover derrière la garde hover:hover). */
.cerese-carte-projet--photo:focus-visible .cerese-carte-projet__scrim,
.cerese-carte-projet--photo.is-ouvert .cerese-carte-projet__scrim {
  background:
    linear-gradient(180deg, rgba(15,44,48,0.55) 0%, rgba(15,44,48,0) 26%),
    linear-gradient(180deg, rgba(15,44,48,0) 26%, rgba(15,44,48,0.78) 54%, rgba(15,44,48,0.94) 78%, rgba(15,44,48,0.97) 100%);
}
@media (hover: hover) {
  .cerese-carte-projet--photo:hover .cerese-carte-projet__scrim {
    background:
      linear-gradient(180deg, rgba(15,44,48,0.55) 0%, rgba(15,44,48,0) 26%),
      linear-gradient(180deg, rgba(15,44,48,0) 26%, rgba(15,44,48,0.78) 54%, rgba(15,44,48,0.94) 78%, rgba(15,44,48,0.97) 100%);
  }
}
.cerese-carte-projet__entete { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
/* Pastilles de tête (06/09/2026). La thématique du projet (ou son axe de
   recherche sur la page Projets de recherche) en beige plein, le statut en
   translucide bordé. Elles remplacent la légende monospace « PHOTO : … », qui
   occupait toute la largeur de la carte pour un crédit photo n'aidant en rien
   à choisir un projet ; ce crédit reste affiché sur la fiche projet, où il a
   un sens. flex-wrap sur le conteneur : deux libellés longs passent à la
   ligne plutôt que de déborder du cadre. */
.cerese-carte-projet__them,
.cerese-carte-projet__statut { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; }
.cerese-carte-projet__them { background: var(--cerese-beige); color: var(--cerese-fonce); }
.cerese-carte-projet__statut { background: rgba(255,255,255,0.18); color: var(--cerese-blanc); border: 1px solid rgba(255,255,255,0.45); }
/* Plus de fond opaque : c'est le voile dégradé ci-dessus qui porte désormais
   le contraste du titre. Sur une carte sans photo, le motif rayé sombre du
   cadre joue le même rôle, aucun fond supplémentaire n'est nécessaire. */
.cerese-carte-projet__panneau { position: relative; padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 8px; }
/* 19px au lieu de 17px : une fois la bande opaque retirée, le titre est le
   seul élément de texte visible au repos en bas de carte, il porte donc seul
   l'identification du projet. */
.cerese-carte-projet__titre { font-size: 19px; font-weight: 700; line-height: 1.28; }
/* Masquée au repos, révélée en douceur au survol (design épuré demandé par
   le client) : max-height + opacity plutôt que display, seule combinaison
   qui s'anime en CSS. margin-top négatif au repos pour annuler le gap que
   .cerese-carte-projet__panneau réserve quand même autour d'un élément à
   hauteur nulle (sinon un espace vide subsiste entre le titre et le lien).
   Révélée aussi au clavier, sans condition hover:hover : un lien n'a pas
   besoin d'une souris pour donner accès à son contenu.

   :focus-visible et non :focus (corrigé le 06/09/2026, défaut signalé par
   Louis). La carte est un <a> : un clic souris lui donne le focus, et avec
   :focus elle restait donc ouverte en permanence une fois le curseur reparti.
   Les cartes déjà cliquées se comportaient différemment des autres, ce qui
   sautait aux yeux sur les premières de la grille. :focus-visible ne s'active
   que quand le navigateur juge l'indicateur de focus utile, c'est-à-dire au
   clavier et pas au clic : l'accès clavier est conservé, le blocage disparaît.
   Aucun effet sur le tactile, qui passe par le bouton flèche (.is-ouvert). */
.cerese-carte-projet__resume {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cerese-beige);
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease, margin-top 320ms ease;
}
.cerese-carte-projet:focus-visible .cerese-carte-projet__resume {
  max-height: 160px;
  margin-top: 0;
  opacity: 1;
}
@media (hover: hover) {
  .cerese-carte-projet:hover .cerese-carte-projet__resume {
    max-height: 160px;
    margin-top: 0;
    opacity: 1;
  }
}
/* Texte du lien ("Voir le projet" / "En savoir plus", posé côté JS selon la
   page), centré, même repli masqué/révélé que le résumé juste au-dessus. */
.cerese-carte-projet__lien {
  font-size: 15px;
  font-weight: 700;
  color: var(--cerese-beige);
  text-align: center;
  padding-top: 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease;
}
.cerese-carte-projet:focus-visible .cerese-carte-projet__lien {
  max-height: 28px;
  opacity: 1;
}
@media (hover: hover) {
  .cerese-carte-projet:hover .cerese-carte-projet__lien {
    max-height: 28px;
    opacity: 1;
  }
}
/* Le titre n'a pas de couleur propre (il hérite du blanc posé sur le lien
   englobant), et la règle globale .cerese-page a:hover (voir commun.css) le
   ferait passer à l'encre foncée au survol comme n'importe quel lien du
   site — comportement non voulu ici, la charte du client demande que le
   titre reste dans sa couleur d'origine pendant tout l'effet de survol. */
.cerese-carte-projet:focus .cerese-carte-projet__titre {
  color: var(--cerese-blanc);
}
@media (hover: hover) {
  .cerese-carte-projet:hover .cerese-carte-projet__titre {
    color: var(--cerese-blanc);
  }
}

/* Mobile : le lien menant vers la page fille (détail du projet) est centré sous le texte qui le précède,
   plutôt qu'aligné à gauche comme sur les écrans plus larges. */
@media (max-width: 619px) {
  .cerese-carte-projet__lien { align-self: center; }
}

/* Flèche mobile (coin bas droit) qui révèle résumé + lien au toucher, seul
   moyen d'y accéder sur écran tactile puisque le survol souris n'existe
   pas là (voir .cerese-carte-projet__resume/__lien plus haut, révélés
   jusqu'ici uniquement par :hover/:focus). Masquée sur desktop, où le
   survol suffit déjà. Bascule gérée par délégation dans commun.js (classe
   .is-ouvert posée sur la carte). !important sur display : même conflit de
   spécificité avec le reset de hello-elementor sur les <button>, déjà
   documenté ailleurs dans ce fichier. */
.cerese-carte-projet__toggle {
  display: none !important;
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  /* !important sur width et padding, ajouté le 08/09 : le même reset de
     hello-elementor déclare `button { width: auto }` et `padding: .5rem 1rem`.
     Ces deux règles ont exactement la spécificité de cette classe (un
     sélecteur d'attribut pèse comme un sélecteur de classe) mais la feuille du
     parent est chargée après la nôtre, donc l'égalité se tranchait en sa
     faveur. Le bouton mesurait 48px de large au lieu de 36 : 16px d'icône plus
     deux fois les 16px de marge interne imposée. Il n'était donc pas carré.
     Sans neutraliser aussi le padding, forcer la largeur seule aurait écrasé
     l'icône, exactement comme la collision .cerese-partage écrasait les icônes
     de partage à 6px : 36 moins 32 de marge ne laisse que 4px au SVG. */
  width: 36px !important;
  height: 36px;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
  /* !important sur background/color, pas seulement sur :focus/:active comme
     avant : sans lui au repos aussi, le reset de hello-elementor
     ([type=button]{border:1px solid #c36; color:#c36}) regagnait la main
     dès que le bouton n'était ni survolé ni focus — d'où le rouge/rose vu
     par le client au repos et après fermeture (le focus retombe une fois
     l'utilisateur reparti). */
  background: var(--cerese-blanc) !important;
  color: var(--cerese-fonce) !important;
  border: 0 !important;
  /* Pas de border-radius : la charte du client impose un rayon nul à tous les
     boutons du site (style.css, `button { border-radius: var(--cerese-radius)
     !important }` avec --cerese-radius: 0). Un `border-radius: 50%` figurait
     ici depuis l'origine, il n'a jamais pu s'appliquer, aucun !important ne
     l'accompagnant. Retiré le 08/09 plutôt que promu en exception à la charte :
     l'arrondi haut des cartes Projet reste la seule entorse assumée. */
  cursor: pointer;
  transition: transform 250ms ease;
}
/* Pivote pour indiquer que la carte est ouverte (pointe alors vers le bas,
   « refermer ») plutôt que d'ajouter une deuxième icône. */
.cerese-carte-projet.is-ouvert .cerese-carte-projet__toggle {
  transform: rotate(180deg);
}
.cerese-carte-projet.is-ouvert .cerese-carte-projet__resume {
  max-height: 160px;
  margin-top: 0;
  opacity: 1;
}
.cerese-carte-projet.is-ouvert .cerese-carte-projet__lien {
  max-height: 28px;
  opacity: 1;
}
.cerese-carte-projet.is-ouvert .cerese-carte-projet__titre {
  color: var(--cerese-blanc);
}
@media (max-width: 619px) {
  .cerese-carte-projet__toggle { display: inline-flex !important; }
  /* Réserve la place du bouton (36px + marge) sur le bord droit du panneau :
     sans ça, un titre de 2-3 lignes (le panneau colle au bas de la carte,
     hauteur fixe) passe sous le bouton au repos, signalé par le client
     (« la flèche touche le titre »). padding uniforme sur tout le panneau
     plutôt que sur le seul titre : le résumé et le lien, une fois révélés,
     doivent eux aussi rester dégagés du bouton en bas à droite. */
  .cerese-carte-projet__panneau { padding-right: 52px; }
}

/* .cerese-pagination : déplacé dans commun.css (19/08 → 29/08) car réutilisé
   par Services et Pôle recherche en plus de Projets (pagination mobile des
   grilles). Voir commun.css pour le style. */