/* ============================ TOKENS ============================ */
:root{
  /* Palette unique, volontairement claire : creme chaude d'atelier.
     Le site ne suit pas le theme sombre du visiteur, il reste creme. */
  color-scheme:light;
  --ground:#EFE4CE;
  --ground-2:#E5D5B4;
  --ground-3:#DCC89F;
  --ink:#221B12;
  --ink-2:#6A5942;
  --rule:#C2A87C;
  --rule-soft:#D5BF97;
  --brique:#A33A17;
  --brique-ink:#F6ECD9;
  --moutarde:#9A6E06;
  --moutarde-flat:#C89416;
  --sapin:#2C4136;
  --shadow:0 2px 0 rgba(34,27,18,.18);
  --grain:.055;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --util:"Barlow Condensed","Arial Narrow",Arial,sans-serif;

  --max:1180px;
  --gut:clamp(18px,4vw,44px);
  --t-hero:clamp(3.4rem,13vw,9.5rem);
  --t-h2:clamp(1.9rem,4.6vw,3.15rem);
  --t-h3:clamp(1.15rem,2.2vw,1.45rem);
  --t-body:1.0625rem;
  --t-small:.875rem;
}

/* ============================ BASE ============================ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:var(--display);
  font-weight:900;
  font-stretch:125%;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.92;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brique);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--util);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.8rem;color:var(--moutarde);
}
.lede{font-size:clamp(1.08rem,1.9vw,1.3rem);color:var(--ink-2);max-width:56ch}

/* ============================ BARRE ============================ */
.bar{
  position:sticky;top:0;z-index:60;
  background:var(--ground);
  border-bottom:2px solid var(--ink);
}
.bar-in{
  max-width:var(--max);margin-inline:auto;padding:10px var(--gut);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.mark{
  font-family:var(--display);font-weight:900;font-stretch:125%;
  text-transform:uppercase;font-size:1.32rem;letter-spacing:.06em;
  text-decoration:none;line-height:1;margin-right:auto;
}
.mark span{color:var(--brique)}
.nav{display:flex;gap:clamp(12px,2.2vw,26px);flex-wrap:wrap}
.nav a{
  font-family:var(--util);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.92rem;text-decoration:none;
  color:var(--ink-2);padding-bottom:2px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--brique)}

/* ============================ BOUTONS ============================ */
.btn{
  display:inline-block;font-family:var(--util);font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;
  padding:13px 24px;text-decoration:none;border:2px solid var(--ink);
  background:var(--ground);color:var(--ink);box-shadow:var(--shadow);
  transition:transform .12s ease;cursor:pointer;
}
.btn:hover{transform:translate(-1px,-1px)}
.btn.primaire{background:var(--brique);color:var(--brique-ink);border-color:var(--brique)}

/* ============================ HERO ============================ */
.hero{border-bottom:2px solid var(--ink)}
.hero-photo{
  position:relative;
  width:100%;height:clamp(300px,40vw,620px);
  background:var(--ground-3);overflow:hidden;
  border-bottom:2px solid var(--ink);
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-title{
  position:absolute;left:0;right:0;bottom:0;
  padding:calc(var(--gut) * .7) var(--gut) calc(var(--gut) * .55);
  background:rgba(20,16,12,.88);
  border-top:2px solid #E0A72A;
  color:#EFE4CE;
}
.hero-title h1{font-size:clamp(3rem,11vw,8rem);letter-spacing:-.02em}
.hero-title h1 span{color:#E0A72A}
.hero-meta{
  display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline;
  max-width:var(--max);margin-inline:auto;
}
.hero-bas{
  display:grid;gap:26px;grid-template-columns:1.4fr 1fr;align-items:end;
  padding-block:clamp(26px,4vw,44px);
}
.hero-bas h2{font-size:clamp(1.5rem,3.4vw,2.35rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============================ SECTIONS ============================ */
.sec{padding-block:clamp(48px,7vw,86px);border-top:2px solid var(--ink)}
.sec.creux{background:var(--ground-2)}
.sec-tete{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.sec-tete h2{font-size:var(--t-h2)}
.filet{height:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding-top:3px;margin-top:4px}

/* ============================ SERVICES ============================ */
.services{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);background:var(--ink);border:2px solid var(--ink)}
.service{background:var(--ground);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.sec.creux .service{background:var(--ground-2)}
.service .num{
  font-family:var(--util);font-weight:700;font-size:.85rem;letter-spacing:.2em;
  color:var(--brique);text-transform:uppercase;
}
.service h3{font-size:var(--t-h3)}
.service p{color:var(--ink-2)}
.service ul{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.service li{
  font-family:var(--util);font-size:1.02rem;padding-left:16px;position:relative;line-height:1.35;
}
.service li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:2px;background:var(--moutarde-flat)}
.note{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.92rem;color:var(--ink-2);
}

/* ============================ SPECIALITES ============================ */
.familles{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.famille{border:2px solid var(--ink);background:var(--ground);overflow:hidden;display:flex;flex-direction:column}
.sec.creux .famille{background:var(--ground-2)}
.famille figure{margin:0;aspect-ratio:3/2;background:var(--ground-3);border-bottom:2px solid var(--ink)}
.famille figure img{width:100%;height:100%;object-fit:cover}
.famille-txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
.famille h3{font-size:1.32rem}
.famille .periode{font-family:var(--util);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--brique);font-weight:600}
.famille .modeles{font-family:var(--util);font-size:1.1rem;line-height:1.45;color:var(--ink-2)}

/* ============================ VEHICULES ============================ */
.grille-vehicules{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.vcard{
  border:2px solid var(--ink);background:var(--ground);text-align:left;
  padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .12s ease;
}
.sec.creux .vcard{background:var(--ground-2)}
.vcard:hover{transform:translate(-2px,-2px)}
.vcard figure{margin:0;position:relative;aspect-ratio:4/3;background:var(--ground-3);border-bottom:2px solid var(--ink);overflow:hidden}
.vcard figure img{width:100%;height:100%;object-fit:cover}
.tag{
  position:absolute;top:0;left:0;padding:6px 12px;
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;
  background:var(--brique);color:var(--brique-ink);
}
.tag.vendu{background:var(--ink);color:var(--ground)}
.tag.reserve{background:var(--moutarde-flat);color:#221B12}
.tag.projet{background:var(--sapin);color:var(--ground)}
.vcard-txt{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.vcard .marque{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--ink-2);font-weight:600}
.vcard h3{font-size:1.24rem}
.vcard .ligne{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;
}
.vcard .prix{font-weight:700;font-size:1.28rem;letter-spacing:.02em;color:var(--brique);font-variant-numeric:tabular-nums}
.vcard .voir{color:var(--ink-2)}

/* ============================ REALISATIONS ============================ */
.realisations{display:flex;flex-direction:column;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.rea{
  background:var(--ground);display:grid;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
}
.sec.creux .rea{background:var(--ground-2)}
.rea:nth-child(even) .rea-photo{order:2}
.rea-photo{aspect-ratio:3/2;background:var(--ground-3);overflow:hidden}
.rea-photo img{width:100%;height:100%;object-fit:cover}
.rea-txt{padding:clamp(22px,3.2vw,38px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.rea-txt h3{font-size:var(--t-h3)}
.rea-txt .duree{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--moutarde);font-weight:600}
.rea-txt p{color:var(--ink-2)}
.rea-txt ul{display:grid;gap:6px;margin-top:4px}
.rea-txt li{font-family:var(--util);font-size:1.02rem;line-height:1.35;padding-left:16px;position:relative}
.rea-txt li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:2px;background:var(--sapin)}

/* ============================ ATELIER ============================ */
.atelier{display:grid;gap:clamp(22px,3.5vw,46px);grid-template-columns:1fr 1fr;align-items:center}
.atelier-txt{display:flex;flex-direction:column;gap:16px}
.atelier-txt h2{font-size:var(--t-h2)}
.atelier-txt p{color:var(--ink-2);max-width:52ch}
.atelier-photos{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.atelier-photos figure{margin:0;border:2px solid var(--ink);aspect-ratio:1;background:var(--ground-3);overflow:hidden}
.atelier-photos figure:first-child{grid-column:1/-1;aspect-ratio:16/9}
.atelier-photos img{width:100%;height:100%;object-fit:cover}

/* ============================ EQUIPE ============================ */
.equipe{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.membre{
  border:2px solid var(--ink);background:var(--ground);
  display:grid;grid-template-columns:auto 1fr;gap:0;box-shadow:var(--shadow);
}
.sec.creux .membre{background:var(--ground-2)}
.initiale{
  width:clamp(88px,12vw,120px);display:flex;align-items:center;justify-content:center;
  background:var(--brique);color:var(--brique-ink);
  font-family:var(--display);font-weight:900;font-stretch:125%;
  font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;
  border-right:2px solid var(--ink);
}
.membre:nth-child(even) .initiale{background:var(--sapin);color:var(--ground)}
.portrait{
  margin:0;width:clamp(112px,15vw,158px);overflow:hidden;
  background:var(--ground-3);border-right:2px solid var(--ink);
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.membre-txt{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px}
.membre h3{font-size:1.45rem}
.membre .role{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--moutarde);font-weight:600}
.membre p{color:var(--ink-2)}
.membre .detail{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--util);font-size:1rem;color:var(--ink-2);
}

/* ============================ CONTACT ============================ */
.contact{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr 1fr}
.coord{display:flex;flex-direction:column;gap:22px}
.coord-bloc{display:flex;flex-direction:column;gap:5px}
.coord-bloc .k{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--ink-2);font-weight:600}
.coord-bloc .v{font-family:var(--display);font-weight:800;font-stretch:112%;font-size:1.16rem;text-decoration:none;line-height:1.25}
.coord-bloc a.v:hover{color:var(--brique)}
.horaires{display:grid;gap:4px;font-family:var(--util);font-size:1.02rem}
.horaires li{display:flex;justify-content:space-between;gap:18px;border-bottom:1px dotted var(--rule);padding-block:4px}
.horaires .j{color:var(--ink-2)}

/* ============================ PIED ============================ */
.pied{border-top:2px solid var(--ink);background:var(--ground-2);padding-block:30px}
.pied-in{display:flex;gap:16px 30px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.84rem;color:var(--ink-2)}

.credits{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--body);font-size:.8rem;color:var(--ink-2);line-height:1.5}
.credits summary{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;cursor:pointer;font-weight:600}
.credits ul{margin-top:10px;display:grid;gap:4px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.credits a{color:inherit}
.credits a:hover{color:var(--brique)}

/* ============================ FICHE (modale) ============================ */
.modale{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(23,19,14,.82);padding:clamp(10px,3vw,34px);overflow:auto;
}
.modale[open],.modale.ouvert{display:block}
.fiche{
  max-width:1000px;margin-inline:auto;background:var(--ground);
  border:2px solid var(--ink);box-shadow:0 14px 0 rgba(23,19,14,.35);
}
.fiche-tete{
  display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:18px 20px;border-bottom:2px solid var(--ink);
  position:sticky;top:0;background:var(--ground);z-index:2;
}
.fiche-tete h3{font-size:clamp(1.3rem,3vw,1.9rem)}
.fiche-tete .marque{font-family:var(--util);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--ink-2);font-weight:600}
.fermer{
  border:2px solid var(--ink);background:var(--ground);color:var(--ink);
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.86rem;padding:8px 14px;cursor:pointer;flex:none;
}
.fermer:hover{background:var(--brique);color:var(--brique-ink);border-color:var(--brique)}
.galerie{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));background:var(--ink);border-bottom:2px solid var(--ink)}
.galerie figure{margin:0;aspect-ratio:4/3;background:var(--ground-3);overflow:hidden}
.galerie img{width:100%;height:100%;object-fit:cover}
.fiche-corps{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:1fr 1fr;padding:clamp(20px,3vw,32px)}
.fiche-corps p{color:var(--ink-2)}
.technique{width:100%;border-collapse:collapse;font-family:var(--util);font-size:1.02rem}
.technique caption,.travaux-titre{
  text-align:left;font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;color:var(--brique);padding-bottom:8px;
}
.technique th,.technique td{text-align:left;padding:7px 0;border-bottom:1px dotted var(--rule);vertical-align:top}
.technique th{font-weight:500;color:var(--ink-2);width:44%}
.technique td{font-weight:600;font-variant-numeric:tabular-nums}
.fiche-col{display:flex;flex-direction:column;gap:18px}
.travaux li{font-family:var(--util);font-size:1.02rem;line-height:1.35;padding-left:16px;position:relative;margin-bottom:6px}
.travaux li::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:2px;background:var(--moutarde-flat)}
.fiche-prix{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-top:2px solid var(--ink);background:var(--ground-2);
}
.fiche-prix .p{font-family:var(--display);font-weight:900;font-stretch:118%;font-size:1.8rem;color:var(--brique);font-variant-numeric:tabular-nums}

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .services,.familles,.grille-vehicules{grid-template-columns:1fr 1fr}
  .hero-bas,.atelier,.contact,.rea,.fiche-corps{grid-template-columns:1fr}
  .rea:nth-child(even) .rea-photo{order:0}
  .hero-bas{gap:20px}
}
@media (max-width:620px){
  .services,.familles,.grille-vehicules{grid-template-columns:1fr}
  .nav{gap:12px}
  .nav a{font-size:.85rem}
  .hero-photo{aspect-ratio:4/3}
}

/* ============================ MULTI-PAGES ============================ */
/* Ajoute lors du decoupage du site en pages distinctes. */

.saut{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--ground);padding:12px 18px;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;
}
.saut:focus{left:0}

.nav a.actif{color:var(--ink);border-bottom-color:var(--brique)}

/* --- fil d'ariane --- */
.ariane{
  border-bottom:2px solid var(--ink);background:var(--ground-2);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;color:var(--ink-2);padding-block:9px;
}
.ariane a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.ariane a:hover{color:var(--brique);border-bottom-color:var(--brique)}
.ariane span[aria-current]{color:var(--ink);font-weight:600}
.ariane span[aria-hidden]{color:var(--rule);margin-inline:2px}

/* --- lien de texte --- */
.lien{
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.95rem;color:var(--brique);text-decoration:none;
  border-bottom:2px solid var(--brique);padding-bottom:1px;
}
.lien:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* --- carte vehicule devenue lien --- */
a.vcard{text-decoration:none}
a.vcard:focus-visible{outline:3px solid var(--moutarde-flat);outline-offset:3px}

/* --- appel a l'action de bas de page --- */
.appel{
  display:flex;gap:clamp(20px,3vw,44px);align-items:center;justify-content:space-between;
  flex-wrap:wrap;border:2px solid var(--ink);background:var(--ground);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow);
}
.sec.creux .appel{background:var(--ground)}
.appel h2{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:8px}
.appel p{color:var(--ink-2);margin:0}

/* --- deux colonnes texte + photo --- */
.deux-col{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1.15fr .85fr;align-items:start}
.deux-col p{color:var(--ink-2)}
.deux-col p + p{margin-top:14px}
.photo-bloc{margin:0;border:2px solid var(--ink);aspect-ratio:4/3;background:var(--ground-3);overflow:hidden}
.photo-bloc img{width:100%;height:100%;object-fit:cover}

/* --- etapes numerotees --- */
.etapes{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.etapes li{background:var(--ground);display:flex;gap:clamp(16px,2.4vw,28px);padding:clamp(18px,2.6vw,26px);align-items:flex-start}
.sec.creux .etapes li{background:var(--ground-2)}
.etapes .n{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  background:var(--brique);color:var(--brique-ink);
  font-family:var(--display);font-weight:900;font-stretch:118%;font-size:1.3rem;
}
.etapes h3{font-size:1.16rem;margin-bottom:5px}
.etapes p{color:var(--ink-2);margin:0}

/* --- garanties de la page vente --- */
.garanties{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);background:var(--ink);border:2px solid var(--ink)}
.garanties > div{background:var(--ground);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:7px}
.sec.creux .garanties > div{background:var(--ground-2)}
.garanties .k{font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--brique)}
.garanties p{color:var(--ink-2);margin:0;font-size:1rem}

/* --- liste marque par marque --- */
.modeles-liste{display:grid;gap:2px;grid-template-columns:repeat(3,1fr);background:var(--ink);border:2px solid var(--ink)}
.modeles-liste article{background:var(--ground);padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:8px}
.sec.creux .modeles-liste article{background:var(--ground-2)}
.modeles-liste h3{font-size:1.12rem}
.modeles-liste p{color:var(--ink-2);margin:0;font-size:1rem}

/* --- questions frequentes --- */
.faq{border:2px solid var(--ink);background:var(--ground)}
.sec.creux .faq{background:var(--ground-2)}
.faq-item{border-bottom:2px solid var(--ink)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{
  cursor:pointer;padding:16px clamp(16px,2.4vw,24px);
  font-family:var(--display);font-weight:800;font-stretch:112%;
  text-transform:uppercase;font-size:1.02rem;line-height:1.2;letter-spacing:-.005em;
}
.faq-item summary::marker{color:var(--brique)}
.faq-item summary:hover{color:var(--brique)}
.faq-item > div{padding:0 clamp(16px,2.4vw,24px) 18px;color:var(--ink-2);max-width:78ch}

/* --- fiche vehicule en page pleine --- */
.fiche-page{box-shadow:var(--shadow)}
.fiche-page .galerie{border-top:0}

/* --- plan du site en pied de page --- */
.pied-nav{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;
}
.pied-nav a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.pied-nav a:hover{color:var(--brique);border-bottom-color:var(--brique)}
.pied-in a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}

@media (max-width:900px){
  .deux-col,.garanties,.modeles-liste{grid-template-columns:1fr}
  .garanties,.modeles-liste{grid-template-columns:1fr 1fr}
  .appel{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .garanties,.modeles-liste{grid-template-columns:1fr}
  .etapes li{gap:14px;padding:16px}
  .etapes .n{width:38px;height:38px;font-size:1.1rem}
}

/* --- galerie de la fiche vehicule : pas de case vide en fin de ligne --- */
.fiche-page .galerie{
  display:flex;flex-wrap:wrap;gap:2px;background:var(--ink);
  border-bottom:2px solid var(--ink);
}
.fiche-page .galerie figure{
  flex:1 1 230px;margin:0;aspect-ratio:auto;
  height:clamp(170px,17vw,250px);background:var(--ground-3);overflow:hidden;
}

/* ============================ MOBILE : MENU ET BANNIERE ============================ */

/* --- couleurs des surtitres de la banniere --- */
.eyebrow.or{color:#E7B23A}
.eyebrow.clair{color:#EFE4CE;opacity:.8}
.hero-meta{margin-bottom:6px}

/* --- titre de la banniere : marque en grand sur ordinateur,
       intitule descriptif et compact sur telephone --- */
.hero-title h1 span{color:inherit}            /* annule la regle globale */
.hero-title h1 .titre-marque span{color:#E0A72A}
.titre-marque{display:inline}
.titre-court{display:none}

/* --- bouton burger, cache par defaut --- */
.bascule-menu{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.burger{display:none}

@media (max-width:900px){
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:40px;padding:0 10px;flex:none;cursor:pointer;
    border:2px solid var(--ink);background:var(--ground);box-shadow:var(--shadow);
  }
  .burger span{display:block;height:2px;background:var(--ink);transition:transform .16s ease,opacity .16s ease}
  .bascule-menu:checked + .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .bascule-menu:checked + .burger span:nth-child(2){opacity:0}
  .bascule-menu:checked + .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .bascule-menu:focus-visible + .burger{outline:3px solid var(--moutarde-flat);outline-offset:2px}

  .nav{
    display:none;flex-basis:100%;flex-direction:column;gap:0;
    margin-top:10px;border-top:2px solid var(--ink);
  }
  .bascule-menu:checked ~ .nav{display:flex}
  .nav a{
    padding:13px 2px;font-size:1rem;border-bottom:1px solid var(--rule-soft);
    border-top:0;
  }
  .nav a.actif{color:var(--brique)}
  .nav a:hover{border-bottom-color:var(--rule-soft)}
}

/* --- banniere plus courte et sans redite de la marque --- */
@media (max-width:760px){
  .hero-photo{height:clamp(190px,44vw,260px);aspect-ratio:auto}
  .hero-title{padding:12px var(--gut) 14px}
  .hero-title h1{font-size:1.32rem;line-height:1.12;letter-spacing:0}
  .titre-marque{display:none}
  .titre-court{display:block}
  .eyebrow.sur-grand{display:none}     /* deja dit par le titre juste dessous */
  .hero-meta{margin-bottom:4px}
  .hero-meta .eyebrow{font-size:.7rem}
  .hero-bas{padding-block:24px}
}

/* ============================ MOBILE : CONFORT TACTILE ============================ */
/* Tout ce que l'on touche au doigt doit faire au moins 44 px de haut,
   c'est la taille d'un bout de doigt. On elargit la zone cliquable
   sans changer la taille du texte, avec du padding. */

@media (max-width:900px){
  /* logo de la barre */
  .mark{padding-block:10px;line-height:1.2}

  /* liens de texte mis en avant, du type "La restauration en detail" */
  .lien{display:inline-block;padding-block:11px}

  /* coordonnees cliquables de la page contact */
  .coord-bloc a.v{display:inline-block;padding-block:10px}

  /* telephone du pied de page */
  .pied-in a{display:inline-block;padding-block:9px}

  /* boutons : on garantit la hauteur meme si le libelle est court */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}

  /* entrees de la liste des questions frequentes */
  .faq-item summary{padding-block:17px}

  /* lien de credits photos du pied de page */
  .credits summary{padding-block:8px}
}

/* surtitres de la banniere : jamais sous 12 px */
@media (max-width:760px){
  .hero-meta .eyebrow{font-size:.78rem}
}

/* Zone cliquable elargie sans rien changer a l'aspect : le pseudo-element
   deborde au-dessus et en dessous du texte du lien. */
.nav a, .mark{position:relative}
.nav a::after, .mark::after{
  content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px;
}
@media (max-width:900px){
  .nav a::after, .mark::after{content:none}   /* deja assez hauts au doigt */
}

/* ============================ BANNIERE : NOUVELLE STRUCTURE ============================ */
/* Sur ordinateur, le cartouche de titre est pose par dessus la photo, comme avant.
   Sur telephone, il passe SOUS la photo : la voiture reste entierement visible
   au lieu d'etre mangee aux deux tiers par le bandeau. */
.hero-visuel{position:relative}

@media (max-width:760px){
  .hero-visuel{display:flex;flex-direction:column}
  .hero-photo{height:clamp(200px,52vw,280px)}
  .hero-title{
    position:static;
    background:#141008;
    padding:14px var(--gut) 16px;
  }
}

/* ============================ MOBILE : GALERIE ET RYTHME ============================ */
@media (max-width:760px){
  /* Galerie de la fiche vehicule : deux photos par ligne plutot qu'une.
     Dix photos empilees faisaient une page interminable. */
  .fiche-page .galerie figure{flex:1 1 calc(50% - 2px);height:132px}

  /* Un peu moins d'air entre les sections, la page reste longue sinon */
  .sec{padding-block:40px}
  .sec-tete{margin-bottom:22px}
  .appel{padding:22px 20px;gap:18px}
  .rea-txt{padding:20px}
  .fiche-corps{padding:20px;gap:24px}
  .fiche-prix{padding:14px 18px}

  /* Le prix et les boutons de la fiche passent l'un sous l'autre proprement */
  .fiche-prix{flex-direction:column;align-items:stretch;gap:14px}
  .fiche-prix .hero-actions{display:flex}
  .fiche-prix .btn{flex:1}
}

/* liens glisses dans les notes de bas de section */
.note a{color:var(--brique);text-decoration:none;border-bottom:1px solid var(--brique)}
.note a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:900px){
  .note a{display:inline-block;padding-block:9px}
}

/* Zones cliquables suffisantes a toutes les tailles d'ecran (24 px minimum,
   norme d'accessibilite), pas seulement sur telephone. */
.mark{padding-block:9px}
.pied-in a{display:inline-block;padding-block:8px}
.coord-bloc a.v{display:inline-block;padding-block:7px}
.lien{display:inline-block;padding-block:6px}
.note a{display:inline-block;padding-block:5px}