/* ==========================================================================
   YOLOSTONE — construction · rénovation · installation
   Palette derivee du logo : rouge #C1121E + anthracite #222223,
   plus un beton clair chaud comme couleur de contraste.
   ========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --red:#C1121E;
  --red-dark:#95101A;
  --ink:#1A1A1C;
  --ink-soft:#3A3A3E;
  --grey:#6B6B72;
  --sand:#EAE5DC;
  --sand-deep:#DCD5C8;
  --paper:#FAF8F4;
  --line:rgba(26,26,28,.13);
  --line-soft:rgba(26,26,28,.07);
  --display:'Archivo',"Segoe UI",system-ui,sans-serif;
  --body:'Inter',"Segoe UI",system-ui,sans-serif;
  --shadow:0 24px 60px -34px rgba(20,20,22,.55);
  --wrap:1240px;
}

*{box-sizing:border-box}
/* overflow-x aussi sur <html> : le tiroir de navigation ferme est un element
   fixe translate hors ecran, il etend la boite de defilement. Le poser sur
   <body> seul suffit sur Chrome mais pas de maniere fiable sur iOS Safari. */
html{scroll-behavior:smooth;overflow-x:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;font-family:var(--body);font-size:17px;line-height:1.7;
  color:var(--ink-soft);background:var(--paper);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--ink);line-height:1.08;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.4vw,4.05rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,5vw,56px)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:4000;background:var(--red);color:#fff;
  padding:.8rem 1.2rem;font-weight:600;text-decoration:none}
.skip-link:focus{left:12px;top:12px}

:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* L'en-tete est collante : sans cette marge, une ancre (#main via le lien
   d'evitement, #formulaire depuis le menu) amene la cible SOUS l'en-tete. */
#main,[id]:target,.sec[id],#formulaire{scroll-margin-top:96px}
@media(max-width:420px){#main,[id]:target,.sec[id],#formulaire{scroll-margin-top:82px}}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:700;font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;
  padding:1.02rem 1.7rem;min-height:52px;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn svg{width:17px;height:17px;flex:none}
.btn--red{background:var(--red);color:#fff;border-color:var(--red)}
.btn--red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(26,26,28,.28)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- En-tete ---------- */
/* Pas de backdrop-filter ici : il ferait de .hdr le bloc conteneur des enfants
   en position:fixed, et le tiroir de navigation (.nav) se calerait alors sur la
   hauteur de l'en-tete (128px) au lieu du viewport — ses liens du haut
   devenaient inatteignables. A 94% d'opacite le flou ne se voyait de toute
   facon quasiment pas. */
.hdr{position:sticky;top:0;z-index:1000;background:rgba(250,248,244,.94);
  border-bottom:1px solid var(--line-soft);transition:box-shadow .3s}
.hdr.is-stuck{box-shadow:0 10px 30px -22px rgba(20,20,22,.6)}
.hdr__in{display:flex;align-items:center;gap:1rem;min-height:78px}
/* Padding vertical pour atteindre 44px de zone tactile : le logo seul ne fait
   que 31px de haut sur petit ecran. */
.brand{display:flex;align-items:center;margin-right:auto;text-decoration:none;line-height:0;padding:7px 0}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-family:var(--display);font-weight:600;font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:.4rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
/* Le bouton du menu est aussi un <a> : sans cette reprise, `.nav a` gagne en
   specificite et repeint le texte en anthracite sur le fond rouge. */
.nav .btn{padding:.85rem 1.3rem;min-height:46px;letter-spacing:.1em}
.nav .btn::after{display:none}
.nav .btn--red{color:#fff}
.nav .btn--red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.hdr__tel{display:none;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;
  font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.hdr__tel svg{width:19px;height:19px;color:var(--red)}
.burger{display:none;width:48px;height:48px;padding:12px;background:none;border:0;cursor:pointer;color:var(--ink)}
.burger span,.burger span::before,.burger span::after{display:block;height:2px;background:currentColor;transition:.28s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;width:100%}
.burger span::before{top:-7px}
.burger span::after{top:7px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- Hero asymetrique ---------- */
.hero{position:relative;background:var(--paper);overflow:hidden}
.hero__grid{display:grid;gap:0}
.hero__txt{padding:clamp(3rem,7vw,6.2rem) 0 clamp(2.6rem,5vw,4.4rem);position:relative;z-index:2}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display);font-weight:700;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:1.5rem}
.kicker::before{content:"";width:36px;height:3px;background:var(--red)}
.hero h1{margin-bottom:1.4rem;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--red)}
.hero__lead{font-size:clamp(1.02rem,1.5vw,1.15rem);max-width:46ch;color:var(--ink-soft);margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
/* Les photos du hero sont empilees et se relaient en fondu. Le conteneur porte
   le ratio, sinon la pile d'images absolues n'aurait aucune hauteur.
   Le cadrage vertical est propre a chaque cliche (style inline dans le HTML). */
.hero__media{position:relative;aspect-ratio:3/4}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.hero__media img.is-on{opacity:1}
/* Le chevron decoratif repris du logo a ete retire : sur 351px de large pour
   54px de haut, la pente etait si plate qu'elle ne se lisait pas comme un toit
   mais comme une entaille blanche accidentelle en bas de la photo. */

.trust{border-top:1px solid var(--line);background:var(--paper)}
.trust__in{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.trust__i{padding:1.7rem 0;border-bottom:1px solid var(--line-soft)}
.trust__i:nth-child(odd){padding-right:1.2rem}
.trust__i b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3vw,2.15rem);
  color:var(--ink);line-height:1;margin-bottom:.4rem}
.trust__i span{font-size:.85rem;color:var(--grey);letter-spacing:.02em}

/* ---------- Sections ---------- */
.sec{padding:clamp(3.6rem,7vw,6.6rem) 0}
.sec--sand{background:var(--sand)}
.sec--ink{background:var(--ink);color:rgba(255,255,255,.76)}
.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink .kicker{color:#fff}
.sec--ink .kicker::before{background:var(--red)}

.sec-head{max-width:60ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sec-head p{margin-top:1.05rem;color:var(--grey);font-size:1.02rem}
.sec--ink .sec-head p{color:rgba(255,255,255,.66)}

/* ---------- Poles metiers (blocs alternes) ---------- */
.pole{display:grid;gap:1.8rem;padding:clamp(2.2rem,4vw,3.2rem) 0;border-top:1px solid var(--line)}
.pole:first-of-type{border-top:0;padding-top:0}
.pole__num{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.16em;color:var(--red)}
.pole h3{margin:.5rem 0 .85rem;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.pole__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pole ul{margin:1.15rem 0 0;padding:0;list-style:none;columns:1;column-gap:2.2rem}
.pole li{position:relative;padding:.32rem 0 .32rem 1.15rem;font-size:.95rem;break-inside:avoid}
.pole li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:6px;background:var(--red)}

/* ---------- Liste de services complete ---------- */
.svc-group{padding:clamp(2.2rem,4vw,3.2rem) 0;border-top:1px solid var(--line)}
.svc-group:first-of-type{border-top:0;padding-top:0}
/* Le numero est pose au-dessus du titre, pas sur sa ligne de base : cale sur
   une capitale de 2,8rem, un "01" de 0,78rem pend visuellement dans le vide. */
.svc-group__head{margin-bottom:1.6rem}
.svc-group__head span{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;color:var(--red);margin-bottom:.55rem}
.svc-list{display:grid;grid-template-columns:1fr;gap:0;margin:0;padding:0;list-style:none}
.svc-list li{border-top:1px solid var(--line-soft);padding:.85rem 0 .85rem 1.5rem;position:relative;
  font-size:.98rem;color:var(--ink)}
.svc-list li::before{content:"";position:absolute;left:0;top:1.42em;width:8px;height:2px;background:var(--red)}

/* ---------- Realisations ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gal button{position:relative;padding:0;border:0;background:var(--sand-deep);cursor:pointer;overflow:hidden;display:block}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gal button:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .85rem .7rem;text-align:left;
  font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,transparent,rgba(16,16,18,.82))}

/* ---------- Methode ---------- */
.steps{display:grid;gap:0;counter-reset:s}
.step{counter-increment:s;padding:1.6rem 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.5rem}
.step:first-child{border-top:0;padding-top:0}
.step::before{content:"0" counter(s);font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.14em;color:var(--red)}
.step h3{font-size:1.15rem}
.step p{font-size:.95rem;margin:0}

/* ---------- Bandeau CTA ---------- */
.cta-band{background:var(--red);color:#fff}
.cta-band .wrap{padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem)}
.cta-band h2{color:#fff;max-width:20ch}
.cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin-top:.9rem}
.cta-band__row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.cta-band .btn--red{background:#fff;color:var(--red);border-color:#fff}
.cta-band .btn--red:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Formulaire ---------- */
.form-card{background:#fff;border:1px solid var(--line);padding:clamp(1.5rem,3.4vw,2.6rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);padding:.85rem .95rem;min-height:52px;border-radius:0}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
.check{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:.88rem;color:var(--grey);margin-bottom:1.4rem}
/* La case elle-meme reste a 22px (au-dela, elle ecrase le texte), mais son
   etiquette est liee par for= et sert de cible tactile pleine largeur. */
.check input{width:22px;height:22px;min-height:0;margin-top:.18rem;accent-color:var(--red);flex:none}
.check label{cursor:pointer;padding:.35rem 0}
.check a{color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--grey);margin-top:1rem}
.alert{padding:.95rem 1.1rem;margin-bottom:1.4rem;font-size:.92rem;border-left:4px solid var(--red);background:#fdf1f2;color:#8a1019}

/* ---------- Coordonnees ---------- */
.coord{margin:0;padding:0;list-style:none}
.coord li{display:grid;grid-template-columns:26px 1fr;gap:.95rem;padding:1.05rem 0;border-top:1px solid var(--line)}
.coord li:first-child{border-top:0;padding-top:0}
.coord svg{width:22px;height:22px;color:var(--red);margin-top:.2rem}
.coord b{display:block;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey);margin-bottom:.15rem}
.coord a{color:var(--ink);text-decoration:none;font-size:1.05rem;font-weight:600;word-break:break-word}
.coord a:hover{color:var(--red)}
.coord span{font-size:1.02rem;color:var(--ink)}

/* ---------- Pied de page ---------- */
.ftr{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(3rem,6vw,4.6rem) 0 1.8rem;font-size:.94rem}
.ftr__grid{display:grid;gap:2.4rem}
.ftr img{height:42px;width:auto;margin-bottom:1.2rem}
/* Titres de colonnes du pied de page : des <h2> (et non des <h4>) pour ne pas
   sauter de niveau apres le <h2> de la derniere section — Lighthouse le releve. */
.ftr__h{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;margin:0 0 1rem;line-height:1.4}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{padding:.3rem 0}
.ftr a{color:rgba(255,255,255,.68);text-decoration:none}
.ftr a:hover{color:#fff}
/* .56 et non .45 : sur le fond #1A1A1C, .45 donne un contraste de 4,46:1,
   sous le minimum AA de 4,5:1 pour ce corps de texte. */
.ftr__bot{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.56)}
/* Les liens legaux ne faisaient que 16px de haut, sous le minimum tactile de
   44px. inline-block + padding elargit la cible sans casser la mise en page. */
.ftr__bot a{display:inline-block;padding:.72rem 0;color:rgba(255,255,255,.7);text-decoration:none}
.ftr__bot a:hover{color:#fff}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:1500;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:transform .22s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#fff}

/* ---------- Cookies ---------- */
#cookies{position:fixed;left:14px;right:14px;bottom:14px;z-index:2400;max-width:560px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);padding:1.15rem 1.3rem}
/* Le bandeau passe au-dessus du tiroir (2400 > 1100) et masquerait les derniers
   liens du menu lors d'une premiere visite. On l'escamote tant que le menu est
   ouvert : il revient a la fermeture, tant qu'aucun choix n'a ete fait. */
body.nav-open #cookies{opacity:0;pointer-events:none}
#cookies p{font-size:.9rem;margin:0 0 .9rem;color:var(--ink-soft)}
#cookies a{color:var(--red)}
#cookies div{display:flex;flex-wrap:wrap;gap:.6rem}
#cookies button{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.75rem 1.15rem;min-height:44px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
#cookies button:first-child{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:3000;background:rgba(16,16,18,.94);display:none;
  align-items:center;justify-content:center;padding:56px 14px}
.lb[data-open]{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb__b{position:absolute;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.lb__x{top:8px;right:10px}
.lb__p{left:6px;top:50%;transform:translateY(-50%)}
.lb__n{right:6px;top:50%;transform:translateY(-50%)}

/* ---------- Pages de texte (legal) ---------- */
.legal{padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(3rem,6vw,5rem);max-width:78ch}
.legal h2{font-size:clamp(1.25rem,2.2vw,1.5rem);margin:2.4rem 0 .9rem}
.legal h2:first-of-type{margin-top:1.8rem}
.legal p,.legal li{font-size:.98rem}
.legal ul{padding-left:1.15rem}
.legal a{color:var(--red)}
.todo{background:#fdf1f2;border-left:4px solid var(--red);padding:.2rem .9rem;display:inline-block;
  font-weight:600;color:#8a1019}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ==========================================================================
   >= 640px
   ========================================================================== */
@media(min-width:640px){
  .trust__in{grid-template-columns:repeat(4,1fr)}
  .trust__i{padding:2rem 1.2rem 2rem 0;border-bottom:0}
  .gal{grid-template-columns:repeat(3,1fr);gap:12px}
  .svc-list{grid-template-columns:repeat(2,1fr);column-gap:2.6rem}
  .pole ul{columns:2}
  .ftr__grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* ==========================================================================
   >= 1024px
   ========================================================================== */
@media(min-width:1024px){
  body{font-size:17.5px}
  /* Trois colonnes : accroche, points cles, visuel qui file jusqu'au bord. */
  .hero__grid{grid-template-columns:1.34fr .78fr .88fr;align-items:stretch;
    column-gap:clamp(1.5rem,2.4vw,2.6rem)}
  .hero__txt{padding:clamp(4rem,7vw,6.4rem) 0 clamp(4rem,7vw,6.4rem)}
  /* Le ratio cede la place a la hauteur de la ligne de grille : sinon le hero
     depasserait un ecran entier sur grand format. */
  .hero__media{margin-right:calc(50% - 50vw);aspect-ratio:auto;min-height:620px}
  /* Fondu vers le fond a gauche du visuel, pour qu'il ne coupe pas net. */
  .hero__media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,var(--paper) 0%,rgba(250,248,244,.78) 16%,rgba(250,248,244,0) 44%)}
  /* La colonne de texte est plus etroite qu'avant l'ajout des points cles :
     sans ce resserrage, les deux boutons passent l'un sous l'autre. */
  .hero__cta .btn{padding:.95rem 1.2rem;font-size:.79rem;letter-spacing:.08em}

  .pole{grid-template-columns:1fr 1fr;gap:clamp(2.4rem,4vw,4rem);align-items:center}
  .pole--flip .pole__media{order:-1}
  .pole__body{padding:.5rem 0}
  .gal{grid-template-columns:repeat(4,1fr)}
  .svc-list{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr);gap:2rem}
  /* En colonnes, chaque etape porte son propre filet rouge — y compris la
     premiere, qui l'avait perdu via la regle mobile (specificite superieure). */
  .step,.step:first-child{border-top:2px solid var(--red);padding-top:1.3rem}
  .contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
  .cta-band__in{display:grid;grid-template-columns:1.3fr auto;gap:2.5rem;align-items:center}
  .cta-band__row{margin-top:0}
  .hdr__tel{display:flex}
}

/* ==========================================================================
   < 1024px — navigation en tiroir
   ========================================================================== */
@media(max-width:1023px){
  .burger{display:block;order:3}
  /* Le tiroir part du haut, pas centre : avec `justify-content:center`, une liste
     plus haute que l'ecran deborde des DEUX cotes et le debut ("Accueil") se
     retrouve au-dessus du viewport, hors d'atteinte meme en faisant defiler.
     Le padding haut degage la hauteur de l'en-tete pour qu'aucun lien ne passe
     sous le bouton de fermeture, et overflow-y rattrape les ecrans courts. */
  .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--paper);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.3rem;
    padding:calc(78px + 1.7rem) 2.4rem 2.4rem;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(103%);transition:transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow);z-index:1100}
  body.nav-open .nav{transform:none}
  body.nav-open{overflow:hidden}
  body.nav-open .burger{position:relative;z-index:1200}
  .nav a{font-size:1.02rem;width:100%;padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
  .nav a::after{display:none}
  .nav .btn{margin-top:1.4rem;width:100%}
}

@media(max-width:420px){
  .hdr__in{min-height:66px}
  .nav{padding-top:calc(66px + 1.5rem)}
  .brand img{height:31px}
  .btn{font-size:.78rem;padding:.95rem 1.25rem}
  .gal{gap:8px}
}

/* ==========================================================================
   HERO — coloană puncte-cheie + bandă chifre/angajament (machetă 03.08.2026)
   ========================================================================== */
.hero__points{list-style:none;margin:0;padding:0;position:relative;z-index:2}
.hero__points li{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 0;border-top:1px solid var(--line-soft)}
.hero__points li:first-child{border-top:0}
.hero__points b{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.28rem}
.hero__points span:not(.hero__ico){display:block;font-size:.92rem;line-height:1.55;color:var(--grey)}

.hero__ico{flex:none;width:46px;height:46px;border-radius:50%;background:var(--sand);
  display:flex;align-items:center;justify-content:center;color:var(--red)}
.hero__ico svg{width:22px;height:22px}

/* Bandă de sub hero */
/* position+z-index : .hero est positionne, donc sans cela il se peindrait
   par-dessus le bandeau qui remonte sous lui. */
.hfoot{position:relative;z-index:3;background:transparent;padding:0 0 clamp(2.4rem,5vw,4rem)}
.hfoot__grid{display:grid;gap:1.4rem}

.stats{display:grid;grid-template-columns:1fr;background:var(--sand);padding:1.6rem clamp(1.2rem,3vw,2rem)}
.stats__i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.1rem 0}
.stats__i + .stats__i{border-top:1px solid rgba(26,26,28,.1)}
.stats__i b{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1.1}
.stats__i b.todo{font-size:.85rem;line-height:1.4}
.stats__i > span:last-child{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);line-height:1.4}

.pledge{position:relative;margin:0;background:var(--sand);padding:1.9rem clamp(1.3rem,3vw,2.2rem);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.pledge blockquote{margin:0;padding-left:2.4rem;position:relative}
.pledge blockquote::before{content:"\201C";position:absolute;left:0;top:-1.1rem;font-family:var(--display);
  font-size:4.2rem;line-height:1;color:var(--red);opacity:.32}
.pledge p{margin:0;font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.55;color:var(--ink-soft)}
.pledge p strong{color:var(--ink)}
.pledge figcaption{margin:1rem 0 0 2.4rem;font-size:.82rem;letter-spacing:.06em;color:var(--grey)}
.pledge__mark{display:none}

@media(min-width:640px){
  .stats{grid-template-columns:repeat(3,1fr);gap:0}
  .stats__i{padding:.6rem 1rem}
  .stats__i + .stats__i{border-top:0;border-left:1px solid rgba(26,26,28,.1)}
}

@media(min-width:1024px){
  .hero__points{padding-left:clamp(1.6rem,3vw,2.6rem);border-left:1px solid var(--line-soft);align-self:center}
  .hfoot{margin-top:calc(-1 * clamp(1.4rem,3vw,2.6rem))}
  .hfoot__grid{grid-template-columns:1.05fr .95fr;gap:1.6rem;align-items:stretch}
  .pledge{padding-right:clamp(7rem,11vw,10.5rem)}
  .pledge__mark{display:flex;align-items:center;justify-content:center;position:absolute;
    top:0;right:0;bottom:0;width:clamp(6rem,9vw,8.6rem);background:var(--red)}
  .pledge__mark img{width:64%;height:auto}
}