/* ROZO Assurances — feuille de style v5
   Police : Mona Sans (OFL), étendue pour les titres, normale pour le texte.
   Couleurs : blanc, brume froide, encre marine du logo, bleu vif pour les actions, argent du blason.
   Règles : cinq tailles de texte, aucune étiquette au-dessus des titres, aucun dégradé décoratif,
   aucune ombre au repos (seuls les menus ouverts flottent), chiffres proportionnels. */

@font-face { font-family: "Mona Sans"; src: url("../fonts/mona-sans.woff2") format("woff2"), url("../fonts/mona-sans.woff") format("woff"); font-weight: 400 620; font-stretch: 100% 112.5%; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/mona-sans-italic.woff2") format("woff2"), url("../fonts/mona-sans-italic.woff") format("woff"); font-weight: 400 620; font-stretch: 100% 112.5%; font-style: italic; font-display: swap; }
@view-transition { navigation: auto; }

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --mist: #F3F5F9;
  --cloud: #E7EBF2;
  --silver: #C6CCD8;
  --ink: #0B1530;
  --ink-2: #1A2646;
  --muted: #586379;
  --accent: #2E5BFF;
  --accent-2: #1E46E0;
  --accent-ink: #FFFFFF;
  --sky: #E6EDFF;
  --navy: #0B1530;
  --navy-2: #14204A;
  --navy-ink: #F3F5F9;
  --navy-muted: #A3ADC2;
  --good: #0D7A54;
  --good-bg: #E2F3EB;
  --bad: #B42318;

  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);          /* 16 → 18 px */
  --step-lead: clamp(1.1875rem, 1.08rem + 0.4vw, 1.375rem);     /* 19 → 22 px */
  --step-head: clamp(1.75rem, 1.2rem + 2.3vw, 3.25rem);         /* 28 → 52 px : h2 et h1 des pages */
  --step-display: clamp(2rem, 1.1rem + 3.7vw, 4.25rem);            /* 32 → 80 px : h1 de l'accueil */

  --m: clamp(18px, 3.4vw, 56px);
  --gap: clamp(12px, 2vw, 28px);
  --r: 20px;
  --r-sm: 12px;
  --sec: clamp(56px, 7vw, 128px);
  --head-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: calc(var(--head-h) + 16px); }
/* Focus dans l'en-tête collant : pas de marge de défilement, sinon le navigateur juge l'élément masqué et fait
   remonter la page d'un demi-écran (P2-3, complété par focus({ preventScroll }) dans site.js). */
html:has(.top :focus) { scroll-padding-top: 0; }
/* Téléphone : le focus clavier ne passe plus sous la barre fixe du bas (#dock) (P3-12). */
@media (max-width: 760px) { html { scroll-padding-bottom: 96px; } }
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: lining-nums proportional-nums; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .07em; touch-action: manipulation; }
button, input, select, textarea { font: inherit; color: inherit; touch-action: manipulation; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; font-stretch: 112.5%; text-wrap: balance; hyphens: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { padding-left: max(var(--m), env(safe-area-inset-left, 0px)); padding-right: max(var(--m), env(safe-area-inset-right, 0px)); max-width: 1600px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.muted { color: var(--muted); }
.sec { padding-block: var(--sec); }
.sec--mist { background: var(--mist); }
.sec--cloud { background: var(--cloud); }
.sec--navy { background: var(--navy); color: var(--navy-ink); }
.sec--navy .muted, .sec--navy p.muted { color: var(--navy-muted); }

/* Échelle typographique : cinq tailles. */
.t-display { font-size: var(--step-display); line-height: .98; letter-spacing: -.035em; }
.t-head { font-size: var(--step-head); line-height: 1.03; letter-spacing: -.03em; }
.t-lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -.005em; }
.t-small { font-size: var(--step-small); line-height: 1.55; }
.lead { font-size: var(--step-lead); line-height: 1.35; }
@media (max-width: 760px) { body { line-height: 1.5; } }
.h-sub { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; font-weight: 500; font-stretch: 112.5%; }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(24px, 3vw, 56px); max-width: 60ch; }
.sec-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); max-width: none; align-items: end; column-gap: var(--gap); }
.sec-head--split p { max-width: 44ch; justify-self: end; }
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; } .sec-head--split p { justify-self: start; } }

/* ---------- Photos ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--r); background: var(--cloud); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Boutons et liens ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 560; font-size: var(--step-body); line-height: 1.1; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out); }
.btn:hover { background: var(--accent-2); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.btn:hover svg.go { transform: translateX(3px); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--ink-2); }
.btn--soft { background: var(--mist); color: var(--ink); }
.btn--soft:hover { background: var(--cloud); }
.btn--light { background: var(--navy-ink); color: var(--navy); }
.btn--light:hover { background: #FFFFFF; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--step-small); }
.btn[disabled] { cursor: progress; opacity: .7; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.tlink { font-weight: 560; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); transition: text-decoration-color .2s ease; }
.tlink:hover { text-decoration-color: currentColor; }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 560; text-decoration: none; }
.arrow-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- En-tête ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); transition: transform .45s var(--ease-out), background-color .3s ease; }
.top.hide { transform: translateY(-110%); }
.top.menu-open { transform: none; }
.top-in { display: flex; align-items: center; gap: 20px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { width: 30px; height: 35px; }
.brand b { font-weight: 600; font-stretch: 112.5%; letter-spacing: .04em; font-size: var(--step-lead); line-height: 1; }
.brand span { color: var(--muted); font-size: var(--step-small); font-weight: 500; margin-left: 2px; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > li > a, .nav > li > button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 0; background: none; cursor: pointer; text-decoration: none; font-size: var(--step-small); font-weight: 500; color: var(--ink); transition: background-color .2s ease; }
.nav > li > a:hover, .nav > li > button:hover, .nav > li > button[aria-expanded="true"], .nav > li > a[aria-current="page"] { background: var(--mist); }
.nav > li > button svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.nav > li > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.top-cta { display: flex; align-items: center; gap: 12px; margin-left: 12px; }
.top-tel { font-size: var(--step-small); font-weight: 560; text-decoration: none; white-space: nowrap; }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--mist); cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; content: ""; }
.burger span { top: 50%; margin-top: -1px; }
.burger span::before { top: -6px; left: 0; margin-left: 0; }
.burger span::after { top: 6px; left: 0; margin-left: 0; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Méga-menu : un panneau sous l'en-tête, liens à gauche, photo à droite. */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); display: none; box-shadow: 0 30px 60px -30px rgba(11, 21, 48, .28); }
.mega.open { display: block; animation: mega-in .35s var(--ease-out) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } }
.mega-in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); padding-block: 28px 40px; }
.mega-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; align-content: start; }
.mega-links a { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-sm); text-decoration: none; transition: background-color .2s ease; }
.mega-links a:hover, .mega-links a:focus-visible { background: var(--mist); }
.mega-links b { font-weight: 560; font-size: var(--step-body); }
.mega-links small { font-size: var(--step-small); color: var(--muted); }
.mega-foot a { white-space: nowrap; }
.mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 16px 0; font-size: var(--step-small); }
.mega-ph { aspect-ratio: 4 / 3; border-radius: var(--r-sm); align-self: start; }
.mega-ph figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--bg); border-radius: 10px; padding: 12px 14px; font-size: var(--step-small); line-height: 1.4; }
.mega-ph figcaption b { display: block; font-weight: 560; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(11, 21, 48, .28); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.scrim.on { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }

/* Menu mobile : plein écran, accordéons. */
.mnav { position: fixed; inset: 0; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); z-index: 49; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: 8px max(var(--m), env(safe-area-inset-left, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)); display: none; }
.mnav.open { display: block; animation: mega-in .35s var(--ease-out) both; }
.mnav details { border-radius: var(--r-sm); }
.mnav summary, .mnav > a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; text-decoration: none; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary svg { width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.mnav details[open] summary svg { transform: rotate(180deg); }
.mnav details a { display: block; padding: 11px 0 11px 2px; text-decoration: none; color: var(--muted); }
.mnav details a b { color: var(--ink); font-weight: 500; }
.mnav .acts { margin-top: 28px; }
.mnav .acts .btn { flex: 1 1 100%; }
/* Seuils de l'en-tête en em : ils suivent la taille de police choisie dans le navigateur (P2-4). 75.625em = 1210 px à 16 px. */
@media (max-width: 75.625em) { .nav, .top-cta { display: none; } .burger { display: block; } }
@media (min-width: 1121px) { .mnav { display: none; } }

/* ---------- Fil d'Ariane ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--step-small); color: var(--muted); padding-top: clamp(16px, 2vw, 28px); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--silver); }

/* ---------- Héros de l'accueil ---------- */
.hero { padding-block: clamp(32px, 4.6vw, 72px) clamp(64px, 7vw, 112px); }
.hero h1 { margin-left: -.045em; }
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: block; }
@media (min-width: 900px) { .hero h1 .ln > span { white-space: nowrap; } }
.hero .row { margin-top: clamp(32px, 4.4vw, 64px); align-items: start; }
.hero .say { grid-column: 1 / span 5; display: grid; gap: 28px; padding-top: 4px; }
.hero .say .lead { max-width: 30ch; }
.proof { font-size: var(--step-small); color: var(--muted); line-height: 1.6; max-width: 40ch; }
.proof b { color: var(--ink); font-weight: 560; }
.hero-ph { grid-column: 6 / -1; aspect-ratio: 3 / 2; }
.hero-ph img { object-position: 50% 62%; }
@media (max-width: 980px) { .hero .say, .hero-ph { grid-column: 1 / -1; } .hero-ph { margin-top: 36px; aspect-ratio: 4 / 3; } }

/* Partenaires : logos officiels fournis par le cabinet, couleurs d’origine, tailles équilibrées à l’œil. */
.partners-sec { padding-block: 0 clamp(56px, 6vw, 96px); }
.partners-sec--top { padding-top: clamp(56px, 6vw, 96px); }
.partners { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 24px var(--gap); }
.partners p { font-size: var(--step-small); color: var(--muted); max-width: 30ch; }
/* Bandeau défilant façon panneau d’affichage : mouvement linéaire et continu, fondu sur les bords par un masque,
   pause au survol, immobile si l’utilisateur a demandé moins d’animations. */
.marquee { position: relative; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee 36s linear infinite; will-change: transform; }
.marquee-track li { flex: none; display: flex; align-items: center; padding-inline: clamp(28px, 3.6vw, 60px); height: 84px; }
.marquee-track img { width: auto; display: block; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-25%, 0, 0); } }
.lg-generali { height: 64px; }
.lg-axa { height: 54px; }
.lg-allianz { height: 32px; }
.lg-april { height: 38px; }
@media (max-width: 900px) { .partners { grid-template-columns: 1fr; } .marquee { margin-inline: calc(var(--m) * -1); } }
@media (max-width: 520px) { .marquee-track { animation-duration: 28s; } .marquee-track li { height: 64px; padding-inline: 26px; } .lg-generali { height: 50px; } .lg-axa { height: 42px; } .lg-allianz { height: 24px; } .lg-april { height: 29px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; row-gap: 12px; }
  .marquee-track li[aria-hidden] { display: none; }
}

/* ---------- Grande photo et carte posée dessus ---------- */
.band { padding-bottom: var(--sec); }
.band-ph { height: clamp(380px, 62vw, 760px); border-radius: 0; }
.band-ph img { object-position: 50% 40%; }
.band .grid { position: relative; z-index: 1; margin-top: clamp(-200px, -11vw, -80px); }
.band-card { grid-column: 1 / span 7; background: var(--bg); border-radius: var(--r); padding: clamp(28px, 3.6vw, 56px); display: grid; gap: 20px; }
.band-card h2 .nl { display: block; }
.band-card p { max-width: 46ch; }
.band-aside { grid-column: 9 / -1; align-self: end; display: grid; gap: 6px; font-size: var(--step-small); color: var(--muted); padding-bottom: clamp(8px, 1.6vw, 24px); }
.band-aside b { color: var(--ink); font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.3; }
@media (max-width: 900px) { .band-card, .band-aside { grid-column: 1 / -1; } .band-card { margin-inline: calc(var(--m) * -0.4); } .band-aside { margin-top: 28px; } }

/* ---------- Le document ---------- */
.doc-sec .txt { grid-column: 1 / span 5; display: grid; gap: 22px; align-content: center; }
.doc-sec .txt p { max-width: 40ch; }
.paper { grid-column: 7 / -1; background: var(--bg); border-radius: 8px; padding: clamp(24px, 3vw, 44px); font-size: var(--step-small); line-height: 1.5; rotate: -1.2deg; }
.paper header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 22px; }
.paper header img { width: 30px; height: 35px; }
.paper header .meta { text-align: right; color: var(--muted); }
.paper header .meta b { display: block; color: var(--ink); font-size: var(--step-body); font-weight: 560; }
.paper h3 { font-size: var(--step-lead); letter-spacing: -.015em; margin: 6px 0 18px; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 560; color: var(--muted); padding: 8px 10px; font-size: var(--step-small); }
.tbl th:not(:first-child), .tbl td:not(:first-child) { text-align: right; }
.tbl td { padding: 10px; }
.tbl tbody tr:nth-child(odd) td { background: var(--mist); }
.tbl td:first-child { border-radius: 8px 0 0 8px; } .tbl td:last-child { border-radius: 0 8px 8px 0; }
.tbl td.ok { color: var(--good); font-weight: 560; }
.tbl tr.total td, .tbl tbody tr.total td { font-weight: 560; font-size: var(--step-body); background: none; padding-top: 16px; }
.tbl tr.total td.save { color: var(--good); }
.paper .tbl td:not(:first-child) { white-space: nowrap; }
.paper .sign { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 26px; }
.paper .sign p { color: var(--muted); max-width: 34ch; }
.paper .sign .who { text-align: right; }
.paper .sign .who b { display: block; color: var(--ink); font-size: var(--step-body); font-weight: 560; }
.stamp { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-weight: 560; }
@media (max-width: 900px) { .doc-sec .txt, .paper { grid-column: 1 / -1; } .paper { margin-top: 40px; rotate: 0deg; } }
@media (max-width: 520px) { .paper { padding: 20px 16px; } .tbl td { padding: 9px 6px; } .paper .sign { flex-direction: column; align-items: flex-start; } .paper .sign .who { text-align: left; } }

/* ---------- Guides ---------- */
.guides { display: grid; gap: 4px; }
.guide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) 52px; align-items: center; gap: 24px; text-decoration: none; padding: clamp(18px, 2vw, 28px) 0; border-radius: var(--r-sm); transition: padding .4s var(--ease-out), background-color .25s ease; }
.guide:hover { background: var(--bg); padding-inline: 20px; }
.sec:not(.sec--mist) .guide:hover { background: var(--mist); }
.guide :is(h2, h3) { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; }
.guide p { color: var(--muted); max-width: 46ch; }
.guide .arrow-link { width: 52px; height: 52px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: background-color .2s ease, color .2s ease; }
.sec:not(.sec--mist) .guide .arrow-link { background: var(--mist); }
.guide:hover .arrow-link { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 900px) { .guide { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 16px; } .guide p { grid-column: 1; } .guide .arrow-link { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; } }

/* ---------- Questions ---------- */
.qa { display: grid; }
.qa details { padding-block: 4px; }
.qa details + details { border-top: 0; }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 16px; min-height: 76px; padding-block: 14px; cursor: pointer; list-style: none; font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 44px; height: 44px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; transition: background-color .2s ease, transform .35s var(--ease-out); }
.sec--mist .qa summary .pm { background: var(--bg); }
.qa summary .pm svg { width: 18px; height: 18px; }
.qa details[open] summary .pm { transform: rotate(45deg); background: var(--ink); color: var(--bg); }
.qa .ans { padding: 0 60px 26px 0; max-width: 60ch; color: var(--muted); line-height: 1.6; }
.qa .ans p + p { margin-top: .8em; }
.faq-grid { align-items: start; }
.faq-grid .sec-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 32px); }
.faq-grid .qa { grid-column: 6 / -1; }
@media (max-width: 900px) { .faq-grid .sec-head, .faq-grid .qa { grid-column: 1 / -1; } .faq-grid .sec-head { position: static; } .qa .ans { padding-right: 0; } }

/* ---------- Appel final ---------- */
.final { padding-block: 0 var(--sec); }
.sec--mist + .final, .sec--navy + .final, .sec--cloud + .final, .devis + .final { padding-top: var(--sec); }
.final-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: calc(var(--r) + 8px); overflow: hidden; background: var(--navy); color: var(--navy-ink); }
.final-txt { padding: clamp(32px, 5vw, 80px); display: grid; gap: 24px; align-content: center; }
.final-txt p { color: var(--navy-muted); max-width: 44ch; }
.final-ways { display: grid; gap: 6px; margin-top: 12px; max-width: 560px; }
.final-ways a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 16px 20px; border-radius: var(--r-sm); background: var(--navy-2); text-decoration: none; transition: background-color .2s ease, transform .3s var(--ease-out); }
.final-ways a:hover { background: var(--accent); transform: translateY(-3px); }
.final-ways a.main { background: var(--accent); }
.final-ways a.main:hover { background: var(--accent-2); }
.final-ways b { font-weight: 560; font-size: var(--step-body); }
.final-ways small { grid-column: 2; grid-row: 1; text-align: right; }
.final-ways small { font-size: var(--step-small); color: var(--navy-muted); }
.final-ways a:hover small, .final-ways a.main small { color: #FFFFFF; }
.final .ph { border-radius: 0; min-height: 100%; }
@media (max-width: 980px) { .final-card { grid-template-columns: 1fr; } .final .ph { aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 520px) { .final-ways a { grid-template-columns: 1fr; } .final-ways small { grid-column: 1; grid-row: auto; text-align: left; } }

/* ---------- Pied de page ---------- */
.foot { background: var(--mist); padding-block: clamp(56px, 7vw, 96px) 28px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); }
.foot-id { display: grid; gap: 18px; align-content: start; }
.foot-id .brand img { width: 40px; height: 47px; }
.foot-id p { max-width: 34ch; color: var(--muted); }
.foot-id .contact { display: grid; gap: 4px; font-size: var(--step-body); }
.foot-id .contact a { text-decoration: none; font-weight: 560; }
.foot-id .contact a:hover { text-decoration: underline; }
.foot-id .contact span { color: var(--muted); font-size: var(--step-small); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; font-size: var(--step-small); }
.foot-cols b { display: block; margin-bottom: 12px; font-weight: 560; font-size: var(--step-body); }
.foot-cols a { display: block; padding: 5px 0; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.foot-cols a:hover { color: var(--ink); }
.foot-legal { margin-top: clamp(48px, 6vw, 88px); padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; font-size: var(--step-small); color: var(--muted); }
.foot-legal p { max-width: 68ch; }
.foot-legal .orias { display: flex; flex-wrap: wrap; gap: 8px; align-self: start; }
.foot-legal .orias span { padding: 8px 14px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 560; white-space: nowrap; }
@media (max-width: 980px) { .foot-top { grid-template-columns: 1fr; } .foot-cols { grid-template-columns: 1fr 1fr; margin-top: 36px; } .foot-legal { grid-template-columns: 1fr; } }

/* Barre d'action mobile */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); background: var(--bg); transform: translateY(110%); transition: transform .35s var(--ease-out); }
.dock.on { transform: none; }
.dock .btn { flex: 1; }
.dock .btn--ink { flex: 0 0 auto; width: 54px; padding: 0; }
@media (max-width: 760px) { .dock { display: flex; } body { padding-bottom: 76px; } }

/* =================== Pages intérieures =================== */
.phero { padding-block: 0 clamp(56px, 7vw, 112px); }
.phero .grid { margin-top: clamp(28px, 3.6vw, 56px); align-items: center; row-gap: 36px; }
.phero .txt { grid-column: 1 / span 6; display: grid; gap: 26px; }
.phero h1 { font-size: var(--step-head); line-height: 1.03; letter-spacing: -.03em; margin-left: -.04em; max-width: 21ch; }
.phero .txt .lead { max-width: 32ch; }
.phero .ph { grid-column: 8 / -1; aspect-ratio: 4 / 5; }
.phero--wide .ph { grid-column: 7 / -1; margin-right: calc(-1 * max(var(--m), env(safe-area-inset-right, 0px))); border-radius: var(--r) 0 0 var(--r); height: min(74vh, 740px); min-height: 420px; aspect-ratio: auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.facts div { background: var(--mist); border-radius: var(--r-sm); padding: 16px 16px 18px; display: grid; gap: 4px; align-content: start; }
.facts b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.02em; line-height: 1.1; }
.facts span { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
@media (max-width: 980px) { .phero .txt, .phero .ph, .phero--wide .ph { grid-column: 1 / -1; } .phero .ph, .phero--wide .ph { aspect-ratio: 4 / 3; height: auto; min-height: 0; margin-right: 0; border-radius: var(--r); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .facts div { grid-template-columns: 5.5em 1fr; align-items: baseline; gap: 12px; } }

.intro .txt { grid-column: 1 / span 6; display: grid; gap: 22px; align-content: start; }
.intro .txt p { max-width: 54ch; }
.who { grid-column: 8 / -1; display: grid; gap: 0; align-content: start; }
.who div { padding: 0 0 22px; display: grid; gap: 4px; max-width: 46ch; }
.who b { font-weight: 560; }
.who span { color: var(--muted); font-size: var(--step-small); }
@media (max-width: 900px) { .intro .txt, .who { grid-column: 1 / -1; } .who { margin-top: 36px; } }

.seq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seq div { background: var(--bg); border-radius: var(--r-sm); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; min-height: 220px; }
.sec--navy .seq div { background: var(--navy-2); }
.seq em { font-style: normal; color: var(--accent); font-weight: 560; font-size: var(--step-small); }
.sec--navy .seq em { color: #9DB4FF; }
.seq b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.2; }
.seq span { font-size: var(--step-small); color: var(--muted); }
.sec--navy .seq span { color: var(--navy-muted); }
@media (max-width: 980px) { .seq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .seq { grid-template-columns: 1fr; } .seq div { min-height: 0; } }

.tbl-sec .tbl-wrap { overflow-x: auto; background: var(--bg); border-radius: var(--r); padding: clamp(16px, 2.4vw, 32px); }
.tbl-sec .tbl { min-width: 560px; font-size: var(--step-small); }
.tbl-sec .tbl th:not(:first-child), .tbl-sec .tbl td:not(:first-child) { text-align: left; }
.tbl-sec .note { margin-top: 16px; font-size: var(--step-small); color: var(--muted); max-width: 70ch; }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rcard { display: grid; gap: 14px; text-decoration: none; }
.rcard .ph { aspect-ratio: 4 / 3; }
.rcard .ph img { transition: transform .9s var(--ease-out); }
.rcard:hover .ph img { transform: scale(1.04); }
.rcard b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; }
.rcard span { color: var(--muted); font-size: var(--step-small); }
@media (max-width: 900px) { .related { grid-template-columns: 1fr; } }

/* Grille de produits (page Nos assurances, page Devis) */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); }
@media (max-width: 980px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- Texte long (guides, mentions légales) ---------- */
.prose-wrap { padding-block: clamp(40px, 5vw, 80px) var(--sec); }
.prose-wrap .grid { align-items: start; }
.prose-aside { grid-column: 1 / span 3; position: sticky; top: calc(var(--head-h) + 32px); display: grid; gap: 14px; font-size: var(--step-small); color: var(--muted); }
.prose-aside a:not(.btn) { color: var(--ink); }
.prose { grid-column: 5 / span 7; font-size: var(--step-body); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; margin-top: 2.2em; }
.prose h3 { font-size: var(--step-body); font-weight: 560; font-stretch: 100%; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a:not(.btn) { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.prose th, .prose td { text-align: left; padding: 10px; vertical-align: top; }
.prose tbody tr:nth-child(odd) td { background: var(--mist); }
.prose .callout { background: var(--mist); border-radius: var(--r-sm); padding: 20px 22px; }
.prose dl { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 8px 20px; }
.prose dt { font-weight: 560; }
.prose dd { margin: 0; }
@media (max-width: 980px) { .prose-aside { position: static; grid-column: 1 / -1; margin-bottom: 32px; } .prose { grid-column: 1 / -1; } .prose dl { grid-template-columns: 1fr; } }

/* =================== Questionnaire devis et rendez-vous =================== */
.devis { background: var(--mist); }
.devis .grid { align-items: start; row-gap: 40px; }
.devis-head { grid-column: 1 / -1; }
.devis-side { grid-column: 1 / span 4; position: sticky; top: calc(var(--head-h) + 32px); display: grid; gap: 22px; }
.devis-side ul { display: grid; gap: 10px; font-size: var(--step-small); }
.devis-side li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.devis-side li svg { width: 20px; height: 20px; color: var(--good); margin-top: 1px; }
.devis-side .ph { aspect-ratio: 16 / 10; }
.devis-side .contact-line { font-size: var(--step-small); color: var(--muted); }
.devis-side .contact-line a { color: var(--ink); font-weight: 560; }
.fcard { grid-column: 6 / -1; background: var(--bg); border-radius: calc(var(--r) + 4px); padding: clamp(24px, 3.4vw, 52px); min-height: 520px; display: grid; align-content: start; gap: 28px; }
@media (max-width: 980px) { .devis-side, .fcard { grid-column: 1 / -1; } .devis-side { position: static; } .devis-side .ph { display: none; } }

.prog { display: grid; gap: 10px; }
.prog-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--step-small); color: var(--muted); }
.prog-top b { color: var(--ink); font-weight: 560; }
.prog-bar { height: 6px; border-radius: 6px; background: var(--cloud); overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 6px; transition: width .6s var(--ease-move); }
.fstep { display: grid; gap: 26px; }
.fstep[hidden] { display: none; }
.fstep :is(h2, h3) { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -.015em; }
.fstep > p.muted { margin-top: -14px; }
.field { display: grid; gap: 10px; min-width: 0; }
.field[hidden] { display: none; }
.field > label, .field > legend, .field .lbl { font-weight: 560; font-size: var(--step-body); padding: 0; }
.field .help { font-size: var(--step-small); color: var(--muted); margin-top: -4px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.inp { width: 100%; min-height: 56px; padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid var(--cloud); background: var(--bg); font-size: max(16px, var(--step-body)); transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
textarea.inp { min-height: 130px; resize: vertical; line-height: 1.5; }
select.inp { background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1530' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; padding-right: 44px; color: var(--ink); }
.inp:hover { border-color: var(--silver); }
.inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--sky); }
.inp-unit { position: relative; }
.inp-unit .inp { padding-right: 56px; }
.inp-unit span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.field.err .inp { border-color: var(--bad); }
.field .msg { display: none; font-size: var(--step-small); color: var(--bad); font-weight: 560; }
.field.err .msg { display: block; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; min-height: 56px; padding: 12px 16px 12px 46px; border-radius: var(--r-sm); background: var(--mist); font-weight: 500; line-height: 1.3; position: relative; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.choice span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--silver); transition: box-shadow .2s ease, background-color .2s ease; }
.choice input[type="checkbox"] + span::before { border-radius: 5px; }
.choice input:hover + span { background: var(--cloud); }
.choice input:checked + span { background: var(--ink); color: var(--bg); }
.choice input:checked + span::before { background: var(--accent); box-shadow: inset 0 0 0 4px var(--bg); }
.choice input[type="checkbox"]:checked + span::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field.err .choice span { box-shadow: inset 0 0 0 1.5px var(--bad); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--step-small); color: var(--muted); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fnav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }
.fnav .back { background: none; border: 0; cursor: pointer; min-height: 48px; padding: 0 4px; font-weight: 560; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.fnav .back:hover { color: var(--ink); }
.fnav .back svg { width: 18px; height: 18px; }
.fnote { font-size: var(--step-small); color: var(--muted); }
.ferr { display: none; padding: 14px 16px; border-radius: var(--r-sm); background: #FDECEA; color: var(--bad); font-size: var(--step-small); font-weight: 560; }
.ferr.on { display: block; }

/* Prise de rendez-vous */
.sent { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--r-sm); background: var(--good-bg); }
.sent svg { width: 44px; height: 44px; color: var(--good); }
.sent b { display: block; font-weight: 560; }
.sent span { font-size: var(--step-small); color: var(--ink-2); }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.days button, .slots button { border: 0; cursor: pointer; border-radius: var(--r-sm); background: var(--mist); transition: background-color .2s ease, color .2s ease, transform .15s var(--ease-out); }
.days button { display: grid; gap: 2px; padding: 12px 6px; text-align: center; }
.days button small { font-size: var(--step-small); color: var(--muted); text-transform: capitalize; }
.days button b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; line-height: 1.1; }
.days button:hover, .slots button:hover { background: var(--cloud); }
.days button[aria-pressed="true"], .slots button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.days button[aria-pressed="true"] small { color: var(--navy-muted); }
.days button:active, .slots button:active { transform: scale(.97); }
.days-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--step-small); }
.days-nav button { border: 0; background: var(--mist); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.days-nav button[disabled] { opacity: .35; cursor: default; }
.days-nav button svg { width: 18px; height: 18px; }
.days-nav b { font-weight: 560; text-transform: capitalize; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.slots button { min-height: 48px; font-weight: 560; }
.slots button[disabled] { background: transparent; color: var(--silver); cursor: not-allowed; text-decoration: line-through; }
@media (max-width: 520px) { .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .days button:nth-child(n+4) { display: none; } }
.recap { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--r-sm); background: var(--mist); }
.recap b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; }
.recap span { color: var(--muted); font-size: var(--step-small); }
.done { display: grid; gap: 22px; justify-items: start; }
.done .check { width: 64px; height: 64px; border-radius: 50%; background: var(--good-bg); color: var(--good); display: grid; place-items: center; }
.done .check svg { width: 30px; height: 30px; }
.done :is(h2, h3) { font-size: var(--step-head); line-height: 1.04; letter-spacing: -.03em; }
.done p { max-width: 52ch; }

/* ---------- Simulateur ---------- */
.calc { background: var(--bg); border-radius: var(--r); padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 24px; align-content: start; }
.calc .ctl { display: grid; gap: 10px; }
.calc .ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--step-small); color: var(--muted); padding: 0; margin: 0; width: 100%; }
.calc .ctl-head output { font-size: var(--step-body); color: var(--ink); font-weight: 560; }
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; margin: 0; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ink) var(--p, 50%), var(--cloud) var(--p, 50%)); }
.range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--cloud); }
.range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); transition: transform .16s var(--ease-out); }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--cloud); padding: 4px; border-radius: 999px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; padding: 4px; border-radius: 999px; font-size: var(--step-small); font-weight: 560; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.seg input:checked + span { background: var(--bg); color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.bars { display: grid; gap: 12px; padding-top: 6px; }
.bar { display: grid; grid-template-columns: 112px 1fr 104px; align-items: center; gap: 14px; font-size: var(--step-small); }
.bar .track { display: block; height: 30px; border-radius: 8px; background: var(--cloud); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: 8px; width: var(--w, 100%); transition: width .7s var(--ease-move); }
.bar--bank .fill { background: #A6AFC2; }
.bar--rozo .fill { background: var(--accent); }
.bar b { font-size: var(--step-body); text-align: right; font-weight: 560; }
.result { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; padding-top: 4px; }
.result small { display: block; font-size: var(--step-small); color: var(--muted); }
.result .amt { display: block; font-size: var(--step-head); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.03em; line-height: 1.05; color: var(--good); }
.calc .note { font-size: var(--step-small); color: var(--muted); line-height: 1.5; max-width: 62ch; }
.calc .none { display: none; font-size: var(--step-small); }
.calc.is-none .none { display: block; }
@media (max-width: 520px) { .bar { grid-template-columns: 88px 1fr 82px; gap: 10px; } }

/* ---------- Contact ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ways a, .ways div { display: grid; gap: 6px; align-content: start; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r); background: var(--mist); text-decoration: none; transition: background-color .2s ease; }
.ways a:hover { background: var(--cloud); }
.ways b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.2; }
.ways span { color: var(--muted); font-size: var(--step-small); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }

/* ---------- Mouvement ---------- */
/* Les états de départ ne sont posés que si le JavaScript tourne (classe .js), jamais sans.
   V6 (D3) : seuls les titres h2 (et les grands blocs marqués .rv-block) apparaissent au défilement ;
   paragraphes, listes et cartes s'affichent directement, même si une page porte encore la classe .rv. */
.js :is(h2.rv, .t-head.rv, .rv-block) { opacity: 0; transform: translateY(28px); }
.js .rv-img img { transform: scale(1.08); }
.rv-img { isolation: isolate; } /* Safari : l'image agrandie ne déborde pas des coins arrondis pendant le dézoom */
/* Héros : animation en CSS dès le premier affichage, sans attendre le chargement de GSAP.
   Seule la position bouge (jamais l’opacité) : le texte compte tout de suite pour le LCP. */
@keyframes rz-rise { from { transform: translateY(28px); } }
@keyframes rz-line { from { transform: translateY(108%); } }
.js :is(.hero, .phero) .rv { opacity: 1; transform: none; animation: rz-rise .9s var(--ease-out) both; }
.js :is(.hero, .phero) .rv + .rv { animation-delay: .07s; }
.js h1 .ln > span { animation: rz-line 1.05s var(--ease-out) .05s both; }
.js h1 .ln + .ln > span { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js .rv, .js :is(h2.rv, .t-head.rv, .rv-block) { opacity: 1; transform: none; }
  .js .rv-img img { transform: none; }
  @view-transition { navigation: none; }
}
::view-transition-old(root) { animation: vt-out .28s ease both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Texte long : éléments hérités des guides et des pages légales */
.prose tr.hl td { background: var(--sky) !important; }
.prose .callout--amber { background: #FFF4D6; }
.prose .table-wrap { overflow-x: auto; }
.prose .small { font-size: var(--step-small); }
.prose .todo { background: #FFF1B8; color: #6B4E00; padding: 1px 6px; border-radius: 4px; font-size: var(--step-small); font-weight: 560; }

/* Deux photos décalées (page cabinet) */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: end; }
.duo .ph:first-child { aspect-ratio: 4 / 5; }
.duo .ph:last-child { aspect-ratio: 16 / 10; }
.duo .cap { grid-column: 2; margin-top: -8px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } .duo .cap { grid-column: 1; } }

/* Corrections après relecture */
a[href^="tel:"] { white-space: nowrap; }
.seq--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .seq--3 { grid-template-columns: 1fr; } }
.sim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.sim-side { display: grid; gap: 6px; align-content: stretch; }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } .sim-side .ph { aspect-ratio: 4 / 3; min-height: 0 !important; } }
.illu { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-size: var(--step-small); line-height: 1; padding: 6px 10px; border-radius: 999px; background: rgba(11, 21, 48, .55); color: #fff; }
.band-ph .illu { bottom: auto; top: 16px; right: max(var(--m), 16px); }
.swipe { display: none; font-size: var(--step-small); color: var(--muted); margin-top: 10px; }
@media (max-width: 760px) { .swipe { display: block; } }

/* Simulateurs (v5.1) : intégrés aux fiches et regroupés sur la page Nos simulateurs */
.sim { align-items: start; }
.sim-side { align-content: start; position: sticky; top: calc(var(--head-h) + 32px); }
.sim-next { background: var(--bg); border-radius: var(--r); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 14px; }
.sim-sec .calc, .sim-sec .sim-next { background: var(--bg); }
.checks { display: grid; gap: 10px; font-size: var(--step-small); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checks svg { width: 20px; height: 20px; color: var(--good); margin-top: 1px; }
.seg--5 { grid-template-columns: repeat(5, 1fr); }
.calc .hint { display: block; font-size: var(--step-small); color: var(--muted); margin-top: 8px; }
.result small + .amt + small { margin-top: 6px; }
@media (max-width: 900px) { .sim-side { position: static; } }
@media (max-width: 560px) {
  .seg--wrap { grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
  .seg--wrap span { border-radius: 18px; }
}
.sim-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.sim-tabs button { display: grid; gap: 4px; text-align: left; font: inherit; cursor: pointer; padding: 18px 20px; border-radius: var(--r-sm); border: 1px solid var(--silver); background: transparent; color: var(--muted); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.sim-tabs button b { font-size: var(--step-body); font-weight: 560; color: var(--ink); }
.sim-tabs button small { font-size: var(--step-small); }
.sim-tabs button:hover { border-color: var(--ink); }
.sim-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .72); }
.sim-tabs button[aria-selected="true"] b { color: #fff; }
.sim-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .sim-tabs { gap: 6px; } .sim-tabs button { padding: 12px 10px; text-align: center; } .sim-tabs button small { display: none; } }
.sim-panel[hidden] { display: none !important; }

/* Bloc d’appel vers le questionnaire, dans les fiches produit */
.devis-cta { background: var(--mist); }
.dcta { background: var(--bg); border-radius: calc(var(--r) + 4px); padding: clamp(28px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.dcta .t-head { margin-bottom: 14px; }
.dcta .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin-top: 22px; }
.dcta-go { display: grid; gap: 12px; justify-items: stretch; }
.dcta-go .btn { justify-content: center; }
.dcta-go small { font-size: var(--step-small); color: var(--muted); text-align: center; }
@media (max-width: 900px) { .dcta { grid-template-columns: 1fr; } .dcta .checks { grid-template-columns: 1fr; } }

/* Page questionnaire dédiée */
.devis--page { padding-top: clamp(32px, 4vw, 64px); }
.devis--page .devis-head h1 { margin-top: 18px; }
.backlink { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-small); font-weight: 560; color: var(--muted); text-decoration: none; }
.backlink:hover { color: var(--ink); }
.backlink svg { width: 18px; height: 18px; }
.sim-tabs { scroll-margin-top: calc(var(--head-h) + 24px); }
@media (max-width: 980px) { .devis--page .devis-side { order: 3; } .devis--page .devis-side .checks { grid-template-columns: 1fr; } }
.mega-links .mega-foot a { display: inline-flex; align-items: center; padding: 6px 0; border-radius: 0; }
.mega-links .mega-foot a:hover, .mega-links .mega-foot a:focus-visible { background: none; color: var(--accent); }
.sim-sec + .devis-cta { padding-top: 0; }

/* v5.2 : patrimoine */
.related--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .related--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .related--4 { grid-template-columns: 1fr; } }
.foot-cols b.foot-sub { margin-top: 22px; }

/* Exemple chiffré (page cabinet) */
.ex-card { margin: 0; background: var(--bg); border-radius: calc(var(--r) + 4px); padding: clamp(24px, 3vw, 44px); display: grid; gap: 22px; align-content: start; }
.ex-card figcaption { display: grid; gap: 4px; }
.ex-card figcaption b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; }
.ex-card figcaption span, .ex-card-note { font-size: var(--step-small); color: var(--muted); }
.ex-card .bar { grid-template-columns: 140px 1fr 96px; }
.ex-card-sum { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--cloud); }
.ex-card-sum .amt { font-size: var(--step-head); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.03em; line-height: 1.05; color: var(--good); }
.ex-card-sum span:last-child { font-size: var(--step-small); color: var(--muted); }
.ex-card .btn { justify-self: start; }
@media (max-width: 520px) { .ex-card .bar { grid-template-columns: 96px 1fr 76px; } }
.intro .ex-card { grid-column: 8 / -1; }
@media (max-width: 900px) { .intro .ex-card { grid-column: 1 / -1; margin-top: 36px; } }

/* Triangle de sécurité (assurance vie luxembourgeoise) */
.tri-sec .grid { align-items: center; }
.tri-txt { grid-column: 1 / span 6; display: grid; gap: 22px; }
.tri-txt p { max-width: 54ch; }
.tri { grid-column: 8 / -1; margin: 0; }
.tri svg { width: 100%; height: auto; display: block; overflow: visible; }
.tri-line { fill: none; stroke: var(--silver); stroke-width: 2; stroke-dasharray: 6 8; }
.tri-node circle { fill: var(--navy); }
.tri-node text { fill: #fff; font-size: 14px; font-weight: 560; text-anchor: middle; }
.tri-core rect { fill: var(--sky); stroke: var(--accent); stroke-width: 2; }
.tri-core text { fill: var(--ink); font-size: 18px; font-weight: 600; text-anchor: middle; }
.tri .tri-small, .tri-core .tri-small { font-size: 13px; font-weight: 400; fill: var(--muted); text-anchor: middle; }
@media (max-width: 900px) { .tri-txt, .tri { grid-column: 1 / -1; } .tri { max-width: 460px; margin: 24px auto 0; } }
.sit a { background: var(--bg); border-radius: var(--r-sm); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; min-height: 200px; text-decoration: none; color: inherit; transition: background-color .2s ease, transform .2s var(--ease-out); }
.sit a:hover { background: var(--sky); }
.sit a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .seq--3.sit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .seq--3.sit { grid-template-columns: 1fr; } .sit a { min-height: 0; } }
.intro .ex-card { grid-column: 7 / -1; }
.ex-card .bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
.ex-card .bar > span:first-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .ex-card .bar { grid-template-columns: minmax(0, 1fr) auto; } }
.nav > li > a, .nav > li > button { white-space: nowrap; }
@media (max-width: 83.75em) { .top-tel { display: none; } }
@media (max-width: 77.5em) { .nav > li > a, .nav > li > button { padding: 0 9px; } .top-cta { gap: 8px; margin-left: 8px; } }
.nav > li > button svg { flex-shrink: 0; }
@media (max-width: 900px) { .intro .ex-card { grid-column: 1 / -1; margin-top: 36px; } }
@media (max-width: 600px) { .tri { max-width: none; } .tri-node text { font-size: 19px; } .tri-core text { font-size: 23px; } .tri .tri-small, .tri-core .tri-small { font-size: 16px; } }

.btn--ghost-light { background: transparent; color: var(--navy-ink); box-shadow: inset 0 0 0 1px rgba(243, 245, 249, .4); }
.btn--ghost-light:hover { background: rgba(243, 245, 249, .1); }

html.menu-locked, html.menu-locked body { overflow: hidden; }

/* Cadrages des photos HD (agent images, 23/10) */
.ph img[src*="/seniors."]      { object-position: 50% 0%; }
.ph img[src*="/liste-pro."]    { object-position: 55% 0%; }
.ph img[src*="/liste-pret."]   { object-position: 50% 15%; }
.ph img[src*="/calc-couple."]  { object-position: 50% 20%; }
.ph img[src*="/liste-sante."]  { object-position: 20% 10%; }
.ph img[src*="/auto."]         { object-position: 25% 50%; }
.ph img[src*="/grandmere."]    { object-position: 40% 50%; }
.ph:not(.hero-ph) img[src*="/hero-famille."] { object-position: 54% 55%; }
@media (max-width: 760px) { .band-ph img[src*="/conseillere."] { object-position: 62% 40%; } }

/* =====================================================================
   Correctifs mobile (QA téléphones, 23/10/2026) — à coller à la fin de site.css.
   Chaque bloc renvoie au numéro du point dans RAPPORT.md.
   Testés à 320, 360, 375, 390, 393, 430, en paysage 844×390, à 768, 1024, 1180 et 1440.
   ===================================================================== */

/* B1 — Plus aucun contenu plus large que l'écran (textes et boutons coupés à droite à 320-375 px).
   Cause : .btn { white-space: nowrap } dans des grilles dont la colonne implicite (auto) ou « 1fr »
   s'élargit à la largeur du plus long bouton ; le surplus est ensuite masqué par overflow-x: clip. */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.2; padding-block: 12px; }
}
@media (max-width: 380px) {
  .btn { padding-inline: 20px; gap: 10px; }
}
:where(.phero .txt, .intro .txt, .door, .calc, .sim-next, .dcta-go, .final-txt, .fcard, .fstep, .done, .band-card, .doc-sec .txt, .tri-txt, .ex-card, .devis-side) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .doors, .sim, .dcta, .ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .final-card, .foot-top { grid-template-columns: minmax(0, 1fr); }
}
/* Contact : l'adresse e-mail en corps « lead » dépasse de sa carte à 320 px (8 px) et entre 901 et 1180 px
   (« .fr » caché sous la carte voisine). Corps réduit à ces largeurs + coupure possible avant « @ » (<wbr>, voir diff). */
@media (max-width: 400px), (min-width: 901px) and (max-width: 1180px) { .ways b { font-size: var(--step-body); } }

/* B2 — Chiffres clés (.facts) : la valeur chevauche son texte (« 250 000 €ticket d'entrée », « Multidevise », « 152 500 € »).
   Cause : colonne fixe de 5,5em pour des valeurs qui en font jusqu'à 6,9. Sur téléphone : valeur au-dessus, texte dessous. */
@media (max-width: 520px) {
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* B3 — Menu ouvert après un défilement : l'en-tête (et le bouton de fermeture) disparaît.
   Cause : overflow: hidden posé aussi sur body → body devient un conteneur de défilement et .top n'est plus « sticky ».
   Seul html doit être verrouillé ; body garde overflow-x: clip (qui ne crée pas de conteneur de défilement). */
html.menu-locked body { overflow-x: clip; overflow-y: visible; }

/* I2 — Barre fixe du bas : la marge basse ignore l'encoche (iPhone à barre d'accueil : 34 px de plus),
   la fin de page passe sous la barre ; pas de séparation avec le contenu qui défile dessous. */
@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.page-devis { padding-bottom: env(safe-area-inset-bottom, 0px); } /* questionnaires : pas de barre */
  .dock { border-top: 1px solid var(--cloud); }
  html.menu-locked .dock { visibility: hidden; }
}

/* I3 — Encoche en haut (application installée, navigateurs intégrés) : l'en-tête « sticky » décalé par
   top: env(safe-area-inset-top) recouvre le haut du titre. L'encoche devient un rembourrage de l'en-tête. */
.top { top: 0; padding-top: env(safe-area-inset-top, 0px); }

/* I4 — Rendez-vous : jeudi et vendredi de chaque page étaient masqués sur téléphone (pagination par 5, affichage de 3).
   À utiliser avec la modification de devis.js (pagination par 3 sous 520 px). */
@media (max-width: 520px) { .days button:nth-child(n+4) { display: grid; } }

/* I5 — Case de consentement : le texte héritait du style des libellés (.field > label : 17 px, gras). */
.field > label.consent { font-size: var(--step-small); font-weight: 400; }

/* I6 — Simulateurs sur téléphone : tranches d'âge sur 2 lignes dans des pastilles de 4 colonnes,
   barres réduites à 46 px de large à 320 px, curseur de 24 px difficile à saisir au doigt. */
@media (max-width: 520px) {
  .seg:not(.seg--5) { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .seg:not(.seg--5) span { border-radius: 18px; }
  .bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; }
  .bar > span:first-child { grid-column: 1 / -1; }
  .result > div, .result .btn { flex: 1 1 100%; }
}
@media (pointer: coarse) {
  .range { height: 44px; }
  .range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; }
  .range::-moz-range-thumb { width: 26px; height: 26px; }
}
@media (max-width: 400px) {
  .sim-tabs button { padding: 12px 6px; }
  .sim-tabs button b { font-size: var(--step-small); line-height: 1.25; }
}

/* I8 — Listes de produits (Devis, Nos assurances) et « À voir aussi » : une photo pleine largeur par carte,
   soit 12 écrans de défilement pour choisir un contrat. Sur téléphone : lignes compactes vignette + titre. */
@media (max-width: 600px) {
  :is(.pgrid, .related) { gap: 4px; }
  :is(.pgrid, .related) .rcard { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; min-height: 92px; padding: 8px; margin-inline: -8px; border-radius: var(--r-sm); }
  :is(.pgrid, .related) .rcard .ph { grid-row: 1 / span 2; aspect-ratio: 1; border-radius: 10px; }
  :is(.pgrid, .related) .rcard b { align-self: end; font-size: var(--step-body); font-weight: 560; letter-spacing: -.01em; }
  :is(.pgrid, .related) .rcard span { align-self: start; line-height: 1.4; }
  :is(.pgrid, .related) .rcard:active { background: var(--cloud); }
}

/* I9 — Boutons des questionnaires : bouton principal pleine largeur en premier, « Retour » dessous.
   (Avant : « Je préfère être rappelé » au-dessus de « Demander ce créneau », bouton seul calé à droite.) */
@media (max-width: 520px) {
  .fnav .btn { order: -1; flex: 1 1 100%; }
  .fnav .back { margin-inline: auto; }
  .done .acts .btn { flex: 1 1 100%; }
}

/* I10 — Champ date sur iOS : avec appearance: none, Safari centre la date et peut réduire la hauteur. */
input[type="date"].inp { display: block; min-width: 0; text-align: left; line-height: 1.4; }
input[type="date"].inp::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* I11 — Mots composés coupés au trait d'union dans les titres (« voulez-/vous », « rendez-/vous », « est-/il »).
   Classe posée par build.py (voir diff), sans effet si le mot tient sur la ligne. */
.nw { white-space: nowrap; }

/* m1 — Zones tactiles : liens du pied de page (30 px), liens des « portes » de l'accueil (30-39 px),
   fil d'Ariane (20 px). Objectif 44 px sans changer l'aspect. */
@media (pointer: coarse) {
  .foot-cols a { padding-block: 8px; }
  .door li a { padding-block: 7px; }
  .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .foot-id .contact a { padding-block: 8px; }
}

/* m2 — Effets de survol « collants » au toucher (iOS garde :hover après un tap) :
   le bandeau de logos s'arrête dès qu'on le touche, les cartes restent décalées. */
@media (hover: none) {
  .marquee:hover .marquee-track { animation-play-state: running; }
  .final-ways a:hover, .door li a:hover { transform: none; }
  .guide:hover, .sec:not(.sec--mist) .guide:hover { padding-inline: 0; background: none; }
  .rcard:hover .ph img { transform: none; }
}

/* m3 — Détails de finition */
.sent span { display: block; line-height: 1.45; margin-top: 2px; }       /* interligne de 26 px sur un texte de 13 px */
.prose h3 { line-height: 1.35; }                                          /* intertitres sur 2 lignes très espacés (1,7) */

/* I9 bis — Questionnaire à 320-400 px : rembourrage de la carte réduit pour garder les boutons sur une ligne. */
@media (max-width: 400px) {
  .fcard { padding: 22px 16px; border-radius: var(--r); }
  .sent { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .sent svg { width: 28px; height: 28px; }
}

/* I12 — Tableaux comparatifs (fiches produit) : sur téléphone, la 1re colonne disparaît au défilement horizontal
   et l'indication « Faites glisser » n'arrive qu'après le tableau. Colonne des postes figée + indication au-dessus
   (déplacement du <p class="swipe"> dans produit.html, voir diff). */
@media (max-width: 760px) {
  .tbl-sec .tbl-wrap { overscroll-behavior-x: contain; }
  .tbl-sec .tbl :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 1; background: var(--mist); box-shadow: 1px 0 0 var(--cloud); /* filet, pas d'ombre */ }
  .tbl-sec .tbl tbody th { min-width: 132px; }
  .tbl-sec .swipe { margin: 0 0 10px; }
}

/* m4 — Téléphone en paysage (390 px de haut) : une photo 4:3 occupait 1,5 écran. */
@media (orientation: landscape) and (max-height: 500px) {
  :is(.hero-ph, .phero .ph, .door .ph, .final .ph, .ledger .ph, .duo .ph, .rcard .ph, .sim-side .ph) { max-height: 78vh; }
  .band-ph { height: 86vh; }
}

/* I13 — Boutons d'action empilés de largeurs différentes (256 px / 218 px…) : sur téléphone, pleine largeur,
   comme les applications bancaires. */
@media (max-width: 520px) {
  .acts > .btn { flex: 1 1 100%; }
}

/* m5 — Sans JavaScript (cadre d'aperçu sans « allow-scripts », script bloqué ou pas encore chargé) le bouton
   du menu ne faisait rien. Avec le diff base.html (lien #mnav), le menu s'ouvre en CSS seul. */
html:not(.has-js) .mnav:target { display: block; }
.mnav > a.mnav-close { display: none; }
html:not(.has-js) .mnav > a.mnav-close { display: flex; justify-content: flex-end; min-height: 44px; align-items: center; font-size: var(--step-small); font-weight: 560; color: var(--muted); }

/* Si le diff « correctifs-heros-optionnel.diff » est appliqué (styles en ligne des héros remplacés par des classes),
   ces deux règles remplacent le correctif provisoire I1 ci-dessus, qui peut alors être supprimé. */
@media (min-width: 981px) {
  .phero .txt--8 { grid-column: 1 / span 8; }
  .phero .txt--9 { grid-column: 1 / span 9; }
}

/* =================== Tablettes et écrans intermédiaires (QA tablette, 23/10) ===================
   À coller en fin de src/assets/css/site.css, puis reconstruire (build.py).
   Vérifié : 390 x 844 (téléphone) rendu identique au pixel près sur les 45 pages.
   1440 x 900 (ordinateur) : identique, sauf quatre améliorations voulues qui valent aussi pour l'ordinateur :
   T6 b (espace après « % »), T11 (sous-titres des méga-menus), T12 (4 choix en 2 x 2 au lieu de 3 + 1),
   T14 bis (titres des cartes photo alignés). */

/* T1. Menu mobile : même seuil que le burger (1210 px). Filet de sécurité si le menu était ouvert
   au moment d'une rotation vers le paysage (le JS T1 referme aussi le menu et débloque la page). */
@media (min-width: 75.6875em) { .mnav, .mnav.open { display: none; } }

/* T3. Contact : l'adresse e-mail débordait de sa carte entre 901 et ~1280 px (complète le <wbr> ajouté dans contact.html). */
.ways b { overflow-wrap: anywhere; }


/* T5. Héros empilés, 601–980 px : photo 4/3 pleine largeur (jusqu'à 685 px de haut). Format 3/2. */
@media (min-width: 601px) and (max-width: 980px) {
  .hero-ph, .phero .ph, .phero--wide .ph { aspect-ratio: 3 / 2; }
}

/* T7. Grande photo avec carte (accueil, cabinet, professionnels) : en paysage, la photo occupait tout l'écran. */
.band-ph { height: clamp(380px, min(62vw, 85vh), 760px); height: clamp(380px, min(62vw, 85svh), 760px); }

/* T8. Pied de page, 700–980 px : 2 x 2 colonnes (≈ 1 200 px de haut) -> 4 colonnes, comme au-dessus de 980 px. */
@media (min-width: 700px) and (max-width: 980px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* T9. Texte long (guides, pages légales), 601–980 px : lignes de 95 à 100 caractères. */
@media (max-width: 980px) { .prose { max-width: 72ch; } }

/* T10. Carte finale, 981–1240 px : « Demander une étude confidentielle » cassé mot par mot (patrimoine). */
@media (min-width: 981px) and (max-width: 1240px) {
  .final-ways a { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .final-ways small { grid-column: 1; grid-row: auto; text-align: left; }
}

/* T11. Méga-menus : sous-titre décalé vers le bas quand le voisin passe sur deux lignes. */
.mega-links a { align-content: start; }

/* T12. Questionnaires : choix orphelin sur la dernière ligne (3 choix en 2 colonnes, 4 en 3, 5 en 4).
   3 et 5 choix : une colonne tant qu'une rangée de trois ne tient pas, puis 3 / 3 + 2 ; 4 choix : 2 x 2. */
.fcard { container-type: inline-size; }
@container (min-width: 420px) { .choices:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 615px) { .choices:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 599px) { .choices:has(> :nth-child(5):last-child) { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 600px) { .choices:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* T13. Page Devis : carte seule sur sa ligne (7 assurances : 2+2+2+1 ou 3+3+1 ; 3 pros en 2 colonnes).
   La dernière carte isolée s'étale en largeur, photo à gauche, texte à droite. */
@media (min-width: 601px) and (max-width: 980px) {
  .pgrid > .rcard:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto auto; column-gap: var(--gap); align-content: center; }
  .pgrid > .rcard:last-child:nth-child(odd) .ph { grid-row: 1 / span 2; }
  .pgrid > .rcard:last-child:nth-child(odd) > :not(.ph) { grid-column: 2; }
}
@media (min-width: 981px) and (max-width: 1366px) {
  .pgrid > .rcard:last-child:nth-child(3n+1) { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto auto; column-gap: var(--gap); align-content: center; }
  .pgrid > .rcard:last-child:nth-child(3n+1) .ph { grid-row: 1 / span 2; }
  .pgrid > .rcard:last-child:nth-child(3n+1) > :not(.ph) { grid-column: 2 / -1; }
}
@media (min-width: 601px) and (max-width: 1366px) {
  .pgrid > .rcard:last-child:is(:nth-child(odd), :nth-child(3n+1)) > b { align-self: end; }
  .pgrid > .rcard:last-child:is(:nth-child(odd), :nth-child(3n+1)) > span { align-self: start; }
}

/* T14. Cartes « Trois sujets / Trois expertises / Voir aussi », 601–900 px : trois photos 4/3 empilées en pleine largeur
   (≈ 1 700 px de défilement). Trois colonnes, comme au-dessus de 900 px. */
@media (min-width: 601px) and (max-width: 900px) {
  .related:not(.related--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related:not(.related--4) .rcard b { font-size: var(--step-body); }
}
/* T14 bis. Cartes photo : quand un titre passe sur deux lignes, les autres textes de la rangée descendaient (lignes étirées). */
.rcard { align-content: start; }

/* T15. Cartes d'étapes à 3 colonnes (.seq--3), 561–760 px : passées en une colonne, elles gardaient 220 px de hauteur
   minimale pour deux lignes de texte (grands blocs vides, iPad mini portrait). */
@media (max-width: 760px) { .seq--3 div, .seq--3 a { min-height: 0; } }

/* T16. Écrans tactiles : le survol reste « collé » après un toucher (iPad, Android) ; la ligne de guide se décale de 20 px,
   les liens des portes glissent, les cartes de la carte finale remontent. Sans effet sur souris et pavé tactile. */
@media (hover: none) {
  .guides .guide:hover, .sec:not(.sec--mist) .guide:hover { background: none; padding-inline: 0; }
  .door li a:hover, .final-ways a:hover { transform: none; }
}

/* T17. Simulateurs, bloc « Et ensuite ? » sous le calculateur, 601–900 px : lignes d'environ 100 caractères. */
@media (max-width: 900px) { .sim-next p { max-width: 68ch; } }

/* Petits téléphones (vérification finale 23/10) : les mots longs des titres (« luxembourgeoise », « capitalisation »)
   ne doivent jamais dépasser de l'écran ; filet de sécurité overflow-wrap si un mot reste trop long. */
@media (max-width: 420px) {
  h1, h2, .t-head { overflow-wrap: break-word; }
}
/* Schéma du triangle : sur téléphone, les libellés restent dans les cercles. */
@media (max-width: 600px) { .tri-node text { font-size: 16px; } .tri-core text { font-size: 20px; } .tri .tri-small, .tri-core .tri-small { font-size: 14px; } }

/* =====================================================================
   V6 — Composants communs (dev design system, 23/10/2026)
   tile · ess · irows · isteps · more · links  (macros dans templates/macros.html)
   Mode d'emploi : /tmp/claude-0/v6/dev-design/COMPONENTS-READY.md
   ===================================================================== */

/* Tuile à picto : 44 px, rayon 12, fond --sky, picto 24 px --accent. */
.tile { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sky); color: var(--accent); }
.tile svg { width: 24px; height: 24px; }
.tile--sm { width: 36px; height: 36px; border-radius: 10px; }
.tile--sm svg { width: 20px; height: 20px; }
/* Sur fond marine : tuile blanche à 9 %, picto blanc. */
:is(.sec--navy, .final-card, .tile-on-dark) .tile, .tile--dark { background: rgba(255, 255, 255, .09); color: #FFFFFF; }

/* L'essentiel : lignes courtes à picto 20 px, sans tuile, texte en corps. */
.ess { display: grid; gap: 10px; }
.ess li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; line-height: 1.5; }
.ess svg { width: 20px; height: 20px; margin-top: calc((1.5em - 20px) / 2); color: var(--accent); }
.ess b { font-weight: 560; }
.sec--navy .ess svg { color: #9DB4FF; }

/* Lignes à picto avec titre : 1 colonne sur téléphone, 2 dès 700 px, 3 ou 4 sur PC (irows--3, irows--4). */
.irows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px var(--gap); }
.irows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; align-content: start; }
.irows li > div { display: grid; gap: 2px; padding-top: calc((44px - 1.5em) / 2); line-height: 1.5; }
.irows b { font-weight: 560; }
.irows span:not(.tile) { color: var(--muted); }
.sec--navy .irows span:not(.tile) { color: var(--navy-muted); }
@media (min-width: 700px) { .irows:not(.irows--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .irows.irows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .irows.irows--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.irows--3, .irows--4) li { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  :is(.irows--3, .irows--4) li > div { padding-top: 0; }
}

/* Étapes à picto : l'ordre fait la numérotation (numéro discret sur la tuile), aucune étiquette au-dessus du titre.
   Téléphone : une colonne reliée par un filet ; 700–1024 px : 2 colonnes ; PC : une rangée (--n étapes). */
.isteps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px var(--gap); counter-reset: none; }
.isteps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; align-content: start; }
.isteps li > div { display: grid; gap: 2px; padding-top: calc((44px - 1.5em) / 2); line-height: 1.5; }
.isteps b { font-weight: 560; }
.isteps span:not(.tile):not(.n) { color: var(--muted); }
.isteps .tile i { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: #FFFFFF; font-style: normal; font-weight: 560; font-size: var(--step-small); line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.sec--mist .isteps .tile i { box-shadow: 0 0 0 2px var(--mist); }
.sec--cloud .isteps .tile i { box-shadow: 0 0 0 2px var(--cloud); }
.sec--navy .isteps .tile i { background: var(--accent); box-shadow: 0 0 0 2px var(--navy); }
.sec--navy .isteps span:not(.tile):not(.n) { color: var(--navy-muted); }
@media (max-width: 699px) {
  .isteps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: -16px; width: 2px; border-radius: 2px; background: var(--cloud); }
  .sec--mist .isteps li:not(:last-child)::before { background: var(--silver); opacity: .6; }
  .sec--navy .isteps li:not(:last-child)::before { background: var(--navy-2); }
}
@media (min-width: 700px) { .isteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .isteps { grid-template-columns: repeat(min(var(--n, 4), 5), minmax(0, 1fr)); }
  .isteps li { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .isteps li > div { padding-top: 0; max-width: 30ch; }
}

/* En savoir plus : second niveau replié, sobre comme les questions fréquentes. */
.more { border-radius: var(--r-sm); }
.more > summary { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 560; border-radius: 999px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .pm { width: 32px; height: 32px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease-out), background-color .2s ease; }
.more > summary .pm svg { width: 16px; height: 16px; }
.more > summary:hover .pm { background: var(--cloud); }
:is(.sec--mist, .sec--cloud, .devis-cta) .more > summary .pm { background: var(--bg); }
.sec--navy .more > summary .pm { background: var(--navy-2); }
.more[open] > summary .pm { transform: rotate(45deg); background: var(--ink); color: var(--bg); }
.more-body { display: grid; gap: 1em; padding: 6px 0 10px; max-width: 60ch; }
.more-body > * { margin: 0; }

/* Pour aller plus loin : lignes cliquables (tuile, titre, petite ligne, flèche). 1 / 2 / 3 colonnes. */
.links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.links a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 16px; align-items: center; min-height: 72px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--mist); text-decoration: none; transition: background-color .2s ease; }
:is(.sec--mist, .sec--cloud, .devis-cta) .links a { background: var(--bg); }
.sec--navy .links a { background: var(--navy-2); }
.links a > span:not(.tile) { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
.links b { font-weight: 560; }
.links small { font-size: var(--step-small); color: var(--muted); }
.sec--navy .links small { color: var(--navy-muted); }
.links .go { width: 20px; height: 20px; color: var(--muted); transition: transform .25s var(--ease-out), color .2s ease; }
.links .tile { transition: background-color .2s ease, color .2s ease; }
.links a:hover { background: var(--cloud); }
.links a:hover .tile { background: var(--accent); color: var(--accent-ink); }
.links a:hover .go { color: var(--accent); transform: translateX(3px); }
@media (min-width: 700px) { .links:not(.links--1) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .links.links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (hover: none) { .links a:hover { background: var(--mist); } :is(.sec--mist, .sec--cloud, .devis-cta) .links a:hover { background: var(--bg); } .links a:hover .tile { background: var(--sky); color: var(--accent); } .links a:active { background: var(--cloud); } }

/* =====================================================================
   V6 — Menus à pictos (D6), pied de page en accordéons (D5)
   ===================================================================== */
/* Méga-menus PC : tuile 36 / picto 20, nom, sous-ligne. Colonnes équilibrées (8, 4, 6, 6 entrées ; 3 pour Simulateurs). */
.mega-links { gap: 4px 20px; }
.mega-links > a { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px 14px; }
.mega-links > a > span:not(.tile) { display: grid; gap: 2px; min-width: 0; padding-top: 1px; line-height: 1.4; }
.mega-links > a .tile { transition: background-color .2s ease, color .2s ease; }
.mega-links > a:hover .tile, .mega-links > a:focus-visible .tile { background: var(--accent); color: var(--accent-ink); }
.mega-links--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-links--3 > a { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
.mega-in { padding-block: 24px 32px; }

/* Menu mobile : picto 20 px sans tuile, nom et sous-ligne courte ; « Particuliers » ouvert par défaut. */
.mnav summary { border-bottom: 1px solid var(--cloud); }
.mnav details[open] summary { border-bottom-color: transparent; }
.mnav-list { display: grid; padding: 0 0 12px; border-bottom: 1px solid var(--cloud); }
.mnav details .mnav-list a { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 0; color: var(--ink); text-decoration: none; border-radius: 8px; }
.mnav-list a svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.mnav-list a span { display: grid; gap: 1px; min-width: 0; }
.mnav-list a b { font-weight: 560; line-height: 1.35; }
.mnav-list a small { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.mnav-list a:active { background: var(--mist); }

/* Pied de page : en-têtes de colonnes = résumés d'accordéon (inertes sur PC). */
.fcol > summary { display: block; margin-bottom: 12px; font-weight: 560; font-size: var(--step-body); list-style: none; cursor: default; }
.fcol > summary::-webkit-details-marker { display: none; }
.fcol > summary svg { display: none; }
.fcol.foot-sub { margin-top: 22px; }
.fcol > div, .foot-info > div { display: grid; }
@media (max-width: 759px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .fcol { border-top: 1px solid var(--cloud); }
  .fcol.foot-sub { margin-top: 0; }
  .fcol > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin: 0; cursor: pointer; }
  .fcol > summary svg { display: block; width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
  .fcol[open] > summary svg { transform: rotate(180deg); }
  .fcol > div { padding-bottom: 14px; }
  .foot-cols > div:nth-child(3) .fcol { border-bottom: 1px solid var(--cloud); }
  .foot-info { margin-top: 18px; }
  .foot-info > b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .foot-info > div { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .foot { padding-top: 48px; }
  .foot-legal { margin-top: 24px; padding-top: 0; }
}

/* =====================================================================
   V6 — Accueil (hero allégé, situations, offres compactes, dirigeants)
   ===================================================================== */
/* Héros : PC = titre sur toute la largeur, texte à gauche, photo à droite (tout dans 1440 × 900) ;
   téléphone = titre, accroche, boutons, photo basse, preuves. */
.hero { padding-block: clamp(24px, 3.6vw, 56px) clamp(48px, 6vw, 96px); }
.hero .row { margin-top: clamp(20px, 3vw, 44px); row-gap: 24px; align-items: start; }
.hero .row > * { grid-column: 1 / -1; min-width: 0; }
.hero .lead { max-width: 32ch; }
.hero-proofs { display: grid; gap: 16px; }
.hero-proofs .proof { max-width: none; }
@media (min-width: 981px) {
  .hero .row { grid-template-rows: auto auto 1fr; row-gap: 28px; }
  .hero .row > :not(.hero-ph) { grid-column: 1 / span 5; }
  .hero .row > .hero-ph { grid-column: 7 / -1; grid-row: 1 / span 3; aspect-ratio: 3 / 2; margin: 0; }
  .hero-proofs { padding-top: 4px; }
}
@media (max-width: 980px) {
  .hero .row > .hero-ph { margin: 4px 0; aspect-ratio: 16 / 9; max-height: 420px; }
  .hero-ph img { object-position: 50% 58%; }
}
@media (max-width: 600px) { .hero .row > .hero-ph { aspect-ratio: 16 / 10; max-height: 240px; } }

/* « Qu'est-ce qui vous amène ? » : 8 tuiles situation. 2 colonnes téléphone, 4 dès 700 px. */
.sits-sec h2 { margin-bottom: clamp(20px, 2.6vw, 44px); }
.sits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sits a { display: grid; align-content: start; gap: 2px; height: 100%; padding: 16px 14px 18px; border-radius: var(--r-sm); background: var(--bg); text-decoration: none; transition: background-color .2s ease; }
.sits .tile { margin-bottom: 12px; transition: background-color .2s ease, color .2s ease; }
.sits b { font-weight: 560; line-height: 1.3; }
.sits small { font-size: var(--step-small); color: var(--muted); line-height: 1.35; }
.sits a:hover .tile { background: var(--accent); color: var(--accent-ink); }
.sits a:active { background: var(--cloud); }
@media (max-width: 359px) { .sits small { display: none; } .sits a { padding: 14px 12px; } }
@media (min-width: 700px) { .sits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sits a { padding: 20px 18px 22px; } }
@media (min-width: 1025px) { .sits b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.2; } .sits small { margin-top: 4px; } .sits a { padding: 24px 22px 26px; } }
@media (hover: none) { .sits a:hover .tile { background: var(--sky); color: var(--accent); } }

/* Offres compactes (liens à nom en lead) et ligne orpheline des grilles de liens. */
.links--lead b { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.2; }
.links--lead small { font-size: var(--step-small); }
@media (min-width: 1025px) { .links--lead a { min-height: 92px; padding: 18px 20px; } }
@media (min-width: 700px) and (max-width: 1024px) { .links:not(.links--1) > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1025px) { .links--3 > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
.plist .sec-head { margin-bottom: clamp(20px, 2.6vw, 44px); }

/* Étapes et grande photo */
.sec-head.t-head { display: block; }
@media (max-width: 760px) {
  .band-ph { height: 240px; }
  .band .grid { margin-top: -56px; }
  .band-card { padding: 24px 22px; }
}
.band-card .ess { margin-top: -4px; }

/* Bloc sombre « Dirigeants et patrimoines » : court, deux boutons. */
.pros-sec { padding-block: clamp(56px, 6vw, 104px); }
.pros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px var(--gap); align-items: end; }
.pros-txt { display: grid; gap: 24px; }
.pros-txt .lead { max-width: 36ch; }
@media (max-width: 900px) { .pros { grid-template-columns: minmax(0, 1fr); } }

/* Questions + « Pour aller plus loin » */
.faq-more { grid-column: 1 / -1; display: grid; gap: 18px; margin-top: clamp(36px, 4.4vw, 72px); }

/* Bloc final : pictos à gauche des choix ; photo masquée sous 700 px ; rembourrage réduit sur téléphone.
   Titre et sous-ligne empilés à toutes les largeurs : un long libellé (« Demander une étude confidentielle »)
   ne s'écrase plus sur trois lignes à côté de sa sous-ligne (P2-2). */
.final-ways a { grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; }
.final-ways a > svg { width: 20px; height: 20px; grid-row: 1 / span 2; align-self: center; }
.final-ways small { grid-column: 2; grid-row: auto; text-align: left; }
/* La sous-ligne du lien téléphone peut passer à la ligne (le numéro, lui, reste insécable) (P3-1). */
.final-ways a[href^="tel:"] small { white-space: normal; }
@media (max-width: 699px) { .final .ph { display: none; } .final-txt { padding: 28px 22px; gap: 18px; } .final-ways { margin-top: 4px; } }

/* D9 — Tablette 601–1024 px : photos de héros limitées en hauteur, grilles de cartes en 2 colonnes. */
@media (min-width: 601px) and (max-width: 980px) {
  .phero .ph, .phero--wide .ph { aspect-ratio: 16 / 9; max-height: 440px; }
}
@media (min-width: 700px) and (max-width: 1024px) {
  .seq:not(.seq--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seq--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seq--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ways > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* V6 — Hauteur des grandes photos réduite (moins de défilement, tablette paysage comprise). */
.band-ph { height: clamp(240px, min(48vw, 70vh), 640px); height: clamp(240px, min(48vw, 70svh), 640px); }
@media (min-width: 700px) and (max-width: 980px) { .final .ph { aspect-ratio: auto; height: 300px; } }
/* Pied de page sur téléphone : la phrase de présentation répète l'en-tête de page ; téléphone, e-mail et adresse restent. */
@media (max-width: 759px) { .foot-id > p { display: none; } .foot-id { gap: 14px; } }


/* ===== contenu-pages.css ===== */
/* =====================================================================
   V6 — Lot 2 contenu : pages intérieures et guides (patrimoine, cabinet, professionnels,
   produits, contact, rémunération, ressources et 4 guides). Portée limitée aux pages body.cp.
   Jetons existants uniquement.
   ===================================================================== */

/* Héros : photo moins haute sur téléphone (le texte et le bouton passent avant). */
@media (max-width: 600px) {
  .cp .phero .ph, .cp .phero--wide .ph { aspect-ratio: 3 / 2; max-height: 260px; }
}
.cp .phero .txt .ess { margin-top: 2px; }

/* Colonne de droite des sections « intro » (remplace .who) */
.cp .intro .cp-side { grid-column: 8 / -1; align-self: start; }
@media (max-width: 900px) { .cp .intro .cp-side { grid-column: 1 / -1; margin-top: 32px; } }
.cp .cp-acts { margin-top: clamp(24px, 3vw, 40px); }
.cp .cp-note { margin-top: clamp(24px, 3vw, 40px); max-width: 60ch; }
.cp .sec-head--split > p:not(.muted) { color: var(--ink); }
.cp .band-card .irows { margin-top: 4px; }
.cp .intro .txt .more { margin-top: -8px; }

/* Contact : cartes à picto */
.cp-ways a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; }
.cp-ways .tile { grid-row: 1 / span 2; color: var(--accent); align-self: start; }
.cp-ways a > b, .cp-ways a > span:not(.tile) { grid-column: 2; }
.cp-ways .tile { grid-column: 1; }
.cp-ways a:hover .tile { background: var(--accent); color: var(--accent-ink); }
@media (hover: none) { .cp-ways a:hover .tile { background: var(--sky); color: var(--accent); } }

/* Hub des guides : titres un peu plus longs, lignes plus hautes */
.cp-guides a { min-height: 84px; }

/* Guides : encadré « En bref » sous l'accroche */
.cp-brief { display: grid; gap: 12px; max-width: 52ch; padding: 20px 22px; border-radius: var(--r-sm); background: var(--mist); }
.cp-brief > b { font-weight: 560; }

/* Guides : sommaire en liste sur PC, replié sous 981 px (le bouton du héros et le bloc final portent l'action). */
.cp-toc { display: grid; gap: 14px; }
.cp-toc ol, .cp-toc-m ol { display: grid; gap: 6px; padding-left: 1.2em; list-style: decimal; }
.cp-toc-m { display: none; }
.cp-toc-m .more-body { padding-top: 2px; }
@media (max-width: 980px) {
  .cp-toc { display: none; }
  .cp-toc-m { display: block; border-top: 1px solid var(--cloud); border-bottom: 1px solid var(--cloud); font-size: var(--step-body); }
  .cp-guide .prose-aside { margin-bottom: 24px; }
}

/* Guides : tableau replié dans « En savoir plus » à l'intérieur de l'article */
.prose .more { margin-top: 1em; }
.prose .more-body { max-width: none; }
.prose .more > summary { font-size: var(--step-body); }

/* Guides : « Pour aller plus loin » juste après l'article */
.cp-next { padding-top: 0; }

/* Tuiles des lignes et étapes à picto : « .irows span » (gris) atteint aussi span.tile ; on rend le picto bleu.
   (Correctif local, demandé au design system pour toutes les pages.) */
.cp .sec:not(.sec--navy) :is(.irows, .isteps) .tile, .cp .band-card .irows .tile { color: var(--accent); }
.cp .sec--navy :is(.irows, .isteps) .tile { color: #FFFFFF; }
.cp-ways a > span:not(.tile) { white-space: normal; }
@media (max-width: 400px) { .cp-ways a { padding: 18px 16px; column-gap: 14px; } }
.cp-toc-m > summary { color: var(--ink); }


/* ===== contenu-produit.css ===== */
/* =====================================================================
   V6 — Lot 1 : pages produit (dev contenu). Jetons existants uniquement.
   ===================================================================== */

/* Tableaux comparatifs sur téléphone : la 1re colonne est figée (site.css, I12). Le défilement passait sous la marge
   intérieure gauche du cadre, à gauche de la colonne figée (texte coupé visible). On retire cette marge du conteneur
   qui défile et on la reporte dans la colonne figée : plus rien ne déborde à sa gauche. */
@media (max-width: 760px) {
  .tbl-sec .tbl-wrap { padding-left: 0; }
  .tbl-sec .tbl :is(thead th:first-child, tbody th) { padding-left: 16px; box-shadow: 1px 0 0 var(--silver); }
}

/* Intro + « pour qui » : colonne de droite en lignes à picto (m.irows). Remplace l'ancien .who (petit texte gris). */
.intro .fw { grid-column: 8 / -1; display: grid; gap: 20px; align-content: start; }
.intro .fw .irows { gap: 18px; }
@media (max-width: 900px) { .intro .fw { grid-column: 1 / -1; margin-top: 32px; } }
/* Second niveau replié dans l'intro et le triangle : collé au paragraphe qui précède. */
:is(.intro .txt, .tri-txt) .more { margin-top: -10px; }
/* Tablette (D9) : la colonne « pour qui » passe sous l'intro, sur toute la largeur : deux colonnes de lignes. */
@media (min-width: 700px) and (max-width: 900px) { .intro .fw .irows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ===== forms.css ===== */
/* =====================================================================
   V6 — dev « formulaires, simulateurs et lexique »
   Questionnaires (devis.js), simulateurs (sims.js), infobulles du lexique (lexique.js), page Lexique.
   Concaténé à la fin de site.css au build. Jetons existants uniquement.
   ===================================================================== */

/* ---------- Questionnaires ---------- */
.devis-lead { margin-top: 14px; max-width: 52ch; font-size: var(--step-body); color: var(--ink-2); }
/* Téléphone : fil d'Ariane masqué sur les questionnaires (le lien « Retour » suffit). */
@media (max-width: 760px) { body.page-devis nav:has(> .crumbs) { display: none; } }

.field .help--after { margin-top: -2px; }
.inp:disabled { background: var(--mist); border-color: var(--mist); color: var(--muted); cursor: not-allowed; }
.inp:disabled::placeholder { color: transparent; }
.inp-unit:has(.inp:disabled) span { opacity: .4; }

/* « Je ne sais pas » : petite case sous le champ, zone de toucher de 44 px. */
.dunno { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; justify-self: start; margin-top: -6px; font-size: var(--step-small); color: var(--muted); cursor: pointer; }
.dunno input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.dunno:has(input:checked) { color: var(--ink); font-weight: 560; }
.dunno:hover { color: var(--ink); }
.dunno input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Coordonnées reprises d'une demande précédente (même visite). */
.reuse { padding: 12px 16px; border-radius: var(--r-sm); background: var(--good-bg); color: var(--ink-2); font-size: var(--step-small); }

/* Confirmation : « Ajouter une autre assurance à ma demande ». */
.addmore { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; justify-self: stretch; max-width: 560px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--mist); text-decoration: none; transition: background-color .2s ease; }
.addmore:hover { background: var(--cloud); }
.addmore:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.addmore-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sky); color: var(--accent); }
.addmore-i svg { width: 22px; height: 22px; }
.addmore > span:last-child { display: grid; gap: 2px; min-width: 0; line-height: 1.4; }
.addmore b { font-weight: 560; }
.addmore small { font-size: var(--step-small); color: var(--muted); }

/* Page « Demander un devis » : listes à pictos par univers. */
.dpick .h-sub { margin: clamp(40px, 5vw, 72px) 0 16px; }
.dpick .h-sub:first-child { margin-top: 0; }

/* ---------- Simulateurs ---------- */
/* Onglets à picto. */
.sim-tabs button { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.sim-tabs button > svg { width: 24px; height: 24px; color: var(--accent); margin-top: 1px; transition: color .2s ease; }
.sim-tabs button > span { display: grid; gap: 4px; min-width: 0; }
.sim-tabs button[aria-selected="true"] > svg { color: #FFFFFF; }
@media (max-width: 640px) {
  .sim-tabs button { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; }
  .sim-tabs button > svg { width: 22px; height: 22px; margin: 0; }
}

/* Montant tapé au clavier, synchronisé avec le curseur. */
.calc .num { display: inline-flex; align-items: baseline; gap: 4px; flex: none; font-weight: 560; color: var(--ink); font-size: var(--step-body); }
.calc .num-inp { width: 9.2ch; min-height: 40px; padding: 6px 8px; margin: -6px 0; border: 0; border-bottom: 1.5px dashed var(--silver); border-radius: 8px 8px 0 0; background: transparent; color: var(--ink); font: inherit; font-size: max(16px, var(--step-body)); font-weight: 560; text-align: right; -webkit-appearance: none; appearance: none; transition: background-color .2s ease, border-color .2s ease; }
.calc .num-inp:hover { border-bottom-color: var(--ink); }
.calc .num-inp:focus { outline: none; background: var(--sky); border-bottom: 1.5px solid var(--accent); }
.calc .ctl-head label { min-width: 0; }

/* Note de calcul : une ligne, le détail est replié juste en dessous. */
.calc .note { margin-bottom: -14px; }
.calc .more--calc > summary { font-size: var(--step-small); min-height: 44px; }
.calc .more--calc > summary .pm { width: 28px; height: 28px; background: var(--mist); }
.calc .more--calc .more-body { font-size: var(--step-small); color: var(--muted); line-height: 1.5; }
.sim-next > p:not(.t-small) { color: var(--muted); }

/* Résultat compact collé en haut de l'écran pendant les réglages (téléphone, tablette). */
.sim-live { display: none; }
@media (max-width: 900px) {
  .has-js .sim-live { display: flex; position: fixed; z-index: 44; top: 8px; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); max-width: 560px; margin-inline: auto; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--navy-muted); font-size: var(--step-small); box-shadow: 0 10px 28px rgba(11, 21, 48, .2); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .25s var(--ease-out), top .35s var(--ease-out), visibility 0s linear .25s; }
  .has-js .sim-live.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .25s var(--ease-out), top .35s var(--ease-out); }
  .sim-live b { color: #FFFFFF; font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .has-js .sim-live { transform: none; } }

/* ---------- Lexique : infobulles ---------- */
.lex-t { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); border-radius: 3px; -webkit-tap-highlight-color: transparent; }
.lex-t:hover, .lex-t[aria-expanded="true"] { text-decoration-color: var(--accent); }
.lex-t[aria-expanded="true"] { background: var(--sky); box-shadow: 0 0 0 2px var(--sky); }
.sec--navy .lex-t[aria-expanded="true"] { background: var(--navy-2); box-shadow: 0 0 0 2px var(--navy-2); }
.lex-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lex { position: relative; }
/* Bulle : masquée tant qu'elle n'est pas ouverte (y compris dans les navigateurs sans popover). */
.lex-pop { display: none; }
.lex-pop:popover-open { display: grid; }
.lex.open .lex-pop { display: grid; }
.lex-pop { gap: 6px; width: max-content; max-width: min(340px, calc(100vw - 32px)); padding: 14px 16px 12px; border: 0; border-radius: var(--r-sm); background: var(--ink); color: var(--navy-ink); font-size: var(--step-small); font-weight: 400; font-style: normal; line-height: 1.45; letter-spacing: normal; text-align: left; white-space: normal; box-shadow: 0 14px 36px rgba(11, 21, 48, .24); }
/* Avec lexique.js : la bulle est placée près du mot (sinon, popover natif centré à l'écran). */
.lex-js .lex-pop:popover-open { position: fixed; inset: auto; margin: 0; }
/* Repli sans popover natif : bulle sous le mot. */
.lex.open .lex-pop { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); }
.lex-h { display: block; color: #FFFFFF; font-size: var(--step-body); font-weight: 560; line-height: 1.3; }
.lex-d { display: block; }
.lex-a { justify-self: start; margin-top: 2px; color: #FFFFFF; font-weight: 560; text-decoration: underline; text-underline-offset: .18em; }
.lex-a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: 3px; }

/* ---------- Page Lexique ---------- */
.lex-az ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 clamp(28px, 3vw, 48px); padding: 0; list-style: none; }
.lex-az a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--r-sm); background: var(--bg); font-weight: 560; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.lex-az a:hover { background: var(--ink); color: var(--bg); }
.lex-list { display: grid; gap: clamp(28px, 3vw, 44px); }
.lex-g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: calc(var(--head-h) + 16px); }
.lex-l { font-size: var(--step-head); line-height: 1; letter-spacing: -.03em; font-weight: 500; font-stretch: 112.5%; color: var(--accent); }
.lex-g dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
.lex-e { display: grid; gap: 6px; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px); border-radius: var(--r-sm); background: var(--bg); scroll-margin-top: calc(var(--head-h) + 16px); }
.lex-e:target { box-shadow: 0 0 0 2px var(--accent); }
.lex-e dt { font-size: var(--step-lead); font-weight: 500; font-stretch: 112.5%; letter-spacing: -.015em; line-height: 1.25; }
.lex-e dd { display: grid; gap: 8px; margin: 0; max-width: 68ch; }
.lex-e dd p { margin: 0; }
.lex-more { font-size: var(--step-small); }
.lex-note { margin-top: clamp(28px, 3vw, 44px); max-width: 60ch; font-size: var(--step-small); color: var(--muted); }
@media (min-width: 1025px) {
  .lex-g { grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .lex-l { position: sticky; top: calc(var(--head-h) + 24px); }
  .lex-g dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== zz-directeur.css ===== */
/* V6, arbitrages du directeur après la relecture à froid. */
/* Accueil, téléphone : « Ce que nous négocions » en grille compacte de 2 colonnes (picto + nom), la sous-ligne
   est déjà portée par les tuiles « Qu'est-ce qui vous amène ? ». */
@media (max-width: 640px) {
  .plist-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plist-links a { grid-template-columns: minmax(0, 1fr); row-gap: 10px; min-height: 0; padding: 14px; align-content: start; }
  .plist-links a small, .plist-links a > .go { display: none; }
  .plist-links b { font-size: var(--step-body); font-weight: 560; font-stretch: 100%; letter-spacing: 0; }
}

/* Tableaux comparatifs sur téléphone : une carte par ligne (intitulé, puis une ligne par colonne avec son nom),
   pour que la colonne du produit de la page ne soit plus hors écran. */
@media (max-width: 600px) {
  .tbl-sec .swipe { display: none; }
  .tbl-sec .tbl-wrap { overflow: visible; padding: 0; background: none !important; }
  .tbl--cards, .tbl--cards tbody, .tbl--cards tr, .tbl--cards th, .tbl--cards td { display: block; width: auto; min-width: 0; }
  .tbl-sec .tbl.tbl--cards { min-width: 0; width: 100%; border-collapse: separate; font-size: var(--step-body); }
  .tbl--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tbl--cards tbody { display: grid; gap: 10px; }
  .tbl--cards tr { padding: 14px 16px; border-radius: var(--r-sm); background: var(--mist); }
  .tbl-sec .tbl.tbl--cards tbody th { min-width: 0; position: static; padding: 0 0 8px; box-shadow: none !important; background: none; font-size: var(--step-body); }
  .tbl-sec .tbl--cards tbody td, .tbl-sec .tbl--cards tbody tr:nth-child(odd) td { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; border-top: 1px solid var(--silver); text-align: left; background: none; border-radius: 0; }
  .tbl--cards td::before { content: attr(data-label); color: var(--muted); font-size: var(--step-small); line-height: 1.5; }
}


/* ===== zz-fix.css ===== */
/* V6, correctifs finaux (rapport de bugs P2/P3 et personas §4). Placé après zz-directeur.css : ne défait rien. */

/* P2-4 — En-tête : quand la nav et les boutons ne tiennent pas (police agrandie), site.js masque d'abord
   le numéro et « Rendez-vous » (.nav-tight), puis passe au menu burger (.nav-compact). */
html.nav-tight .top-tel, html.nav-tight .top-cta .btn--soft { display: none; }
html.nav-compact .nav, html.nav-compact .top-cta { display: none; }
html.nav-compact .burger { display: block; }
html.nav-compact .mnav.open { display: block; }

/* P3-10 — Sans JavaScript, sur PC : les méga-menus s'ouvrent au survol et au focus clavier. */
html:not(.has-js) .nav > li:is(:hover, :focus-within) > .mega { display: block; }

/* P3-8 — Barres des simulateurs et de l'exemple chiffré : colonne de valeur de même largeur sur chaque ligne,
   pour que les rails soient alignés (la barre « 100 % » n'est plus plus courte que l'autre). */
.bar b { white-space: nowrap; }
.ex-card .bar b { min-width: 7em; }
@media (max-width: 520px) { .bar b { min-width: 6em; } }

/* P3-14 — Pied de page sur téléphone : liens hauts de 44 px. */
@media (max-width: 759px) {
  .foot-cols a, .foot-info a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .foot .contact a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* N7 — Simulateurs : message court quand un montant tapé est ramené dans les bornes. */
.calc .ctl-msg { margin: -2px 0 0; font-size: var(--step-small); line-height: 1.45; color: var(--ink); }
.calc .ctl-msg[hidden] { display: none; }

/* N3 — Rendez-vous déjà demandé dans la visite : rappel dans l'écran de confirmation. */
.done .rdv-kept { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--sky); }
.done .rdv-kept b { font-weight: 560; }
.done .rdv-kept .tlink { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--step-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }

/* N11 — Triangle de sécurité (AV luxembourgeoise) : le schéma n'est gardé que s'il fait au moins 520 px de large
   (ses étiquettes font alors 14 px ou plus à l'écran). Plus étroit (téléphone, tablette, petit PC : étiquettes de
   8 à 12 px, et 300 px de large seulement entre 601 et 900 px), il est remplacé par trois lignes à picto lisibles
   reprenant ses trois sommets. */
.tri { container-type: inline-size; }
.tri .tri-small, .tri-core .tri-small { font-size: 14px; }
@media (min-width: 901px) { .tri { grid-column: 7 / -1; } }
@media (max-width: 900px) { .tri { max-width: 560px; margin: 28px 0 0; } }
.tri-list { display: none; }
@container (max-width: 519px) {
  .tri > svg { display: none; }
  .tri-list { display: grid; gap: 18px; }
  .tri-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .tri-list li > div { display: grid; gap: 2px; line-height: 1.5; padding-top: calc((44px - 1.5em) / 2); }
  .tri-list b { font-weight: 560; font-size: var(--step-body); }
  .tri-list li > div > span { color: var(--muted); font-size: var(--step-body); }
  .tri-list li.tri-li-foot { display: block; }
  .tri-list .tri-foot { display: block; padding: 14px 16px; border-radius: var(--r-sm); background: var(--sky); color: var(--ink); font-size: var(--step-small); font-weight: 560; }
}