/* Auto 83 Garage · feuille commune des pages publiques (vitrine, carrosserie, villes)
   Layout : une route. Bandeau de chantier en haut, ligne médiane pointillée entre les sections, appels en jaune plateau. */
:root{
  --asphalte:#14130f;--asphalte-2:#1c1a15;--bitume:#2a2720;--craie:#f3efe4;--gris:#aaa392;
  --jaune:#ffcc00;--jaune-fonce:#e0b200;--rouge:#e3262a;--vert:#2fb36a;--bleu:#2f5bd3;
  --f-titre:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --f-texte:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow","Barlow",sans-serif;
  --r:6px;color-scheme:dark;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--asphalte);color:var(--craie);font-family:var(--f-texte);font-size:17px;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--asphalte)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:4px}
.wrap{max-width:1140px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-titre);text-transform:uppercase;margin:0;line-height:.95;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(3rem,11vw,6.4rem);font-weight:900}
h1 span{color:var(--jaune);display:block}
h2{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:800}
h3{font-size:1.6rem;font-weight:800}
p{margin:0}
.label{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--jaune)}
.muted{color:var(--gris)}
.hazard{height:10px;background:repeating-linear-gradient(-45deg,var(--jaune) 0 14px,var(--asphalte) 14px 28px)}
.route{height:4px;background:repeating-linear-gradient(90deg,var(--jaune) 0 36px,transparent 36px 64px);opacity:.55}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:var(--r);border:2px solid transparent;font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;text-decoration:none;cursor:pointer;background:var(--jaune);color:var(--asphalte);white-space:nowrap}
.btn:hover{background:var(--jaune-fonce)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-o{background:transparent;color:var(--craie);border-color:color-mix(in srgb,var(--craie) 32%,transparent)}
.btn-o:hover{background:transparent;border-color:var(--craie)}
.btn-wa{background:var(--vert);color:#fff}
.btn-wa:hover{background:#27975a}

/* en-tête */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--asphalte) 93%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.mono{width:44px;height:44px;flex:none;border-radius:var(--r);background:var(--jaune);color:var(--asphalte);display:grid;place-items:center;font-family:var(--f-titre);font-weight:900;font-size:1.25rem}
.marque b{font-family:var(--f-titre);font-weight:900;font-size:1.3rem;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:20px;font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem}
.nav a{text-decoration:none;color:var(--gris)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--craie)}
.top .appel{min-height:44px;padding:0 14px;flex:none}
.top .appel svg{width:18px;height:18px}

/* héros */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .photo{position:absolute;inset:0;z-index:-2;background-position:center 45%;background-size:cover;background-repeat:no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--asphalte) 0%,color-mix(in srgb,var(--asphalte) 88%,transparent) 48%,color-mix(in srgb,var(--asphalte) 50%,transparent) 100%),linear-gradient(0deg,var(--asphalte) 0%,transparent 40%)}
.hero .wrap{padding-block:56px 64px;display:grid;gap:22px}
.hero .lead{font-size:1.18rem;max-width:42ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--asphalte) 70%,transparent);border:1px solid color-mix(in srgb,var(--craie) 22%,transparent);font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.88rem}
.cta{display:flex;flex-wrap:wrap;gap:10px}

section{padding-block:64px}
.sec-head{display:grid;gap:12px;margin-bottom:30px;max-width:720px}
.sec-head p{color:var(--gris);font-size:1.08rem}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bloc{background:var(--asphalte-2);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.bloc p{color:var(--gris)}
.liste-v{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.liste-v li{display:flex;gap:10px;align-items:baseline}
.liste-v li::before{content:"";flex:none;width:8px;height:8px;background:var(--jaune);transform:translateY(-2px) rotate(45deg)}

/* formulaires */
form.carte-f{display:grid;gap:14px;background:var(--asphalte-2);border-radius:var(--r);padding:22px;min-width:0}
.champ{display:grid;gap:6px;min-width:0}
.champ label{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--gris)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;font-size:16px;color:var(--craie);background:var(--asphalte);border:2px solid var(--bitume);border-radius:var(--r);padding:12px 14px}
.champ textarea{min-height:96px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--jaune);outline:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.accord{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.accord input{width:22px;height:22px;flex:none;accent-color:var(--jaune);margin-top:2px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.erreur{margin:0;padding:12px 14px;border-left:4px solid var(--rouge);background:color-mix(in srgb,var(--rouge) 14%,var(--asphalte-2));border-radius:0 var(--r) var(--r) 0}
.merci{background:var(--asphalte-2);border-radius:var(--r);padding:26px;display:grid;gap:12px;border-top:4px solid var(--vert)}
.merci h3{color:var(--vert)}

/* plaque */
.plaque{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;border:2px solid #111;background:#fff;color:#111;font-family:var(--f-label);font-weight:700;letter-spacing:.08em;line-height:1}
.plaque i{background:var(--bleu);width:12px}
.plaque span{padding:4px 8px}

/* pied */
footer.pied{background:var(--asphalte-2);padding-block:36px;margin-top:10px}
.pied .rang{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:22px;color:var(--gris);font-size:.92rem}
.pied a{color:var(--gris)}
.pied .villes{display:flex;flex-wrap:wrap;gap:6px 14px}
.phare{background:none;border:0;padding:4px;cursor:pointer;color:var(--gris);display:grid;justify-items:center;gap:2px}
.phare svg{width:36px;height:48px;overflow:visible}
.faisceau{transform-origin:20px 13px;opacity:0;animation:balaye 9s ease-in-out infinite}
@keyframes balaye{0%,70%{opacity:0;transform:rotate(-40deg)}78%{opacity:.9}86%{opacity:.9;transform:rotate(40deg)}92%,100%{opacity:0;transform:rotate(40deg)}}
.lampe{animation:lampe 9s ease-in-out infinite}
@keyframes lampe{0%,70%{fill:var(--bitume)}76%,88%{fill:var(--jaune)}94%,100%{fill:var(--bitume)}}
.phaar{font-family:var(--f-label);font-size:.72rem;letter-spacing:.18em;color:var(--gris);text-decoration:none;opacity:.55}

/* barre d'appel mobile */
.callbar{display:none}
@media (max-width:900px){.nav{display:none}.grille{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  section{padding-block:48px}
  .grille,.duo{grid-template-columns:1fr}
  .top .appel .num{display:none}
  .marque b{font-size:1.1rem}
  .callbar{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--asphalte);border-top:3px solid var(--jaune);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .callbar .btn{min-height:50px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.faisceau{opacity:0}}