/* ===========================================================================
   Page « Nos réalisations ». Un projet = un bandeau, alternance vert / blanc,
   conformément au document V4 du client (§119).
   =========================================================================== */
:root { --icare-vert: #B6C92F; --icare-vert-fonce: #5C6618; --icare-gris: #575656; }

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

.icare-real-entete { max-width: 880px; margin: 0 auto; padding: 56px 20px 24px; text-align: center; }
.icare-real-entete h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--icare-gris); margin: 0 0 14px; }
.icare-real-intro { line-height: 1.65; margin: 0; }

/* --- Barre de filtres, collée en haut au défilement ----------------------
   Elle reste accessible pendant qu'on parcourt les 57 réalisations. Fond blanc
   OPAQUE et z-index au-dessus des bandeaux : ceux-ci passent dessous au lieu
   de transparaître.
   Vérifié avant de poser `sticky` : l'en-tête du site n'est pas collant (donc
   top:0 est libre) et aucun ancêtre n'a de débordement caché, ce qui aurait
   silencieusement désactivé l'effet. */
.icare-filtres {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .07);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  /* fond sur toute la largeur, boutons contenus et centrés */
  padding: 14px max(20px, calc((100% - 1100px) / 2));
  margin: 0 0 0;
}
.icare-filtre {
  border: 1px solid #d9d9d9; background: #fff; color: var(--icare-gris);
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .94rem; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.icare-filtre:hover { border-color: var(--icare-vert); color: var(--icare-vert-fonce); }
.icare-filtre.est-actif { background: var(--icare-vert); border-color: var(--icare-vert); color: #fff; font-weight: 600; }
.icare-compteur {
  margin: 0 0 0 6px; font-size: .88rem; color: #8a8a8a; white-space: nowrap;
}

/* --- Bandeaux ------------------------------------------------------------
   Le bandeau garde toute la largeur (c'est la demande du client), mais son
   CONTENU est contenu et largement espacé : c'est ce qui donne la respiration
   sans casser l'alternance vert / blanc.
   Sur mobile, la photo n'est plus bord à bord : elle est ramenée à l'intérieur
   du bandeau, avec le texte, pour qu'on voie d'un coup d'œil ce qui va
   ensemble. Sans ça, une photo pleine largeur semble appartenir au bloc
   précédent autant qu'au suivant. */
.icare-real-liste { display: flex; flex-direction: column; }

/* Fond sur toute la largeur, contenu contenu et centré — sans `vw`.
   La première version étendait le fond avec margin-left:-50vw : `vw` inclut la
   barre de défilement, ce qui fait déborder la page horizontalement. Ici le
   fond est simplement celui du bandeau, et c'est le rembourrage latéral qui
   centre le contenu et lui donne sa largeur maximale. */
.icare-real {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0 60px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 72px max(26px, calc((100% - 1240px) / 2));
}
.icare-real[hidden] { display: none; }
.icare-real > * { min-width: 0; }
/* L'alternance suit l'ordre D'AFFICHAGE, pas l'ordre du HTML : la classe est
   posée à la génération et recalculée à chaque filtrage. Sans ça, filtrer
   désaccordait le fond, le côté de la photo et la couleur des pastilles. */
.icare-real { background: #fff; }
.icare-real.est-pair { background: #f4f7e4; }

.icare-real.est-pair .icare-real-media { order: 2; }

.icare-real-media { align-self: stretch; }
/* Pas de format imposé : chaque photo garde ses proportions et s'affiche
   ENTIÈRE. Un aspect-ratio fixe obligeait à rogner (object-fit: cover), ce qui
   coupait les bâtiments. Les bandeaux n'ont donc pas tous la même hauteur —
   c'est le prix d'une image non rognée, et c'est plus naturel. */
.icare-real-zoom {
  display: block; position: relative; overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .10);
}
.icare-real-zoom picture { display: block; }
.icare-real-zoom img {
  display: block; width: 100%; height: auto;
}
.icare-real-zoom img { transition: transform .4s ease; }
.icare-real-zoom:hover img { transform: scale(1.04); }
.icare-real-loupe {
  position: absolute; right: 14px; bottom: 14px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.05rem;
}

.icare-real-corps { padding: 0; }
.icare-real-nom { font-size: 1.42rem; line-height: 1.3; margin: 0 0 12px; color: #313131; }
.icare-real-chiffres { margin: 0 0 18px; font-size: .95rem; color: var(--icare-vert-fonce); font-weight: 600; }
.icare-real-pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; }
.icare-real-pastilles li {
  font-size: .78rem; letter-spacing: .03em; text-transform: uppercase;
  background: var(--icare-vert); color: #fff; padding: 5px 12px; border-radius: 3px; font-weight: 600;
}
.icare-real.est-pair .icare-real-pastilles li { background: var(--icare-vert-fonce); }
.icare-real-desc { margin: 0 0 24px; line-height: 1.7; }

.icare-real-plus {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--icare-vert); color: var(--icare-vert-fonce);
  padding: 10px 20px; border-radius: 3px; cursor: pointer; font: inherit;
  font-size: .92rem; font-weight: 600;
}
.icare-real-plus:hover { background: var(--icare-vert); color: #fff; }
.icare-real-signe { font-size: 1.15rem; line-height: 1; transition: transform .2s ease; }
.icare-real-plus[aria-expanded="true"] .icare-real-signe { transform: rotate(45deg); }

.icare-real-detail { margin-top: 26px; border-top: 1px solid rgba(0, 0, 0, .12); padding-top: 24px; }
.icare-real-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0 0 22px; }
.icare-real-detail dt { font-weight: 600; color: var(--icare-vert-fonce); white-space: nowrap; }
.icare-real-detail dd { margin: 0; line-height: 1.6; }
.icare-real-part-titre { font-weight: 600; color: var(--icare-vert-fonce); margin: 0 0 10px; }
.icare-real-part { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.icare-real-part li {
  font-size: .82rem; background: #fff; border: 1px solid var(--icare-vert);
  color: var(--icare-vert-fonce); padding: 5px 12px; border-radius: 999px;
}

.icare-real-vide { text-align: center; padding: 60px 20px; color: #8a8a8a; }

/* --- Pop-up d'image --- */
.icare-popup {
  position: fixed; inset: 0; z-index: 100000; display: none;
  background: rgba(17,17,17,.92); padding: 3vh 3vw;
  align-items: center; justify-content: center;
}
.icare-popup[open], .icare-popup.est-ouvert { display: flex; }
.icare-popup img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 3px; }
.icare-popup-legende { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; color: #fff; font-size: .95rem; padding: 0 20px; }
.icare-popup-fermer {
  position: absolute; top: 16px; right: 20px; width: 44px; height: 44px;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem;
  border-radius: 50%; cursor: pointer; line-height: 1;
}
.icare-popup-fermer:hover { background: rgba(255,255,255,.28); }

@media (max-width: 900px) {
  /* Une seule colonne : la photo passe AU-DESSUS de son texte, jamais
     l'inverse, et elle garde ses marges pour rester visiblement à l'intérieur
     du bandeau. C'est ce qui permet de savoir quel texte va avec quelle photo. */
  .icare-real {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 44px 22px 52px;
  }
  .icare-real.est-pair .icare-real-media { order: 0; }
  .icare-real-media { margin-bottom: 26px; }
  .icare-real-nom { font-size: 1.22rem; }
  .icare-real-detail dl { grid-template-columns: 1fr; gap: 3px; }
  .icare-real-detail dt { margin-top: 12px; }
  /* Sur mobile, laisser les filtres passer à la ligne ferait une barre collante
     de trois étages qui mangerait l'écran. On les fait défiler latéralement. */
  .icare-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 8px;
    padding: 11px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .icare-filtres::-webkit-scrollbar { display: none; }
  .icare-filtre { padding: 8px 15px; font-size: .87rem; flex: 0 0 auto; }
  .icare-compteur { display: none; }
}