/* ===========================================================================
   « Nos réalisations » — mise en page de la page.

   Proposée par le client le 16/09/2026, mise en regard de la mise en page
   précédente (bandeaux alternés vert/blanc) dans une page à onglets, puis
   RETENUE le 18/09/2026 : elle est devenue la page. Le comparatif a été retiré
   ; son interface est consignée dans SiteForge, `docs/reference/
   comparateur-mises-en-page/`, pour le prochain client à faire trancher.

   Inspirations citées par le client : eco-team.fr (fond blanc, épuré),
   demathieu-bard.fr (pastilles posées sur l'image), aureca.gcc-groupe.com
   (pictogrammes surface et budget).

   Les partis pris, pour mémoire :
   - fond blanc uni partout : plus d'alternance de bandeaux verts ;
   - le vert ne sert QUE pour le titre de projet et « en savoir + » ;
   - 3 colonnes, images rognées au même format — c'est le prix de l'alignement
     en grille, et c'est ce que font les trois sites cités ;
   - le détail complet n'est plus déplié dans la page (il casserait la grille)
     mais ouvert dans une fenêtre.

   Le préfixe des classes est `icare-real-`, comme le reste du site. Il était
   `icare-v2-` tant que deux mises en page coexistaient ; une seule subsiste,
   « v2 » ne désignait plus rien.
   =========================================================================== */

:root {
  --icare-vert: #B6C92F;        /* vert de la charte — le seul de la page */
  --icare-gris: #575656;
  --icare-gris-clair: #8a8a8a;
}

/* UN SEUL VERT sur cette page : celui de la charte, #B6C92F. Décidé le
   18/09/2026, en trois fois — titres de projet et « en savoir + », puis la
   barre de filtres et le compteur, puis les intitulés de la fenêtre de détail.

   Un vert assombri (#7C8F1D) tenait ce rôle jusque-là, parce que le vert de la
   charte donne 1,9:1 sur fond blanc quand il en faut 4,5 pour du texte. Le
   client l'a su avant de trancher et a choisi la cohérence de sa charte : ne
   pas « corriger » sans lui redemander. */

.icare-realisations {
  font-family: "Work Sans", system-ui, sans-serif;
  color: var(--icare-gris);
  background: #fff;
}

/* --- Barre de filtres ----------------------------------------------------
   Sobre : du texte, pas de pastilles. L'actif est souligné de vert.
   Collante : on parcourt la grille sans remonter la barre. */
.icare-real-filtres {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #ececec;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 20px max(20px, calc((100% - 1240px) / 2));
}
.icare-realisations .icare-real-filtre {
  border: 0;
  border-radius: 0;
  background: none;
  color: #313131;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  /* Le rembourrage est porté par le bouton lui-même, pas par ses états : c'est
     lui qui donne de l'air au bloc de survol ET au soulignement de l'actif,
     sans que rien ne bouge d'un état à l'autre. Demandé le 18/09/2026.
     L'écart entre filtres est repris d'autant (`gap`) pour que la distance
     entre deux libellés ne change pas — sinon la barre déborde plus tôt et la
     coupure en deux lignes tombe au mauvais endroit. */
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
/* Le kit d'Elementor vise `button:focus` et y pose SON fond vert ET SA couleur
   de texte (blanc). Ne lui reprendre que le fond laissait du blanc sur blanc :
   en refermant la fenêtre de détail, le focus revient sur « en savoir + », qui
   disparaissait jusqu'au survol. Signalé par Miran le 18/09/2026.
   La leçon, pour la troisième fois sur ce site : reprendre TOUTES les
   propriétés que le kit pose, pas seulement celle qui se voit. */
.icare-realisations .icare-real-filtre:focus,
.icare-realisations .icare-real-plus:focus {
  background: none;
  border-radius: 0;
  outline: none;
}
.icare-realisations .icare-real-filtre:focus { color: #313131; }
.icare-realisations .icare-real-plus:focus   { color: var(--icare-vert); }
.icare-realisations .icare-real-filtre:hover,
.icare-realisations .icare-real-filtre:focus-visible {
  color: var(--icare-vert);
  background: rgba(182, 201, 47, .20);   /* vert de la charte, très pastel */
  border-radius: 5px;
}
.icare-realisations .icare-real-filtre.est-actif {
  color: var(--icare-vert);
  border-bottom-color: var(--icare-vert);
  font-weight: 600;
}
.icare-realisations .icare-real-compteur {
  margin: 0;
  font-size: .85rem;
  color: var(--icare-vert);
  white-space: nowrap;
  flex-basis: 100%;
  text-align: center;
}

/* Coupure de ligne des filtres. Inerte par défaut : sur un écran large la
   barre tient sur une ligne, et en dessous de 760 px elle défile
   latéralement. Elle ne sert qu'entre les deux. */
.icare-real-saut { display: none; }

@media (min-width: 761px) and (max-width: 1000px) {
  /* La barre déborde en dessous d'une largeur mesurée (voir plus bas) et se
     coupe alors 6 + 1, le dernier filtre seul sous les six autres. Forcée au
     milieu, elle donne 4 + 3, deux lignes d'égale longueur. La borne haute
     suit le rembourrage des boutons : elle a été remesurée le 18/09/2026. */
  .icare-real-saut { display: block; flex-basis: 100%; height: 0; margin: 0; }
  .icare-real-filtres { gap: 4px 10px; }
}

/* --- La grille ----------------------------------------------------------- */
.icare-real-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 54px 34px;
  box-sizing: border-box;
  width: 100%;
  padding: 46px max(20px, calc((100% - 1240px) / 2)) 90px;
}

/* La fiche occupe CINQ rangées de la grille et les partage avec ses voisines
   (`subgrid`) : photo, titre, pictogrammes, paragraphe et « en savoir + »
   s'alignent d'une fiche à l'autre, et chaque rangée prend la hauteur de son
   plus grand contenu — sans rien réserver d'avance.
   C'est ce qui remplace le `min-height: 2.7em` du titre (point 9 de Bastian,
   24/09/2026) : il réservait deux lignes partout pour le cas où un titre se
   couperait, et laissait donc du vide sous tous les autres.
   Les cinq rangées supposent cinq enfants dans le même ordre sur CHAQUE
   fiche — c'est `build_realisations.py` qui le garantit, même quand une
   donnée manque. Le <template> du détail, lui, n'est pas rendu : il ne
   compte pas. */
.icare-real-carte {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 0;          /* sinon les 54 px de la grille se glissent entre les
                          cinq rangées de la fiche */
  min-width: 0;
}
.icare-real-carte[hidden] { display: none; }

/* Navigateur sans `subgrid` (avant Chrome 117 / Safari 16) : on retrouve
   exactement la mise en page d'avant, réserve de deux lignes comprise. */
@supports not (grid-template-rows: subgrid) {
  .icare-real-carte { display: flex; flex-direction: column; }
  .icare-realisations .icare-real-nom { min-height: 2.7em; }
}

/* --- La photo et ses pastilles -------------------------------------------
   Format imposé (4/3, rognage centré) : en grille, des hauteurs d'image
   différentes décaleraient tous les titres d'une même rangée. C'est le prix
   de l'alignement en grille, assumé avec le client : la mise en page
   précédente, elle, ne rognait jamais une photo. */
.icare-real-photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}
.icare-real-photo picture { display: block; height: 100%; }
.icare-real-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.icare-real-carte:hover .icare-real-photo img { transform: scale(1.04); }

.icare-real-pastilles {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.icare-realisations .icare-real-pastilles li {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: rgba(22, 22, 22, .74);
  color: #fff;
  padding: 5px 10px;
  backdrop-filter: blur(2px);
}

/* --- Le texte ------------------------------------------------------------ */
.icare-realisations .icare-real-nom {
  font-size: 1.06rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--icare-vert);
  /* Resserré le 18/09/2026 (12 px → 6) : le titre et ses métadonnées forment
     un bloc, et la fiche gagne en hauteur.
     24/09/2026, point 9 de Bastian : le `min-height: 2.7em` réservait DEUX
     lignes pour aligner les pictogrammes d'une rangée — mais aucun des 57
     titres ne passe à la ligne (vérifié au navigateur de 420 à 1536 px), si
     bien qu'il ne restait que du vide : 31 px sous le titre, pour 12 px entre
     les pictogrammes et le paragraphe. Réserve retirée, et même écart de
     12 px de part et d'autre de la ligne « localisation · surface · budget ».
     L'alignement, lui, est repris par la grille elle-même (`subgrid` sur la
     fiche, plus bas) : la rangée du titre prend la hauteur du plus haut
     titre de CETTE rangée, sans réserver quoi que ce soit ailleurs. */
  margin: 20px 0 12px;
}

/* Localisation, surface, budget — pictogrammes simples, à la manière d'aureca.

   ESSAI du 18/09/2026 : les trois sur UNE SEULE LIGNE, chaque pictogramme
   serré contre la valeur qu'il annonce. C'est de la proximité : à écart égal,
   l'œil ne sait pas si une icône appartient à ce qui la suit ou à ce qui la
   précède ; en resserrant le couple (5 px) et en écartant les groupes (22 px),
   le rattachement se lit sans y penser.
   Pour rembobiner : remettre `gap: 4px 20px` + `li { gap: 7px }` et rendre à
   `.est-lieu` son `flex-basis: 100%` — la localisation repassait alors seule
   sur sa ligne, au motif qu'elle se lit en premier. */
.icare-real-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding: 0;
  margin: 0 0 12px;
  font-size: .92rem;
  color: var(--icare-gris);
}
.icare-realisations .icare-real-meta li,
.icare-real-fenetre .icare-real-meta li { display: inline-flex; align-items: center; gap: 5px; }
.icare-real-meta svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke: var(--icare-gris);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Quatre lignes, pas plus : sans cela, une description longue décale le
   « en savoir + » d'une carte par rapport à ses voisines. Le texte entier
   reste lisible dans la fenêtre de détail. */
.icare-realisations .icare-real-desc {
  /* 18 px → 8 : c'est la fiche la PLUS HAUTE d'une rangée qui fixe la hauteur
     de la rangée (les autres voient leur écart absorbé par le `margin-top:auto`
     du bouton). Réduire ici compacte donc toute la grille. */
  margin: 0 0 8px;
  text-align: left;
  line-height: 1.6;
  font-size: .94rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.icare-realisations .icare-real-plus {
  margin-top: auto;
  border-radius: 0;
  align-self: flex-end;
  justify-self: end;   /* en sous-grille, c'est lui qui pousse à droite */
  border: 0;
  background: none;
  padding: 5px 9px;
  margin-right: -9px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--icare-vert);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.icare-realisations .icare-real-plus:hover,
.icare-realisations .icare-real-plus:focus-visible {
  color: var(--icare-vert);
  background: rgba(182, 201, 47, .20);
  border-radius: 5px;
  border-bottom-color: transparent;
}

.icare-real-vide { text-align: center; padding: 60px 20px; color: var(--icare-gris-clair); }

/* --- Fenêtre de détail ---------------------------------------------------
   `[hidden]` est forcé ici : une règle d'auteur `display:flex` l'emporterait
   sur la feuille du navigateur et la fenêtre resterait ouverte en permanence,
   interceptant tous les clics. C'est exactement le défaut qui avait rendu la
   console inutilisable le 15/09/2026. */
.icare-real-fenetre[hidden] { display: none !important; }
.icare-real-fenetre {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(17, 17, 17, .82);
  padding: 4vh 3vw;
  overflow-y: auto;
}
.icare-real-boite {
  background: #fff;
  max-width: 940px;
  width: 100%;
  position: relative;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
.icare-real-boite img.icare-real-grande {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  /* Blanc, pas gris : `object-fit: contain` laisse des marges de part et
     d'autre d'une photo qui n'a pas le format du cadre, et ce fond gris se
     lisait comme un défaut de chargement. Demandé le 18/09/2026. */
  background: #fff;
}
.icare-real-fenetre .icare-real-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  /* Centrage par la grille, pas par `line-height` : le signe « × » n'est pas
     assis sur la même ligne de base que les chiffres, et un simple
     `line-height: 1` le laissait haut et à gauche dans le cercle. Le
     rembourrage est remis à zéro — le kit d'Elementor en pose un sur tous les
     boutons, ce qui décalait encore le signe. */
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
/* Correction OPTIQUE, demandée le 2026-09-17 : géométriquement le signe est
   centré, mais le « × » de Work Sans est dessiné légèrement bas et à gauche
   dans sa case. On le remonte et on le décale — sur le signe seul, jamais sur
   le bouton, dont le cercle, lui, ne doit pas bouger. 3 px allaient trop loin
   (17/09) : la moitié suffit. */
.icare-real-fenetre .icare-real-fermer span {
  display: block;
  transform: translate(0.5px, -1.5px);
}
/* Troisième victime du même piège, trouvée en vérifiant la fenêtre le
   18/09/2026 : à l'ouverture, le script donne le focus à la croix, et la règle
   `.elementor-kit-1146 button:focus` (0,2,1) battait notre base (0,2,0) — le
   cercle sombre devenait un carré VERT à coins arrondis, en permanence.
   D'où un état de survol/focus complet, à 0,3,0, qui redit tout ce que le kit
   pose. */
.icare-real-fenetre .icare-real-fermer:hover,
.icare-real-fenetre .icare-real-fermer:focus {
  background: rgba(0, 0, 0, .8);
  border-radius: 50%;
  color: #fff;
  outline: none;
}
/* Mais on ne prive pas le clavier de son repère : `:focus-visible` ne se
   déclenche pas au clic de souris. */
.icare-real-fenetre .icare-real-fermer:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.icare-real-fenetre .icare-real-boite-corps { padding: 30px 36px 38px; }
.icare-real-fenetre .icare-real-boite-corps h2 {
  /* Le thème pose un `h2 { background: #f2f2f2 }` nu : sans ce retrait, le
     titre de la fiche s'affiche sur un bandeau gris. */
  background: none;
  font-size: 1.32rem;
  text-transform: uppercase;
  color: var(--icare-vert);
  margin: 0 0 14px;
  line-height: 1.3;
}
.icare-real-fenetre .icare-real-boite-corps .icare-real-meta { font-size: .95rem; margin-bottom: 18px; }
.icare-real-fenetre .icare-real-boite-corps .icare-real-desc {
  text-align: left;
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
  font-size: 1rem;
  margin-bottom: 24px;
}
.icare-real-fenetre .icare-real-boite-corps dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 24px;
  margin: 0 0 24px;
  border-top: 1px solid #ececec;
  padding-top: 22px;
  font-size: .95rem;
}
.icare-real-fenetre .icare-real-boite-corps dt { font-weight: 600; color: var(--icare-vert); white-space: nowrap; }
.icare-real-fenetre .icare-real-boite-corps dd { margin: 0; line-height: 1.6; }
.icare-real-fenetre .icare-real-part-titre { font-weight: 600; color: var(--icare-vert); margin: 0 0 10px; font-size: .95rem; }
.icare-real-part { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.icare-real-fenetre .icare-real-part li {
  font-size: .82rem;
  border: 1px solid var(--icare-vert);
  color: var(--icare-vert);
  padding: 5px 12px;
  border-radius: 999px;
}

@media (max-width: 1100px) {
  .icare-real-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 28px; }
}

@media (max-width: 760px) {
  /* Sur une seule colonne, rien ne dit plus où finit une réalisation et où
     commence la suivante : en trois colonnes, c'est la grille qui le disait.
     D'où un filet vert entre les fiches. Demandé le 2026-09-16.
     Il est posé en `border-top`, donc il ne peut jamais pendre après la
     dernière fiche. La toute première ne doit pas en avoir : `:first-child`
     couvre le cas sans JavaScript, et `est-premiere` — reposée à chaque
     filtrage — couvre le cas où les premières fiches sont masquées par un
     filtre. */
  .icare-real-grille { grid-template-columns: 1fr; gap: 36px; padding: 32px 22px 70px; }
  .icare-real-carte {
    /* Une seule colonne : plus aucune rangée à aligner, et le padding du
       filet décalerait les rangées de la sous-grille. Retour au flux simple. */
    display: flex;
    flex-direction: column;
    grid-row: auto;
    border-top: 1px solid var(--icare-vert);
    padding-top: 36px;
  }
  .icare-real-carte:first-child,
  .icare-real-carte.est-premiere {
    border-top: 0;
    padding-top: 0;
  }
  /* Les filtres sur une seule ligne qui défile : repliés, ils feraient une
     barre collante de trois étages qui mangerait l'écran. */
  .icare-real-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 22px;
    padding: 14px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .icare-real-filtres::-webkit-scrollbar { display: none; }
  .icare-realisations .icare-real-filtre { font-size: .95rem; flex: 0 0 auto; }
  .icare-realisations .icare-real-compteur { display: none; }
  .icare-real-fenetre { padding: 2vh 10px; }
  .icare-real-fenetre .icare-real-boite-corps { padding: 22px 18px 28px; }
  .icare-real-fenetre .icare-real-boite-corps dl { grid-template-columns: 1fr; gap: 3px; }
  .icare-real-fenetre .icare-real-boite-corps dt { margin-top: 12px; }
}