/* Bund, site vitrine (v6).
   Idée : une page blanche et aérée, traversée par de grandes plaques #00C8FF aux coins arrondis, comme l'icône du logo
   (un carré arrondi cyan avec « bund » en blanc). Une seule famille de caractères : Outfit, géométrique et arrondie comme le logotype.

   Règles de couleur
   - Le cyan de la marque est #00C8FF, jamais assombri : c'est la couleur des grandes plaques (héros, bandeau final, onglets, pastilles).
   - Sur le cyan : le texte d'affichage (titres, chiffres, 20 px et plus) est BLANC, comme dans le logo. Le petit texte posé sur du
     cyan (mentions, légendes) est en encre foncée, parce que le blanc sur #00C8FF ne fait que 1,96:1 de contraste : trop faible en dessous.
   - Sur les plaques marine (--night) : tout le texte est blanc.
   - Sur le fond blanc : texte en encre foncée, sans encadré. Les longs paragraphes ne sont jamais posés sur du cyan.
   Pour passer tout le texte de la plaque cyan en encre foncée (plus lisible en plein soleil) : mettre --on-cyan: var(--on-bund). */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bund: #00c8ff;          /* LE cyan de la marque */
  --on-bund: #04202c;       /* encre foncée : petit texte posé sur le cyan (8,6:1) */
  --on-cyan: #fff;          /* texte d'affichage posé sur le cyan */
  --ink: #062534;
  --ink-soft: #456373;
  --paper: #fff;
  --mist: #f0fbff;
  --sky: #d8f4ff;
  --line: #d9e9f0;
  --deep: #00789c;          /* liens et petits textes cyan sur fond blanc (5:1) */
  --night: #062534;         /* plaques marine */
  --night-2: #0c3650;
  --coral: #ff6a55;
  --coral-soft: #ff9a8b;
  --wa: #25d366;            /* vert WhatsApp (bouton de discussion) */
  --focus: #04202c;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1160px;
  --gutter: 20px;
  --hdr: 65px;
  --r-xl: 44px;
  --r-l: 30px;
  --r-m: 22px;
  --r-s: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
html.smooth { scroll-behavior: smooth; }   /* ajouté par le script une fois la page en place : une arrivée sur une ancre ne doit jamais « glisser » */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--deep); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Plaques cyan : texte d'affichage blanc, petit texte en encre, anneau de focus en encre */
.hero, .final, .box, .lever.a .cap, .plan.p1 .cap, .ftile, .cmp thead th:nth-child(2), .kicker.on-cyan { color: var(--on-cyan); --focus: var(--on-bund); }
/* Plaques marine : texte blanc, anneau de focus blanc */
.calc, .night, .box.nv, .lever.b .cap, .plan.p2 .cap, .vs-col.us, .fcard.hl, .ocard, .qrdlg, .chat-pop, .vplayer, .vp-end,
.feat, .hero .ftile, .btn, .kicker.k-link, .cmp thead th:nth-child(3), .sheet-foot { color: #fff; --focus: #fff; }

h1, h2, h3 { margin: 0; font-family: var(--font); line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.45rem, 7.2vw, 4.9rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.99; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(1.14rem, 2.1vw, 1.32rem); line-height: 1.5; max-width: 34em; font-weight: 400; }
.soft { color: var(--ink-soft); }
.ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.fill { fill: currentColor; stroke: none; }
/* Pastille d'icône : carré arrondi cyan, glyphe blanc, comme l'icône de l'app */
.tile { width: 46px; height: 46px; border-radius: 14px; background: var(--bund); color: #fff; display: grid; place-items: center; flex: none; }
.tile .ico { stroke-width: 2.1; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--night); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Phrase d'accroche au-dessus d'un titre : une simple ligne de texte, avec le petit carré arrondi du logo.
   Seule l'étiquette « Questions fréquentes » est un vrai bouton (a.kicker.k-link). */
.kicker {
  display: inline-flex; align-items: flex-start; gap: 10px; justify-self: start; max-width: 100%;
  font: 500 0.98rem/1.25 var(--font); color: var(--ink-soft);
}
.kicker::before { content: ""; flex: none; width: 0.62em; height: 0.62em; margin-top: 0.3em; border-radius: 34%; background: var(--bund); rotate: 12deg; }
.hero .kicker, .final .kicker, .box:not(.nv) .kicker { color: var(--on-bund); }
.hero .kicker::before, .final .kicker::before, .box:not(.nv) .kicker::before { background: #fff; }
.night .kicker, .box.nv .kicker, .calc .kicker { color: rgba(255, 255, 255, 0.82); }
a.kicker.k-link {
  align-items: center; text-decoration: none; padding: 9px 16px 9px 16px; border-radius: 999px; background: var(--night); font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
a.kicker.k-link::before { display: none; }
a.kicker.k-link .ico { width: 1.05em; height: 1.05em; stroke-width: 2.6; transition: transform 0.15s; }
a.kicker.k-link:hover { background: var(--night-2); }
a.kicker.k-link:hover .ico { transform: translateX(3px); }

/* ================= En-tête ================= */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: block; line-height: 0; flex: none; border-radius: 12px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; display: block; transition: transform 0.2s; }
.brand:hover img { transform: rotate(-5deg) scale(1.05); }

.burger {
  width: 44px; height: 44px; border-radius: 14px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; margin-left: auto;
}
.top .top-cta { display: none; }
.nav { display: none; }

@media (min-width: 1000px) {
  .burger { display: none; }
  .top .top-cta { display: inline-flex; }
  .top-in { gap: 16px; }
  .nav { display: block; flex: 1; }
  .nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
  .nav > ul > li { display: flex; align-items: center; height: 64px; }
  .nav a.nl, .nav button.nl {
    font: 500 1rem/1 var(--font); color: var(--ink); text-decoration: none;
    padding: 11px 11px; border-radius: 12px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  .nav a.nl:hover, .nav .caret:hover, .nav li.open > a.nl, .nav li.open > button.nl { background: var(--mist); }
  .nav a.nl[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--bund); border-radius: 0; }
  .nav a.nl.with-ico { gap: 8px; }
  .nav a.nl.with-ico .ico { width: 0.8rem; height: 0.8rem; color: var(--deep); }
  .nav .caret { width: 30px; height: 36px; margin-left: -8px; padding: 0; display: inline-grid; place-items: center; color: var(--ink); background: none; border: 0; border-radius: 10px; cursor: pointer; }
  .nav .caret .ico, .nav button.nl .ico { width: 1.05rem; height: 1.05rem; transition: transform 0.2s; }
  .nav li.open .caret .ico, .nav li.open > button.nl .ico { transform: rotate(180deg); }
  .nav li.has-panel { position: static; }

  /* Panneaux de menu : fond blanc, une plaque marine à droite */
  .panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 34px 44px -30px rgba(6, 37, 52, 0.3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .has-panel.open .panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .panel-in { max-width: var(--max); margin: 0 auto; padding: 26px var(--gutter) 32px; display: grid; grid-template-columns: 1fr 1fr 300px; gap: 8px 14px; align-items: start; }
  .panel-links { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .pi { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 12px; border-radius: 18px; text-decoration: none; color: var(--ink); align-items: center; transition: background 0.15s; }
  .pi:hover { background: var(--mist); }
  .pi b { display: block; font-weight: 600; font-size: 1.04rem; line-height: 1.2; }
  .pi small { display: block; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
  .feat { grid-row: 1 / span 3; grid-column: 3; background: var(--night); color: #fff; border-radius: var(--r-l); padding: 18px; display: grid; gap: 10px; text-decoration: none; transition: transform 0.2s; }
  .feat:hover { transform: translateY(-3px); }
  .feat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 16px; display: block; }
  .feat b { font-weight: 600; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.01em; }
  .feat span { color: rgba(255, 255, 255, 0.86); font-size: 0.96rem; line-height: 1.35; }
}

/* Menu plein écran (mobile) : fond blanc, grands liens */
.sheet {
  position: fixed; inset: 0; z-index: 80; background: #fff; color: var(--ink);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-104%); visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.38s;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.menu-open .sheet { transform: none; visibility: visible; transition-delay: 0s; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: 64px; flex: none; }
.sheet-body { display: grid; gap: 0; padding-block: 8px 28px; }
.sheet a.big, .sheet summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 600 1.7rem/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding: 15px 0; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--line);
}
.sheet summary::-webkit-details-marker { display: none; }
.sheet summary .ico { transition: transform 0.2s; color: var(--deep); }
.sheet details[open] summary .ico { transform: rotate(180deg); }
.sheet .sub { display: grid; padding: 6px 0 14px; }
.sheet .sub a { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; color: var(--ink); text-decoration: none; padding: 10px 0; font-size: 1.06rem; line-height: 1.25; font-weight: 500; }
.sheet .sub a small { display: block; color: var(--ink-soft); font-size: 0.92rem; font-weight: 400; }
.sheet .tile { width: 40px; height: 40px; }
.sheet-foot { margin-top: auto; padding-block: 22px 28px; display: grid; gap: 14px; background: var(--night); }
.sheet-foot .wrap { display: grid; gap: 14px; width: 100%; }
.sheet-foot p { color: #fff; font-size: 1rem; }
.sheet-foot .badges img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
@media (min-width: 1000px) { .sheet { display: none; } }

/* ================= Boutons et boutiques ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 1.02rem/1.15 var(--font); text-decoration: none; text-align: center;
  background: var(--night); border: 1.5px solid var(--night);
  padding: 14px 24px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--night-2); border-color: var(--night-2); }
.btn:active { transform: scale(0.98); }
.btn-night { background: transparent; border-color: var(--ink); color: var(--ink); --focus: var(--on-bund); }
.btn-night:hover { background: var(--mist); border-color: var(--ink); }
.link-arrow { justify-self: start; width: fit-content; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-color: var(--bund); text-decoration-thickness: 2px; text-underline-offset: 0.28em; transition: text-decoration-thickness 0.15s; }
.link-arrow:hover { text-decoration-thickness: 4px; }
.link-arrow .ico { display: none; }
.hero .link-arrow, .final .link-arrow, .box:not(.nv) .link-arrow { text-decoration-color: currentColor; }
.hero .link-arrow { color: var(--on-bund); }

/* UN seul lien (cliiik.app/bund) qui contient les DEUX logos App Store et Google Play, partout :
   un bouton de téléchargement = les deux boutiques, jamais un seul logo, jamais de légende « iPhone et Android ». */
.badges { --bh: 42px; display: inline-flex; align-items: center; gap: 10px; line-height: 0; text-decoration: none; transition: transform 0.15s; }
.badges:hover { transform: translateY(-2px); }
.badges img, .bimgs img { height: var(--bh); width: auto; display: block; }
.b-apple { border-radius: 2.9% / 9.6%; }
.b-play { border-radius: 5% / 14.4%; }
.badges.sm { --bh: 36px; gap: 8px; }
.badges.xs { --bh: 32px; gap: 8px; }
.bimgs { --bh: 32px; display: inline-flex; align-items: center; gap: 8px; line-height: 0; }
.cta-block { display: grid; gap: 10px; justify-items: start; }
.cta-note { font-size: 0.98rem; font-weight: 500; line-height: 1.3; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 4px; }
.lead-in { display: none; }
@media (min-width: 900px) { .lead-in { display: inline; } }

/* ================= Héro : une grande plaque cyan, comme l'icône du logo ================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate; background: var(--bund);
  border-radius: var(--r-xl); max-width: 1320px; margin-inline: auto;
}
.hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(78vw, 680px); aspect-ratio: 1; right: -34%; bottom: -66%; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 32%; rotate: -12deg; }
.hero-in { position: relative; display: grid; gap: 34px; padding: clamp(32px, 6.5vw, 92px) clamp(22px, 5.5vw, 80px); align-items: center; }
.hero-text { display: grid; gap: 22px; align-content: start; }
.hero h1 { max-width: 14em; }
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; }
.hero .lead { color: var(--on-cyan); font-weight: 500; max-width: 31em; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 500; font-size: 0.98rem; list-style: none; margin: 0; padding: 0; color: var(--on-bund); }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points .ico { width: 1.1rem; height: 1.1rem; stroke-width: 2.6; }
.hero .cta-note { color: var(--on-bund); }
.hero-stage { position: relative; display: grid; justify-items: start; }
.hero.s .hero-in { padding-block: clamp(30px, 5vw, 64px); }
.hero.s h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); }
@media (min-width: 900px) {
  .hero::before { width: min(46vw, 600px); right: -22%; bottom: -54%; }
  .hero-in { grid-template-columns: minmax(0, 1fr) auto; gap: 72px; }
  .hero.noaside .hero-in { grid-template-columns: 1fr; }
  .hero-stage { justify-items: center; }
}

/* ================= Vidéos : une affiche, un bouton lecture. Un clic ouvre la vidéo en plein écran. =================
   Deux formes seulement, partout sur le site :
   1) la CARTE (.vcard) : l'affiche verticale, où le titre de la vidéo se lit déjà, avec la durée et le bouton lecture ;
   2) la PASTILLE (.vpill) : « Regarder · 55 s », un petit bouton qui suggère sans prendre de place. */
.vcard { --cw: 150px; position: relative; display: grid; gap: 11px; align-content: start; width: var(--cw); max-width: 100%; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.vc-img { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--bund); box-shadow: 0 20px 34px -22px rgba(6, 37, 52, 0.6), 0 0 0 1px rgba(6, 37, 52, 0.07); transition: box-shadow 0.35s; }
.vc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-play { position: absolute; inset: 0; display: grid; place-items: center; }
.vc-play i { width: clamp(42px, 30%, 54px); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--night); display: grid; place-items: center; font-style: normal; box-shadow: 0 8px 22px rgba(4, 32, 44, 0.32); transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.vc-play .ico { width: 42%; height: 42%; margin-left: 7%; }
.vc-dur { position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; background: rgba(4, 32, 44, 0.8); color: #fff; font: 600 0.78rem/1 var(--font); }
.vc-tag { position: absolute; z-index: 2; top: -11px; left: 10px; padding: 7px 12px; border-radius: 999px; background: var(--night); color: #fff; font: 600 0.8rem/1 var(--font); box-shadow: 0 6px 14px -6px rgba(4, 32, 44, 0.6); }
.vc-t { font: 600 0.98rem/1.25 var(--font); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.vcard:hover { transform: translateY(-5px); }
.vcard:hover .vc-img { box-shadow: 0 28px 40px -22px rgba(6, 37, 52, 0.7), 0 0 0 1px rgba(6, 37, 52, 0.07); }
.vcard:hover .vc-play i { transform: scale(1.1); }
.vcard:active { transform: scale(0.98); }
.vcard:focus-visible { outline: none; }
.vcard:focus-visible .vc-img { outline: 3px solid var(--focus); outline-offset: 3px; }
@keyframes vc-ping {
  from { box-shadow: 0 8px 22px rgba(4, 32, 44, 0.32), 0 0 0 0 rgba(255, 255, 255, 0.75); }
  to { box-shadow: 0 8px 22px rgba(4, 32, 44, 0.32), 0 0 0 20px rgba(255, 255, 255, 0); }
}
.hero .vc-play i, .rv:first-child .vc-play i { animation: vc-ping 1.7s ease-out 1.4s 2; }

.vpill { --pf: var(--night); --pt: #fff; --pc: var(--bund); --pi: var(--on-bund); display: inline-flex; align-items: center; gap: 11px; justify-self: start; width: fit-content; max-width: 100%; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--pf); color: var(--pt); font: 600 1rem/1.15 var(--font); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.15s, box-shadow 0.15s; }
.vpi { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--pc); color: var(--pi); display: grid; place-items: center; font-style: normal; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.vpi .ico { width: 15px; height: 15px; margin-left: 2px; }
.vpill:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(4, 32, 44, 0.6); }
.vpill:hover .vpi { transform: scale(1.1); }
.vpill:active { transform: scale(0.98); }
.vpill:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hero .vpill, .final .vpill, .box:not(.nv) .vpill { --pf: #fff; --pt: var(--ink); --pc: var(--night); --pi: #fff; --focus: var(--night); }
.night .vpill, .box.nv .vpill { --pf: #fff; --pt: var(--ink); --pc: var(--bund); --pi: var(--on-bund); --focus: #fff; }

/* Dans le héros : une carte sur ordinateur, une pastille sur téléphone (jamais les deux) */
.hero-stage.vs { display: none; }
.hero-watch { display: block; margin-top: 2px; }
.hero .vcard { --cw: 196px; }
.hero .vc-t { display: none; }
.hero .vc-img { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95), 0 34px 52px -26px rgba(4, 32, 44, 0.7); }
.hero .vcard:hover .vc-img { box-shadow: 0 0 0 5px #fff, 0 40px 56px -26px rgba(4, 32, 44, 0.8); }
@media (min-width: 900px) {
  .hero-stage.vs { display: grid; }
  .hero-watch { display: none; }
}

/* Lecteur : une fenêtre sombre sur tout l'écran. L'affiche, floutée, remplit les côtés quand la vidéo est plus étroite que l'écran. */
.vplayer { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; background: #04202c; color: #fff; overscroll-behavior: contain; }
.vplayer:not([open]) { display: none; }
.vplayer::backdrop { background: #04202c; }
.vp-stage { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #04202c; }
.vp-stage::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--vp-bg, none) center / cover no-repeat; filter: blur(38px) saturate(1.15) brightness(0.55); }
.vp-stage::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(112px + env(safe-area-inset-top, 0px)); background: linear-gradient(rgba(4, 32, 44, 0.6), rgba(4, 32, 44, 0)); pointer-events: none; }
.vp-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: transparent; }
.vp-title { position: absolute; z-index: 3; left: 18px; right: 78px; top: calc(14px + env(safe-area-inset-top, 0px)); min-height: 46px; margin: 0; display: flex; align-items: center; font: 600 1.05rem/1.2 var(--font); letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); pointer-events: none; transition: opacity 0.4s; }
.vplayer.playing .vp-title { opacity: 0; }
.vp-x { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.22); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; }
.vp-x:hover { background: rgba(255, 255, 255, 0.34); }
.vp-end { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center; text-align: center; background: rgba(4, 32, 44, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 72px 24px 24px; overflow-y: auto; }
.vplayer.ended .vp-end { display: flex; }
.ve-in { display: grid; gap: 16px; justify-items: center; width: 100%; max-width: 400px; margin: auto; }
.ve-t { margin: 0; font: 700 clamp(1.9rem, 6vw, 2.7rem)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.vp-end .badges { --bh: 40px; }
.vp-end .badges img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.ve-next { display: grid; grid-template-columns: 52px minmax(0, 1fr) 38px; gap: 14px; align-items: center; width: 100%; margin-top: 6px; padding: 10px 14px 10px 10px; text-align: left; border-radius: 22px; border: 1.5px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; font: inherit; transition: background 0.15s, border-color 0.15s; }
.ve-next:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); }
.ve-next img { width: 52px; height: 92px; object-fit: cover; border-radius: 12px; display: block; background: var(--bund); }
.ve-next > span { display: grid; gap: 3px; min-width: 0; }
.ve-next small { font-size: 0.85rem; font-weight: 500; opacity: 0.85; }
.ve-next b { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.ve-next .ico { width: 38px; height: 38px; padding: 12px; border-radius: 50%; background: var(--bund); color: var(--on-bund); }
.ve-next[hidden] { display: none; }
.ve-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ve-b { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; border-radius: 999px; padding: 11px 18px; font: 600 0.98rem/1 var(--font); cursor: pointer; transition: background 0.15s; }
.ve-b:hover { background: rgba(255, 255, 255, 0.16); }
.ve-b .ico { width: 1.05rem; height: 1.05rem; }
html.vp-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .vplayer[open] { animation: vp-in 0.25s ease-out; } }
@keyframes vp-in { from { opacity: 0; } }

/* ================= Sections ================= */
.sec { padding-block: clamp(60px, 9vw, 124px); }
.sec-tight { padding-block: clamp(36px, 6vw, 76px); }
.wash { background: var(--mist); }
.head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4.5vw, 52px); max-width: 44rem; }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.head.center .kicker { justify-self: center; }
.blk { padding: 10px; }
@media (min-width: 900px) { .blk { padding: 16px; } }
.blk + .blk { margin-top: clamp(24px, 4vw, 56px); }

/* Bande de preuves : quatre faits, sans cadre */
.proof { display: grid; gap: 22px 22px; grid-template-columns: 1fr 1fr; padding: 34px 0 12px; list-style: none; margin: 0; }
.proof li { display: grid; gap: 8px; align-content: start; font-weight: 600; line-height: 1.25; padding-top: 14px; border-top: 1.5px solid var(--line); font-size: 1.05rem; }
.proof .tile { width: auto; height: auto; background: none; color: var(--deep); place-items: start; }
.proof .tile .ico { width: 1.55rem; height: 1.55rem; stroke-width: 1.9; }
.proof small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.95rem; }
.proof b { display: block; font-weight: 600; }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, 1fr); gap: 0 40px; padding-top: 48px; } }

/* Calculateur : compact, il tient dans un écran pour voir le résultat en direct, sans défiler */
.calc { background: var(--night); color: #fff; border-radius: var(--r-xl); padding: 16px 16px 14px; display: grid; gap: 10px; max-width: 1320px; margin-inline: auto; position: relative; overflow: hidden; }
.calc-l, .calc-r { display: contents; }
.calc-top, .calc-out, .calc-form, .calc-cta { position: relative; }
.calc-top { order: 1; display: grid; gap: 8px; justify-items: start; }
.calc-out { order: 2; display: grid; gap: 8px; }
.calc-form { order: 3; display: grid; gap: 3px; }
.calc-cta { order: 4; display: grid; gap: 8px; justify-items: center; }
.calc .kicker { display: none; }
.calc h2 { font-size: clamp(1.3rem, 5.6vw, 1.75rem); line-height: 1.06; font-weight: 600; }
.calc-form .row { display: grid; gap: 2px; }
.calc-form label { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; font-size: 0.9rem; line-height: 1.2; align-items: baseline; }
.calc-form output { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--bund) var(--p, 40%), rgba(255, 255, 255, 0.24) var(--p, 40%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--bund) var(--p, 40%), rgba(255, 255, 255, 0.24) var(--p, 40%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -9px; border-radius: 9px; background: #fff; border: 5px solid var(--bund); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; border-radius: 9px; background: #fff; border: 5px solid var(--bund); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
input[type="range"]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 10px; }
.fig { border-radius: var(--r-m); padding: 9px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab num" "sub num"; column-gap: 12px; row-gap: 2px; align-items: center; color: #fff; }
.fig.loss { background: rgba(255, 106, 85, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 106, 85, 0.75); }
.fig.gain { background: var(--bund); }
.fig .lab { grid-area: lab; font-weight: 500; font-size: 0.9rem; line-height: 1.2; align-self: end; }
.fig .num { grid-area: num; display: grid; justify-items: end; font-weight: 700; font-size: clamp(1.55rem, 7.2vw, 2.05rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig .num small { font-size: 0.38em; font-weight: 500; letter-spacing: 0; margin-top: 3px; }
.fig .sub { grid-area: sub; font-size: 0.8rem; line-height: 1.25; align-self: start; }
/* Sur le résultat cyan : le gros chiffre est blanc, le petit texte est en encre */
.fig.gain .lab, .fig.gain .sub, .fig.gain .num small { color: var(--on-bund); }
.fig.gain.flat { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.fig.gain.flat .lab, .fig.gain.flat .sub, .fig.gain.flat .num small { color: #fff; }
.how { font-size: 0.86rem; line-height: 1.35; color: #fff; text-align: left; max-width: calc(100% - 58px); justify-self: start; }
.how summary { cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary u { color: #fff; white-space: nowrap; text-underline-offset: 0.2em; }
.how p { margin-top: 8px; line-height: 1.45; max-width: 46em; text-align: left; }
.calc-form .hint { color: #fff; font-size: 0.92rem; margin-top: -2px; }
@media (min-width: 900px) {
  .calc { padding: 40px 48px 34px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: center; }
  .calc-l, .calc-r { display: grid; gap: 26px; align-content: center; }
  .calc-top, .calc-out, .calc-form, .calc-cta { order: 0; }
  .calc .kicker { display: inline-flex; }
  .calc h2 { font-size: clamp(2rem, 3.3vw, 2.7rem); }
  .calc-form { gap: 18px; }
  .calc-form label { font-size: 1.02rem; }
  .calc-form output { font-size: 1.3rem; }
  .calc-out { gap: 12px; }
  .fig { grid-template-columns: 1fr; grid-template-areas: "lab" "num" "sub"; padding: 16px 24px; row-gap: 4px; border-radius: var(--r-l); }
  .fig .lab { font-size: 1rem; align-self: auto; }
  .fig .sub { font-size: 0.96rem; align-self: auto; }
  .fig .num { display: block; font-size: clamp(2.3rem, 4vw, 3.4rem); }
  .fig .num small { font-size: 0.34em; margin: 0 0 0 0.4em; }
  .calc-cta { gap: 12px; justify-items: start; }
  .how { font-size: 0.9rem; max-width: none; }
}

/* Étapes : une vraie suite, donc numérotée */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; counter-reset: s; }
.st { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; align-content: start; }
.st .ic { width: 64px; height: 64px; border-radius: 20px; background: var(--bund); color: #fff; display: grid; place-items: center; position: relative; }
.st .ic .ico { width: 1.8rem; height: 1.8rem; stroke-width: 1.9; }
.st .ic::after { counter-increment: s; content: counter(s); position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 8px; background: var(--night); color: #fff; font: 600 0.8rem/24px var(--font); text-align: center; }
.st::before { content: ""; position: absolute; left: 31px; top: 74px; bottom: -22px; border-left: 2px dashed #9fe3f8; }
.st:last-child::before { display: none; }
.st h3 { margin-bottom: 4px; }
.st p { color: var(--ink-soft); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .st { grid-template-columns: 1fr; gap: 18px; }
  .st::before { left: 76px; right: -28px; top: 31px; bottom: auto; border-left: 0; border-top: 2px dashed #9fe3f8; width: auto; }
}

/* Leviers : une plaque (le chiffre), puis le texte sur fond blanc */
.levers { display: grid; gap: 40px 28px; }
.lever { display: grid; gap: 20px; align-content: start; }
.lever .cap { border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 6px; align-content: end; min-height: 12rem; }
.lever.a .cap { background: var(--bund); }
.lever.b .cap { background: var(--night); }
.lever .pct { font-weight: 700; font-size: clamp(4.4rem, 12vw, 7rem); line-height: 0.9; letter-spacing: -0.045em; }
.lever h3 { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }
.lever p { max-width: 30em; }
.chip { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 500; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.chip .ico { color: var(--deep); width: 1.3rem; height: 1.3rem; }
@media (min-width: 900px) { .levers { grid-template-columns: 1fr 1fr; gap: 28px; } }
.fineprint { font-size: 0.95rem; color: var(--ink-soft); max-width: 46em; margin-top: 26px; }

/* Les 8 vidéos : une seule rangée d'affiches. On fait glisser (téléphone) ou on utilise les flèches (ordinateur). */
.rail-wrap { position: relative; }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.head-row .head { margin-bottom: 14px; }
.rail { display: flex; gap: 14px; list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 18px var(--gutter) 22px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rv { flex: 0 0 auto; scroll-snap-align: start; }
.rv .vcard { --cw: 150px; }
.rail-nav { display: none; gap: 10px; flex: none; margin-bottom: 18px; }
.rail-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background 0.15s, color 0.15s, opacity 0.15s; }
.rail-nav button:hover:not(:disabled) { background: var(--night); color: #fff; }
.rail-nav button:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 900px) {
  .rail { gap: 22px; }
  .rv .vcard { --cw: 184px; }
  .rail-nav:not([hidden]) { display: flex; }
  /* Les affiches s'effacent en douceur sur le bord où il y en a encore à découvrir */
  .rail.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 80px), transparent); }
  .rail.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 80px); mask-image: linear-gradient(to right, transparent, #000 80px); }
  .rail.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
}

/* Formules : une plaque (le nom et la promesse), puis le détail sur fond blanc. Aucun prix. */
.plans { display: grid; gap: 40px 28px; }
.plan { display: grid; gap: 0; align-content: start; }
.plan .cap { border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 22px; align-content: space-between; min-height: clamp(11rem, 26vw, 15rem); }
.plan.p1 .cap { background: var(--bund); }
.plan.p2 .cap { background: var(--night); }
.plan .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.plan h3 { font-size: clamp(1.6rem, 3.4vw, 2rem); font-weight: 600; letter-spacing: -0.025em; }
.plan .tag { font-weight: 500; font-size: 0.98rem; color: var(--on-bund); }
.plan.p2 .tag { color: rgba(255, 255, 255, 0.86); }
.plan .big { margin: 0; font-weight: 650; font-size: clamp(1.7rem, 4.4vw, 2.4rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; max-width: 15em; }
.plan .body { padding: 28px 4px 0; display: grid; gap: 20px; align-content: start; }
.plan .desc { font-size: 1.14rem; font-weight: 500; letter-spacing: -0.01em; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 36px; line-height: 1.38; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 8px; background: var(--bund); }
.checks li::after {
  content: ""; position: absolute; left: 6px; top: 7px; width: 12px; height: 12px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .badges { justify-self: start; margin-top: 4px; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; gap: 28px; } }
.plans-note { margin-top: 26px; color: var(--ink-soft); font-size: 1rem; max-width: 48em; }

/* Tableau comparatif : en-têtes cyan et marine, corps blanc */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-l); border: 1.5px solid var(--line); background: #fff; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 1.02rem; color: var(--ink); }
.cmp th, .cmp td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 450; }
.cmp thead th { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; padding-block: 18px; }
.cmp thead th:nth-child(2) { background: var(--bund); }
.cmp thead th:nth-child(3) { background: var(--night); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.cmp .yes { color: var(--deep); display: inline-grid; place-items: center; }
.cmp .yes .ico { stroke-width: 3; }
.cmp .no { color: var(--ink-soft); }
@media (max-width: 640px) {
  table.cmp { min-width: 0; font-size: 0.94rem; }
  .cmp th, .cmp td { padding: 11px 6px; }
  .cmp th:first-child, .cmp td:first-child { padding-left: 14px; width: 56%; line-height: 1.3; }
  .cmp thead th { font-size: 0.98rem; line-height: 1.15; }
  .cmp thead th:nth-child(2) { color: var(--on-bund); }
}

/* Détail (définitions) */
.defs { margin: 0; border-top: 1.5px solid var(--line); max-width: 52em; }
.defs > div { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1.5px solid var(--line); }
.defs dt { font-weight: 600; font-size: 1.1rem; }
.defs dd { margin: 0; color: var(--ink-soft); }
@media (min-width: 700px) { .defs > div { grid-template-columns: 15rem 1fr; gap: 28px; } }

/* Blocs texte + vignette vidéo */
.split { display: grid; gap: 30px; align-items: start; }
.split .txt { display: grid; gap: 18px; align-content: center; }
.split .txt p { max-width: 36em; }
.split .media { display: grid; justify-items: start; }
.split.solo { grid-template-columns: minmax(0, 1fr); }
.split.solo .txt { max-width: 46rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) auto; gap: 96px; align-items: center; }
  .split.solo { grid-template-columns: minmax(0, 46rem); gap: 0; }
  .split.rev { grid-template-columns: auto minmax(0, 1fr); }
  .split.rev .media { order: -1; }
  .split .media { justify-items: center; }
}
.tilebar { display: grid; gap: 14px; margin-top: 8px; }
.tilebar .t { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.tilebar .tile { width: 44px; height: 44px; }
.tilebar b { font-weight: 600; display: block; }
.tilebar span { color: var(--ink-soft); font-size: 1rem; display: block; line-height: 1.3; }

/* Plaques de déclaration : une phrase forte sur cyan ou marine, le détail est écrit en dessous */
.night, .box { max-width: 1320px; margin-inline: auto; border-radius: var(--r-xl); padding: clamp(28px, 5.5vw, 76px); position: relative; overflow: hidden; isolation: isolate; }
.night { background: var(--night); }
.box { background: var(--bund); }
.box.nv { background: var(--night); }
/* Le même anneau que sur le héros et le bandeau final : un fil conducteur discret d'une plaque à l'autre */
.box::before, .night::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 520px); aspect-ratio: 1; right: -24%; top: -52%; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 32%; rotate: 14deg; }
.box.nv::before, .night::before { border-color: rgba(255, 255, 255, 0.16); }
@media (min-width: 900px) { .box::before, .night::before { width: min(40vw, 520px); right: -12%; top: -60%; } }
.box .lead, .night .lead { color: inherit; }
.box h2, .night h2 { font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; }
.box > .head { margin-bottom: 24px; }
.after { padding-top: clamp(26px, 4vw, 44px); }
.after .cols { display: grid; gap: 18px 56px; max-width: 60em; }
@media (min-width: 900px) { .after .cols { grid-template-columns: 1fr 1fr; } }
.pctbox { display: grid; gap: 6px; }
.pctbox .pct { font-weight: 700; font-size: clamp(5rem, 12vw, 8.5rem); line-height: 0.88; letter-spacing: -0.05em; }
.pctbox span { font-weight: 500; font-size: 1.1rem; max-width: 12em; line-height: 1.3; color: rgba(255, 255, 255, 0.86); }

/* Citation */
.quote { font-weight: 600; font-size: clamp(1.55rem, 3.6vw, 2.5rem); line-height: 1.14; letter-spacing: -0.025em; text-wrap: balance; }
.who { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.who img { width: 44px; height: 44px; border-radius: 13px; }

/* Fonctionnalités : sans cadre, un filet et une pastille */
.fgrid { display: grid; gap: 36px 44px; }
.fcard { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1.5px solid var(--line); }
.fcard .tile { width: 52px; height: 52px; border-radius: 17px; margin-bottom: 8px; }
.fcard .tile .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.9; }
.fcard h3 { font-size: 1.32rem; letter-spacing: -0.018em; }
.fcard small { display: block; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.45; margin-top: 4px; }
.fcard.hl { background: var(--night); border-top: 0; border-radius: var(--r-l); padding: clamp(24px, 3vw, 32px); }
.fcard.hl small { color: rgba(255, 255, 255, 0.84); }
/* Arrivée par un lien (menu, bouton) : la carte visée s'illumine un instant, pour qu'on voie laquelle c'est
   (plusieurs cartes d'une même ligne arrivent à la même hauteur) */
.fcard:not(.hl):target { position: relative; isolation: isolate; }
.fcard:not(.hl):target::before { content: ""; position: absolute; inset: -14px -14px; z-index: -1; border-radius: 24px; background: rgba(0, 200, 255, 0.15); pointer-events: none; animation: hook-wash 2.8s ease-out 0.3s both; }
.fcard.hl:target { outline: 3px solid transparent; outline-offset: 8px; animation: hook-ring 2.4s ease-out 0.3s both; }
@keyframes hook-wash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hook-ring { 0%, 35% { outline-color: var(--bund); } 100% { outline-color: transparent; } }
@media (min-width: 700px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fgrid.three { grid-template-columns: repeat(3, 1fr); } }

/* Eux / Nous */
.versus { display: grid; gap: 28px; align-items: start; }
.vs-col { display: grid; gap: 20px; align-content: start; }
.vs-col.them { border-top: 1.5px solid var(--line); padding-top: 26px; }
.vs-col.us { background: var(--night); border-radius: var(--r-xl); padding: clamp(24px, 3.6vw, 44px); }
.vs-col h3 { font-size: 1.6rem; letter-spacing: -0.025em; }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vs-col li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; line-height: 1.4; }
.vs-col li .ico { width: 1.4rem; height: 1.4rem; margin-top: 1px; stroke-width: 2.6; }
.vs-col.them li .ico { color: var(--coral); }
.vs-col.us li .ico { color: var(--bund); }
@media (min-width: 900px) { .versus { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Constats : trois blocs ouverts, sans numéros (ce n'est pas une suite) */
.pains { display: grid; gap: 30px; list-style: none; padding: 0; margin: 0; }
.pain { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 3px solid var(--bund); }
.pain b { display: block; font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.018em; }
.pain span { display: block; color: var(--ink-soft); }
@media (min-width: 900px) { .pains { grid-template-columns: repeat(3, 1fr); gap: 44px; } }

/* Petites étapes numérotées (une vraie suite) */
.mini { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: m; }
.mini li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; font-weight: 500; }
.mini li::before { counter-increment: m; content: counter(m); width: 44px; height: 44px; border-radius: 14px; background: var(--bund); color: #fff; display: grid; place-items: center; font: 600 1.3rem/1 var(--font); }

/* Ton premier jour : trois étapes sur fond clair */
.day { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.day li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; align-content: start; }
.day .n { width: 52px; height: 52px; border-radius: 16px; background: var(--bund); color: #fff; display: grid; place-items: center; font: 600 1.45rem/1 var(--font); }
.day h3 { margin-bottom: 6px; font-size: 1.3rem; }
.day p { color: var(--ink-soft); }
@media (min-width: 900px) { .day { grid-template-columns: repeat(3, 1fr); gap: 44px; } .day li { grid-template-columns: 1fr; gap: 20px; } }

/* La suite : trois liens, sans cadre */
.ns-t { font-weight: 500; font-size: 1.05rem; margin-bottom: 14px; color: var(--ink-soft); }
.ns-row { display: grid; gap: 0; }
.ns { display: grid; grid-template-columns: 44px 1fr 24px; gap: 16px; align-items: center; padding: 18px 2px; border-top: 1.5px solid var(--line); text-decoration: none; color: var(--ink); }
.ns:last-child { border-bottom: 1.5px solid var(--line); }
.ns:hover b { text-decoration: underline; text-decoration-color: var(--bund); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.ns b { display: block; font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.ns small { display: block; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.3; margin-top: 2px; }
.ns > .ico { color: var(--deep); transition: transform 0.15s; }
.ns:hover > .ico { transform: translateX(3px); }
@media (min-width: 900px) { .ns-row { grid-template-columns: repeat(3, 1fr); gap: 0 40px; } .ns, .ns:last-child { border-bottom: 0; padding-top: 22px; } }

/* Carte « Pris en charge pour toi » (héro Compta) : plaque marine sur le cyan */
.ocard { background: var(--night); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 34px); display: grid; gap: 18px; width: 100%; max-width: 420px; }
.ocard .tt { font-weight: 600; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em; }
.ocard .incl { background: rgba(0, 200, 255, 0.18); border-radius: 14px; padding: 10px 14px; font-weight: 500; font-size: 0.98rem; display: flex; gap: 10px; align-items: center; }

/* ================= FAQ ================= */
.faq { max-width: 52em; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq details:first-of-type { border-top: 1.5px solid var(--line); }
.faq summary { cursor: pointer; padding: 22px 60px 22px 0; font-weight: 600; font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.01em; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 11px; background: var(--bund) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); transition: background-color 0.2s; }
.faq details[open] summary::after { background-color: var(--night); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq .answer { padding: 0 60px 24px 0; color: var(--ink); display: grid; gap: 10px; max-width: 42em; }

/* Thèmes de la FAQ.
   1) Tuiles : 4 grands boutons (icône, titre, nombre de questions) dans le héros de la FAQ et sur les pages qui y renvoient.
   2) Barre : sur la page FAQ, elle se déploie sous l'en-tête dès que le héros est passé et suit la lecture. */
.ftiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 30px; }
.hero .ftiles { margin: 0; }
.hero-aside { position: relative; }
@media (min-width: 900px) { .ftiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } .hero .ftiles { grid-template-columns: 1fr 1fr; gap: 14px; } }
.ftile { position: relative; display: grid; align-content: start; gap: 4px; padding: 18px 16px 16px; border-radius: var(--r-l); background: var(--bund); text-decoration: none; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, background 0.2s; }
.ftile .fi { width: 36px; height: 36px; margin-bottom: 10px; display: grid; place-items: center; color: #fff; transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); }
.ftile .fi .ico { width: 1.9rem; height: 1.9rem; stroke-width: 1.8; }
.ftile .ft { font-weight: 600; font-size: 1.2rem; line-height: 1.15; letter-spacing: -0.015em; padding-right: 6px; }
.ftile .fq { font-size: 0.95rem; font-weight: 500; color: var(--on-bund); }
.ftile .go { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); color: #fff; display: grid; place-items: center; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.2s; }
.ftile .go .ico { width: 0.95rem; height: 0.95rem; }
.ftile:hover { transform: translateY(-4px); box-shadow: 0 18px 28px -18px rgba(0, 130, 170, 0.7); }
.ftile:hover .fi { transform: rotate(-9deg) scale(1.1); }
.ftile:hover .go { transform: translateX(3px); background: var(--night); }
.ftile:active { transform: scale(0.97); }
.hero .ftile { background: var(--night); }
.hero .ftile .fi { color: var(--bund); }
.hero .ftile .fq { color: rgba(255, 255, 255, 0.82); }
.hero .ftile .go { background: rgba(255, 255, 255, 0.16); }
.hero .ftile:hover { background: var(--night-2); box-shadow: 0 18px 28px -18px rgba(4, 32, 44, 0.8); }
.hero .ftile:hover .go { background: var(--bund); }
/* Entrée en cascade quand les tuiles arrivent à l'écran, puis une petite vague : chaque icône saute à son tour (une fois) */
.js .ftiles:not(.in) .ftile { opacity: 0; }
.ftiles.in .ftile { animation: ftile-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
.ftiles.in .ftile .fi { animation: fi-hop 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1s + var(--i, 0) * 170ms) 1; }
@keyframes ftile-in { from { opacity: 0; transform: translateY(18px) scale(0.95); } }
@keyframes fi-hop { 30% { transform: translateY(-7px) rotate(-10deg); } 60% { transform: translateY(0) rotate(4deg); } }

.faqbar { position: fixed; z-index: 30; left: 0; right: 0; top: calc(var(--hdr) + env(safe-area-inset-top, 0px)); padding: 9px 0; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-14px); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s, visibility 0s 0.38s; }
.faqbar.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.faqnav { position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 22px; background: var(--mist); color: var(--ink); }
.fn-ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius: 17px; background: var(--night); opacity: 0; pointer-events: none; transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s; }
.faqnav.has-active .fn-ind { opacity: 1; }
.fcat { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 17px; color: var(--ink); text-decoration: none; font: 600 1rem/1.15 var(--font); white-space: nowrap; transition: background 0.2s, color 0.25s, transform 0.15s; }
.fcat:hover { background: rgba(6, 37, 52, 0.06); }
.fcat:active { transform: scale(0.97); }
.fcat .fi { width: 36px; height: 36px; border-radius: 12px; background: var(--bund); color: #fff; display: grid; place-items: center; flex: none; transition: transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }
.fcat:hover .fi, .fcat[aria-current="true"] .fi { transform: rotate(-9deg) scale(1.1); }
.fcat .fi .ico { width: 1.2rem; height: 1.2rem; }
.fcat .fnum { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--sky); color: var(--ink); font: 600 0.84rem/26px var(--font); text-align: center; transition: background 0.25s, color 0.25s; }
.fcat[aria-current="true"] { color: #fff; }
.fcat[aria-current="true"] .fnum { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Téléphone : 4 icônes, l'onglet du thème lu s'élargit et affiche son nom */
@media (max-width: 899px) {
  .faqbar { padding: 7px 0; }
  .faqnav { padding: 4px; border-radius: 18px; }
  .fn-ind { display: none; }
  .fcat { flex: 0 0 auto; gap: 0; padding: 4px; border-radius: 14px; transition: background 0.3s, flex-grow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.35s, gap 0.35s, transform 0.15s; }
  .fcat .fi { width: 34px; height: 34px; border-radius: 11px; }
  .fcat .fi .ico { width: 1.15rem; height: 1.15rem; }
  .fcat .fl { display: block; max-width: 0; overflow: hidden; opacity: 0; font-size: 0; transition: max-width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
  .fcat .fl::after { content: attr(data-short); font-size: 0.98rem; line-height: 34px; }
  .fcat .fnum { display: none; }
  .fcat[aria-current="true"] { flex: 1 1 auto; gap: 9px; padding-right: 14px; background: var(--night); }
  .fcat[aria-current="true"] .fl { max-width: 160px; opacity: 1; }
  .fcat[aria-current="true"] .fi { background: var(--bund); }
  .faqnav:not(.has-active) .fcat { flex: 1 1 0; justify-content: center; }
  /* Héros de la FAQ sur téléphone : tout tient dans le premier écran (titre + 4 tuiles) */
  .hero.has-aside .hero-in { gap: 20px; }
  .hero.has-aside .hero-text { gap: 14px; }
  .hero.has-aside .hero-points { display: none; }
  .hero.has-aside .ftile { padding: 14px 14px 12px; gap: 3px; }
  .hero.has-aside .ftile .fi { width: 30px; height: 30px; margin-bottom: 4px; }
  .hero.has-aside .ftile .fi .ico { width: 1.6rem; height: 1.6rem; }
  .hero.has-aside .ftile .ft { font-size: 1.05rem; }
  .hero.has-aside .ftile .fq { font-size: 0.86rem; }
  .hero.has-aside .ftile .go { top: 12px; right: 12px; width: 28px; height: 28px; }
}

/* Une catégorie de la FAQ */
.fsec { margin-top: clamp(40px, 6vw, 64px); scroll-margin-top: 70px; max-width: 52em; }
.fsec:first-child { margin-top: 0; }
.fsec-h { display: flex; align-items: center; gap: 14px; margin: 0 -10px 12px; padding: 8px 10px; border-radius: 20px; }
.fsec-h .fi { width: 48px; height: 48px; border-radius: 15px; background: var(--bund); color: #fff; display: grid; place-items: center; flex: none; }
.fsec-h h2 { font-size: clamp(1.5rem, 3.8vw, 2.1rem); }
.fsec-h .fn { margin-left: auto; color: var(--ink-soft); font-weight: 500; font-size: 0.98rem; white-space: nowrap; }
.fsec.flash .fsec-h { animation: fsec-flash 1.6s ease-out; }
@keyframes fsec-flash { 0%, 25% { background: rgba(0, 200, 255, 0.3); } 100% { background: rgba(0, 200, 255, 0); } }
@media (max-width: 520px) { .fsec-h .fn { display: none; } }

/* Page des vidéos : la galerie des 8 affiches, puis les transcriptions (même geste que la FAQ) */
.vgal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
.vg { display: grid; gap: 8px; align-content: start; }
.vg .vcard { --cw: 100%; width: 100%; }
.vg .blurb { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4; }
@media (min-width: 720px) { .vgal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; } }
@media (min-width: 1000px) { .vgal { grid-template-columns: repeat(4, minmax(0, 236px)); justify-content: space-between; gap: 52px 24px; } }
.trans { margin-top: 0; }
.trans .answer p { max-width: 40em; }

/* Bandeau final : une grande plaque cyan, comme le héros */
.final { background: var(--bund); border-radius: var(--r-xl); max-width: 1320px; margin-inline: auto; position: relative; overflow: hidden; isolation: isolate; padding: clamp(34px, 7vw, 96px) clamp(24px, 5.5vw, 80px); display: grid; gap: 26px; justify-items: start; }
.final::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(70vw, 560px); aspect-ratio: 1; right: -30%; top: -62%; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 32%; rotate: 14deg; }
.final h2 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; max-width: 14em; }
.final p { font-size: 1.2rem; max-width: 30em; color: var(--on-cyan); font-weight: 500; }
.final .txt { display: grid; gap: 22px; justify-items: start; }
.final .cta-note { font-size: 0.98rem; font-weight: 500; max-width: none; color: var(--on-bund); }
.final .qrbox { display: none; }
@media (min-width: 900px) {
  .final::before { width: min(44vw, 520px); right: -16%; top: -58%; }
  .final { grid-template-columns: 1fr auto; align-items: center; gap: 24px 64px; }
  .final .qrbox { display: grid; gap: 12px; justify-items: center; font-size: 0.95rem; font-weight: 500; text-align: center; max-width: 200px; color: var(--on-bund); }
  .final .qrbox img { width: 170px; height: 170px; background: #fff; padding: 10px; border-radius: 24px; }
}

/* Deux colonnes de texte sous une plaque (suite de la phrase forte) */
.cols { display: grid; gap: 18px 56px; max-width: 60em; }
.cols p { max-width: 34em; }
@media (min-width: 900px) { .cols { grid-template-columns: 1fr 1fr; } }

/* Pages juridiques et texte */
.prose { max-width: 46em; display: grid; gap: 16px; }
.prose h2 { margin-top: 30px; font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.prose h3 { margin-top: 12px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.prose a { color: var(--deep); }
.prose h2[id] { scroll-margin-top: 6px; }
.facts { margin: 0; max-width: 40em; border-top: 1.5px solid var(--line); }
.facts > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.facts dt { color: var(--ink-soft); font-weight: 500; }
.facts dd { margin: 0; font-weight: 600; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 17em 1fr; gap: 20px; } }
.toc { max-width: 46em; margin: 0 0 30px; border-radius: var(--r-m); background: var(--mist); padding: 2px 22px; }
.toc summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-weight: 600; font-size: 1.05rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; width: 30px; height: 30px; border-radius: 10px; background: var(--bund); color: #fff; display: grid; place-items: center; font: 600 1.2rem/1 var(--font); }
.toc[open] summary::after { content: "\2212"; background: var(--night); }
.toc ol { margin: 0; padding: 0 0 18px 1.5em; display: grid; gap: 8px; }
.toc a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-color: var(--bund); text-decoration-thickness: 2px; }
@media (min-width: 760px) { .toc ol { display: block; columns: 2; column-gap: 48px; } .toc li { break-inside: avoid; margin-bottom: 8px; } }
.todo { background: #fff3a6; color: #3a3000; padding: 2px 8px; border-radius: 6px; font-weight: 500; }
.callout { background: var(--night); border-left: 6px solid #ffd84d; border-radius: var(--r-m); padding: 18px 20px; display: grid; gap: 6px; max-width: 46em; color: #fff; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--mist); padding: 2px 6px; border-radius: 6px; color: var(--ink); }
.callout code { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ================= Pied de page ================= */
.foot { padding-block: 64px 120px; font-size: 1rem; border-top: 1px solid var(--line); margin-top: clamp(40px, 6vw, 80px); }
.foot-grid { display: grid; gap: 32px 20px; grid-template-columns: 1fr 1fr; }
.foot-grid .about { grid-column: 1 / -1; }
.foot .fh { margin: 0 0 12px; font: 600 1rem/1.2 var(--font); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a.badges { display: inline-flex; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--bund); text-decoration-thickness: 2px; }
.foot a.badges:hover { text-decoration: none; }
.foot .about { display: grid; gap: 16px; max-width: 26em; }
.foot .about p { color: var(--ink-soft); }
.foot .brand img { width: 48px; height: 48px; }
.foot small { display: block; color: var(--ink-soft); line-height: 1.5; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.92rem; }
@media (min-width: 900px) { .foot { padding-bottom: 112px; } .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .foot-grid .about { grid-column: auto; } }

/* ================= Barre collante : UN lien, les deux boutiques, un texte qui donne envie ================= */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; color: var(--ink);
  padding: 9px var(--gutter) calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -22px rgba(6, 37, 52, 0.5);
  transform: translateY(115%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
}
.sticky.show { transform: none; visibility: visible; transition-delay: 0s; }
.sticky-cta { display: grid; justify-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.sticky-cta .t { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 8px; text-align: center; line-height: 1.2; }
.sticky-cta b { font: 600 1rem/1.2 var(--font); letter-spacing: -0.01em; }
.sticky-cta small { font-size: 0.88rem; font-weight: 400; color: var(--ink-soft); }
.sticky-cta small::before { content: "·"; margin-right: 8px; }
.sticky-cta .bimgs { --bh: 32px; transition: transform 0.15s; }
.sticky-cta:hover .bimgs { transform: translateY(-2px); }
@media (max-width: 380px) { .sticky-cta small { display: none; } }
@media (min-width: 900px) {
  .sticky { left: 50%; right: auto; bottom: 22px; width: min(600px, calc(100vw - 48px)); padding: 12px 14px 12px 26px; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 24px 48px -18px rgba(6, 37, 52, 0.35); transform: translate(-50%, 170%); }
  .sticky.show { transform: translate(-50%, 0); }
  .sticky-cta { grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; gap: 20px; }
  .sticky-cta .t { display: grid; justify-items: start; gap: 3px; text-align: left; }
  .sticky-cta small::before { content: none; }
}

/* ================= Utilitaires ================= */
.center { text-align: center; justify-items: center; }
.mt { margin-top: 28px; }
.mt-l { margin-top: clamp(40px, 6vw, 72px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.stack-s { display: grid; gap: 10px; }

/* ================= Fenêtre QR code (ordinateur) ================= */
.qrdlg { border: 0; padding: 0; border-radius: var(--r-xl); width: min(700px, calc(100vw - 32px)); background: var(--night); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6); }
.qrdlg::backdrop { background: rgba(6, 37, 52, 0.7); backdrop-filter: blur(3px); }
.qr-in { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; padding: 38px 36px 36px; }
.qr-in > img { width: 188px; height: 188px; border-radius: 22px; background: #fff; padding: 10px; box-shadow: 0 0 0 4px var(--bund); }
.qr-tx { display: grid; gap: 14px; justify-items: start; }
.qr-tx h2 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
.qr-tx .soft { color: rgba(255, 255, 255, 0.86); }
.qr-tx .badges img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
.qr-link { font: 600 1.05rem/1.2 var(--font); color: #fff; text-decoration-color: var(--bund); text-decoration-thickness: 2px; }
.qr-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.qr-x:hover { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 560px) { .qr-in { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 52px; } .qr-tx { justify-items: center; } }

/* ================= Bouton de discussion (WhatsApp) ================= */
.chat { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: none; justify-items: end; gap: 10px; transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .chat, .chat.live { display: grid; }
html.sticky-on .chat { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.chat-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%; background: var(--wa); color: #fff; border: 0; box-shadow: 0 14px 30px -10px rgba(6, 37, 52, 0.55); font: 600 1rem/1 var(--font); cursor: pointer; text-decoration: none; transition: transform 0.15s; --focus: var(--on-bund); }
.chat-btn:hover { transform: translateY(-2px) scale(1.04); }
.chat-btn .ico { width: 1.9rem; height: 1.9rem; color: #fff; }
.chat-btn span { display: none; }
.chat-pop { display: none; width: min(320px, calc(100vw - 28px)); background: var(--night); border-radius: 26px; padding: 20px 20px 18px; box-shadow: 0 30px 70px -20px rgba(6, 37, 52, 0.55); gap: 10px; position: relative; justify-items: start; order: -1; }
.chat.open .chat-pop { display: grid; }
.chat-pop .ct { font: 600 1.3rem/1.1 var(--font); letter-spacing: -0.02em; padding-right: 40px; }
.chat-pop .soft { font-size: 0.98rem; line-height: 1.4; color: rgba(255, 255, 255, 0.86); }
.chat-pop .link-arrow { font-size: 1rem; text-decoration-color: var(--bund); }
.chat-x { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-x:hover { background: rgba(255, 255, 255, 0.26); }
@media (min-width: 900px) {
  .chat { right: 22px; bottom: 22px; }
  html.sticky-on .chat { bottom: 22px; }
  .chat-btn { height: 56px; padding: 0 22px 0 16px; border-radius: 999px; }
  .chat-btn span { display: inline; color: var(--on-bund); }
}

/* Impression */
@media print {
  .top, .sticky, .sheet, .badges, .final, .chat, .qrdlg, .vplayer, .faqbar, .vcard, .vpill, .rail-wrap { display: none !important; }
  .js [data-reveal] { opacity: 1; }
}

/* Apparition au défilement : fondu seul, sans glissement ; une ancre ne doit jamais atterrir décalée sous l'en-tête */
.js [data-reveal] { opacity: 0; transition: opacity 0.6s ease; transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html, html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transition: none; }
}

/* Coins « squircle » (courbe continue, comme l'icône du logo) sur les navigateurs qui savent le faire */
@supports (corner-shape: squircle) {
  .hero, .final, .box, .night, .calc, .lever .cap, .plan .cap, .vs-col.us, .ocard, .qrdlg, .chat-pop, .ftile, .tile, .vc-img, .brand img, .st .ic { corner-shape: squircle; }
}