/* ═══════════════════════════════════════════════════════════════
   CHANTIERS À LA UNE + GALERIE PAR CHANTIER (v19)
   Remplace l'ancien comparateur avant/après (compare.css / compare.js).
   Photos : images/chantiers/<nom>.webp (1600 px) + <nom>-800.webp (vignette)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Bloc « Chantiers à la une » (accueil, Salles de bains, Rénovation) ─── */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: minmax(300px, 1fr) minmax(300px, 1fr);
  gap: 10px;
  margin-bottom: 5rem;
  scroll-margin-top: var(--nav-h, 84px);
}
.feat-card {
  position: relative; overflow: hidden; display: block;
  background: var(--d2); color: var(--white); text-decoration: none;
  isolation: isolate;
}
.feat-card--main { grid-row: span 2; min-height: 640px; }
.feat-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter: saturate(.96);
}
.feat-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,0) 62%),
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 22%);
}
.feat-card:hover > img, .feat-card:focus-visible > img { transform: scale(1.045); filter: saturate(1.05); }
.feat-card:focus-visible { outline: 2px solid var(--c4); outline-offset: 3px; }
.feat-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.4rem, 2.6vw, 2.8rem);
}
.feat-k {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c4);
  margin-bottom: .9rem;
}
.feat-k::before { content: ''; width: 28px; height: 1px; background: var(--c3); }
.feat-t {
  display: block; font-family: var(--fs); font-weight: 300; line-height: 1.08;
  font-size: clamp(1.9rem, 2.4vw, 2.6rem); color: var(--white);
}
.feat-card--main .feat-t { font-size: clamp(2.3rem, 3.6vw, 3.9rem); }
.feat-t em { font-style: italic; color: var(--c5); }
.feat-d {
  display: block; margin-top: .9rem; max-width: 46ch;
  font-size: .98rem; line-height: 1.7; color: var(--white-60);
}
.feat-card:not(.feat-card--main) .feat-d { display: none; }
.feat-go {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.3rem;
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--c5);
}
.feat-go span { transition: transform .35s; }
.feat-card:hover .feat-go span { transform: translateX(6px); }

/* Mini-frise des étapes dans la grande carte */
.feat-steps { display: flex; gap: 8px; margin-top: 1.6rem; }
.feat-steps figure { margin: 0; flex: 0 0 auto; width: clamp(64px, 7vw, 96px); }
.feat-steps img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid rgba(250,247,244,.18);
}
.feat-steps figcaption {
  margin-top: .45rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--white-60); text-align: center;
}
.feat-steps figure:last-child img { border-color: var(--c3); }
.feat-steps figure:last-child figcaption { color: var(--c4); }

@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .feat-card--main { grid-column: 1 / -1; grid-row: auto; min-height: 520px; }
  .feat-card:not(.feat-card--main) { min-height: 340px; }
}
@media (max-width: 560px) {
  .feat { grid-template-columns: 1fr; gap: 8px; margin-bottom: 3.5rem; }
  .feat-card--main { min-height: 480px; }
  .feat-card:not(.feat-card--main) { min-height: 300px; }
  .feat-steps figure { width: 58px; }
}

/* ═══ Page galerie : sommaire des chantiers ═══ */
.gallery-page .ch-index {
  position: sticky; top: var(--nav-h, 84px); z-index: 20;
  background: rgba(0,0,0,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--copper-line);
}
.gallery-page .ch-index ol {
  list-style: none; margin: 0 auto; max-width: 1280px;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 12px 40px;
}
.gallery-page .ch-index ol::-webkit-scrollbar { display: none; }
.gallery-page .ch-index a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border: 1px solid rgba(250,247,244,.12);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--white-60); text-decoration: none; transition: all .3s;
}
.gallery-page .ch-index a b { font-weight: 400; color: var(--c4); font-family: var(--fs); font-size: 15px; letter-spacing: 0; }
.gallery-page .ch-index a:hover, .gallery-page .ch-index a.is-on { border-color: var(--c3); color: var(--white); background: rgba(184,115,51,.1); }

/* ═══ Page galerie : un chantier ═══ */
.gallery-page .ch {
  max-width: 1280px; margin: 0 auto;
  padding: 90px 40px 30px;
  scroll-margin-top: calc(var(--nav-h, 84px) + 60px);
}
.gallery-page .ch + .ch { border-top: 1px solid rgba(250,247,244,.06); }
.gallery-page .ch-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 34px;
  align-items: end; margin-bottom: 34px;
}
.gallery-page .ch-num {
  grid-row: span 3; align-self: start;
  font-family: var(--fs); font-weight: 300; line-height: .8;
  font-size: clamp(70px, 9vw, 128px); color: rgba(184,115,51,.22);
}
.gallery-page .ch-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.gallery-page .ch-meta span {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--copper-line); color: var(--c4);
}
.gallery-page .ch-title {
  font-family: var(--fs); font-weight: 300; line-height: 1.1;
  font-size: clamp(32px, 4vw, 54px); color: #f8f6f3; margin: 0;
}
.gallery-page .ch-title em {
  font-style: italic;
  background: linear-gradient(135deg, #8B5A2B, #D4956A, #F5DEC8, #D4956A, #8B5A2B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gallery-page .ch-desc {
  margin: 16px 0 0; max-width: 68ch;
  font-size: 15px; line-height: 1.8; color: rgba(250,247,244,.62);
}

/* Grille « résultat » : 1 grande photo + mosaïque */
.gallery-page .ch-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 230px; grid-auto-flow: dense; gap: 10px;
}
.gallery-page .ch-grid .gi { min-height: 0; }
.gallery-page .ch-grid .gi img { min-height: 0; height: 100%; }
.gallery-page .ch-grid .gi.w2 { grid-column: span 2; }
.gallery-page .ch-grid .gi.h2 { grid-row: span 2; }
.gallery-page .ch-grid .gi.big { grid-column: span 2; grid-row: span 2; }
.gallery-page .ch-grid .gi figcaption, .gallery-page .ch-steps .gi figcaption { display: none; }

/* Frise « étapes du chantier » */
.gallery-page .ch-steps-wrap { margin-top: 26px; }
.gallery-page .ch-steps-title {
  display: flex; align-items: center; gap: 16px; margin: 0 0 16px;
  font-size: 11px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: rgba(250,247,244,.45);
}
.gallery-page .ch-steps-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--copper-line), transparent); }
.gallery-page .ch-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  counter-reset: step;
}
.gallery-page .ch-steps li { position: relative; }
.gallery-page .ch-steps .gi { aspect-ratio: 4 / 5; }
.gallery-page .ch-steps .gi img { min-height: 0; height: 100%; filter: saturate(.85); }
.gallery-page .ch-steps .gi:hover img { filter: none; }
.gallery-page .ch-step-lb {
  display: flex; align-items: baseline; gap: 10px; margin-top: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,247,244,.55);
}
.gallery-page .ch-step-lb::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--fs); font-size: 20px; letter-spacing: 0; color: var(--c3);
}
.gallery-page .ch-steps li:last-child .ch-step-lb { color: var(--c4); }

@media (max-width: 900px) {
  .gallery-page .ch { padding: 64px 20px 20px; }
  .gallery-page .ch-index ol { padding: 10px 20px; }
  .gallery-page .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .gallery-page .ch-head { grid-template-columns: 1fr; }
  .gallery-page .ch-num { grid-row: auto; font-size: 64px; margin-bottom: 6px; }
  .gallery-page .ch-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .gallery-page .ch-grid { grid-auto-rows: 170px; gap: 6px; }
  .gallery-page .ch-grid .gi.w2:not(.big) { grid-column: span 2; }
}

/* Verrouillage des vignettes d'étapes (évite l'héritage des styles d'images de section) */
.feat .feat-steps { position: static; }
.feat .feat-steps figure { position: relative; width: clamp(64px, 7vw, 96px); height: auto; flex: 0 0 auto; }
.feat .feat-steps img {
  position: static !important; inset: auto; transform: none !important;
  width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; min-height: 0;
  object-fit: cover; filter: none;
}
@media (max-width: 560px) { .feat .feat-steps figure { width: 58px; } }

/* Lisibilité du texte sur la grande carte (photo claire) */
.feat-card--main::after {
  background:
    linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.74) 42%, rgba(0,0,0,.18) 76%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,.45), transparent 60%);
}
.feat-t, .feat-d, .feat-k { text-shadow: 0 1px 18px rgba(0,0,0,.55); }
.feat-d { color: rgba(250,247,244,.78); }