
:root{
  --bleu:#14448F;
  --bleu-vif:#1667C8;
  --bleu-nuit:#0C2B5C;
  --jaune:#FFC72C;
  --blanc:#ffffff;
  --gris:#F1F3F6;
  --gris-ligne:#DCE1E8;
  --encre:#16191F;
  --texte:#3A4250;

  --fond:var(--blanc);
  --surface:var(--gris);
  --bord:var(--gris-ligne);
  --titre:var(--bleu-nuit);
  --corps:var(--texte);

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#0E1218; --surface:#161C25; --bord:#26303D;
    --titre:#EAF1FB; --corps:#AFBBCB; --encre:#EAF1FB;
  }
}
:root[data-theme="dark"]{
  --fond:#0E1218; --surface:#161C25; --bord:#26303D;
  --titre:#EAF1FB; --corps:#AFBBCB; --encre:#EAF1FB;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--fond);color:var(--corps);
  font-family:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{color:var(--titre);margin:0;line-height:1.06;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.05rem,6.2vw,3.85rem)}
h2{font-size:clamp(1.6rem,4.2vw,2.6rem)}
h3{font-size:1.18rem;line-height:1.25}
p{margin:0}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(3.4rem,7vw,5.8rem) 0}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:2px}

/* ---------- barre ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bleu);color:#fff}
.bar-in{display:flex;align-items:center;gap:1.1rem;min-height:76px;justify-content:space-between}
.mark{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;flex:0 0 auto}
.mark b{font-size:1.7rem;font-weight:800;font-style:italic;color:#fff}
.mark span{font-size:.92rem;font-weight:600;color:var(--jaune)}
.brand{display:flex;align-items:center;gap:1.1rem;min-width:0}
.dispo{font-size:.78rem;font-weight:700;color:var(--jaune);letter-spacing:.06em;
  border-left:1px solid rgba(255,255,255,.28);padding-left:1.1rem;white-space:nowrap}
.nav{display:flex;gap:1.35rem;font-size:.93rem;font-weight:500;margin-left:auto;white-space:nowrap}
.nav a{text-decoration:none;opacity:.88;padding:.25rem 0;border-bottom:2px solid transparent}
.nav a:hover{opacity:1;border-bottom-color:var(--jaune)}
.tel-bar{display:inline-flex;align-items:center;gap:.5rem;background:var(--jaune);color:#0C2B5C;
  text-decoration:none;font-weight:800;padding:.6rem 1.05rem;border-radius:999px;white-space:nowrap;font-size:1.02rem}
.tel-bar:hover{background:#FFD75E}
.tel-bar svg{width:17px;height:17px;fill:currentColor}
@media(max-width:1180px){.nav{display:none}}
@media(max-width:560px){
  .brand{flex-direction:column;align-items:flex-start;gap:.1rem}
  .dispo{border-left:0;padding-left:0;font-size:.72rem;letter-spacing:.02em}
  .bar-in{min-height:64px}
}

/* ---------- hero ---------- */
.hero{background:var(--bleu);color:#fff;position:relative;overflow:hidden;padding-bottom:0}
.hero{padding-top:clamp(2.4rem,5vw,4rem)}
.hero-in{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--jaune)}
.baseline{margin-top:1.3rem;font-size:clamp(1.02rem,2.2vw,1.18rem);color:#D6E4FA;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;text-decoration:none;font-weight:700;
  padding:.92rem 1.55rem;border-radius:999px;border:2px solid transparent;font-size:1.01rem;cursor:pointer;font-family:inherit;line-height:1.2}
.btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.btn-j{background:var(--jaune);color:#0C2B5C}
.btn-j:hover{background:#FFD75E}
.btn-o{border-color:rgba(255,255,255,.5);color:#fff}
.btn-o:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-b{background:var(--bleu);color:#fff}
.btn-b:hover{background:var(--bleu-vif)}
.btn-w{background:#25D366;color:#06331A}
.btn-w:hover{background:#3ae07a}
.hero-van{margin-top:clamp(1.4rem,4vw,2.3rem);position:relative;z-index:2}
.hero-van img{width:min(1000px,100%);margin-inline:auto;border-radius:16px 16px 0 0}

/* bandeau jaune */
.strip{background:var(--jaune);color:#0C2B5C}
.strip ul{list-style:none;margin:0;padding:1.05rem 0;display:grid;gap:.55rem 2.4rem;
  grid-template-columns:repeat(3,auto);justify-content:space-between;font-weight:700;font-size:1rem}
.strip li{display:flex;align-items:center;gap:.6rem}
.strip svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
@media(max-width:780px){.strip ul{grid-template-columns:1fr;justify-content:start}}

/* ---------- offres ---------- */
.offre{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
@media(max-width:900px){.offre{grid-template-columns:1fr}}
.offre .intro{margin-top:1.1rem;max-width:52ch}
.photo{background:transparent;border:0;border-radius:14px;padding:1rem;display:flex;align-items:center;justify-content:center}
.prix-bloc{display:flex;align-items:baseline;gap:.6rem;margin:1.6rem 0 .2rem}
.prix{font-size:clamp(2.6rem,7vw,3.4rem);font-weight:800;color:var(--bleu-vif);line-height:1;letter-spacing:-.03em}
.prix-u{font-weight:700;font-size:1.05rem;color:var(--titre)}
.check{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.5rem;font-size:1rem}
.check li{padding-left:1.7rem;position:relative}
.check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--bleu-vif);font-weight:800}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.actions .btn{padding:.88rem 1.3rem}
.flotte{margin-top:2.6rem;border-top:3px solid var(--bleu);padding-top:1.3rem}
.flotte dl{margin:0}
.flotte .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--bord)}
.flotte dt{font-weight:700;color:var(--titre);font-size:1.04rem}
.flotte dd{margin:0;font-size:.95rem;text-align:right}
.qty{display:inline-block;background:var(--bleu);color:#fff;font-weight:800;font-size:.8rem;
  padding:.1rem .45rem;border-radius:4px;margin-right:.5rem;vertical-align:1px}
.note{margin-top:1.2rem;font-size:.93rem}
@media(max-width:560px){.flotte .row{flex-direction:column;gap:.15rem}.flotte dd{text-align:left;padding-left:2.1rem}}

/* double commande */
.dc{background:var(--bleu-nuit);color:#fff}
.dc h2,.dc h3{color:#fff}
.dc .intro,.dc p{color:#C7D7EF}
.dc .check{color:#E6EEF9}
.dc .check li::before{color:var(--jaune)}
.dc .prix{color:var(--jaune)}
.dc .prix-u{color:#fff}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.dc .intro{margin-top:1.1rem;max-width:48ch}
@media(max-width:900px){.dc-grid{grid-template-columns:1fr}}
.dc-grid .prix-bloc{margin-top:0}
.dc-photo{margin-top:clamp(2rem,4vw,3rem);border-radius:16px;overflow:hidden}
.dc-photo img{width:100%}
.tag{display:inline-block;background:var(--jaune);color:#0C2B5C;font-weight:800;font-size:.82rem;
  padding:.25rem .7rem;border-radius:999px;margin-bottom:1rem}
.publics{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
@media(max-width:780px){.publics{grid-template-columns:1fr}}
.public{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1.4rem}
.public h3{font-size:1.08rem;margin-bottom:.55rem}
.public p{font-size:.96rem}

/* ---------- étapes ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;border-top:2px solid var(--bord);padding-top:1rem}
.step::before{content:counter(s);display:block;font-size:.95rem;font-weight:800;color:var(--bleu-vif);margin-bottom:.5rem}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{font-size:.95rem}

/* ---------- faq ---------- */
.faq{background:var(--surface)}
.faq-list{margin-top:1.9rem;max-width:80ch}
details{border-bottom:1px solid var(--bord)}
summary{cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;font-weight:700;color:var(--titre);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.4rem;top:1.5rem;width:11px;height:11px;
  border-right:2.5px solid var(--bleu-vif);border-bottom:2.5px solid var(--bleu-vif);transform:rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
details p{padding:0 0 1.2rem;font-size:.97rem;max-width:70ch}

/* ---------- réservation ---------- */
.resa{background:var(--bleu);color:#fff}
.resa h2{color:#fff}
.resa .lede{color:#D6E4FA;margin-top:1rem;max-width:44ch}
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
@media(max-width:900px){.form-wrap{grid-template-columns:1fr}}
.form-wrap>*,.offre>*,.dc-grid>*,.two>*,.choix>*{min-width:0}
.f select{max-width:100%;text-overflow:ellipsis}
form{background:#fff;border-radius:16px;padding:clamp(1.4rem,3vw,2rem);color:var(--encre)}
.f{margin-bottom:1rem}
.f label,.leg{display:block;font-size:.86rem;font-weight:700;color:#14448F;margin-bottom:.35rem}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;
  border:1.5px solid #CBD3DF;border-radius:8px;background:#fff;color:#16191F}
.f textarea{min-height:76px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#1667C8;outline:none;box-shadow:0 0 0 3px rgba(22,103,200,.18)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:340px){.two{grid-template-columns:1fr}}
fieldset{border:0;padding:0;margin:0 0 1rem}
.choix{display:grid;gap:.5rem}
.choix.side{grid-template-columns:1fr 1fr}
@media(max-width:340px){.choix.side{grid-template-columns:1fr}}
@media(max-width:420px){.opt{padding:.6rem .6rem;font-size:.92rem;gap:.45rem}}
.opt{display:flex;align-items:center;gap:.6rem;border:1.5px solid #CBD3DF;border-radius:8px;
  padding:.65rem .8rem;cursor:pointer;font-size:.97rem;background:#fff;color:#16191F}
.opt input{accent-color:#1667C8;width:18px;height:18px;flex:0 0 auto;margin:0}
.opt:has(input:checked){border-color:#1667C8;background:#F2F7FF;font-weight:600}
.opt:focus-within{box-shadow:0 0 0 3px rgba(22,103,200,.18)}
.send{display:grid;gap:.7rem;margin-top:1.3rem}
.hint{font-size:.85rem;color:#5A6474;margin-top:.9rem}
.hint.err{color:#B4310A;font-weight:600}
.rental-terms{margin-top:1.3rem;padding:1rem;border:1px solid #CBD3DF;border-radius:8px;background:#F2F7FF;color:#0C2B5C;font-size:.9rem}
.rental-terms a{color:#14448F;text-decoration:underline;text-underline-offset:.2em;font-weight:700}
.rental-terms a:focus-visible,.foot-links a:focus-visible{outline:3px solid #1667C8;outline-offset:4px}
.terms-choice{display:flex;align-items:flex-start;gap:.75rem;margin-top:1rem;cursor:pointer;font-weight:600}
.terms-choice input{flex:0 0 auto;width:22px;height:22px;margin:.2rem 0;accent-color:#14448F}
.terms-choice input:focus-visible{outline:3px solid #1667C8;outline-offset:3px}
.terms-choice:has(input[aria-invalid="true"]){color:#B4310A}
.rental-terms p+p{margin-top:.75rem}
.merci{display:none;background:#fff;border:2px solid #1667C8;border-radius:16px;padding:1.6rem;color:#0C2B5C}
.merci h3{font-size:1.15rem;margin-bottom:.6rem;color:#0C2B5C}
.merci p{font-size:.98rem;margin-bottom:.6rem}
.merci a{color:#14448F}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.1rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list svg{width:22px;height:22px;fill:var(--jaune);flex:0 0 auto;margin-top:.2rem}
.contact-list b{display:block;color:#fff}
.contact-list span{color:#C7D7EF;font-size:.95rem}
.contact-list a{color:#fff;text-decoration:none;border-bottom:2px solid var(--jaune)}
.prevoir{margin-top:2.2rem;border-top:1px solid rgba(255,255,255,.2);padding-top:1.4rem}
.prevoir h3{color:#fff;font-size:1.02rem;margin-bottom:.7rem}
.prevoir ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;color:#D6E4FA;font-size:.95rem}
.prevoir li{padding-left:1.4rem;position:relative}
.prevoir li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--jaune);border-radius:2px}
#louer .prevoir{border-color:var(--bord)}
#louer .prevoir h3{color:var(--titre)}

/* ---------- pied ---------- */
footer{background:var(--bleu-nuit);color:#9FB6D6;padding:2.5rem 0;font-size:.9rem}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer a{color:#D6E4FA}
.foot-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}
.foot-links a{padding:.5rem 0;text-underline-offset:.2em}

/* ---------- barre mobile ---------- */
.mobile-cta{display:none}
@media(max-width:900px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
    box-shadow:0 -6px 20px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0px);background:#0C2B5C}
  .mobile-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    text-decoration:none;font-weight:800;font-size:1.02rem;padding:1rem .6rem}
  .mobile-cta .m-resa{background:#FFC72C;color:#0C2B5C}
  .mobile-cta .m-wa{background:#25D366;color:#06331A}
  .mobile-cta svg{width:18px;height:18px;fill:currentColor}
  html{scroll-padding-bottom:calc(var(--mobile-cta-height, calc(3.632rem + env(safe-area-inset-bottom,0px))) + 1rem)}
  body{padding-bottom:calc(var(--mobile-cta-height, calc(3.632rem + env(safe-area-inset-bottom,0px))) + 1rem)}
}
@media(max-width:700px){
  .tel-bar span.lbl{display:none}
  .tel-bar{padding:0;width:44px;height:44px;justify-content:center}
  .tel-bar svg{width:19px;height:19px}
}
.site-credit{flex-basis:100%;margin:0;font-size:.9rem}
.site-credit a{display:inline-block;padding:.5rem 0}

[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--header-height,76px) + env(safe-area-inset-top,0px) + 12px)}
main:focus,section:focus{outline:none}
:focus-visible{outline:3px solid #0C2B5C;outline-offset:3px;box-shadow:0 0 0 6px #fff}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;transform:translateY(-180%);background:#fff;color:#0C2B5C;padding:12px;font-weight:700}
.skip-link:focus{transform:none}
.menu-toggle{font:inherit;border:1px solid #fff;background:transparent;color:#fff;border-radius:8px;min-width:44px;min-height:44px;cursor:pointer;font-size:1.4rem}
.bar-in{position:relative}
@media(min-width:1181px){.brand{flex-direction:column;align-items:flex-start;gap:2px;flex-shrink:0}.dispo{border:0;padding:0;font-size:.65rem;letter-spacing:.02em}.nav{gap:1rem;font-size:.85rem}.tel-bar{font-size:.95rem}}
.field-error{color:#9e2606;font-size:.9rem;margin-top:.35rem;font-weight:600}
[aria-invalid="true"]{border-color:#9e2606!important}
form{color:#16191F;color-scheme:light}
form .hint{margin:0 0 1rem}
form a{color:#14448F}
.rental-terms{font-size:.88rem}
.rental-terms p{overflow-wrap:anywhere}
.rental-terms #terms-status{font-size:.83rem;font-weight:400}
fieldset .leg{padding:0}
#wa-fallback{font-size:.9rem;margin-top:1rem}
.flotte dd{padding-left:0}
.prix-note{font-size:.95rem;margin:.6rem 0}
img{object-fit:contain}
h1,h2{text-wrap:balance}
@media(max-width:1180px){
  .bar-in{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;padding-block:8px}
  .brand{grid-column:1;min-width:0}
  .menu-toggle{grid-column:2;grid-row:1}
  .tel-bar{grid-column:3;grid-row:1;width:44px;height:44px;padding:0;justify-content:center}
  .tel-bar .lbl{display:none}
  .nav{display:flex;grid-column:1/-1;flex-direction:column;gap:0;margin:0;white-space:normal;background:#14448F;padding:.5rem;border:1px solid #ffffff66;border-radius:8px;max-height:calc(100dvh - var(--header-height,90px) - var(--mobile-cta-height,60px) - 16px);overflow-y:auto}
  .bar-in:has(.menu-toggle:not([hidden])) .nav{position:absolute;top:100%;left:0;right:0;box-shadow:0 6px 12px #0004}
  .nav a{padding:12px;min-height:44px;opacity:1}
}
@media(max-width:560px){.brand{gap:2px}.dispo{white-space:normal;font-size:.64rem;line-height:1.3}.mark b{font-size:1.45rem}.mark span{font-size:.82rem}.bar-in{min-height:72px}.two{grid-template-columns:1fr}}
@media(max-height:500px) and (max-width:900px){.bar{position:relative}.mobile-cta a{padding:.65rem}.hero{padding-top:1.5rem}}

.prix-bloc{flex-wrap:wrap}.prix-u{white-space:nowrap}
