/* ============================================================
   ACA ASSURANCES — Offre Auto -25 %
   style.css
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marque */
  --blue:        #0055D4;
  --blue-dark:   #003A99;
  --blue-deep:   #002A6E;
  --blue-soft:   #E8F0FE;
  --blue-tint:   #F2F6FE;

  /* Neutres */
  --ink:         #0A1633;
  --ink-2:       #24314F;
  --slate:       #5A6683;
  --slate-light: #8A93A8;
  --line:        #E3E9F5;
  --mist:        #F4F7FC;
  --white:       #FFFFFF;

  /* Accents */
  --sunset:      #FF8A3D;   /* rappel du coucher de soleil du littoral */
  --success:     #12B76A;
  --danger:      #D92D20;

  /* Dégradés */
  --grad-blue:   linear-gradient(135deg, #0055D4 0%, #003A99 100%);
  --grad-deep:   linear-gradient(160deg, #003A99 0%, #001B4A 100%);

  /* Ombres */
  --sh-xs: 0 1px 2px rgba(10,22,51,.06);
  --sh-sm: 0 2px 8px rgba(10,22,51,.06), 0 1px 2px rgba(10,22,51,.04);
  --sh-md: 0 10px 30px rgba(10,22,51,.08), 0 2px 6px rgba(10,22,51,.04);
  --sh-lg: 0 24px 60px rgba(10,22,51,.12), 0 4px 12px rgba(10,22,51,.05);
  --sh-blue: 0 12px 28px rgba(0,85,212,.28);

  /* Rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Rythme */
  --shell: 1240px;
  --gap: 24px;
  --section-y: clamp(64px, 8vw, 120px);

  /* Typo */
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Pictogramme d'alerte des messages d'erreur (intégré, sans CDN) */
  --ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.1 5h2.2v7h-2.2zm0 9h2.2v2.2h-2.2z'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,picture{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:800; line-height:1.12; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-dark); }
button{ font:inherit; color:inherit; }
abbr[title]{ text-decoration:none; color:var(--blue); }

:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--blue); color:#fff; padding:12px 20px;
  border-radius:var(--r-sm); font-weight:600; transition:top .2s;
}
.skip-link:focus{ top:16px; color:#fff; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.shell-narrow{ max-width:900px; }

.section{ padding-block:var(--section-y); }
.section-head{ max-width:720px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.section-eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.section-title{ font-size:clamp(1.75rem,3.6vw,2.85rem); }
.section-lede{ margin-top:16px; color:var(--slate); font-size:clamp(1rem,1.4vw,1.1rem); }


/* ---------- Icônes SVG intégrées ---------- */
/* Aucune dépendance externe : les navigateurs intégrés aux applications
   (Messenger, Instagram) bloquent souvent les CDN de polices d'icônes. */
.ico{
  width:1em; height:1em; flex:none;
  display:inline-block; vertical-align:-.14em;
  overflow:visible; pointer-events:none;
}
.btn .ico{ width:1.05em; height:1.05em; }
.card-icon .ico{ width:1.5rem; height:1.5rem; vertical-align:0; }
.formule-body .ico{ width:1.15rem; height:1.15rem; vertical-align:0; }
.avis-quote{ width:1.6rem; height:1.6rem; }
.map-placeholder .ico{ width:2.4rem; height:2.4rem; }
.floater .ico{ width:1.15rem; height:1.15rem; }
.checkbox-box .ico{ width:.78rem; height:.78rem; stroke-width:2.6; }
.slider-btn .ico,
.hero-scroll .ico{ width:1rem; height:1rem; }

/* ---------- 3. Boutons ---------- */
.btn{
  --btn-bg:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border:0; border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  cursor:pointer; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn .ico{ font-size:.95em; }
.btn-sm{ padding:10px 20px; font-size:.9rem; }
.btn-lg{ padding:18px 34px; font-size:1.05rem; }
.btn-block{ display:flex; width:100%; }

.btn-primary{ background:var(--grad-blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,85,212,.34); }
.btn-primary:active{ transform:translateY(0); }

.btn-outline{ background:transparent; color:var(--blue); box-shadow:inset 0 0 0 2px var(--line); }
.btn-outline:hover{ color:var(--blue-dark); box-shadow:inset 0 0 0 2px var(--blue); background:var(--blue-tint); }

.btn-ghost{ background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); backdrop-filter:blur(8px); }
.btn-ghost:hover{ color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1.5px #fff; }

.btn-light{ background:#fff; color:var(--blue-dark); box-shadow:var(--sh-md); }
.btn-light:hover{ color:var(--blue-dark); transform:translateY(-2px); box-shadow:var(--sh-lg); }

/* état chargement */
.btn-spinner{
  position:absolute; inset:0; display:none; place-items:center;
}
.btn-spinner::after{
  content:""; width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn-label{ opacity:0; }
.btn.is-loading .btn-spinner{ display:grid; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- 4. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,0);
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line), var(--sh-sm);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; color:inherit; }
.brand-mark{ width:46px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-size:1.12rem; font-weight:700; color:#fff; letter-spacing:-.01em; transition:color .35s; }
.brand-text small{ font-size:.68rem; color:rgba(255,255,255,.75); letter-spacing:.02em; transition:color .35s; }
.site-header.is-stuck .brand-text strong{ color:var(--blue); }
.site-header.is-stuck .brand-text small{ color:var(--slate); }
.site-header .brand-mark{ filter:brightness(0) invert(1); transition:filter .35s; }
.site-header.is-stuck .brand-mark{ filter:none; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-phone{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; color:#fff; font-size:1rem; transition:color .35s;
}
.header-phone:hover{ color:#fff; }
.site-header.is-stuck .header-phone{ color:var(--blue); }
.site-header.is-stuck .header-phone:hover{ color:var(--blue-dark); }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 24px); padding-bottom:96px;
  background:var(--blue-deep);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:-6% 0 -6% 0; z-index:-3; will-change:transform; }
/* <picture> n'a pas de hauteur propre : sans cette règle, le height:100%
   de l'image ne peut pas se calculer et elle retombe sur ses proportions
   natives, laissant le bas du hero sans photo. */
.hero-media picture{ display:block; width:100%; height:100%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:72% 55%; }
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(0,20,58,.94) 0%, rgba(0,26,72,.86) 34%, rgba(0,32,84,.42) 60%, rgba(0,32,84,.12) 82%, rgba(0,32,84,.30) 100%),
    linear-gradient(180deg, rgba(0,18,52,.55) 0%, rgba(0,18,52,0) 30%, rgba(0,14,40,.55) 100%);
}
.hero-horizon{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,138,61,.85) 30%, rgba(255,255,255,.9) 55%, transparent);
  opacity:.55;
}
.hero-inner{ position:relative; }
.hero-copy{ max-width:660px; color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow .ico{ color:var(--sunset); font-size:.8em; }

.hero-title{ margin:22px 0 0; color:#fff; }
.hero-title-sur{
  display:block; font-size:clamp(1.35rem,3vw,2rem); font-weight:600;
  letter-spacing:.02em; opacity:.92;
}
.hero-figure{
  position:relative; display:flex; align-items:flex-start; gap:.02em;
  margin:-.06em 0 -.04em -.045em;
  font-size:clamp(5.4rem,15.5vw,11.5rem);
  font-weight:800; letter-spacing:-.05em; line-height:.86;
  overflow:hidden;
}
.hero-figure-num{
  background:linear-gradient(180deg,#fff 20%, #CFE0FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 24px 60px rgba(0,0,0,.25);
}
.hero-figure-pct{ font-size:.46em; font-weight:700; margin-top:.24em; color:#fff; letter-spacing:-.02em; }
.hero-sweep{
  position:absolute; top:0; bottom:0; left:-40%; width:34%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:sweep 4.6s var(--ease) 1.1s 2;
}
@keyframes sweep{ 0%{ left:-45%; } 45%,100%{ left:125%; } }

.hero-title-sub{
  display:block; margin-top:.1em;
  font-size:clamp(1.15rem,2.6vw,1.85rem); font-weight:700; letter-spacing:-.01em;
}
.hero-lede{
  margin-top:20px; max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.12rem); color:rgba(255,255,255,.9);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:34px;
  font-size:.9rem; color:rgba(255,255,255,.88); font-weight:500;
}
.hero-trust li{ display:inline-flex; align-items:center; gap:9px; }
.hero-trust .ico{ color:#8FC0FF; }

.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; display:grid; justify-items:center; gap:10px;
  color:rgba(255,255,255,.8); font-size:.9rem;
}
.hero-scroll:hover{ color:#fff; }
.hero-scroll-line{ width:1px; height:38px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.8)); }
.hero-scroll .ico{ animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(6px); opacity:1; } }

/* ---------- 6. Compteurs ---------- */
.stats{ background:var(--white); padding-block:clamp(40px,5vw,64px); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  background:var(--mist); border-radius:var(--r-xl); padding:clamp(26px,3vw,40px) clamp(18px,2vw,32px);
  box-shadow:var(--sh-sm);
}
.stat{ text-align:center; padding-inline:12px; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line);
}
.stat-num{
  display:block; font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em;
  color:var(--blue); line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-suffix{ color:var(--sunset); }
.stat-label{ display:block; margin-top:10px; font-size:.9rem; color:var(--slate); }

/* ---------- 7. Avantages ---------- */
.section-avantages{ background:var(--white); }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:34px 28px 32px; border-radius:var(--r-lg);
  background:var(--white); box-shadow:var(--sh-md);
  border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; z-index:-1;
  background:var(--grad-blue); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.card:hover::after{ transform:scaleX(1); }
.card-icon{
  display:grid; place-items:center; width:60px; height:60px; margin-bottom:22px;
  border-radius:18px; background:var(--grad-blue); color:#fff; font-size:1.35rem;
  box-shadow:var(--sh-blue);
  transition:transform .35s var(--ease);
}
.card:hover .card-icon{ transform:rotate(-6deg) scale(1.06); }
.card-title{ font-size:1.12rem; margin-bottom:10px; }
.card-text{ color:var(--slate); font-size:.95rem; }

.eligibility{
  display:flex; align-items:flex-start; gap:12px;
  max-width:820px; margin:clamp(32px,4vw,48px) auto 0;
  padding:18px 24px; border-radius:var(--r-md);
  background:var(--blue-tint); color:var(--ink-2); font-size:.92rem;
  border:1px solid #DCE7FB;
}
.eligibility .ico{ color:var(--blue); margin-top:3px; }

/* ---------- 8. Formulaire ---------- */
.section-form{
  background:
    radial-gradient(1200px 500px at 50% -10%, #EAF1FE 0%, transparent 70%),
    var(--mist);
}
.form-card{
  max-width:980px; margin-inline:auto;
  background:var(--white); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg); border:1px solid var(--line);
  padding:clamp(26px,4vw,52px);
}

/* Stepper */
.stepper{ margin-bottom:clamp(28px,3.5vw,40px); }
.stepper-track{
  position:relative; height:3px; border-radius:2px; background:var(--line);
  margin:0 auto 0; max-width:100%;
}
.stepper-fill{
  position:absolute; inset:0 auto 0 0; width:12.5%;
  border-radius:2px; background:var(--grad-blue);
  transition:width .5s var(--ease);
}
.stepper-list{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:-16px;
}
.stepper-item{ display:grid; justify-items:center; gap:8px; text-align:center; }
.stepper-dot{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--white); color:var(--slate-light);
  box-shadow:inset 0 0 0 2px var(--line);
  font-size:.85rem; font-weight:700;
  transition:background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.stepper-name{ font-size:.78rem; font-weight:600; color:var(--slate-light); transition:color .35s; }
.stepper-item.is-current .stepper-dot{ background:var(--grad-blue); color:#fff; box-shadow:var(--sh-blue); transform:scale(1.08); }
.stepper-item.is-current .stepper-name{ color:var(--blue); }
.stepper-item.is-done .stepper-dot{ background:var(--blue-soft); color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue); }
.stepper-item.is-done .stepper-name{ color:var(--ink-2); }
.stepper-status{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Étapes */
.step{ border:0; margin:0; padding:0; min-width:0; }
.step[hidden]{ display:none; }
.step.is-active{ animation:stepIn .45s var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.step-legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  padding:0; margin-bottom:26px;
  font-size:1.35rem; font-weight:800; color:var(--ink); letter-spacing:-.02em;
}
.step-index{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:6px 12px; border-radius:var(--r-pill);
}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ margin-bottom:20px; min-width:0; }
.grid-2 .field{ margin-bottom:0; }
.field-full{ grid-column:1 / -1; }
.grid-2 + .field{ margin-top:20px; }

.field label,
.field-legend{
  display:block; margin-bottom:8px;
  font-size:.86rem; font-weight:600; color:var(--ink);
}
.opt{ color:var(--slate-light); font-weight:500; }

.input-wrap{ position:relative; display:flex; align-items:center; }
.input-wrap > .ico{
  position:absolute; left:16px; color:var(--slate-light); font-size:.92rem;
  pointer-events:none; transition:color .25s;
}
.input-wrap:focus-within > .ico{ color:var(--blue); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%; padding:15px 16px 15px 44px;
  font:inherit; font-size:.98rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
  appearance:none; -webkit-appearance:none;
}
.field textarea{ padding-left:16px; resize:vertical; min-height:110px; line-height:1.55; }
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6683' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:16px;
  padding-right:44px;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--slate-light); }
.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:#CBD7EE; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,85,212,.12);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--danger); background:#FFF7F6;
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus{ box-shadow:0 0 0 4px rgba(217,45,32,.13); }

.hint{ margin-top:7px; font-size:.78rem; color:var(--slate-light); }
.counter-hint{ text-align:right; }

.error{
  display:none; align-items:center; gap:7px;
  margin-top:7px; font-size:.8rem; font-weight:600; color:var(--danger);
}
.error.is-visible{ display:flex; animation:errIn .3s var(--ease) both; }
.error::before{
  content:""; flex:none; width:15px; height:15px;
  background:currentColor; border-radius:50%;
  -webkit-mask:var(--ico-alert) center/contain no-repeat;
          mask:var(--ico-alert) center/contain no-repeat;
}
@keyframes errIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.field.shake .input-wrap,
.field.shake .choice-row,
.field.shake .formules,
.field.shake .checkbox{ animation:shake .38s var(--ease); }
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  30%,70%{ transform:translateX(4px); }
  50%{ transform:translateX(-4px); }
}

/* Radios illustrés */
.choice-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice{ position:relative; display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice-body{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 12px; border-radius:var(--r-md);
  border:1.5px solid var(--line); background:var(--white);
  font-size:.92rem; font-weight:600; color:var(--ink-2); text-align:center;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.choice-body .ico{ color:var(--slate-light); transition:color .25s; }
.choice:hover .choice-body{ border-color:#BFD3F5; transform:translateY(-2px); }
.choice input:checked + .choice-body{
  border-color:var(--blue); background:var(--blue-tint); color:var(--blue-dark);
  box-shadow:0 6px 18px rgba(0,85,212,.14);
}
.choice input:checked + .choice-body .ico{ color:var(--blue); }
.choice input:focus-visible + .choice-body{ outline:3px solid var(--blue); outline-offset:3px; }

/* Formules */
.formules{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.formule{ position:relative; display:block; cursor:pointer; }
.formule input{ position:absolute; opacity:0; width:1px; height:1px; }
.formule-body{
  display:grid; justify-items:start; gap:5px;
  padding:22px 22px 20px; border-radius:var(--r-lg);
  border:1.5px solid var(--line); background:var(--white);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.formule-body .ico{
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:8px;
  border-radius:13px; background:var(--mist); color:var(--slate); font-size:1.05rem;
  transition:background-color .3s, color .3s;
}
.formule-body strong{ font-size:1rem; color:var(--ink); font-weight:700; }
.formule-body small{ font-size:.82rem; color:var(--slate); }
.formule:hover .formule-body{ border-color:#BFD3F5; transform:translateY(-3px); box-shadow:var(--sh-sm); }
.formule input:checked + .formule-body{
  border-color:var(--blue); background:var(--blue-tint);
  box-shadow:0 10px 26px rgba(0,85,212,.16);
}
.formule input:checked + .formule-body .ico{ background:var(--grad-blue); color:#fff; }
.formule input:focus-visible + .formule-body{ outline:3px solid var(--blue); outline-offset:3px; }

/* Récapitulatif */
.recap{
  margin:26px 0; padding:22px 24px;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--r-lg);
}
.recap-title{
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.recap-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 24px; margin:0; }
.recap-list div{ min-width:0; }
.recap-list dt{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-light); font-weight:600; }
.recap-list dd{ margin:2px 0 0; font-size:.95rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }

/* Consentement */
.consent{ margin-top:8px; }
/* `.field label` impose display:block avec une spécificité supérieure :
   on qualifie le sélecteur pour que la case reste alignée avec son texte. */
.field label.checkbox,
label.checkbox{ display:flex; align-items:flex-start; gap:14px; cursor:pointer; margin-bottom:0; }
.checkbox input{ position:absolute; opacity:0; width:1px; height:1px; }
.checkbox-box{
  flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:1px;
  border-radius:7px; border:1.5px solid var(--line); background:var(--white);
  color:#fff; font-size:.7rem;
  transition:background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.checkbox-box .ico{ opacity:0; transform:scale(.5); transition:opacity .2s, transform .2s var(--ease); }
.checkbox input:checked + .checkbox-box{ background:var(--grad-blue); border-color:var(--blue); }
.checkbox input:checked + .checkbox-box .ico{ opacity:1; transform:scale(1); }
.checkbox input:focus-visible + .checkbox-box{ outline:3px solid var(--blue); outline-offset:3px; }
.checkbox-text{ font-size:.9rem; color:var(--ink-2); line-height:1.55; font-weight:500; }
.checkbox-text a{ text-decoration:underline; text-underline-offset:2px; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-alert{
  margin:18px 0 0; padding:14px 18px; border-radius:var(--r-md);
  background:#FEF3F2; border:1px solid #FDA29B; color:#912018;
  font-size:.9rem; font-weight:600;
}
.form-alert[hidden]{ display:none; }
.form-alert code{
  display:inline-block; padding:2px 7px; border-radius:5px;
  background:rgba(145,32,24,.1); font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:.9em; font-weight:600;
}

.step-nav{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:32px; padding-top:26px; border-top:1px solid var(--line);
}
.btn-submit{ min-width:265px; }
.form-secure{
  margin-top:18px; text-align:center; font-size:.8rem; color:var(--slate-light);
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ---------- 9. Avis ---------- */
.section-avis{ background:var(--white); }
.slider{ max-width:900px; margin-inline:auto; }
.slider-viewport{ overflow:hidden; border-radius:var(--r-xl); }
.slider-viewport:focus-visible{ outline:3px solid var(--blue); outline-offset:4px; }
.slider-track{ display:flex; transition:transform .6s var(--ease); }
.slide{ flex:0 0 100%; padding:4px; }
.avis{
  position:relative; margin:0; padding:clamp(30px,4vw,46px);
  border-radius:var(--r-xl); background:var(--grad-deep); color:#fff;
  box-shadow:var(--sh-lg); overflow:hidden;
  min-height:100%;
}
.avis::before{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,138,61,.28), transparent 68%);
}
.avis-quote{ font-size:1.6rem; color:rgba(255,255,255,.35); margin-bottom:16px; display:block; }
.avis p{ position:relative; font-size:clamp(1.02rem,1.7vw,1.22rem); line-height:1.6; font-weight:500; }
.avis footer{ position:relative; margin-top:26px; display:flex; flex-direction:column; gap:8px; }
.avis-stars{ color:#FFB020; letter-spacing:3px; font-size:.9rem; }
.avis cite{ font-style:normal; font-size:.88rem; color:rgba(255,255,255,.75); }

.slider-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px; }
.slider-btn{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white); color:var(--blue);
  cursor:pointer; transition:background-color .25s, color .25s, transform .25s var(--ease), border-color .25s;
}
.slider-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:scale(1.06); }
.slider-dots{ display:flex; gap:9px; }
.slider-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:var(--r-pill);
  background:var(--line); cursor:pointer; transition:width .35s var(--ease), background-color .35s;
}
.slider-dots button[aria-selected="true"]{ width:28px; background:var(--blue); }

/* ---------- 10. Agences ---------- */
.section-agences{ background:var(--mist); }
.agences-layout{ display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:clamp(20px,3vw,34px); align-items:start; }
.agences-list{ display:grid; gap:12px; }
.agence-btn{
  width:100%; display:grid; gap:4px; text-align:left; cursor:pointer;
  padding:20px 22px; border-radius:var(--r-lg);
  border:1.5px solid var(--line); background:var(--white);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s;
}
.agence-btn:hover{ transform:translateX(4px); border-color:#BFD3F5; box-shadow:var(--sh-sm); }
.agence.is-selected .agence-btn{ border-color:var(--blue); background:var(--blue-tint); box-shadow:0 8px 22px rgba(0,85,212,.13); }
.agence-city{ display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:700; color:var(--ink); }
.agence-city .ico{ color:var(--blue); }
.agence-meta{ font-size:.85rem; color:var(--slate); padding-left:26px; }

.agence-contact{
  margin-top:6px; padding:24px; border-radius:var(--r-lg);
  background:var(--grad-blue); color:#fff; box-shadow:var(--sh-blue);
  display:grid; gap:10px;
}
.agence-contact-title{ font-weight:700; font-size:.98rem; }
.agence-phone{ font-size:1.3rem; font-weight:800; color:#fff; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.agence-phone:hover{ color:#fff; }
.agence-mail{ font-size:.88rem; color:rgba(255,255,255,.9); display:flex; align-items:center; gap:10px; }
.agence-mail:hover{ color:#fff; }

.map-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  min-height:440px; background:var(--white); box-shadow:var(--sh-md); border:1px solid var(--line);
}
.map-placeholder{
  position:absolute; inset:0; display:grid; place-items:center; padding:32px;
  background:
    radial-gradient(600px 300px at 30% 20%, #E9F1FE, transparent 70%),
    repeating-linear-gradient(45deg, #F7FAFF 0 14px, #F1F5FD 14px 28px);
  text-align:center;
}
.map-placeholder-inner{ max-width:360px; display:grid; justify-items:center; gap:12px; }
.map-placeholder .ico{ font-size:2.4rem; color:var(--blue); }
.map-placeholder-title{ font-size:1.15rem; font-weight:800; color:var(--ink); }
.map-placeholder-text{ font-size:.88rem; color:var(--slate); }
.map-placeholder-inner .btn{ margin-top:6px; }
.map-frame{ position:absolute; inset:0; }
.map-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- 11. FAQ ---------- */
.section-faq{ background:var(--white); }
.faq{ display:grid; gap:12px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.faq-item h3{ margin:0; font-size:inherit; font-weight:inherit; }
.faq-item.is-open{ border-color:#C9DAF8; box-shadow:var(--sh-sm); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 26px; border:0; background:transparent; cursor:pointer;
  font-size:1.02rem; font-weight:700; color:var(--ink); text-align:left; letter-spacing:-.01em;
  transition:color .25s;
}
.faq-q:hover{ color:var(--blue); }
.faq-q .ico{
  flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--blue-soft); color:var(--blue); font-size:.8rem;
  transition:transform .35s var(--ease), background-color .3s, color .3s;
}
.faq-item.is-open .faq-q .ico{ transform:rotate(135deg); background:var(--grad-blue); color:#fff; }
.faq-a{ padding:0 26px 24px; color:var(--slate); font-size:.96rem; }
.faq-a[hidden]{ display:none; }
.faq-a p{ max-width:70ch; }

/* ---------- 12. CTA final ---------- */
.cta-final{ padding-block:clamp(52px,6vw,80px); background:var(--grad-deep); color:#fff; }
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.cta-title{ color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); }
.cta-text{ margin-top:10px; color:rgba(255,255,255,.82); font-size:1.05rem; }

/* ---------- 13. Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.72); padding-top:clamp(48px,6vw,72px); font-size:.9rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px; }
.footer-logo{ width:62px; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer-name{ font-size:1.1rem; font-weight:700; color:#fff; }
.footer-tag{ margin-top:2px; font-size:.82rem; }
.footer-orias{ margin-top:16px; font-size:.78rem; color:rgba(255,255,255,.5); }
.footer-orias a{ color:rgba(255,255,255,.7); }
.footer-col-title{ color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul{ display:grid; gap:10px; }
.footer-col a{ color:rgba(255,255,255,.72); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:22px; border-top:1px solid rgba(255,255,255,.1); font-size:.82rem;
}
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ color:rgba(255,255,255,.72); }
.footer-legal a:hover{ color:#fff; }
.footer-disclaimer{ padding-bottom:34px; font-size:.72rem; color:rgba(255,255,255,.42); line-height:1.6; }

/* ---------- 14. Boutons flottants ---------- */
.floaters{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:grid; gap:12px; justify-items:end;
  /* Le conteneur reste en place même lorsque les boutons sont masqués :
     sans cela, il intercepterait les clics dans le coin inférieur droit. */
  pointer-events:none;
}
.floater{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border:0; border-radius:var(--r-pill);
  font-weight:700; font-size:.92rem; cursor:pointer; color:#fff;
  box-shadow:var(--sh-lg);
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease), box-shadow .3s;
}
.floaters.is-visible .floater{ transform:none; opacity:1; pointer-events:auto; }
.floater:hover{ color:#fff; transform:translateY(-3px); }
.floater-call{ background:var(--grad-blue); }
.floater-wa{ background:#25D366; }
.floater .ico{ font-size:1.05rem; }

/* ---------- 15. Modale ---------- */
.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,14,38,.6); backdrop-filter:blur(4px); animation:fadeIn .25s ease both; }
.modal-panel{
  position:relative; width:min(480px,100%); max-height:90vh; overflow-y:auto;
  background:var(--white); border-radius:var(--r-xl); padding:clamp(26px,4vw,38px);
  box-shadow:var(--sh-lg); animation:modalIn .35s var(--ease) both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  border:0; background:var(--mist); color:var(--slate); cursor:pointer; display:grid; place-items:center;
  transition:background-color .25s, color .25s;
}
.modal-close:hover{ background:var(--blue-soft); color:var(--blue); }
.modal-title{ font-size:1.45rem; margin-bottom:8px; }
.modal-text{ color:var(--slate); font-size:.93rem; margin-bottom:24px; }
body.is-locked{ overflow:hidden; }

/* ---------- 16. Animations au scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.is-visible{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--delay,0ms);
}

/* ---------- 17. Responsive ---------- */
@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:900px){
  .agences-layout{ grid-template-columns:1fr; }
  .map-card{ min-height:340px; }
  .formules{ grid-template-columns:1fr; }
  .header-phone span{ display:none; }
  .header-phone{ width:42px; height:42px; justify-content:center; border-radius:50%; background:rgba(255,255,255,.14); }
  .site-header.is-stuck .header-phone{ background:var(--blue-soft); }
}
/* Bouton d'en-tête : libellé long par défaut, court sur mobile */
.header-cta-short{ display:none; }
.header-cta{ white-space:nowrap; flex:none; }
.brand-text strong{ white-space:nowrap; }

/* Tablettes en portrait : le hero est aussi étroit et haut que sur mobile,
   le voile horizontal et le cadrage large ne conviennent pas davantage. */
@media (min-width:761px) and (max-width:1100px){
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 40px); padding-bottom:130px; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(0,20,58,.52) 0%, rgba(0,26,72,.74) 40%, rgba(0,26,72,.90) 68%, rgba(0,20,58,.95) 100%);
  }
  .hero-media img{ object-position:50% 30%; }
  .hero-copy{ max-width:none; }
}

@media (max-width:760px){
  :root{ --header-h:66px; }

  /* Le voile du hero est horizontal (texte à gauche, photo à droite).
     Sur mobile il masquerait toute l'image : on le bascule à la verticale
     pour dégager la voiture sous le texte. */
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 28px); padding-bottom:120px; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(0,20,58,.55) 0%, rgba(0,26,72,.76) 42%, rgba(0,26,72,.92) 70%, rgba(0,20,58,.96) 100%);
  }
  .hero-media img{ object-position:38% 26%; }
  .hero-lede{ font-size:.98rem; }
  .hero-scroll{ bottom:16px; }

  .brand-text small{ display:none; }
  .brand-text strong{ font-size:1rem; }
  .header-inner{ gap:10px; }
  .header-actions{ gap:10px; }
  .header-cta-long{ display:none; }
  .header-cta-short{ display:inline; }
  .header-cta{ padding:10px 16px; font-size:.86rem; }
  .brand-mark{ width:38px; }

  /* Barre de progression : les 4 libellés ne tiennent pas côte à côte.
     On garde les pastilles et on affiche l'étape en cours sous la barre. */
  .stepper-name{ display:none; }
  .stepper-status{
    position:static; width:auto; height:auto; overflow:visible;
    clip:auto; clip-path:none; white-space:normal;
    margin-top:16px; text-align:center;
    font-size:.85rem; font-weight:700; color:var(--blue);
  }
  .stepper-list{ margin-top:-15px; }

  /* La ligne d'état sous la barre annonce déjà « Étape 1 sur 4 » :
     le badge devient redondant sur un écran étroit. */
  /* Safari iOS zoome automatiquement sur tout champ dont la police
     descend sous 16 px. On force donc 16 px sur mobile. */
  .field input[type="text"],
  .field input[type="tel"],
  .field input[type="email"],
  .field input[type="date"],
  .field select,
  .field textarea{
    font-size:16px;
    padding-top:16px; padding-bottom:16px;
  }

  /* Cibles tactiles : 44 px minimum (recommandation Apple et WCAG) */
  .slider-dots{ gap:4px; }
  .slider-dots button{ height:44px; width:24px; background:transparent; position:relative; }
  .slider-dots button::after{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:9px; height:9px; border-radius:var(--r-pill);
    background:var(--line); transition:width .35s var(--ease), background-color .35s;
  }
  .slider-dots button[aria-selected="true"]{ width:40px; }
  .slider-dots button[aria-selected="true"]::after{ width:28px; background:var(--blue); }
  .footer-col ul{ gap:4px; }
  .footer-col a,
  .footer-legal a{ display:inline-block; padding:9px 0; }

  .step-index{ display:none; }
  .step-legend{ margin-bottom:22px; font-size:1.2rem; }

  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:22px 8px; }
  .stat:nth-child(3)::before{ display:none; }
  .grid-2{ grid-template-columns:1fr; }
  .grid-2 .field{ margin-bottom:0; }
  .choice-row{ grid-template-columns:1fr; }
  .step-nav{ flex-direction:column-reverse; align-items:stretch; }
  .step-nav .btn{ width:100%; }
  .btn-submit{ min-width:0; }
  .hero{ padding-bottom:110px; }
  .hero-trust{ gap:8px 20px; font-size:.84rem; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .cta-inner .btn{ width:100%; }
  .footer-bottom{ justify-content:flex-start; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .floater-label{ display:none; }
  /* Format compact, calé dans l'angle : l'emprise sur les champs
     du formulaire reste limitée à leur toute dernière marge. */
  .floaters{ right:12px; bottom:12px; gap:10px; }
  .floater{ width:52px; height:52px; padding:0; justify-content:center; border-radius:50%; }
  .floater .ico{ font-size:1.3rem; }
  .hero-media img{ object-position:66% 55%; }
  .recap-list{ grid-template-columns:1fr; }
}

/* ---------- 18. Préférences & impression ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero-media{ transform:none !important; }
}

@media print{
  .site-header,.floaters,.hero-scroll,.modal,.cta-final,.slider-controls{ display:none !important; }
  body{ color:#000; }
  .hero{ min-height:auto; color:#000; }
}