/* ============================================================
   EUSKADI NEO RETRO — PAGES CSS
   ============================================================ */

/* ── HOME HERO SPECIFICS ─────────────────────────────────────── */
.hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-label);font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  background:rgba(217,58,42,.15);border:1px solid rgba(217,58,42,.4);
  color:var(--yellow);padding:.4rem 1rem;margin-bottom:2rem;
}

/* ── SERVICE CARDS ───────────────────────────────────────────── */
/* On dark bg */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--red);
}
@media(max-width:768px){.services-grid{grid-template-columns:1fr}}
.scard{
  position:relative;overflow:hidden;
  border-right:1px solid rgba(244,242,238,.08);
  border-bottom:1px solid rgba(244,242,238,.08);
}
.scard:last-child{border-right:none}
@media(max-width:768px){.scard{border-right:none;border-bottom:1px solid rgba(244,242,238,.08)}}
.scard img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.4) contrast(1.15) saturate(.7);
  transform:scale(1.04);
  transition:transform .9s var(--ease-out),filter .9s;
}
.scard:hover img{transform:scale(1.1);filter:brightness(.3) contrast(1.2) saturate(.6)}
.scard-body{
  position:relative;z-index:1;
  padding:3rem 2.5rem;min-height:55vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top, rgba(12,12,12,.98) 25%, transparent 75%);
}
.scard:hover .scard-body{background:linear-gradient(to top, rgba(12,12,12,1) 35%, rgba(217,58,42,.08) 100%)}
.scard-num{
  font-family:var(--font-display);font-size:8rem;font-weight:900;
  color:rgba(244,242,238,.05);position:absolute;top:1rem;right:1.5rem;
  line-height:1;transition:color .5s;
}
.scard:hover .scard-num{color:rgba(217,58,42,.12)}
.scard-tag{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:.5rem;
}
.scard h3{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2rem,4vw,3.5rem);line-height:.9;
  color:var(--white);margin-bottom:.75rem;
}
.scard p{
  font-size:.88rem;color:rgba(244,242,238,.6);font-weight:300;
  max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .5s;opacity:0;
}
.scard:hover p{max-height:5rem;opacity:1}
.scard-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.25rem;
  font-family:var(--font-label);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--yellow);
  opacity:0;transform:translateY(.5rem);transition:opacity .4s,transform .4s;
}
.scard:hover .scard-link{opacity:1;transform:translateY(0)}
.scard-link svg{width:1em;height:1em}

/* ── WHY US — alternates to white bg ────────────────────────── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:80vh}
@media(max-width:768px){.why-grid{grid-template-columns:1fr}}
.why-visual{
  position:relative;overflow:hidden;
}
.why-visual img{
  width:100%;height:100%;min-height:60vw;object-fit:cover;
  filter:contrast(1.05) saturate(.85);
  transition:transform .8s var(--ease-out);
}
.why-visual:hover img{transform:scale(1.04)}
/* Red tag overlay on image */
.why-tag{
  position:absolute;bottom:2.5rem;left:-1px;
  background:var(--red);color:var(--white);
  font-family:var(--font-display);font-weight:900;font-size:1rem;letter-spacing:.1em;
  text-transform:uppercase;
  padding:.6rem 1.5rem;
}
.why-content{
  padding:5rem clamp(2rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--white);color:var(--black);
  position:relative;
}
/* Ghost number decoration */
.why-content::before{
  content:'10';
  position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-display);font-weight:900;font-size:18rem;
  color:rgba(12,12,12,.04);line-height:1;pointer-events:none;
}
.why-list{display:flex;flex-direction:column;gap:0;margin-top:2.5rem}
.why-item{
  display:flex;gap:1.5rem;align-items:flex-start;
  padding:1.5rem 0;
  border-bottom:1px solid var(--white-3);
  transition:background .3s;
}
.why-item:first-child{border-top:1px solid var(--white-3)}
.why-item:hover{padding-left:.5rem}
.why-num{
  font-family:var(--font-display);font-weight:900;font-size:2rem;
  color:rgba(12,12,12,.15);line-height:1;flex-shrink:0;min-width:2.5rem;
}
.why-item h4{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  text-transform:uppercase;color:var(--black);margin-bottom:.3rem;
}
.why-item p{font-size:.88rem;color:var(--muted-lt)}

/* ── COUNTERS — dark bg ──────────────────────────────────────── */
.counters-strip{background:var(--black-2);padding:5rem 0;border-top:1px solid rgba(217,58,42,.2)}
.counters-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  divide: var(--black-3);
}
@media(max-width:600px){.counters-grid{grid-template-columns:repeat(2,1fr)}}
.counter-block{
  text-align:center;padding:2rem;
  border-right:1px solid rgba(244,242,238,.06);
}
.counter-block:last-child{border-right:none}
.counter-val{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(4rem,7vw,6rem);color:var(--white);line-height:1;display:block;
}
.counter-unit{font-family:var(--font-display);font-weight:900;font-size:2rem;color:var(--red)}
.counter-label{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-dk);margin-top:.5rem;display:block;
}

/* ── GALLERY GRID — white bg ─────────────────────────────────── */
.gallery-grid{
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:18vw;gap:3px;
}
@media(max-width:768px){.gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:45vw}}
.g-item{
  position:relative;overflow:hidden;cursor:none;
  opacity:0;transform:translateY(1.5rem);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--d,0)*70ms);
}
.g-item.in-view{opacity:1;transform:none}
.g-item:nth-child(1){grid-column:span 8;grid-row:span 2}
.g-item:nth-child(2){grid-column:span 4}
.g-item:nth-child(3){grid-column:span 4}
.g-item:nth-child(4){grid-column:span 5}
.g-item:nth-child(5){grid-column:span 4}
.g-item:nth-child(6){grid-column:span 3;grid-row:span 2}
.g-item:nth-child(7){grid-column:span 3}
.g-item:nth-child(8){grid-column:span 6}
@media(max-width:768px){.g-item{grid-column:span 1!important;grid-row:span 1!important}}
.g-item img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.05) saturate(.8);
  transform:scale(1.05);
  transition:transform .9s var(--ease-out),filter .9s;
}
.g-item:hover img{transform:scale(1.12);filter:contrast(1.1) saturate(1)}
.g-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(12,12,12,.92) 0%, transparent 55%);
  opacity:0;transition:opacity .35s;display:flex;align-items:flex-end;padding:1.25rem;
}
.g-item:hover .g-overlay{opacity:1}
.g-caption{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);
}

/* ── FAQ ─────────────────────────────────────────────────────── */
/* Alternates: sidebar dark, list light */
.faq-layout{display:grid;grid-template-columns:1fr 2fr;min-height:70vh}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr;display:block}}
.faq-sidebar{
  background:var(--black);padding:5rem clamp(1.5rem,4vw,4rem);
  position:sticky;top:0;align-self:start;
  border-right:3px solid var(--red);
}
.faq-cats{display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem}
.faq-cat{
  font-family:var(--font-label);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-dk);
  padding:.6rem 0;cursor:none;transition:color .3s;
  border-bottom:1px solid rgba(244,242,238,.06);
}
.faq-cat:hover,.faq-cat.active{color:var(--yellow)}
.faq-list{background:var(--white);padding:5rem clamp(1.5rem,4vw,4rem);display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--white-3)}
.faq-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 0;gap:1rem;cursor:none;
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--black);text-align:left;
  transition:color .25s;
}
.faq-btn:hover,.faq-btn[aria-expanded="true"]{color:var(--red)}
.faq-icon{
  width:28px;height:28px;background:var(--black);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-family:monospace;flex-shrink:0;
  transition:transform .35s var(--ease-out),background .25s;
}
.faq-btn[aria-expanded="true"] .faq-icon{transform:rotate(45deg);background:var(--red)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.faq-body-inner{padding:.25rem 0 1.5rem;color:var(--muted-lt);font-size:.95rem}
.faq-body-inner strong{color:var(--black)}

/* ── CONTACT ─────────────────────────────────────────────────── */
/* info dark, form light */
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;min-height:80vh}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}}
.contact-info{
  background:var(--black);padding:5rem clamp(1.5rem,4vw,4rem);
  border-right:3px solid var(--red);
}
.contact-items{display:flex;flex-direction:column;gap:1.25rem;margin:2rem 0}
.ci{display:flex;gap:1.25rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid rgba(244,242,238,.08)}
.ci:last-child{border-bottom:none}
.ci-icon{
  width:2.5rem;height:2.5rem;flex-shrink:0;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;color:var(--white);
}
.ci-icon svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2}
.ci-label{
  display:block;font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:.2rem;
}
.ci-val{font-size:.92rem;color:rgba(244,242,238,.75)}
.ci-val a:hover{color:var(--yellow)}
.horaires-card{
  background:var(--black-2);border-left:3px solid var(--yellow);
  padding:1.5rem;margin-top:1.5rem;
}
.horaires-card h3{
  font-family:var(--font-display);font-weight:900;font-size:1.2rem;
  text-transform:uppercase;color:var(--yellow);margin-bottom:1rem;
}
.horaire-row{
  display:flex;justify-content:space-between;
  padding:.5rem 0;border-bottom:1px solid rgba(244,242,238,.06);font-size:.88rem;
}
.horaire-row:last-child{border-bottom:none}
.horaire-day{color:var(--muted-dk)}
.horaire-time{font-family:var(--font-label);font-size:.68rem;letter-spacing:.1em;color:var(--white)}
.contact-form-wrap{
  background:var(--white);padding:5rem clamp(1.5rem,4vw,4rem);
}
.contact-form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-lt);
}
.form-group input,.form-group select,.form-group textarea{
  background:var(--white-2);border:2px solid var(--white-3);
  color:var(--black);font-family:var(--font-body);font-size:.95rem;
  padding:.7rem 1rem;transition:border-color .25s;outline:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--red)}
.form-group textarea{resize:vertical;min-height:120px}
.form-check{display:flex;gap:.75rem;align-items:flex-start}
.form-check input[type="checkbox"]{width:16px;height:16px;flex-shrink:0;margin-top:.2rem;accent-color:var(--red);cursor:none}
.form-check label{font-size:.82rem;color:var(--muted-lt)}

/* ── PRESTATIONS — white bg ──────────────────────────────────── */
.prestations{display:flex;flex-direction:column;gap:0;margin:1.5rem 0}
.prestation{
  display:flex;gap:1.25rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--white-3);font-size:.92rem;color:var(--muted-lt);
  transition:color .25s,padding-left .25s;
}
.prestation:hover{color:var(--black);padding-left:.5rem}
.prestation:last-child{border-bottom:none}
.pre-dot{width:4px;height:4px;background:var(--red);flex-shrink:0;margin-top:.1rem}

.tarifs-mini{margin:1rem 0 2rem;border:2px solid var(--white-3)}
.tarif-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--white-3);
}
.tarif-row:last-child{border-bottom:none}
.tarif-row:hover{background:var(--white-2)}
.tarif-label{font-size:.88rem;color:var(--muted-lt)}
.tarif-val{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--red)}

/* ── MODELES GRID — dark bg ──────────────────────────────────── */
.modeles-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(244,242,238,.08)}
@media(max-width:700px){.modeles-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.modeles-grid{grid-template-columns:1fr}}
@media(max-width:500px){.modeles-grid{grid-template-columns:1fr}}
.modele-card{
  padding:2.5rem 2rem;text-align:left;
  border-right:1px solid rgba(244,242,238,.08);
  border-bottom:1px solid rgba(244,242,238,.08);
  position:relative;overflow:hidden;
  transition:background .3s;
}
.modele-card:hover{background:var(--black-2)}
.modele-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.modele-card:hover::after{transform:scaleX(1)}
.modele-num{
  font-family:var(--font-display);font-weight:900;font-size:3rem;
  color:rgba(244,242,238,.08);line-height:1;margin-bottom:.5rem;
}
.modele-card h3{
  font-family:var(--font-display);font-weight:900;font-size:1.4rem;
  text-transform:uppercase;color:var(--white);margin-bottom:.4rem;
}
.modele-card p{font-size:.82rem;color:var(--muted-dk)}

/* ── STORY GRID — atelier — white bg ────────────────────────── */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:80vh}
@media(max-width:768px){.story-grid{grid-template-columns:1fr}}
.story-visual{position:relative;overflow:hidden}
.story-img-main{width:100%;height:100%;min-height:55vh;object-fit:cover;filter:contrast(1.05) saturate(.85)}
.story-img-float{
  position:absolute;bottom:-2rem;right:-2rem;
  width:52%;aspect-ratio:1;object-fit:cover;
  border:4px solid var(--white);outline:2px solid var(--red);
  filter:contrast(1.05);
}
.story-content{
  background:var(--white);color:var(--black);
  padding:5rem clamp(2rem,5vw,5rem);
  display:flex;flex-direction:column;justify-content:center;
}
.engagements{display:flex;flex-direction:column;gap:0;margin:2rem 0}
.engagement{
  display:flex;gap:1.5rem;align-items:flex-start;
  padding:1.25rem 0;border-bottom:1px solid var(--white-3);
  transition:padding-left .25s;
}
.engagement:hover{padding-left:.5rem}
.engagement:first-child{border-top:1px solid var(--white-3)}
.eng-num{
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;
  color:var(--red);line-height:1.2;min-width:2rem;
}
.engagement h4{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  text-transform:uppercase;color:var(--black);margin-bottom:.25rem;
}
.engagement p{font-size:.85rem;color:var(--muted-lt)}

/* ── EXPERTISE CARD ──────────────────────────────────────────── */
.expertise-card{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:3px solid var(--yellow);
  background:var(--black-2);
}
@media(max-width:768px){.expertise-card{grid-template-columns:1fr}}
.expertise-card > div:first-child{padding:3rem;border-right:1px solid rgba(244,242,238,.08)}
.expertise-card > div:last-child{overflow:hidden}
.expertise-card img{width:100%;height:100%;min-height:350px;object-fit:cover;filter:contrast(1.05) saturate(.8)}

/* ── MEC GRID ────────────────────────────────────────────────── */
.mec-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:5rem;align-items:start}
@media(max-width:900px){.mec-grid{grid-template-columns:1fr;gap:3rem}}
.mec-visuals{display:grid;grid-template-columns:1fr 1fr;gap:3px;position:sticky;top:5rem}
.mec-img:first-child{grid-column:span 2}
.mec-img{overflow:hidden}
.mec-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:contrast(1.05) saturate(.8);
  transition:transform .8s var(--ease-out),filter .8s;
}
.mec-img:hover img{transform:scale(1.06);filter:contrast(1.1) saturate(.95)}

/* ── LIGHTBOX avec navigation ────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);
  background:rgba(12,12,12,.97);
  display:grid;
  grid-template-columns:64px 1fr 64px;
  grid-template-rows:1fr auto;
  align-items:center;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.lightbox.open{opacity:1;pointer-events:all}

/* Zone image */
.lightbox-media{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:center;
  padding:4rem 0 1rem;
}
.lightbox-img{
  max-width:100%;max-height:80vh;object-fit:contain;
  outline:2px solid var(--red);
  transition:opacity .16s ease,transform .16s ease;
}

/* Flèches prev / next */
.lightbox-prev,
.lightbox-next{
  grid-row:1;
  width:44px;height:44px;
  background:rgba(217,58,42,.15);
  border:1px solid rgba(217,58,42,.4);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:none;
  transition:background .25s,transform .2s;
  justify-self:center;align-self:center;
}
.lightbox-prev{grid-column:1}
.lightbox-next{grid-column:3}
.lightbox-prev:hover,.lightbox-next:hover{background:var(--red);border-color:var(--red)}
.lightbox-prev:hover{transform:translateX(-3px)}
.lightbox-next:hover{transform:translateX(3px)}

/* Fermer */
.lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;
  background:var(--red);color:var(--white);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;cursor:none;
  font-family:var(--font-display);font-weight:900;
  transition:background .25s;
}
.lightbox-close:hover{background:var(--red-dk)}

/* Footer : légende + compteur */
.lightbox-footer{
  grid-column:1/-1;grid-row:2;
  display:flex;justify-content:center;align-items:center;gap:2rem;
  padding:1rem 2rem 2rem;
}
.lightbox-caption{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);
}
.lightbox-counter{
  font-family:var(--font-label);font-size:.62rem;letter-spacing:.15em;
  color:var(--muted-dk);
}

/* ── PINNED SECTION ──────────────────────────────────────────── */
.pinned-section{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
@media(max-width:768px){.pinned-section{grid-template-columns:1fr}}
.pinned-wrap{position:sticky;top:0;height:100svh;overflow:hidden;border-right:3px solid var(--red)}
.pin-img{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out)}
.pin-img.active{opacity:1}
.pin-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.8)}
.pin-steps{padding:6rem clamp(2rem,5vw,4rem);background:var(--white);color:var(--black)}
.pin-step{
  padding:2rem 0;border-bottom:1px solid var(--white-3);
  opacity:.35;transition:opacity .5s;
}
.pin-step.active{opacity:1}
.pin-step-num{
  font-family:var(--font-display);font-weight:900;font-size:3rem;
  color:rgba(217,58,42,.25);line-height:1;margin-bottom:.25rem;
}
.pin-step.active .pin-step-num{color:var(--red)}
.pin-step h3{
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;
  text-transform:uppercase;color:var(--black);margin-bottom:.4rem;
}
.pin-step p{font-size:.88rem;color:var(--muted-lt)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE PAGES — tous composants
   ══════════════════════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Service cards : layout mobile adapté ──────────────────── */
  .services-grid{ grid-template-columns:1fr }
  .scard{
    aspect-ratio:unset;          /* supprime le ratio fixe */
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .scard img{
    position:relative;           /* sort du mode absolu */
    inset:unset;
    width:100%; height:55vw;     /* hauteur fixe pour l'image */
    object-fit:cover;
    flex-shrink:0;
  }
  .scard-body{
    position:relative;
    min-height:0;                /* annule le min-height 55vh */
    background:var(--black-2);
    padding:1.5rem;
    justify-content:flex-start;
  }
  .scard-num{ position:static; font-size:3rem; margin-bottom:.25rem }
  .scard p{ max-height:none!important; opacity:1!important; color:rgba(244,242,238,.7) }
  .scard-link{ opacity:1!important; transform:none!important; margin-top:.75rem }

  /* ── Why grid ─────────────────────────────────────────────── */
  .why-grid{ grid-template-columns:1fr }
  .why-visual img{ min-height:50vw; aspect-ratio:16/9 }
  .why-content{ padding:3rem clamp(1rem,5vw,2rem) }
  .why-item{ padding:.75rem 0 }

  /* ── Counters ─────────────────────────────────────────────── */
  .counters-grid{ grid-template-columns:1fr 1fr }
  .counter-block{ padding:1.25rem .75rem }
  .counter-val{ font-size:clamp(2.5rem,10vw,3.5rem) }

  /* ── Gallery grid ─────────────────────────────────────────── */
  .gallery-grid{
    grid-template-columns:1fr!important;
    grid-auto-rows:60vw!important;
  }
  .g-item{ grid-column:span 1!important; grid-row:span 1!important }
  /* Overlay toujours visible sur touch */
  .g-overlay{ opacity:1!important }

  /* ── Modeles grid ─────────────────────────────────────────── */
  .modeles-grid{ grid-template-columns:1fr 1fr }
  .modele-card{ padding:1.5rem 1rem }
  .modele-num{ font-size:2rem }

  /* ── Story grid ───────────────────────────────────────────── */
  .story-grid{ grid-template-columns:1fr }
  .story-visual{ min-height:60vw }
  .story-img-float{ display:none } /* masqué : déborde sur mobile */
  .story-content{ padding:2.5rem clamp(1rem,5vw,2rem) }
  .engagements{ margin-top:1.5rem }

  /* ── Pinned section ───────────────────────────────────────── */
  .pinned-section{ grid-template-columns:1fr; display:block }
  .pinned-wrap{
    position:relative; height:55vw;
    border-right:none; border-bottom:3px solid var(--red);
  }
  .pin-steps{ padding:2.5rem clamp(1rem,5vw,2rem) }
  .pin-step{ padding:1.25rem 0 }

  /* ── FAQ layout ───────────────────────────────────────────── */
  .faq-layout{ grid-template-columns:1fr; display:block }
  .faq-sidebar{
    position:relative; top:0;
    padding:2.5rem clamp(1rem,5vw,2rem) 1.5rem;
  }
  .faq-list{ padding:0 clamp(1rem,5vw,2rem) 2.5rem }
  .faq-btn{ font-size:.95rem; padding:1.25rem 0 }
  .faq-cats{ display:none } /* catégories masquées sur mobile */

  /* ── Contact layout ───────────────────────────────────────── */
  .contact-layout{ grid-template-columns:1fr; display:block }
  .contact-info{
    border-right:none; border-bottom:3px solid var(--red);
    padding:2.5rem clamp(1rem,5vw,2rem);
  }
  .contact-form-wrap{ padding:2.5rem clamp(1rem,5vw,2rem) }
  .form-row{ grid-template-columns:1fr }

  /* ── Expertise card ───────────────────────────────────────── */
  .expertise-card{ grid-template-columns:1fr; display:block }
  .expertise-card > div:first-child{ border-right:none; border-bottom:1px solid rgba(244,242,238,.1) }
  .expertise-card img{ min-height:50vw }

  /* ── Mec grid ─────────────────────────────────────────────── */
  .mec-grid{ grid-template-columns:1fr; gap:2rem }
  .mec-visuals{ position:relative; top:0; display:grid; grid-template-columns:1fr 1fr; gap:3px }

  /* ── Lightbox ─────────────────────────────────────────────── */
  .lightbox{ grid-template-columns:44px 1fr 44px }
  .lightbox-prev,.lightbox-next{ width:36px; height:36px }
  .lightbox-img{ max-height:65vh }
  .lightbox-footer{ flex-direction:column; gap:.5rem; padding:.75rem 1rem 1.5rem }

  /* ── CTA band ─────────────────────────────────────────────── */
  .cta-band{ padding:5rem 0 }
  .cta-band-content h2{ font-size:clamp(1.8rem,8vw,3rem) }

  /* ── Mentions légales grid ────────────────────────────────── */
  .ml-grid{ grid-template-columns:1fr!important }
}

/* ── Très petit mobile ≤400px ──────────────────────────────── */
@media(max-width:400px){
  .modeles-grid{ grid-template-columns:1fr }
  .counters-grid{ grid-template-columns:1fr 1fr }
  .hero-actions .btn{ font-size:.6rem; padding:.65rem 1.25rem }
  .nav-cta{ font-size:.6rem; padding:.45rem 1rem }
}