/* Voilà Garage, direction « Feu vert », thème clair seulement (pas de mode sombre). Une seule famille (Schibsted Grotesk), vert de feu de circulation pour la marque,
   vert foncé pour l'action, noir pneu pour le texte, gris béton pour les fonds. Mise en page de produit, pas de gabarit. */
:root{
  --ink:#121614; --ink-2:#4F5853; --paper:#FFFFFF; --soft:#F2F4F3; --soft-2:#E6EAE8; --line:#DDE2DF;
  --brand:#00A86B; --action:#007A4D; --action-ink:#FFFFFF; --action-hover:#006640; --deep:#E7F6EE; --deep-ink:#0F2A1D; --deep-2:#3E5148;
  --err:#B42318; --sms:#E9ECEA;
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--font)}
img,svg{max-width:100%}
a{color:var(--action)}
p{margin:0}
sup{font-size:.55em;line-height:0;vertical-align:.7em}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--font);line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,6.4vw,4.1rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:-.025em}
h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.small{font-size:.92rem;color:var(--ink-2)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font:700 1rem var(--font);padding:14px 24px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-go{background:var(--action);color:var(--action-ink)}
.btn-go:hover{background:var(--action-hover)}
.btn-line{background:transparent;color:inherit;border:1.5px solid var(--line)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:21}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.logo svg{width:26px;height:34px;flex:none}
.logo b{font:900 1.65rem/1 var(--font);letter-spacing:-.05em}
.logo span{font:700 .72rem var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.right{display:flex;align-items:center;gap:18px}
.links{display:flex;gap:20px}
.links a{color:var(--ink-2);text-decoration:none;font-weight:600}
.links a:hover{color:var(--ink)}
.lang{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;font:700 .82rem var(--font)}
.lang a,.lang span{padding:6px 10px;text-decoration:none;color:var(--ink-2)}
.lang [aria-current]{background:var(--action);color:#fff}

/* Héros */
.hero{padding-block:44px 64px}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero .grid > *{min-width:0}
.hero h1 em{font-style:normal;color:var(--action)}
.lead{font-size:1.2rem;color:var(--ink-2);margin-top:18px;max-width:38ch}
.finder{margin-top:28px;background:var(--soft);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px;max-width:520px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills button{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:600 .95rem var(--font);border-radius:999px;padding:9px 15px;cursor:pointer}
.pills button[aria-pressed="true"]{border-color:var(--action);background:var(--action);color:#fff}
.finder .go{display:flex;gap:8px}
.finder .go input{flex:1;min-width:0;background:var(--paper)}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:.95rem;color:var(--ink-2)}
.facts span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:8px;transform:translateY(-1px)}

/* Exemple de texto : écran iPhone (Messages) */
.iphone{justify-self:center;width:min(340px,100%);margin:0}
.iphone .screen{position:relative;background:#fff;border:11px solid #1C1C1E;border-radius:54px;overflow:hidden;
  box-shadow:0 0 0 2px #3A3A3C,0 40px 70px -30px rgba(18,22,20,.45);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:#000;-webkit-font-smoothing:antialiased}
.iphone .status{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 22px 0 30px;font-weight:600;font-size:15px;letter-spacing:-.2px}
.iphone .island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000}
.iphone .icons{display:flex;gap:5px;align-items:center}
.iphone .icons svg{fill:#000;color:#000}
.iphone .ihead{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:2px 14px 8px;background:#F6F6F6;border-bottom:.5px solid #D1D1D6;color:#007AFF}
.iphone .contact{display:flex;flex-direction:column;align-items:center;gap:3px}
.iphone .av{width:46px;height:46px;border-radius:50%;background:linear-gradient(#22C080,#00A86B);display:grid;place-items:center}
.iphone .av svg{width:19px;height:25px}
.iphone .nm{font-size:11.5px;color:#000;display:flex;align-items:center;gap:3px}
.iphone .nm svg{color:#8E8E93}
.iphone .video{justify-self:end}
.iphone .ithread{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;font-size:15px;line-height:1.3;letter-spacing:-.15px;min-height:330px}
.iphone .when{align-self:center;text-align:center;font-size:11px;color:#8E8E93;margin:0 0 8px;line-height:1.35}
.iphone .when b{font-weight:600}
.iphone .b{position:relative;max-width:76%;padding:7px 12px 8px;border-radius:18px;margin:0}
.iphone .b.in{align-self:flex-start;background:#E9E9EB;color:#000}
.iphone .b.out{align-self:flex-end;background:#34C759;color:#fff;margin-top:8px}
.iphone .b.tail{margin-bottom:6px}
.iphone .b.in + .b.in{margin-top:0}
.iphone .b.tail::before,.iphone .b.tail::after{content:"";position:absolute;bottom:0;height:20px}
.iphone .b.in.tail::before{left:-7px;width:20px;background:#E9E9EB;border-bottom-right-radius:16px 14px}
.iphone .b.in.tail::after{left:-26px;width:26px;background:#fff;border-bottom-right-radius:10px}
.iphone .b.out.tail::before{right:-7px;width:20px;background:#34C759;border-bottom-left-radius:16px 14px}
.iphone .b.out.tail::after{right:-26px;width:26px;background:#fff;border-bottom-left-radius:10px}
.iphone .receipt{align-self:flex-end;font-size:11px;color:#8E8E93;margin:-2px 4px 8px}
.iphone .ibar{display:flex;align-items:center;gap:8px;padding:6px 12px 26px}
.iphone .plus{width:32px;height:32px;border-radius:50%;background:#EEEEF0;color:#7C7C80;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:300}
.iphone .field{flex:1;display:flex;justify-content:space-between;align-items:center;border:1px solid #D1D1D6;border-radius:18px;padding:6px 12px;color:#C4C4C7;font-size:15px}
.iphone .field svg{color:#8E8E93}
.iphone .homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:#000}
.caption{text-align:center;margin-top:12px;font-size:.8rem;color:var(--ink-2)}

/* Scène autour du téléphone : bout de carte, deux notifications */
.visual{position:relative;padding:28px 0 0}
.stage{position:absolute;inset:70px 4% 46px;border-radius:32px;overflow:hidden;background:#DFF3E8}
.stage .map{width:100%;height:100%;display:block}
.visual .iphone{position:relative;z-index:1}
.float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 14px 10px 10px;
  box-shadow:0 14px 32px -12px rgba(15,42,29,.35),0 0 0 1px rgba(15,42,29,.06);font-size:.88rem;line-height:1.25}
.float b{display:block;font-weight:700}
.float small{display:block;color:var(--ink-2)}
.float .ic{flex:none;width:34px;height:34px;border-radius:10px;background:#E7F6EE;display:grid;place-items:center}
.float .ic svg{width:60%;height:60%}
.float .ic.ok{background:var(--brand);border-radius:50%}
.f1{left:0;top:15%;animation:bob 6s ease-in-out infinite}
.f2{right:0;bottom:12%;animation:bob 6s ease-in-out 3s infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}

/* Bande d'appel à l'action */
.cta-band{background:var(--action);color:#fff;padding-block:48px}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-band h2{color:#fff}
.cta-band p{color:#D6F0E2;margin-top:8px}
.btn-white{background:#fff;color:var(--action);font-weight:700}
.btn-white:hover{background:#EFFAF4}

/* Pages Réserver et Garages partenaires */
body.tint{background:#E7F6EE}
body.tint footer{background:#fff}
.book{padding-block:36px 72px}
.book-head{max-width:60ch;margin-bottom:24px}
.book-head h1{font-size:clamp(2rem,5vw,3rem)}
.book-head .lead{margin-top:10px}
.book-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start}
.book form.card,.book .card{border:0;box-shadow:0 20px 40px -24px rgba(15,42,29,.3);padding:26px}
.card.sent{background:#fff;border-radius:var(--r)}
.card.sent p{margin-top:8px;color:var(--ink-2)}
.book-side h2{font-size:1.15rem}
.book-side .checks{margin-top:18px}
.mini-steps{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:14px;counter-reset:m}
.mini-steps li{display:grid;grid-template-columns:30px 1fr;gap:2px 10px;counter-increment:m}
.mini-steps li::before{content:counter(m);grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.mini-steps span{color:var(--ink-2);font-size:.95rem}
.row3{display:grid;grid-template-columns:110px 1fr 1fr;gap:12px}
.row3 > *{min-width:0}
.hint{font-size:.85rem;color:var(--ink-2);margin-top:8px}

/* Sections */
section{padding-block:64px}
.soft{background:var(--soft)}
.split{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:start}
.split > *{min-width:0}

/* Services */
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
a.svc:hover h3{color:var(--action)}
.svc .ico{width:44px;height:44px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--action)}
.svc .ico svg{width:24px;height:24px}
.svc p{color:var(--ink-2);font-size:.95rem;margin-top:2px}
.svc .price{text-align:right;white-space:nowrap}
.svc .price small{display:block;font-size:.8rem;color:var(--ink-2)}
.svc .price b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.season{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand);color:#05140D;border-radius:999px;padding:2px 8px;vertical-align:2px}
.soon{margin-top:22px;font-size:.95rem;color:var(--ink-2)}
.soon ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.soon li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.88rem}
.soon b{color:var(--ink)}

/* Étapes */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;counter-reset:n}
.tl{padding:0 22px 0 0;position:relative}
.tl::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;margin-bottom:14px;position:relative;z-index:1}
.tl::after{content:"";position:absolute;top:20px;left:40px;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px)}
.tl:last-child::after{display:none}
.tl p{color:var(--ink-2);margin-top:6px;max-width:30ch}

/* Engagements */
.pledges{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px;margin-top:8px}
.pledge{border-top:3px solid var(--brand);padding-top:14px}
.pledge p{color:var(--ink-2);margin-top:6px}

/* Secteurs */
.zones{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.zones li{border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;color:var(--ink);font-weight:600;font-size:.92rem}
.zones li:first-child{border-color:var(--action);color:var(--action)}

/* Formulaire */
form.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row > *{min-width:0}
label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 5px;font-weight:600;font-size:.95rem}
label > input,label > select,label > textarea{flex-basis:100%}
.opt{font-weight:400;color:var(--ink-2)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--soft);border:1.5px solid var(--line);border-radius:10px;padding:12px;width:100%}
textarea{min-height:80px;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
legend{font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.dispo{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px 8px;align-items:center}
.dispo .day{font-weight:600;font-size:.95rem;padding-right:6px}
.dispo label{position:relative;display:block;margin:0;cursor:pointer}
.dispo input{position:absolute;opacity:0;width:1px;height:1px}
.dispo label span{display:block;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 6px;font-weight:500;font-size:.92rem;background:var(--soft);color:var(--ink-2)}
.dispo input:checked + span{border-color:var(--action);background:var(--action);color:#fff;font-weight:600}
.dispo input:focus-visible + span{outline:2px solid var(--action);outline-offset:2px}
.choices label{flex-direction:row;align-items:center;gap:8px;font-weight:500;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;background:var(--soft)}
.choices input{width:auto;accent-color:var(--action)}
.choices label:has(input:checked){border-color:var(--action);background:color-mix(in srgb,var(--brand) 14%,var(--paper))}
.consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:.9rem;color:var(--ink-2)}
.consent input{width:auto;margin-top:4px;accent-color:var(--action)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{color:var(--err);font-weight:600}
.checks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:10px;align-items:baseline}
.checks li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);transform:translateY(-2px)}

/* Garagistes */
.pro{background:var(--deep);color:var(--deep-ink);border-radius:20px;padding:36px;display:grid;grid-template-columns:1.3fr .7fr;gap:28px;align-items:center}
.pro > *{min-width:0}
.pro p,.pro li{color:var(--deep-2)}
.pro p{margin-top:12px}
.pro ul{margin:14px 0 0;padding-left:20px}
.pro .side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pro .mail{font-weight:700;color:var(--deep-ink);user-select:all}
.pro{border:1px solid #CDEBDB}

/* FAQ */
details{border-bottom:1px solid var(--line);padding-block:16px}
summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details p{margin-top:8px;color:var(--ink-2);max-width:65ch}

footer{border-top:1px solid var(--line);padding-block:36px calc(96px + env(safe-area-inset-bottom,0px));font-size:.95rem;color:var(--ink-2)}
footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}

/* Barre d'action mobile */
.mobile-cta{display:none}

/* Pages simples */
.simple{max-width:70ch;padding-block:40px 70px}
.simple h1{font-size:clamp(2rem,6vw,3rem)}
.simple h2{font-size:1.3rem;margin-top:30px}
.simple p,.simple li{color:var(--ink-2);margin-top:10px}

@media (max-width:880px){
  .hero .grid,.split,.pro{grid-template-columns:1fr}
  .pledges{grid-template-columns:1fr 1fr 1fr}
  .hero{padding-block:28px 48px}
  .iphone{width:min(300px,82%);margin-inline:auto}
  .stage{inset:60px 0 46px}
  .timeline{grid-template-columns:1fr;gap:22px}
  .tl::after{display:none}
  .links{display:none}
  .mobile-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:10px;align-items:center;justify-content:space-between;
    background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.08);
    padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .mobile-cta span{font-weight:700;font-size:.95rem;min-width:0;line-height:1.3}
  .mobile-cta small{display:block;font-weight:400;color:var(--ink-2)}
  .mobile-cta{transform:translateY(110%);transition:transform .25s ease}
  .mobile-cta.show{transform:none}
  .float{font-size:.8rem;padding:8px 11px 8px 8px}
  .float .ic{width:28px;height:28px}
  .f1{left:0;top:13%}
  .f2{right:0;bottom:11%}
  .book-grid{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .row,.pledges{grid-template-columns:1fr}
  .row3{grid-template-columns:1fr 1fr}
  .row3 > :first-child{grid-column:1/-1;max-width:160px}
  .dispo{grid-template-columns:88px 1fr 1fr}
  .svc{grid-template-columns:40px 1fr;row-gap:6px}
  .svc .price{grid-column:2;text-align:left}
  .svc .price small{display:inline;margin-right:6px}
  .finder .go{flex-direction:column}
  .right{gap:10px}
  .top .btn{padding:10px 16px}
}
.consent,.choices label{flex-wrap:nowrap}
.consent > input,.choices label > input,.dispo label > input{flex-basis:auto}