/* Garage Auto Service — feuille unique. Contrat : ../SYSTEME.md */

:root{
  --fond:#EEF0F1; --surface:#FFFFFF; --encre:#14161A; --encre-douce:#5A6068;
  --accent:#1F4FE0; --trait:#D2D6D9; --sombre:#14161A; --sur-sombre:#EEF0F1;

  --display:'Saira Condensed','Arial Narrow',sans-serif;
  --texte:'Manrope','Helvetica Neue',sans-serif;

  --t-h1:clamp(2.85rem,1.30rem + 6.4vw,6.20rem);
  --t-h2:clamp(2.05rem,1.25rem + 3.2vw,3.60rem);
  --t-h3:clamp(1.30rem,1.08rem + 0.9vw,1.72rem);
  --t-lead:clamp(1.12rem,0.98rem + 0.6vw,1.38rem);
  --t-base:clamp(1.00rem,0.95rem + 0.2vw,1.08rem);
  --t-petit:clamp(0.82rem,0.79rem + 0.14vw,0.90rem);
  --t-meta:clamp(0.70rem,0.67rem + 0.14vw,0.78rem);
  --t-prix:clamp(1.85rem,1.35rem + 2.0vw,2.80rem);

  --e1:0.35rem; --e2:0.75rem; --e3:1.25rem; --e4:2.00rem;
  --e5:3.25rem; --e6:5.25rem; --e7:8.50rem;

  --marge:clamp(1.25rem,4vw,4.5rem);
  --large:1340px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fond); color:var(--encre);
  font-family:var(--texte); font-size:var(--t-base); font-weight:400; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;border-radius:0}
button,input,textarea,select{font:inherit;color:inherit;border-radius:0}

h1{font-family:var(--display);font-weight:700;font-size:var(--t-h1);line-height:.92;letter-spacing:-.03em}
h2{font-family:var(--display);font-weight:700;font-size:var(--t-h2);line-height:1.02;letter-spacing:-.02em}
h3{font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:1.12;letter-spacing:.01em;text-transform:uppercase}
h1 + p,h2 + p,h2 + ul,h3 + p{margin-top:var(--e3)}
p{max-width:68ch}
a{color:inherit}

.meta{font-family:var(--display);font-weight:600;font-size:var(--t-meta);
  text-transform:uppercase;letter-spacing:.16em;color:var(--encre-douce)}
.lead{font-size:var(--t-lead);font-weight:500;line-height:1.55;max-width:62ch}
.filet{border:0;border-top:1px solid var(--trait);margin-block:var(--e4)}

.saut{position:absolute;left:-999px;top:0}
.saut:focus{left:var(--e3);top:var(--e3);z-index:50;background:var(--encre);
  color:var(--fond);padding-block:var(--e2);padding-inline:var(--e3)}

/* ── En-tête ─────────────────────────────────────────── */
.entete{border-bottom:1px solid var(--trait);background:var(--fond);
  position:sticky;top:0;z-index:30}
.entete-in{max-width:var(--large);margin-inline:auto;
  padding-inline:var(--marge);padding-block:var(--e3);
  display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap}
.marque{text-decoration:none;display:block;margin-right:auto}
.marque-n{display:block;font-family:var(--display);font-weight:700;
  font-size:1.42rem;letter-spacing:-.01em;line-height:1;text-transform:uppercase}
.marque-s{display:block;font-size:var(--t-meta);font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--encre-douce);margin-top:var(--e1)}
.nav{display:flex;gap:var(--e4);flex-wrap:wrap}
.nav-l{font-family:var(--display);font-weight:600;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  padding-block:var(--e1);border-bottom:3px solid transparent}
.nav-l:hover{border-bottom-color:var(--trait)}
.nav-l.est-actif{border-bottom-color:var(--accent)}   /* accent 1/3 */
.tel{font-family:var(--display);font-weight:700;font-size:1.18rem;
  letter-spacing:.02em;text-decoration:none;border:1px solid var(--encre);
  padding-block:var(--e1);padding-inline:var(--e3)}
.tel:hover{background:var(--encre);color:var(--fond)}

/* ── Structure ───────────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4)}
.bande{padding-block:var(--e6)}
.bande-sombre{background:var(--sombre);color:var(--sur-sombre)}
.bande-sombre .meta{color:#9AA1A9}
.bande-in{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.sect-tete{grid-column:1 / 7}
.sect-intro{grid-column:7 / 12;align-self:end}
.sect-titre{grid-column:1 / 9;margin-bottom:var(--e5)}

/* ── Hero ────────────────────────────────────────────── */
.hero{border-bottom:1px solid var(--trait);overflow:hidden}
.hero .bande-in{padding-block:var(--e6)}
.hero-txt{grid-column:1 / 8}
.hero-vis{grid-column:8 / 13;position:relative;min-height:clamp(240px,34vw,520px)}
.hero-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-sur{margin-top:var(--e4);display:flex;gap:var(--e3);flex-wrap:wrap;align-items:center}
.hero-liste{margin-top:var(--e5);list-style:none;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--e3);border-top:1px solid var(--trait);
  padding-block:var(--e3) 0}
.hero-liste li{font-size:var(--t-petit);color:var(--encre-douce)}
.hero-liste strong{display:block;font-family:var(--display);font-weight:700;
  font-size:1.34rem;color:var(--encre);letter-spacing:.01em}

/* ── Duo texte / visuel ──────────────────────────────── */
.duo-txt{grid-column:1 / 7}
.duo-vis{grid-column:7 / 13;position:relative;min-height:320px}
.duo-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo-vis figcaption{position:absolute;left:0;bottom:0;background:rgba(20,22,26,.78);
  color:var(--sur-sombre);font-size:var(--t-petit);
  padding-block:var(--e2);padding-inline:var(--e3);max-width:34ch}

/* ── Fiches (asymétrie imposée) ──────────────────────── */
.fiches{grid-column:1 / 13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4)}
.fiche{border-top:2px solid var(--encre);padding-block:var(--e3) var(--e4)}
.fiche:nth-of-type(3n+1){grid-column:1 / 6}
.fiche:nth-of-type(3n+2){grid-column:6 / 10}
.fiche:nth-of-type(3n+3){grid-column:10 / 13}
.fiche-n{font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:.14em;color:var(--encre-douce)}
.fiche-t{margin-top:var(--e2)}
.fiche-p{margin-top:var(--e3);font-size:var(--t-petit);color:var(--encre-douce)}
.fiche-l{margin-top:var(--e3);list-style:none;font-size:var(--t-petit)}
.fiche-l li{border-top:1px solid var(--trait);padding-block:var(--e2)}

/* ── Étapes ──────────────────────────────────────────── */
.etapes{grid-column:1 / 12;display:grid;grid-template-columns:repeat(11,1fr);gap:var(--e4)}
.etape{border-left:1px solid var(--trait);padding-inline:var(--e3);padding-block:var(--e2) var(--e5)}
.etape:nth-of-type(odd){grid-column:span 7}
.etape:nth-of-type(even){grid-column:span 4;color:var(--encre-douce)}
.etape-n{font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;
  letter-spacing:-.02em}
.etape-t{margin-top:var(--e2)}
.etape-p{margin-top:var(--e3);font-size:var(--t-petit)}

/* ── Tarifs ──────────────────────────────────────────── */
.tarifs{grid-column:1 / 12;display:grid;grid-template-columns:repeat(11,1fr);gap:var(--e4)}
.tarif{background:var(--surface);border:1px solid var(--trait);
  padding-block:var(--e4);padding-inline:var(--e4)}
.tarif:nth-of-type(odd){grid-column:span 6}
.tarif:nth-of-type(even){grid-column:span 5}
.tarif-prix{font-family:var(--display);font-weight:700;font-size:var(--t-prix);
  letter-spacing:-.02em;line-height:1;margin-top:var(--e3);display:block}
.tarif-p{margin-top:var(--e3);font-size:var(--t-petit);color:var(--encre-douce)}
.tarif-note{margin-top:var(--e3);font-size:var(--t-meta);font-family:var(--display);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--encre-douce);
  border-top:1px solid var(--trait);padding-block:var(--e2) 0}
.bloc-note{grid-column:1 / 10;margin-top:var(--e4);border-left:3px solid var(--encre);
  padding-inline:var(--e3);padding-block:var(--e2);font-size:var(--t-petit);
  color:var(--encre-douce)}

/* ── Listes ──────────────────────────────────────────── */
.liste{list-style:none;max-width:68ch}
.liste li{border-top:1px solid var(--trait);padding-block:var(--e2)}
.bande-sombre .liste li{border-top-color:rgba(255,255,255,.16)}
.liste-serree{list-style:none;font-size:var(--t-petit);color:var(--encre-douce)}
.liste-serree li{padding-block:var(--e1)}

/* ── Actions ─────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.06rem;
  text-transform:uppercase;letter-spacing:.09em;text-decoration:none;
  padding-block:var(--e2);padding-inline:var(--e4);border:1px solid var(--encre);
  cursor:pointer;background:transparent}
.btn-prim{background:var(--accent);border-color:var(--accent);color:var(--fond)} /* accent 2/3 */
.btn-prim:hover{background:var(--encre);border-color:var(--encre)}
.btn-sec:hover{background:var(--encre);color:var(--fond)}

/* ── Dispositif : le sélecteur de symptôme ───────────── */
.symptomes{background:var(--sombre);color:var(--sur-sombre);padding-block:var(--e6)}
.symptomes .bande-in{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.sy-tete{max-width:70ch;margin-bottom:var(--e4)}
.sy-tete .meta{color:#9AA1A9}
.sy-tete p{margin-top:var(--e3);color:#B9BFC6;font-size:var(--t-petit)}
.sy-choix{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e2);
  list-style:none;margin-bottom:var(--e4)}
.sy-choix li:nth-of-type(odd){grid-column:span 5}
.sy-choix li:nth-of-type(even){grid-column:span 7}
.sy-btn{width:100%;text-align:left;background:transparent;color:var(--sur-sombre);
  border:1px solid rgba(255,255,255,.24);border-left:4px solid rgba(255,255,255,.24);
  padding-block:var(--e2);padding-inline:var(--e3);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.06rem;
  text-transform:uppercase;letter-spacing:.06em}
.sy-btn:hover{border-color:var(--sur-sombre)}
.sy-btn.est-choisi{border-left-color:var(--accent);background:rgba(255,255,255,.06)} /* accent 3/3 */
.sy-reponses{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e4)}
.sy-rep{grid-column:1 / 11;border-top:1px solid rgba(255,255,255,.24);
  padding-block:var(--e3) var(--e4)}
.sy-rep h3{color:var(--sur-sombre)}
.sy-champ{margin-top:var(--e3);display:grid;grid-template-columns:repeat(11,1fr);gap:var(--e3)}
.sy-champ-t{grid-column:span 3;font-family:var(--display);font-weight:600;
  font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.16em;color:#9AA1A9;
  padding-block:var(--e1)}
.sy-champ-v{grid-column:span 8;font-size:var(--t-petit);color:#DDE1E5;max-width:64ch}
/* sans JS : tout est visible et empilé. Le JS ne fait que replier. */
.js-actif .sy-rep{display:none}
.js-actif .sy-rep.est-ouverte{display:block}

/* ── Formulaire ──────────────────────────────────────── */
.form{grid-column:1 / 8;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--e3)}
.champ:nth-of-type(odd){grid-column:span 5}
.champ:nth-of-type(even){grid-column:span 3}
.champ-l{display:block;font-family:var(--display);font-weight:600;font-size:var(--t-meta);
  text-transform:uppercase;letter-spacing:.16em;color:var(--encre-douce)}
.champ-i{width:100%;margin-top:var(--e1);background:var(--surface);
  border:1px solid var(--trait);padding-block:var(--e2);padding-inline:var(--e2)}
.champ-i:focus{outline:2px solid var(--encre);outline-offset:0}
.champ-note{grid-column:1 / 9;font-size:var(--t-petit);color:var(--encre-douce)}

/* ── Pied ────────────────────────────────────────────── */
.pied{background:var(--sombre);color:var(--sur-sombre);padding-block:var(--e6) var(--e4);margin-top:var(--e7)}
.pied-in{max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.pied-a{grid-column:1 / 6}
.pied-b{grid-column:6 / 10}
.pied-c{grid-column:10 / 13}
.pied .meta{color:#9AA1A9}
.pied-t{font-family:var(--display);font-weight:700;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:-.01em}
.pied-p{margin-top:var(--e2);font-size:var(--t-petit);color:#B9BFC6;max-width:44ch}
.pied-p a{color:var(--sur-sombre)}
.pied-mention{grid-column:1 / 11;margin-top:var(--e5);border-top:1px solid rgba(255,255,255,.16);
  padding-block:var(--e3) 0;font-size:var(--t-meta);color:#9AA1A9;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;max-width:none}

/* ── Révélations ─────────────────────────────────────── */
.js-actif .rev{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease}
.js-actif .rev.rev-ouvert{opacity:1;transform:none}

/* ── 1040px ──────────────────────────────────────────── */
@media (max-width:1040px){
  .grille{grid-template-columns:repeat(6,1fr)}
  .sect-tete{grid-column:1 / 4}
  .sect-intro{grid-column:4 / 7}
  .sect-titre{grid-column:1 / 6}
  .hero-txt{grid-column:1 / 7}
  .hero-vis{grid-column:1 / 7;min-height:300px}
  .duo-txt{grid-column:1 / 7}
  .duo-vis{grid-column:1 / 7}
  .fiches{grid-column:1 / 7;grid-template-columns:repeat(6,1fr)}
  .fiche:nth-of-type(3n+1){grid-column:1 / 7}
  .fiche:nth-of-type(3n+2){grid-column:1 / 5}
  .fiche:nth-of-type(3n+3){grid-column:1 / 6}
  .etapes{grid-column:1 / 7;grid-template-columns:repeat(6,1fr)}
  .etape:nth-of-type(odd){grid-column:span 6}
  .etape:nth-of-type(even){grid-column:span 5}
  .tarifs{grid-column:1 / 7;grid-template-columns:repeat(6,1fr)}
  .tarif:nth-of-type(odd){grid-column:span 6}
  .tarif:nth-of-type(even){grid-column:span 6}
  .bloc-note{grid-column:1 / 7}
  .form{grid-column:1 / 7;grid-template-columns:repeat(6,1fr)}
  .champ:nth-of-type(odd){grid-column:span 6}
  .champ:nth-of-type(even){grid-column:span 4}
  .champ-note{grid-column:1 / 7}
  .sy-choix li:nth-of-type(odd){grid-column:span 6}
  .sy-choix li:nth-of-type(even){grid-column:span 6}
  .sy-rep{grid-column:1 / 13}
  .pied-a{grid-column:1 / 7}
  .pied-b{grid-column:1 / 4}
  .pied-c{grid-column:4 / 7}
  .pied-mention{grid-column:1 / 7}
}

/* ── 680px ───────────────────────────────────────────── */
@media (max-width:680px){
  .grille{grid-template-columns:1fr;gap:var(--e4)}
  .entete-in{gap:var(--e3)}
  .nav{gap:var(--e3);order:3;width:100%}
  .nav-l{font-size:.94rem}
  .tel{font-size:1.02rem}
  .bande{padding-block:var(--e5)}
  .sect-tete,.sect-intro,.sect-titre{grid-column:1 / -1}
  .hero-txt,.hero-vis{grid-column:1 / -1}
  .hero-vis{min-height:230px}
  .hero-liste{grid-template-columns:1fr}
  .duo-txt,.duo-vis{grid-column:1 / -1}
  .duo-vis{min-height:240px}
  .fiches{grid-column:1 / -1;grid-template-columns:1fr}
  .fiche:nth-of-type(3n+1){grid-column:1 / -1}
  .fiche:nth-of-type(3n+2){grid-column:1 / -1}
  .fiche:nth-of-type(3n+3){grid-column:1 / -1}
  .etapes{grid-column:1 / -1;grid-template-columns:1fr}
  .etape:nth-of-type(odd){grid-column:1 / -1}
  .etape:nth-of-type(even){grid-column:1 / -1}
  .tarifs{grid-column:1 / -1;grid-template-columns:1fr}
  .tarif:nth-of-type(odd){grid-column:1 / -1}
  .tarif:nth-of-type(even){grid-column:1 / -1}
  .bloc-note{grid-column:1 / -1}
  .form{grid-column:1 / -1;grid-template-columns:1fr}
  .champ:nth-of-type(odd){grid-column:1 / -1}
  .champ:nth-of-type(even){grid-column:1 / -1}
  .champ-note{grid-column:1 / -1}
  .sy-choix{grid-template-columns:1fr}
  .sy-choix li:nth-of-type(odd){grid-column:1 / -1}
  .sy-choix li:nth-of-type(even){grid-column:1 / -1}
  .sy-reponses{grid-template-columns:1fr}
  .sy-rep{grid-column:1 / -1}
  .sy-champ{grid-template-columns:1fr;gap:var(--e1)}
  .sy-champ-t{grid-column:1 / -1}
  .sy-champ-v{grid-column:1 / -1}
  .pied-a,.pied-b,.pied-c,.pied-mention{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  .js-actif .rev{opacity:1;transform:none;transition:none}
}