/* =========================================================
   Serrurier Assurance Habitation — feuille de style unique
   Monde visuel « tricolore moderne » : fond blanc, encre marine,
   bleu pour le motif et les liens, rouge pour l'appel.
   Formes : pleines, arrondies, sans filet ni ombre au repos.
   Police : Chillax (ITF, licence libre), auto-hébergée.
   ========================================================= */
@font-face { font-family: "Chillax"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/chillax-400.woff2") format("woff2"); }
@font-face { font-family: "Chillax"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/chillax-500.woff2") format("woff2"); }
@font-face { font-family: "Chillax"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/chillax-600.woff2") format("woff2"); }
@font-face { font-family: "Chillax"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/chillax-700.woff2") format("woff2"); }

:root {
  --bg: #ffffff;            /* blanc : le fond */
  --surface: #f3f6fb;       /* une marche plus bas, bleu très pâle */
  --surface-2: #e7edf8;     /* deux marches */
  --ink: #0b1f3a;           /* encre marine */
  --muted: #3a4760;         /* encre douce, notes secondaires seulement */
  --accent: #1b4ded;        /* bleu : le motif, les liens, la scène */
  --accent-2: #153fc4;      /* bleu pressé */
  --accent-ink: #ffffff;
  --blue-text: #163fb8;     /* bleu lisible en texte courant sur blanc */
  --sky: #9fb8ff;           /* bleu clair : les chiffres sur fond marine */
  --red: #e2192e;           /* rouge : l'appel */
  --red-2: #bf0f22;         /* rouge pressé */
  --red-ink: #ffffff;
  --night: #0b1f3a;         /* marine : le tarif de nuit, le pied de page */
  --night-ink: #f3f6fc;
  --field-1: #eef2f9;       /* gris-bleu */
  --field-2: #d9e4fa;       /* bleu pâle */
  --field-3: #e4ecff;       /* bleu pâle, une marche plus claire */
  --field-red: #fde8ea;     /* rouge pâle */
  --line: #cfd8e6;          /* tableaux et champs uniquement */
  --ok: #167a3d; --ok-bg: #d8f0df;
  --warn: #8a5a00; --warn-bg: #f8e9c4;
  --bad: #b3121f; --bad-bg: #fbdcdf;
  --font: "Chillax", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.85rem, 1.1rem + 2.5vw, 3.4rem);
  --step-display: clamp(2.1rem, 0.9rem + 3.9vw, 4.4rem);
  --edge: max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin)));
  --margin: clamp(20px, 2.6vw, 40px);
  --max: 1360px;
  --gap-section: clamp(96px, 5vw + 56px, 200px);
  --radius: 16px;
  --radius-lg: 28px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms; --t-open: 1200ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: var(--step-body); line-height: 1.5; color: var(--ink); background: var(--bg); overflow-x: clip; padding-bottom: calc(80px + env(safe-area-inset-bottom)); font-feature-settings: "tnum" 0; }
@media (min-width: 700px) { body { padding-bottom: 0; } }
img, svg, video { max-width: 100%; height: auto; display: block; }
svg[hidden] { display: none !important; width: 0; height: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: .06em; text-decoration-color: var(--accent); transition: text-decoration-color var(--t-hover) ease; }
a:hover { text-decoration-color: var(--ink); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; color: inherit; }
h1 { font-size: var(--step-display); line-height: 1; }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); letter-spacing: -.02em; line-height: 1.15; }
h4 { font-size: var(--step-body); letter-spacing: 0; }
p, ul, ol { margin: 0 0 1em; }
p { max-width: 62ch; }
ul, ol { padding-left: 1.2em; }
strong, b { font-weight: 600; }
small, .small { font-size: var(--step-small); }
.muted { color: var(--muted); }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; letter-spacing: -.01em; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0; }
a, label, summary { -webkit-tap-highlight-color: transparent; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }
::selection { background: var(--accent); color: var(--accent-ink); }
html { caret-color: var(--accent); scrollbar-color: var(--muted) var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--margin); min-width: 0; }
.section { padding: var(--gap-section) 0 0; }
.section:last-child { padding-bottom: var(--gap-section); }
.section__head { margin-bottom: clamp(24px, 3vw, 48px); display: grid; gap: 12px 48px; align-items: end; }
.section__head h2 { max-width: 22ch; margin: 0; }
.section__head p { max-width: 46ch; margin: 0; }
@media (min-width: 900px) { .section__head { grid-template-columns: 1fr 1fr; } .section__head p:only-child, .section__head h2:only-child { grid-column: 1 / -1; } }
.grid-2 { display: grid; gap: clamp(24px, 4vw, 64px); align-items: start; }
.grid-2 > * { min-width: 0; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2--wide { grid-template-columns: 5fr 7fr; } }
.cols { columns: 2; column-gap: 40px; }
@media (min-width: 900px) { .cols { columns: 3; } }
.ta { font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }

/* ---------- Le motif : des blocs pleins, arrondis ---------- */
.m-mask { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; overflow: clip; background: var(--field-2); }
.m-mask img { width: 100%; height: 100%; object-fit: cover; }
.m-list { list-style: none; padding: 0; margin: 0; }
.m-list li { position: relative; padding-left: 1.3em; margin: 0 0 .5em; }
.m-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55em; height: .55em; border-radius: 3px; background: var(--accent); }
.m-list--night li::before { background: var(--sky); }
.band { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; height: 16px; margin: var(--gap-section) 0 0; }
.band::before { content: ""; display: block; background: var(--accent); border-radius: 8px 0 0 8px; }
.band::after { content: ""; display: block; grid-column: 3; background: var(--red); border-radius: 0 8px 8px 0; }
.spin { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; border-radius: 50%; border: 3px solid var(--field-2); border-top-color: var(--accent); animation: spin-turn .9s linear infinite; }
@keyframes spin-turn { to { transform: rotate(360deg); } }
.ic { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Boutons : des pilules pleines ---------- */
.key { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 24px 0 6px; border-radius: 999px; background: var(--red); color: var(--red-ink); font-weight: 600; text-decoration: none; line-height: 1.15; max-width: 100%; text-align: left; transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease, color var(--t-hover) ease; }
.key__ic { width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; }
.key__ic .ic { width: 22px; height: 22px; }
.key__t { padding: 10px 0; min-width: 0; }
.key__t small { display: block; font-weight: 500; opacity: .85; }
.key:hover { background: var(--red-2); }
.key:active { transform: scale(.97); }
.key--night { background: var(--night); color: var(--night-ink); }
.key--night .key__ic { background: var(--accent); color: #fff; }
.key--night:hover { background: #142c52; }
.key--blue { background: var(--accent); color: var(--accent-ink); }
.key--blue:hover { background: var(--accent-2); }
.key--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding-left: 4px; }
.key--ghost .key__ic { background: var(--ink); color: var(--bg); }
.key--ghost:hover { background: var(--surface); }
.key--paper { background: var(--surface); color: var(--ink); }
.key--paper .key__ic { background: var(--accent); color: var(--accent-ink); }
.key--paper:hover { background: var(--surface-2); }
.key--sm { min-height: 44px; padding-right: 18px; padding-left: 4px; gap: 8px; font-size: var(--step-small); }
.key--sm .key__ic { width: 36px; height: 36px; }
.key--sm .key__ic .ic { width: 18px; height: 18px; }
.key--lg { min-height: 64px; font-size: var(--step-lead); padding-right: 28px; }
.key--lg .key__ic { width: 52px; height: 52px; }
.key--block { display: flex; width: 100%; }
.key[disabled], .key[aria-disabled="true"] { opacity: .55; cursor: progress; }
.linkbtn { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .14em; text-decoration-color: var(--accent); font-size: inherit; }
.linkbtn:hover { text-decoration-color: var(--ink); }

/* ---------- En-tête : une rangée simple ---------- */
.hdr { position: relative; z-index: 50; background: var(--bg); }
@media (min-width: 900px) { .hdr { position: sticky; top: 0; } }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.hdr__logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; line-height: 1; font-size: 1.05rem; }
@media (max-width: 599px) { .hdr__logo { font-size: 1rem; gap: 10px; } .hdr__logo small { display: none; } .hdr__logo .m { width: 30px; height: 30px; border-radius: 9px; } }
.hdr__logo .m { position: relative; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); flex: none; }
.hdr__logo .m::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 5px; background: var(--red); }
.hdr__logo small { display: block; font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--muted); margin-top: 3px; }
.hdr__nav { display: none; gap: 28px; font-size: .95rem; font-weight: 500; }
.hdr__nav a { text-decoration: none; }
.hdr__nav a:hover { text-decoration: underline; }
@media (min-width: 1000px) { .hdr__nav { display: flex; } }
.hdr__cta { display: flex; align-items: center; gap: 8px; }
.hdr__cta .key__t { display: none; }
@media (min-width: 600px) { .hdr__cta .key__t { display: block; } }
@media (max-width: 599px) { .hdr__cta .key { padding-right: 4px; gap: 0; } }
.hdr__burger { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; background: var(--surface); }
@media (min-width: 1000px) { .hdr__burger { display: none; } }
.hdr__menu { display: none; background: var(--surface); padding: 8px 12px 18px; }
.hdr__menu.is-open { display: block; }
.hdr__menu a { display: block; padding: 12px 0; font-weight: 500; text-decoration: none; font-size: var(--step-lead); }
@media (min-width: 1000px) { .hdr__menu.is-open { display: none; } }

/* ---------- Héros : la scène bleue et le module ---------- */
.hero { position: relative; padding: 24px 0 0; overflow: clip; }
.hero__grid { display: grid; gap: 20px; }
.hero__copy { position: relative; z-index: 2; }
.hero h1 { margin: 0 0 18px; max-width: none; }
@media (max-width: 599px) { .hero h1 { font-size: min(8.8vw, 2.3rem); } }
.hero .lead { margin: 0 0 22px; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; font-weight: 500; font-size: var(--step-small); }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts li::before { content: ""; width: .55em; height: .55em; border-radius: 3px; background: var(--accent); }
.stage { position: relative; background: var(--accent); color: var(--accent-ink); padding: 14px; margin: 8px 0 0; border-radius: var(--radius-lg); }
.stage > * { position: relative; }
@media (min-width: 1000px) {
  .hero { padding: 48px 0 0; }
  .hero__copy { display: flex; flex-direction: column; height: 100%; }
  .hero__facts { margin-top: auto; padding-top: 32px; }
  .hero__grid { grid-template-columns: 6fr 6fr; gap: 40px; align-items: start; }
  .hero h1 { margin-top: 80px; }
  .stage { margin: 96px 0 0; padding: 40px; }
  .stage .devis { max-width: 620px; }
}
.hero--plain { padding-bottom: 0; }
.hero--plain .lead { margin-bottom: 26px; }

/* ---------- Chiffres en tuiles décalées : bleu, marine, rouge ---------- */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); grid-template-areas: "h h" "a a" "b c"; }
.stats h2 { grid-area: h; margin: 0 0 10px; font-size: var(--step-lead); max-width: none; }
.stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; min-height: 56vw; border-radius: var(--radius-lg); }
.stat b { display: block; font-size: 15vw; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.stat b small { font-size: .45em; font-weight: 600; letter-spacing: -.02em; margin-left: .1em; }
.stat > span { font-size: var(--step-body); font-weight: 500; max-width: 18ch; }
.stat--a { grid-area: a; background: var(--accent); color: var(--accent-ink); }
.stat--b { grid-area: b; background: var(--night); color: var(--night-ink); min-height: 44vw; }
.stat--c { grid-area: c; background: var(--red); color: var(--red-ink); min-height: 34vw; margin-top: 32px; }
.stat--b b, .stat--c b { font-size: 11vw; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(12, 1fr); grid-template-rows: 14vh 12vh 8vh 1fr; grid-template-areas: "a a a a a a h h h . . ." "a a a a a a b b b . . ." "a a a a a a b b b c c c" "a a a a a a b b b c c c"; }
  .stats h2 { align-self: end; font-size: clamp(28px, 2.4vw, 36px); max-width: 12ch; margin: 0 0 12px 0; }
  .stat { padding: 28px; min-height: 0; }
  .stat--a { height: 70vh; }
  .stat--b { height: 44vh; align-self: start; }
  .stat--c { height: 34vh; align-self: start; margin: 0; }
  .stat b { font-size: clamp(56px, 5.4vw, 92px); }
  .stat--b b, .stat--c b { font-size: clamp(44px, 4vw, 72px); }
}

/* ---------- Réponse immédiate ---------- */
.answers { display: grid; gap: 28px; }
@media (min-width: 700px) { .answers { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 900px) { .answers { gap: 48px; } }
.answer h3 { font-size: var(--step-lead); margin-bottom: 8px; }
.answer p { margin: 0; max-width: 34ch; }
.answer b { font-weight: 600; }

/* ---------- Tarifs : deux plans, deux champs ---------- */
.plans { display: grid; margin: 0; }
.plan { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 70svh; padding: 24px 20px; padding-left: var(--edge); padding-right: var(--edge); }
.plan--jour { background: var(--field-3); color: var(--ink); }
.plan--nuit { background: var(--night); color: var(--night-ink); }
.plan h3 { font-size: 12vw; letter-spacing: -.04em; line-height: 1; margin: 0 0 12px; }
.plan .who { font-size: var(--step-lead); max-width: 26ch; margin: 0 0 18px; line-height: 1.3; }
.plan .incl { font-size: var(--step-body); max-width: 40ch; margin: 0; }
.plan__foot { display: grid; gap: 14px; margin-top: 28px; }
.plan .price { font-size: 19vw; font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.plan .price small { display: block; font-size: var(--step-body); font-weight: 500; letter-spacing: 0; margin-top: 8px; }
.plan--jour .price { color: var(--accent-2); }
.plan--nuit .price { color: var(--sky); }
.plan__pic { width: 34%; max-width: 160px; margin: 0 0 18px; aspect-ratio: 1; }
.plan .key { align-self: start; }
@media (min-width: 900px) {
  .plans { grid-template-columns: 5fr 7fr; }
  .plan { min-height: 90svh; padding: 40px var(--edge); }
  .plan--jour { padding-right: 40px; }
  .plan--nuit { padding-left: 40px; }
  .plan h3 { font-size: clamp(40px, 5vw, 72px); }
  .plan .price { font-size: clamp(72px, 10vw, 150px); }
  .plan__foot { grid-template-columns: 1fr auto; align-items: end; }
  .plan__pic { position: absolute; right: var(--edge); top: 40px; width: 160px; margin: 0; }
  .plan--nuit > div:not(.plan__pic):not(.plan__foot) { padding-right: 220px; }
}
.plans + .tarifs-wrap { margin-top: var(--gap-section); }
.is-now-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 600; vertical-align: middle; }
.plan--nuit .is-now-tag { background: var(--sky); color: var(--night); }

/* Grille tarifaire (contenu) */
.tarifs { margin: 0 0 40px; }
.tarifs__head { margin-bottom: 12px; }
.tarifs__head h3 { margin: 0 0 4px; }
.tarifs__head p { margin: 0; color: var(--muted); max-width: 60ch; }
.tarifs th, .tarifs td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } /* taste-skill-ignore : vrai tableau */
.tarifs th { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.tarifs th small { display: block; font-weight: 400; }
.tarifs td.p { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarifs td.p small { display: block; font-weight: 400; color: var(--muted); }
.tarifs tr.phare td { background: var(--field-3); padding-left: 10px; }
.tarifs .d { display: block; color: var(--muted); font-size: 16px; margin-top: 2px; }
.tarifs th.is-now, .tarifs td.is-now { background: var(--surface); }
.tarifs th.is-now::after { content: " · maintenant"; color: var(--ok); }
@media (max-width: 640px) {
  .tarifs thead { display: none; }
  .tarifs tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); } /* taste-skill-ignore : vrai tableau */
  .tarifs td { border: 0; padding: 10px 8px 10px 0; }
  .tarifs td:first-child { grid-column: 1 / -1; padding-bottom: 2px; }
  .tarifs td.p::before { content: attr(data-l); display: block; font-size: var(--step-small); color: var(--muted); font-weight: 500; }
}
.notes { font-size: var(--step-body); }
.now-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: var(--step-small); }
.now-badge.is-nuit { background: var(--night); color: var(--sky); }
.sched { display: grid; gap: 0; max-width: 720px; border-radius: var(--radius); overflow: clip; }
.sched div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.sched div:nth-child(odd) { background: var(--surface); }
.sched b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cal { display: grid; gap: 0; max-width: 720px; border-radius: var(--radius); overflow: clip; }
.cal div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; }
.cal div:nth-child(odd) { background: var(--surface); }
.cal .n { color: var(--muted); }

/* ---------- Comment ça marche : une fiche, quatre champs ---------- */
.steps4 { display: grid; margin: 0; }
.step4 { padding: 32px var(--edge) 36px; display: flex; flex-direction: column; }
.step4 h2 { font-size: var(--step-lead); margin: 0 0 10px; }
.step4 p { font-size: var(--step-lead); line-height: 1.3; margin: 0 0 24px; max-width: 24ch; letter-spacing: -.01em; }
.step4:nth-child(1) { background: var(--surface); }
.step4:nth-child(2) { background: var(--field-3); }
.step4:nth-child(3) { background: var(--field-2); }
.step4:nth-child(4) { background: var(--night); color: var(--night-ink); }
.fiche { width: 260px; max-width: 100%; background: var(--bg); color: var(--ink); padding: 16px; display: grid; gap: 8px; font-size: 15px; border-radius: var(--radius); transition: transform 150ms var(--ease-out); }
.fiche__t { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.fiche__t .st { margin: 0; }
.fiche__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); } /* taste-skill-ignore : fragment d'interface data-ui */
.fiche__row span:first-child { color: var(--muted); }
.fiche__row b { font-variant-numeric: tabular-nums; text-align: right; }
.fiche__big { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--blue-text); }
.fiche__big small { display: block; font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 4px; }
.fiche .key--sm { justify-self: start; }
.fiche--empty .fiche__row b { color: var(--muted); font-weight: 400; }
@media (min-width: 700px) and (max-width: 899px) { .steps4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .steps4 { grid-template-columns: repeat(4, 1fr); }
  .step4 { min-height: 84svh; padding: 28px; position: relative; }
  .step4:first-child { padding-left: var(--edge); }
  .step4:last-child { padding-right: var(--edge); }
  .step4 p { position: absolute; left: 28px; right: 28px; bottom: 28px; font-size: clamp(22px, 2vw, 32px); margin: 0; }
  .step4:first-child p { left: var(--edge); }
  .step4:last-child p { right: var(--edge); }
  .step4 .fiche { margin: 38% auto 0; }
  .step4:hover .fiche { transform: translateY(-6px); }
}

/* ---------- Menu à puces-photos ---------- */
.menu__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin: 0 0 24px; }
.menu__head h2 { margin: 0; }
.menu__head span { font-weight: 500; }
.menu { display: grid; gap: 28px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .menu { grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 36px; } }
.menu li { display: grid; grid-template-columns: 64px 1fr; gap: 0 18px; align-items: start; }
@media (min-width: 900px) { .menu li { grid-template-columns: 80px 1fr; gap: 0 20px; } }
.menu .m-mask { width: 64px; aspect-ratio: 1; border-radius: 18px; }
@media (min-width: 900px) { .menu .m-mask { width: 80px; border-radius: 22px; } }
.menu__name { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: var(--step-body); align-items: baseline; }
.menu__name a { text-decoration: none; }
.menu__name a:hover { text-decoration: underline; }
.menu__name b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--blue-text); }
.menu__desc { margin: 4px 0 0; font-size: 16px; max-width: 38ch; }
.menu__note { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--blue-text); }

/* ---------- Assurance ---------- */
.cases { display: grid; gap: 22px; }
.case { display: grid; gap: 4px; }
.case h3 { font-size: var(--step-body); margin: 0; }
.case .qui { font-weight: 600; color: var(--blue-text); }
.case p { margin: 0; max-width: 46ch; }
.case .nous { font-size: var(--step-small); font-weight: 500; color: var(--ok); margin-top: 2px; }
.logos { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 18px 0 0; }
.logos img, .logos .badge-logo { height: 24px; width: auto; }
.badge-logo { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; }
.badge-logo--clair { color: var(--ink); }
.assu-list { border-radius: var(--radius); overflow: clip; }
.assu-list details { padding: 0 16px; }
.assu-list details:nth-child(odd) { background: var(--surface); }
.assu-list summary { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 36px 14px 0; font-weight: 600; }
.assu-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; margin-top: -.5em; font-weight: 500; font-size: 1.3em; line-height: 1; color: var(--accent); }
.assu-list details[open] summary::after { content: "–"; }
.assu-list summary img, .assu-list summary .badge-logo { height: 22px; width: auto; }
.assu-list .body { padding: 0 0 18px; }
.assu-list table th, .assu-list table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); font-size: 16px; text-align: left; vertical-align: top; } /* taste-skill-ignore : vrai tableau */
.assu-list table th { width: 34%; color: var(--muted); font-weight: 500; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--step-small); font-weight: 600; background: var(--field-1); color: var(--ink); }
.tag--vert { background: var(--ok-bg); color: var(--ok); }
.tag--ambre { background: var(--warn-bg); color: var(--warn); }
.tag--rouge { background: var(--bad-bg); color: var(--bad); }
.st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; margin-right: 6px; vertical-align: middle; }
.st--inclus { background: var(--ok-bg); color: var(--ok); }
.st--option { background: var(--warn-bg); color: var(--warn); }
.st--exclu { background: var(--bad-bg); color: var(--bad); }
.st--inconnu { background: var(--field-1); color: var(--ink); }
.rules { display: grid; gap: 14px; max-width: 760px; }
.rule { padding: 16px 18px; background: var(--surface); border-radius: var(--radius); }
.rule cite { display: block; font-style: normal; color: var(--muted); font-size: var(--step-small); margin-top: 4px; }
.list-check { list-style: none; padding: 0; }
.list-check li { position: relative; padding-left: 1.5em; margin-bottom: 8px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .42em; width: .62em; height: .62em; border-radius: 50%; background: var(--ok); }

/* ---------- Phrase à images (engagements) ---------- */
.statement { font-size: clamp(22px, 1rem + 1.5vw, 36px); line-height: 1.3; font-weight: 500; letter-spacing: -.02em; margin: 0; max-width: none; }
@media (min-width: 900px) { .statement { width: 92%; } }
.slot { display: inline-block; vertical-align: baseline; width: 1.5em; height: 1em; border-radius: .28em; overflow: clip; transform: translateY(.12em); background: var(--field-2); margin: 0 .08em; }
@media (min-width: 900px) { .slot { width: 1.9em; } }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot--ui { background: var(--night); color: var(--sky); font-size: .5em; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.statement__after { margin: 48px 0 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .statement__after { margin-left: 50%; margin-top: 72px; } }
.statement__after p { margin: 0; max-width: 40ch; }

/* ---------- Témoignage ---------- */
.testi { display: grid; gap: 24px; }
.testi__pic { width: 72%; }
.testi__pic img { object-position: 50% 40%; }
.testi blockquote { margin: 8px 0 0; font-size: clamp(20px, 1rem + 1vw, 28px); line-height: 1.3; font-weight: 400; letter-spacing: -.01em; max-width: 30ch; }
.testi blockquote p { max-width: none; margin: 0; }
.testi__who { margin: 32px 0 0; font-size: 16px; }
.testi__who b { display: block; font-weight: 600; }
.testi__pic2 { width: 44%; margin: 48px 0 0 auto; aspect-ratio: 1; overflow: clip; border-radius: var(--radius-lg); }
.testi__pic2 img { width: 100%; height: 100%; object-fit: cover; }
.testi__stars { display: flex; gap: 2px; color: var(--red); margin: 0 0 8px; }
.testi__stars .ic { width: 16px; height: 16px; fill: currentColor; }
@media (min-width: 900px) {
  .testi { grid-template-columns: repeat(12, 1fr); gap: 0 24px; }
  .testi__pic { grid-column: 2 / 6; width: 100%; height: 70svh; aspect-ratio: auto; }
  .testi__quote { grid-column: 7 / 13; padding-top: 120px; }
  .testi blockquote { line-height: 1.3; }
  .testi__pic2 { grid-column: 10 / 12; width: 100%; margin: 96px 0 0; }
}
.quotes { display: grid; gap: 28px; margin-top: 64px; }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.quote { margin: 0; }
.quote p { margin: 0 0 8px; }
.quote footer { font-size: var(--step-small); font-weight: 500; color: var(--muted); }

/* ---------- Couverture ---------- */
.cover { border-radius: var(--radius); overflow: clip; }
.cover details { padding: 0 16px; }
.cover details:nth-child(odd) { background: var(--surface); }
.cover summary { padding: 14px 0; font-weight: 600; font-size: var(--step-lead); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cover summary small { font-weight: 500; font-size: var(--step-small); color: var(--muted); }
.cover summary::after { content: "+"; font-weight: 500; color: var(--accent); }
.cover details[open] summary::after { content: "–"; }
.cover .dept { padding: 8px 0 14px; display: grid; gap: 4px 16px; }
@media (min-width: 700px) { .cover .dept { grid-template-columns: 220px 1fr; } }
.cover .dept b a { text-decoration: none; }
.cover .dept span a { display: inline-block; margin: 0 14px 4px 0; }
.citylinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.citylinks a { font-weight: 500; }
.zones { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
@media (min-width: 700px) { .zones { columns: 3; } }
.zones li { break-inside: avoid; padding: 4px 0; overflow-wrap: anywhere; }
.zones small { color: var(--muted); }
.cards-city { display: grid; gap: 10px; }
@media (min-width: 700px) { .cards-city { grid-template-columns: repeat(2, 1fr); column-gap: 24px; } }
@media (min-width: 1000px) { .cards-city { grid-template-columns: repeat(4, 1fr); } }
.cards-city a { display: block; padding: 18px; background: var(--surface); text-decoration: none; border-radius: var(--radius); transition: background var(--t-hover) ease; }
.cards-city a:hover { background: var(--field-3); }
.cards-city a:hover b { text-decoration: underline; }
.cards-city b { display: block; font-size: var(--step-lead); font-weight: 600; letter-spacing: -.02em; }
.cards-city small { color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; max-width: 820px; }
@media (min-width: 900px) { .steps--row { grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: none; } }
.steps li { position: relative; padding-left: 1.6em; }
.steps li::before { content: ""; position: absolute; left: 0; top: .32em; width: .7em; height: .7em; border-radius: 4px; background: var(--accent); }
.steps b { display: block; font-size: var(--step-lead); font-weight: 600; letter-spacing: -.02em; margin-bottom: 4px; line-height: 1.15; }
.steps span { display: block; max-width: 46ch; }

/* ---------- Guide (lecture) ---------- */
.prose { max-width: 66ch; }
.prose h2 { font-size: var(--step-lead); margin-top: 1.6em; }
.prose h3 { font-size: var(--step-lead); margin-top: 1.6em; }
.prose li { margin-bottom: .4em; }
.callout { padding: 18px 20px; background: var(--field-3); border-radius: var(--radius); margin: 24px 0; }
.callout--bleu { background: var(--field-2); }
.callout p { margin: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 28px; padding: 0; list-style: none; font-weight: 500; }
.placeholder { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 1px 6px; font-weight: 600; }

/* ---------- FAQ : des fiches pleines ---------- */
.faq { position: relative; max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { position: relative; border-radius: var(--radius); overflow: clip; background: var(--surface); transition: background var(--t-hover) ease; }
.faq details:nth-child(3n+2) { background: var(--field-3); }
.faq details:nth-child(3n+3) { background: var(--field-2); }
.faq summary { position: relative; padding: 20px 64px 20px 22px; min-height: 72px; font-size: 20px; font-weight: 500; line-height: 1.3; display: flex; align-items: center; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 500; line-height: 1; transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 22px 22px; }
.faq .a p { margin: 0; max-width: 52ch; }
@media (min-width: 900px) {
  .faq summary { padding: 26px 80px 26px 28px; font-size: 21px; }
  .faq .a { padding: 0 28px 28px; }
  .faq .a p { font-size: 17px; }
}

/* ---------- Clôture : une phrase à trou ---------- */
.cta-blank { margin: 0; }
.cta-blank .sentence { font-size: 10vw; line-height: 1.12; font-weight: 600; letter-spacing: -.035em; margin: 0; max-width: none; }
@media (min-width: 700px) { .cta-blank .sentence { font-size: clamp(40px, 5vw, 80px); line-height: 1.08; width: 100%; } }
.cta-blank--long .sentence { font-size: 8vw; }
@media (min-width: 700px) { .cta-blank--long .sentence { font-size: clamp(32px, 4.2vw, 68px); } }
.cta-blank input { display: inline-block; vertical-align: baseline; font: inherit; font-weight: 600; height: 1.12em; width: 6.2em; padding: 0 .3em; border: 0; border-radius: .22em; background: var(--field-3); color: var(--ink); letter-spacing: -.02em; }
.cta-blank input::placeholder { color: var(--muted); font-weight: 500; }
.cta-blank input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.cta-blank button { display: inline-block; font: inherit; font-weight: 600; height: 1.12em; padding: 0 .4em; border-radius: .6em; background: var(--red); color: var(--red-ink); line-height: 1.12; letter-spacing: -.035em; vertical-align: baseline; transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; }
.cta-blank button:hover { background: var(--red-2); }
.cta-blank button:active { transform: scale(.97); }
.cta-blank .after { margin: 20px 0 0; font-size: 16px; color: var(--muted); max-width: 52ch; }
@media (max-width: 899px) { .cta-blank input { display: block; width: 100%; margin: .1em 0; } }

/* ---------- Pied de page : la marque bâtie ---------- */
.ftr { background: var(--night); color: var(--night-ink); margin-top: 0; padding: 32px 0 28px; }
.ftr__mark { display: block; width: 100%; height: auto; }
.ftr__grid { display: grid; gap: 28px 24px; margin-top: 56px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .ftr__grid { grid-template-columns: repeat(12, 1fr); } .ftr__col { grid-column: span 2; } .ftr__contact { grid-column: 9 / 13; } }
.ftr h4 { color: var(--night-ink); margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 16px; }
.ftr a { color: inherit; text-decoration: none; }
.ftr .key { color: var(--red-ink); }
.ftr a:hover { text-decoration: underline; }
.ftr__contact { grid-column: 1 / -1; }
.ftr__contact .tel { display: block; font-size: var(--step-head); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: 0 0 8px; color: var(--sky); }
.ftr__contact p { margin: 0 0 10px; max-width: 46ch; font-size: 16px; }
.ftr__regions { margin-top: 40px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ftr__legal { margin-top: 32px; padding: 18px; background: rgba(255, 255, 255, .06); border-radius: var(--radius); font-size: 14px; display: grid; gap: 12px; }
.ftr__legal p { margin: 0; max-width: none; color: #b9c4d8; }
.ftr__legal .credits { font-size: 13px; }
.ftr__legal .credits a { text-decoration: underline; }
.ftr__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Fil d'Ariane ---------- */
.crumbs { font-size: var(--step-small); padding-top: 12px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Barre fixe mobile ---------- */
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); pointer-events: none; }
.stickybar .key { pointer-events: auto; }
.stickybar .key { min-height: 56px; padding-right: 12px; }
.stickybar .key__t { font-size: 1rem; }
@media (min-width: 700px) { .stickybar { display: none; } }

/* =========================================================
   Le module de devis : l'interface réelle (data-ui)
   ========================================================= */
.devis { background: var(--bg); color: var(--ink); border-radius: 20px; padding: 16px; scroll-margin-top: 80px; }
@media (min-width: 700px) { .devis { padding: 24px; } }
.devis * { overflow-wrap: anywhere; }
.devis__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.devis__title h2, .devis__title h3 { margin: 0; font-size: var(--step-lead); letter-spacing: -.02em; }
.devis__loc { font-size: 16px; font-weight: 500; }
.devis__sub { color: var(--muted); font-size: 16px; margin: 0 0 14px; max-width: 44ch; }
.locate { display: grid; gap: 10px; }
.locate__row { display: grid; gap: 8px; position: relative; }
@media (min-width: 560px) { .locate__row { grid-template-columns: 1fr auto; } }
.locate__input { min-width: 0; width: 100%; height: 60px; padding: 0 18px; border: 2px solid var(--line); border-radius: 999px; font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; background: var(--surface); font-variant-numeric: tabular-nums; transition: border-color var(--t-hover) ease, background var(--t-hover) ease; }
.locate__input::placeholder { color: var(--muted); font-weight: 500; font-size: 1.05rem; letter-spacing: 0; }
.locate__input:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); background: #fff; }
.locate__geo { height: 60px; }
.locate__switch { text-align: left; color: var(--muted); font-size: 16px; text-decoration: underline; text-underline-offset: .14em; text-decoration-color: var(--line); padding: 2px 0; }
.locate__switch b { color: var(--ink); }
.sugg { position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-radius: 16px; z-index: 20; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(11, 31, 58, .35); } /* taste-skill-ignore : menu flottant */
.sugg button { display: block; width: 100%; min-height: 48px; text-align: left; padding: 12px 16px; font-size: 1.02rem; border-bottom: 1px solid var(--line); } /* taste-skill-ignore : liste de suggestions data-ui */
.sugg button:hover, .sugg button:focus { background: var(--field-3); outline: none; }
.sugg button small { color: var(--muted); margin-left: 6px; }
.locate__hint { font-size: 14px; color: var(--muted); margin: 0; }
.found { background: var(--ok-bg); color: var(--ink); border-radius: 16px; padding: 14px; display: grid; gap: 6px; }
.found b { font-weight: 600; }
.found .key { margin-top: 6px; }
.notfound { background: var(--warn-bg); color: var(--ink); border-radius: 16px; padding: 14px; font-size: 16px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { text-align: left; background: var(--surface); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; min-height: 76px; color: var(--ink); transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; }
.tile .ic { width: 28px; height: 28px; grid-row: span 2; color: var(--accent); }
.tile b { font-size: 1rem; line-height: 1.15; font-weight: 600; }
.tile small { color: var(--muted); font-size: 14px; }
.tile:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .tile:hover { background: var(--field-3); } }
.tile.is-on { background: var(--night); color: var(--night-ink); }
.tile.is-on .ic { color: var(--sky); }
.tile.is-on small { color: #b9c4d8; }
.price-card { margin-top: 12px; background: var(--night); color: var(--night-ink); border-radius: 16px; padding: 18px; display: grid; gap: 6px; }
.price-card .lbl { font-size: 16px; font-weight: 500; }
.price-card .val { font-size: 2.3rem; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--sky); font-variant-numeric: tabular-nums; }
.price-card .val small { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--night-ink); margin-top: 6px; }
.price-card .conseil { font-size: 16px; margin: 0; max-width: none; }
.panel { margin-top: 8px; background: var(--surface); border-radius: 16px; padding: 14px; }
.scan__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; background: var(--field-3); border-radius: 16px; padding: 18px; text-align: center; cursor: pointer; position: relative; }
.scan__drop .ic { width: 32px; height: 32px; color: var(--accent); }
.scan__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.scan__prev { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.scan__prev img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }
.result { background: var(--bg); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.result__row { display: flex; flex-wrap: wrap; gap: 6px; }
.result__kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result__kv div { background: var(--surface); border-radius: 12px; padding: 10px; }
.result__kv span { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.result__kv b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.result p { margin: 0; font-size: 16px; max-width: none; }
.result ul { margin: 0; padding-left: 18px; font-size: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 15px; }
.field input, .field select { height: 56px; border: 2px solid var(--line); border-radius: 999px; padding: 0 18px; background: var(--surface); font-size: 1.08rem; width: 100%; transition: border-color var(--t-hover) ease, background var(--t-hover) ease; }
.field select { border-radius: 16px; }
.field input[type="tel"] { font-size: 1.3rem; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); background: #fff; }
.field .err { color: var(--bad); font-size: 14px; display: none; }
.field.is-err input { border-color: var(--bad); }
.field.is-err .err { display: block; }
.assu-pick { display: grid; gap: 10px; }
.assu-card { background: var(--surface); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.assu-card__head { display: flex; align-items: center; gap: 10px; }
.assu-card__head img, .assu-card__head .badge-logo { height: 26px; width: auto; }
.assu-card .row { display: grid; grid-template-columns: 1fr; gap: 2px 8px; font-size: 16px; padding: 8px 0; border-top: 1px solid var(--line); } /* taste-skill-ignore : fragment d'interface data-ui */
@media (min-width: 560px) { .assu-card .row { grid-template-columns: 130px 1fr; gap: 8px; } }
.assu-card .row span { color: var(--muted); font-weight: 500; font-size: 14px; }
.assu-card .row b { font-variant-numeric: tabular-nums; }
.plafond { margin: 4px 0 2px; background: var(--night); color: var(--night-ink); border-radius: 16px; padding: 16px; display: grid; gap: 6px; }
.plafond--option { background: #1e2f52; }
.plafond--exclu { background: #5a1620; }
.plafond--inconnu { background: #2b3850; }
.plafond .lbl { font-size: 14px; font-weight: 500; }
.plafond .val { font-size: 1.9rem; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--sky); font-variant-numeric: tabular-nums; }
.plafond .val--texte { font-size: 1.35rem; }
.plafond .meta { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plafond .st { background: rgba(255, 255, 255, .16); color: var(--night-ink); margin: 0; }
.plafond .detail { margin: 0; font-size: 16px; max-width: none; }
.plafond .reste { margin: 2px 0 0; font-size: 16px; background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 8px 10px; max-width: none; }
.plafond .reste b { color: var(--sky); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--surface); border-radius: 999px; min-height: 44px; padding: 8px 16px; font-weight: 600; font-size: 16px; color: var(--ink); transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; }
.chip:active { transform: scale(.96); }
.chips--inline { align-items: center; margin: 2px 0 6px; }
.chip.is-on { background: var(--night); color: var(--night-ink); }
.rdv { display: grid; gap: 10px; }
.legal { font-size: 14px; color: var(--muted); margin: 0; max-width: none; }
.confirm { text-align: center; padding: 18px 6px; display: grid; gap: 10px; justify-items: center; }
.confirm .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.confirm .ok .ic { width: 28px; height: 28px; }
.confirm h3 { margin: 0; }
.confirm p { max-width: 36ch; }
.alert { background: var(--bad-bg); color: var(--bad); border-radius: 12px; padding: 10px 12px; font-size: 16px; font-weight: 500; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.extras { display: grid; gap: 8px; margin: 4px 0 12px; }
.extra { text-align: left; background: var(--surface); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-height: 60px; color: var(--ink); transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; }
.extra .ic { width: 26px; height: 26px; color: var(--accent); }
.extra > span:nth-child(2) { flex: 1; min-width: 0; }
.extra b { display: block; font-size: 1rem; font-weight: 600; }
.extra small { color: var(--muted); font-size: 14px; }
.extra .chev { width: 20px; height: 20px; color: var(--muted); transition: transform var(--t-ui) var(--ease-out); }
.extra:active { transform: scale(.98); }
.extra.is-on { background: var(--field-3); }
.extra.is-on .chev { transform: rotate(90deg); }

/* Invitation au scan : une pilule marine qui respire */
.scan-invite { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--night); color: var(--night-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--t-press) var(--ease-out); }
.scan-invite:active { transform: scale(.98); }
.scan-invite__ic { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.scan-invite__ic .ic { width: 26px; height: 26px; }
.scan-invite__t { flex: 1; min-width: 0; }
.scan-invite__t b { display: block; font-size: 1rem; line-height: 1.2; font-weight: 600; }
.scan-invite__t small { display: block; color: #b9c4d8; font-size: 14px; line-height: 1.3; margin-top: 2px; }
.scan-invite__go { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--sky); font-weight: 600; font-size: 16px; }
.scan-invite__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.scan-invite input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scan-invite { animation: invite-breathe 2.2s var(--ease-in-out) infinite; }
  .scan-invite__ic { animation: invite-turn 2.2s var(--ease-in-out) infinite; }
  .scan-invite__dot { animation: invite-blink 1.1s steps(2, start) infinite; }
}
@keyframes invite-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes invite-turn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes invite-blink { to { visibility: hidden; } }

/* =========================================================
   Parcours en écrans (le « sheet »)
   ========================================================= */
.sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.sheet__back { position: absolute; inset: 0; background: rgba(11, 31, 58, .62); }
.sheet__panel { position: relative; width: 100%; height: 100%; background: var(--bg); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { .sheet__panel { animation: sheet-in 320ms var(--ease-out); } }
@keyframes sheet-in { from { transform: translateY(6%); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet__head { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: var(--bg); flex: none; }
.sheet__title { flex: 1; min-width: 0; font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__title small { font-weight: 500; color: var(--muted); font-size: .9rem; }
.sheet__step { display: inline-block; background: var(--accent); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 14px; font-weight: 600; margin-right: 4px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.sheet__nav { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; }
.sheet__nav .ic { width: 22px; height: 22px; }
.sheet__nav:active { transform: scale(.94); }
.sheet__nav:hover { background: var(--field-3); }
.sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.sheet__h { font-size: var(--step-lead); margin: 4px 0 12px; letter-spacing: -.02em; }
.sheet__meta { font-size: 16px; margin: 10px 0 12px; max-width: none; }
.sheet__form { display: grid; gap: 8px; margin-bottom: 14px; }
.sheet .or { text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; margin: 12px 0 10px; }
.tiles--sheet { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tiles--sheet .tile { min-height: 96px; padding: 14px 12px; }
.tiles--sheet .tile .ic { width: 32px; height: 32px; }
.price-card--sheet { margin: 0 0 4px; }
.sheet .panel { margin: 0; background: var(--surface); }
.sheet .confirm { padding: 24px 6px; }
body.sheet-open { position: fixed; width: 100%; overflow: hidden; }
@media (min-width: 700px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { width: 100%; max-width: 560px; height: auto; max-height: calc(100vh - 48px); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4); } /* taste-skill-ignore : fenêtre de dialogue */
  .sheet__head { padding: 12px 12px; }
  .sheet__body { padding: 16px 22px 24px; }
}

/* =========================================================
   Mouvement : une séquence d'arrivée, des entrées par section,
   un seul moment fort (la scène qui se déploie), le retour sous le doigt.
   Tout reste visible sans script et avec les animations réduites.
   ========================================================= */
.lines .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: load-rise 520ms var(--ease-out) forwards; animation-delay: var(--d, 400ms); }
  .js .hero .stage { clip-path: inset(0 0 100% 0 round var(--radius-lg)); animation: stage-open 1000ms var(--ease-in-out) 160ms forwards; }
  .js .hero .stage > .devis { transform: scale(1.04); opacity: 0; animation: load-settle 1100ms var(--ease-expo) 260ms forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out); transition-delay: calc(min(var(--i, 0), 3) * 70ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js [data-reveal="pic"] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal="pic"] > img { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-in-out); }
  .js [data-reveal="pic"].in > img { clip-path: inset(0); }
  .js .testi__pic > img { transform: scale(1.08); transition: clip-path 1000ms var(--ease-in-out), transform 14s var(--ease-soft); }
  .js .testi__pic.in > img { transform: scale(1); }
  .js .band::before, .js .band::after { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-expo); }
  .js .band::after { transition-delay: 200ms; }
  .js .band.in::before, .js .band.in::after { transform: none; }
}
@keyframes line-up { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes load-settle { to { opacity: 1; transform: none; } }
@keyframes stage-open { to { clip-path: inset(0 round var(--radius-lg)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .key, .tile, .chip, .extra { transition: none; } }

/* Guide : le texte à gauche, l'illustration à droite */
.guide { display: grid; gap: 32px; }
@media (min-width: 900px) { .guide { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } .guide__pic { position: sticky; top: 96px; } }
.guide__pic { max-width: 360px; margin-left: auto; }

/* Villes, départements et régions aux noms longs : le titre descend d'un cran pour tenir en deux lignes */
.hero--long h1 { font-size: clamp(1.9rem, 0.9rem + 3.1vw, 3.5rem); max-width: none; }
.hero--xlong h1 { font-size: clamp(1.7rem, 0.8rem + 2.6vw, 3rem); max-width: none; }
@media (max-width: 599px) { .hero--long h1 { font-size: min(7.6vw, 2rem); } .hero--xlong h1 { font-size: min(6.6vw, 1.8rem); } }

/* Héros simple avec une image à droite (pages guides) */
.hero__pic { max-width: 280px; margin: 24px 0 0; }
@media (min-width: 1000px) { .hero--pic .hero__copy { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } .hero--pic .hero__pic { grid-column: 2; grid-row: 1 / span 4; margin: 0 0 0 auto; max-width: 360px; } }

/* =========================================================
   Vert : tout ce qui touche au scan de serrure ; bouton flottant ;
   barre fixe réduite ; niveaux de sécurité ; recherche du technicien
   ========================================================= */
:root { --green: #15803d; --green-2: #166534; --green-soft: #dcfce7; }
.key--green { background: var(--green); color: #fff; }
.key--green:hover { background: var(--green-2); }
.hdr__nav a.is-scan, .hdr__menu a.is-scan { color: var(--green); font-weight: 600; }
.scan-invite { background: var(--green); color: #fff; }
.scan-invite__ic { background: rgba(255, 255, 255, .2); color: #fff; }
.scan-invite__t small { color: #d9f5e3; }
.scan-invite__go { color: #fff; }
.scan-invite__dot { background: #fff; }
.scan__drop { background: var(--green-soft); }
.scan__drop .ic { color: var(--green); }
.panel--scan { background: var(--green-soft); }
.linkbtn--scan { color: var(--green); text-decoration-color: var(--green); }
.scan-fab { position: fixed; right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px 0 6px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 14px 30px -12px rgba(21, 128, 61, .7); transition: transform var(--t-press) var(--ease-out), background var(--t-hover) ease; } /* taste-skill-ignore : bouton flottant */
.scan-fab:hover { background: var(--green-2); }
.scan-fab:active { transform: scale(.96); }
.scan-fab__ic { width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.scan-fab__ic .ic { width: 22px; height: 22px; }
.scan-fab input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (min-width: 700px) { .scan-fab { right: 28px; bottom: 28px; font-size: 16px; padding-right: 22px; } }
body.sheet-open .scan-fab { display: none; }
@media (prefers-reduced-motion: no-preference) { .scan-fab__ic { animation: invite-turn 2.2s var(--ease-in-out) infinite; } }
.stickybar { grid-template-columns: 1fr; }
.more { display: inline-block; margin-top: 8px; font-weight: 600; text-decoration-color: var(--accent); }
.found .linkbtn { display: inline-block; margin-top: 6px; }
.found--scan { display: flex; gap: 10px; align-items: center; background: var(--green-soft); }
.found--scan .ic { width: 26px; height: 26px; color: var(--green); flex: none; }

/* Niveaux de résistance à l'effraction */
.niveaux { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.niveaux__l { font-weight: 600; margin-right: 4px; }
.niveau { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 16px; transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.niveau small { font-weight: 500; color: var(--muted); font-size: 13px; }
.niveau.is-on { background: var(--night); color: var(--night-ink); }
.niveau.is-on small { color: var(--sky); }
.niveau:active { transform: scale(.97); }
.niveaux__scan { color: var(--green); font-weight: 600; text-decoration-color: var(--green); margin-left: 4px; }
.tarifs .p span[data-niveau] { display: none; }
.tarifs-wrap[data-niveau-actif="standard"] .p span[data-niveau="standard"], .tarifs-wrap[data-niveau-actif="renforce"] .p span[data-niveau="renforce"], .tarifs-wrap[data-niveau-actif="haute"] .p span[data-niveau="haute"] { display: block; }
.tiles--niveau { grid-template-columns: 1fr; gap: 10px; }
.tile--niveau { min-height: 72px; }
.tile--niveau small { white-space: normal; }

/* Recherche du technicien, puis mise en relation */
.search { text-align: center; padding: 24px 6px 8px; display: grid; gap: 16px; justify-items: center; }
.search__spin { width: 64px; height: 64px; border-radius: 50%; border: 5px solid var(--field-2); border-top-color: var(--accent); animation: spin-turn 1s linear infinite; }
.search .sheet__h { margin: 0; max-width: 22ch; }
.search__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; width: 100%; max-width: 360px; }
.search__steps li { position: relative; padding-left: 30px; color: var(--muted); transition: color var(--t-ui) ease; }
.search__steps li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--field-2); transition: background var(--t-ui) ease; }
.search__steps li.is-done { color: var(--ink); }
.search__steps li.is-done::before { background: var(--ok); }
.tech { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; padding: 14px; border-radius: 16px; background: var(--ok-bg); color: var(--ink); }
.tech__ok { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.tech__ok .ic { width: 20px; height: 20px; }
.tech b { display: block; font-size: 1.05rem; line-height: 1.25; }
.tech span { display: block; font-size: 15px; color: var(--muted); margin-top: 4px; }
.sheet__step--ok { background: var(--ok); }
.sheet__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 4px; }
.sheet__links .linkbtn { font-size: 16px; min-height: 36px; }
.sheet__links .linkbtn.is-on { text-decoration-color: var(--ink); }