/* Interlap — landing page
   Tokens mirror docs/BRAND.md in the interlap-ios repo. Volt is a fill colour
   only: never volt text on a light background (~1.3:1). Interactive elements on
   light surfaces use pulse. */

:root {
    --ink: #0C1524;
    --volt: #B6F03C;
    --pulse: #2E6BFF;
    /* Le pulse de marque tombe à 4,12:1 sur --surface, sous les 4,5:1 exigés
       pour du texte. Il reste la couleur des aplats ; le texte interactif sur
       fond clair prend cette variante assombrie, à 5,58:1. */
    --pulse-text: #2558D6;
    --slate: #3A4A63;

    --bg: #FFFFFF;
    --surface: #F2F5FA;
    --surface-2: #E9EEF6;
    --border: #DDE4EE;
    --text: #0C1524;
    --muted: #5E6A7E;

    --z1: #33A1FF;
    --z2: #22C55E;
    --z3: #FACC15;
    --z4: #FB923C;
    --z5: #EF4444;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;

    --glass: rgba(255, 255, 255, .72);
    --glass-border: rgba(12, 21, 36, .10);

    --font-display: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

    --shell: 1180px;
    --pad: clamp(20px, 5vw, 48px);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0C1524;
        --surface: #141E2E;
        --surface-2: #1B2637;
        --border: #273444;
        --text: #E9EFF7;
        --muted: #93A0B4;
        --slate: #4A5D7A;
        --pulse: #6C97FF;
        --glass: rgba(20, 30, 46, .72);
        --glass-border: rgba(255, 255, 255, .12);
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* Le navigateur masque [hidden] avec `display: none`, mais toute règle d'auteur
   qui pose un `display` la bat — et c'est arrivé : `.form__row { display: flex }`
   laissait le champ email et le bouton à l'écran après inscription, juste
   au-dessus de la confirmation, invitant à se réinscrire. On rétablit la règle
   pour tout le monde plutôt que pour un sélecteur, parce que le prochain
   `display:` posé sur un élément masquable rejouerait le même bug en silence. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, svg { max-width: 100%; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 100;
    background: var(--volt); color: var(--ink); font-weight: 700;
    padding: 10px 16px; border-radius: var(--radius-sm); text-decoration: none;
    transition: top .18s ease;
}
.skip:focus { top: 12px; }

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

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

/* ------------------------------------------------------------- typography */

.h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 6.2vw, 56px);
    line-height: 1.04;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.h2 {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.08;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.eyebrow {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
}
.h1 .accent { color: var(--volt); }

.eyebrow__dash { width: 16px; height: 5px; border-radius: 3px; background: var(--volt); flex: 0 0 auto; }

.link { color: var(--pulse-text); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

a { color: var(--pulse); }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 15.5px; font-weight: 700;
    padding: 0 24px; height: 54px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn--volt {
    background: var(--volt); color: var(--ink);
    box-shadow: 0 8px 24px rgba(182, 240, 60, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--volt:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(182, 240, 60, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--volt:active { transform: translateY(0); }
.btn--volt[disabled] { filter: saturate(.4); cursor: progress; transform: none; }
.btn--ghost {
    background: rgba(255, 255, 255, .06); color: #E9EFF7;
    border: 1px solid rgba(255, 255, 255, .18);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; border-radius: var(--radius-sm); }

.pill {
    display: inline-flex; align-items: center;
    border-radius: 999px; padding: 6px 13px;
    font-size: 12.5px; font-weight: 700;
}
.pill--on { background: var(--volt); color: var(--ink); }
.pill--soon { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-weight: 600; }

/* -------------------------------------------------------------------- nav */

.nav {
    position: absolute; inset: 0 0 auto; z-index: 20;
    padding-top: max(18px, env(safe-area-inset-top));
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #E9EFF7; }
.logo__mark { width: 30px; height: 20px; flex: 0 0 auto; }
.logo__mark .bar-volt { fill: var(--volt); }
.logo__mark .bar-slate { fill: #3A4A63; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
.logo--sm { color: var(--text); }
.logo--sm .logo__word { font-size: 15px; }
.logo--sm .logo__mark .bar-slate { fill: var(--slate); }

.lang {
    display: inline-flex; align-items: center; padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.lang__on, .lang__off {
    padding: 5px 13px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.lang__on { background: rgba(255, 255, 255, .16); color: #E9EFF7; }
.lang__off { color: #93A0B4; }
.lang__off:hover { color: #E9EFF7; }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    background: var(--ink);
    /* In dark mode --bg IS --ink, so the hero and the section below it are the
       same colour and the boundary vanishes. A hairline restores it; in light
       mode the ink/white edge is its own delimiter, so it stays transparent. */
    border-bottom: 1px solid transparent;
    color: #E9EFF7;
    overflow: hidden;
    padding: clamp(96px, 14vh, 132px) 0 clamp(48px, 8vw, 72px);
}

@media (prefers-color-scheme: dark) {
    .hero { border-bottom-color: var(--border); }
}

.hero__bars {
    position: absolute; left: 44px; bottom: -26px;
    display: flex; align-items: flex-end; gap: 18px;
    pointer-events: none;
}
.hero__bars i { width: 26px; border-radius: 13px; background: #141E2E; }
.hero__bars i:nth-child(1) { height: 120px; }
.hero__bars i:nth-child(2) { height: 64px; background: #1B2637; }
.hero__bars i:nth-child(3) { height: 190px; }
.hero__bars i:nth-child(4) { height: 84px; background: #1B2637; }
.hero__bars i:nth-child(5) { height: 150px; }

/* Le hero est le seul bloc en pleine largeur sombre : son conteneur peut être
   plus large que les sections claires sans que l'asymétrie se voie, et le
   visuel a besoin de cette largeur. Sans elle il se rendait à 0,79 d'échelle et
   le titre de la carte tombait à 16,6 px — 12,4 px vers 900 px de large. */
.hero .shell { max-width: 1320px; }

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    /* Aligné en haut et non centré : l'écran de confirmation est plus haut que
       le formulaire (la question « où ouvres-tu tes séances ? » l'allonge), et
       centré contre un visuel fixe, sa carte débordait dans le padding bas du
       hero — collée à la section suivante. En haut, chaque hauteur de colonne
       vit sa vie et le padding bas reste intact. */
    align-items: start;
}

.hero__sub {
    margin: 18px 0 0;
    font-size: clamp(16px, 2vw, 18.5px);
    line-height: 1.55;
    color: #93A0B4;
    max-width: 30ch;
}

.hero__art { position: relative; display: flex; justify-content: center; }

.glow {
    position: absolute; top: -30px; left: 50%; translate: -50% 0;
    width: min(520px, 96vw); aspect-ratio: 1;
    border-radius: 999px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(182, 240, 60, .16), rgba(182, 240, 60, 0) 70%);
}

/* ------------------------------------------------------------------ forms */

.form { margin-top: 28px; }
.form__row { display: flex; gap: 10px; }

.form__input {
    flex: 1 1 auto; min-width: 0; height: 54px;
    padding: 0 18px;
    font-family: inherit; font-size: 16px;
    color: #E9EFF7;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form__input::placeholder { color: #93A0B4; }
.form__input:focus-visible {
    outline: none;
    border-color: var(--pulse);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .30);
}
.form__input[aria-invalid="true"] {
    border-color: var(--z5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------- choix de plateforme
   Le bouton radio est couvert par sa propre pastille plutôt que masqué : il
   reste l'élément cliquable et focalisable, donc le clavier et les lecteurs
   d'écran voient un groupe de radios ordinaire, pas une rangée de <div>. */

.plat { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.plat__legend { padding: 0; margin-bottom: 9px; font-size: 13px; color: #93A0B4; }
.plat__row { display: flex; flex-wrap: wrap; gap: 8px; }

.plat__chip { position: relative; display: inline-flex; }
.plat__chip input {
    position: absolute; inset: 0; margin: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.plat__chip span {
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #C6D1E1; font-size: 13.5px; font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.plat__chip:hover span { border-color: rgba(255, 255, 255, .34); color: #E9EFF7; }
/* Volt en aplat, jamais en texte : sur fond clair il tombe à ~1,3:1. */
.plat__chip input:checked + span {
    background: var(--volt); border-color: var(--volt); color: var(--ink);
}
.plat__chip input:focus-visible + span {
    outline: 2px solid var(--pulse); outline-offset: 3px;
}
.plat--invalid .plat__chip span { border-color: var(--z5); }

/* La précision, révélée par « une autre » : un input léger qui prend la place
   libre à droite des pastilles, sur la même rangée. Il remplit un vide, donc
   son apparition ne pousse rien vers le bas. Le [hidden] global le retire de la
   rangée pour tous les autres choix. Plus discret que les pastilles — bordure
   en pointillé, fond nul — pour se lire comme un complément, pas une option. */
.plat__note-input {
    flex: 1 1 150px; min-width: 120px; height: 38px; padding: 0 15px;
    font-family: inherit; font-size: 13.5px;
    color: #E9EFF7;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .22);
    border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.plat__note-input::placeholder { color: #7D8BA1; }
.plat__note-input:focus-visible {
    outline: none;
    border-style: solid;
    border-color: var(--pulse);
    box-shadow: 0 0 0 3px rgba(46, 107, 255, .30);
}

.form__micro { margin: 12px 0 0; font-size: 13px; color: #93A0B4; }
.form__error { margin: 8px 0 0; font-size: 13.5px; color: #FF8A8A; font-weight: 600; }

.form__ok {
    /* Un peu plus de fond que de haut : la carte se termine par les pastilles
       « où ouvres-tu tes séances ? », plus lourdes qu'une ligne de texte, qui
       frôlaient sinon le coin arrondi. */
    margin-top: 6px; padding: 18px 20px 26px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
}
.form__ok-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #E9EFF7;
}
.form__check {
    width: 26px; height: 26px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--volt); color: var(--ink);
    font-size: 14px; font-weight: 800;
}
.form__ok-head { margin: 0; }
.form__ok-body { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #93A0B4; }
/* L'adresse saisie ressort du reste : c'est elle qu'on relit pour repérer
   la faute de frappe, pas la phrase autour. */
.form__ok-body strong { color: #E9EFF7; font-weight: 600; overflow-wrap: anywhere; }
.form__again {
    display: inline-block;
    margin-top: calc(10px);
    padding: 0; border: 0; background: none;
    font: inherit; font-size: 12.5px; font-weight: 600;
    color: #93A0B4; text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}
.form__again:hover { color: #E9EFF7; }

.form__ok-hint {
    margin: 10px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px; line-height: 1.5; color: #7D8BA1;
}

/* « Où ouvres-tu tes séances ? », en pied de confirmation : une question bonus,
   détachée par un filet, avec les mêmes pastilles que la plateforme pour rester
   dans le même langage visuel. Des boutons ici — l'appui enregistre, il ne
   sélectionne pas une valeur à soumettre plus tard. */
.opens { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.opens__q { margin: 0 0 10px; font-size: 12.5px; color: #93A0B4; }
.opens__row { display: flex; flex-wrap: wrap; gap: 8px; }
.opens__chip {
    height: 36px; padding: 0 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #C6D1E1; font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.opens__chip:hover { border-color: rgba(255, 255, 255, .34); color: #E9EFF7; }
/* Volt en aplat, jamais en texte. */
.opens__chip[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: var(--ink); }
.opens__chip:focus-visible { outline: 2px solid var(--pulse); outline-offset: 3px; }
/* « Merci ! » à droite des pastilles, une fois la réponse enregistrée : très
   discret, juste assez pour dire que c'est parti. */
.opens__thanks {
    align-self: center; margin-left: 4px;
    font-size: 12.5px; color: #7D8BA1;
    opacity: 0; transition: opacity .25s ease;
}
.opens__thanks:not([hidden]) { opacity: 1; }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(56px, 9vw, 88px) 0; }
.section--alt { background: var(--surface); border-block: 1px solid var(--border); }

/* -------------------------------------------------------------- providers */

.providers__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.providers__sub { margin: 0 0 6px; font-size: 15px; color: var(--muted); }

.providers {
    display: grid; gap: 20px; margin-top: 28px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.prov { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; }
.prov__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.prov__domain { margin: 2px 0 16px; font-size: 12.5px; color: var(--muted); }
.prov--ask {
    background: none; border: 1px dashed var(--border);
    display: flex; flex-direction: column; justify-content: center;
}
.prov__ask { margin: 0 0 6px; font-weight: 600; font-size: 15.5px; }

/* -------------------------------------------------------------------- faq */

.faq { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); }
.faq__contact { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.faq__contact a { font-weight: 600; text-decoration: none; }
.faq__contact a:hover { text-decoration: underline; }

.qa { border-top: 1px solid var(--border); }
.qa:last-child { border-bottom: 1px solid var(--border); }
.qa__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 0; cursor: pointer; list-style: none;
    font-size: clamp(15px, 2vw, 17.5px); font-weight: 600;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__chev {
    width: 9px; height: 9px; flex: 0 0 auto; margin-top: -4px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.qa[open] .qa__chev { transform: rotate(-135deg); margin-top: 4px; }
.qa__a { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 56ch; }

/* ------------------------------------------------------------- final + cta */

.section--final { padding-bottom: clamp(32px, 5vw, 48px); }

.final {
    position: relative; overflow: hidden;
    background: var(--ink); color: #E9EFF7;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 5vw, 52px) clamp(22px, 5vw, 56px);
}
.final__bars {
    position: absolute; right: 64px; bottom: -30px;
    display: flex; align-items: flex-end; gap: 14px; pointer-events: none;
}
.final__bars i { width: 22px; border-radius: 11px; background: #3A4A63; }
.final__bars i:nth-child(odd) { background: var(--volt); opacity: .9; }
.final__bars i:nth-child(1) { height: 150px; }
.final__bars i:nth-child(2) { height: 70px; }
.final__bars i:nth-child(3) { height: 196px; }
.final__bars i:nth-child(4) { height: 90px; }
.final__bars i:nth-child(5) { height: 150px; }
.final__bars i:nth-child(6) { height: 60px; }

.final__copy { position: relative; max-width: 640px; }
.final__title { margin: 0; font-size: clamp(26px, 3.6vw, 38px); }
.form--final { margin-top: 24px; }
.form--final .form__row { max-width: 520px; }

/* La colonne de texte du hero est centrée verticalement : toute variation de sa
   hauteur la recentre, donc le passage du formulaire à la confirmation faisait
   remonter le titre de 50 px. On superpose la confirmation au formulaire plutôt
   que de la mettre à sa suite, et la hauteur ne bouge plus. En dessous de
   1001 px le hero est empilé, la colonne n'est plus centrée, et rien ne bouge. */
@media (min-width: 1001px) {
    .form--hero { position: relative; }
    .form--hero .form__row { visibility: visible; }
    .form--hero .form__row[hidden] { display: flex !important; visibility: hidden; }
    .form--hero .form__micro[hidden] { display: block !important; visibility: hidden; }
    .form--hero .form__ok {
        position: absolute; left: 0; right: 0; top: 0; margin: 0;
    }
}

/* ----------------------------------------------------------------- footer */

.footer { padding: 22px 0 calc(28px + env(safe-area-inset-bottom)); }
.footer__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.footer__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13.5px; }
.footer__links a { font-weight: 600; text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }
.footer__copy { color: var(--muted); }

/* ------------------------------------------------------- sticky mobile cta */

.sticky {
    position: fixed; z-index: 30;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    display: none; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 8px 8px 16px;
    border-radius: var(--radius-lg);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 10px 30px rgba(12, 21, 36, .18);
    animation: rise .25s cubic-bezier(.2, .7, .2, 1) both;
}
.sticky:not([hidden]) { display: flex; }
.sticky__text b { display: block; font-family: var(--font-display); font-size: 13.5px; }
.sticky__text span { font-size: 12px; color: var(--muted); }

@keyframes rise { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 861px) {
    .sticky { display: none !important; }
}
/* ---------------------------------------------------- hero visual (static)
   La page du coach dans Safari, et la même séance en cours sur la montre. Le
   profil d'effort ne pointe pas vers la montre : il en sort, traverse, et
   redevient la jauge du cadran. Un seul objet à deux endroits.

   Tout est en `--u`, dérivé de `cqw` : le visuel se met à l'échelle
   *continûment*. La version précédente redimensionnait par paliers, ce qui
   rognait la montre dans trois bandes de largeur — invisible parce que
   `overflow-x: clip` empêche tout débordement d'apparaître dans scrollWidth. */

.hv {
    container-type: inline-size;
    width: 100%; max-width: 624px;
    aspect-ratio: 624 / 704;
    position: relative;
    margin-inline: auto;
    /* 100cqw vaut 624 unités de dessin, donc 1 unité = 100/624 cqw. */
    --u: .16026cqw;
}
.hv__box { position: absolute; inset: 0; }

/* --- la carte Safari ----------------------------------------------------
   Ses couleurs sont écrites en dur et non prises aux tokens de thème : c'est la
   photographie d'une page web claire, pas un élément de notre interface. Avec
   `var(--surface)`, les lignes d'intervalles viraient au noir dans une carte
   restée blanche dès que le visiteur était en mode sombre. */

.hv-card {
    position: absolute; left: calc(144 * var(--u)); top: calc(6 * var(--u));
    width: calc(474 * var(--u));
    background: #FFFFFF;
    border-radius: calc(16 * var(--u));
    box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .5);
    overflow: hidden;
    transform: rotate(-1.5deg);
    z-index: 2;
}
.hv-card__bar {
    height: calc(42 * var(--u));
    background: #EEF2F8;
    border-bottom: 1px solid #DDE4EE;
    display: flex; align-items: center; gap: calc(10 * var(--u));
    padding-inline: calc(14 * var(--u));
}
.hv-card__aa { font-size: calc(13 * var(--u)); font-weight: 500; color: #5E6A7E; }
.hv-card__url {
    flex: 1; height: calc(26 * var(--u));
    background: #E1E8F2; border-radius: calc(8 * var(--u));
    display: flex; align-items: center; justify-content: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: calc(12 * var(--u)); font-weight: 500; color: #525E74;
    white-space: nowrap; overflow: hidden;
}
/* Le bouton que l'extension injecte : le seul élément volt de la carte, parce
   que c'est le seul qui n'appartient pas au site du coach. */
.hv-card__ext {
    width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: 0 0 auto;
    background: var(--volt); border-radius: calc(7 * var(--u));
    display: flex; align-items: flex-end; justify-content: center;
    gap: calc(2 * var(--u)); padding-bottom: calc(7 * var(--u));
    box-shadow: 0 0 calc(14 * var(--u)) rgba(182, 240, 60, .45);
}
.hv-card__ext i { width: calc(2.5 * var(--u)); border-radius: calc(1 * var(--u)); background: #0C1524; }
.hv-card__ext i:nth-child(1) { height: calc(6 * var(--u)); }
.hv-card__ext i:nth-child(2) { height: calc(11 * var(--u)); }
.hv-card__ext i:nth-child(3) { height: calc(8 * var(--u)); }

.hv-card__body { padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); }
.hv-card__back { margin: 0; font-size: calc(12 * var(--u)); font-weight: 500; color: #2E6BFF; }
.hv-card__title {
    margin: calc(8 * var(--u)) 0 0;
    /* Voir le bloc « la carte Safari » : cette carte ne suit pas le thème. */
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(21 * var(--u)); line-height: 1.15; letter-spacing: -.01em;
    color: var(--ink);
}
.hv-card__meta { margin: calc(4 * var(--u)) 0 0; font-size: calc(12.5 * var(--u)); color: #5E6A7E; }
.hv-card__meta span { color: #2E6BFF; }

.hv-row {
    display: flex; align-items: center; gap: calc(10 * var(--u));
    background: #F2F5FA; border-radius: calc(10 * var(--u));
    padding: calc(9 * var(--u)) calc(12 * var(--u));
    margin-top: calc(12 * var(--u));
    font-variant-numeric: tabular-nums;
}
.hv-row__t { font-size: calc(13.5 * var(--u)); font-weight: 700; color: #0C1524; }
.hv-row__l { font-size: calc(13 * var(--u)); font-weight: 500; color: #3A4A63; white-space: nowrap; }
.hv-row__d { margin-left: auto; font-size: calc(11.5 * var(--u)); color: #5E6A7E; white-space: nowrap; }
.hv-row__z {
    font-size: calc(9.5 * var(--u)); font-weight: 700; color: #0C1524;
    padding: calc(3 * var(--u)) calc(6 * var(--u));
    border-radius: calc(5 * var(--u));
}
.hv-row__z--z2 { background: var(--z2); }
.hv-row__z--z4 { background: var(--z4); }

.hv-card__block { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.hv-card__blocklabel {
    font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .1em; color: #6B7789;
}
.hv-card__reps {
    background: #E9EEF6; color: #3A4A63;
    font-size: calc(10.5 * var(--u)); font-weight: 700;
    padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
}

/* --- le motif de barres, ici et sur le cadran --------------------------- */

.zbar { display: flex; gap: calc(2 * var(--u)); }
.zbar i { border-radius: calc(3 * var(--u)); }
.zbar i:nth-child(1) { flex: 20; }
.zbar i:nth-child(2), .zbar i:nth-child(4), .zbar i:nth-child(6), .zbar i:nth-child(8) { flex: 10; }
.zbar i:nth-child(3), .zbar i:nth-child(5), .zbar i:nth-child(7) { flex: 4.5; }
.zbar i:nth-child(9) { flex: 15; }

.hv-profile { margin-top: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.hv-profile i:nth-child(odd) { background: var(--z4); }
.hv-profile i:nth-child(even) { background: #C7D0DD; }
.hv-profile i:first-child, .hv-profile i:last-child { background: var(--z2); }

/* Le bouton que l'extension injecte sous la carte : la corde en part, ce qui
   dit d'où vient la séance sans une ligne de légende. */
.hv-export {
    position: absolute;
    left: calc(156 * var(--u)); top: calc(282 * var(--u));
    width: calc(44 * var(--u)); height: calc(44 * var(--u));
    background: var(--volt); border-radius: calc(12 * var(--u));
    display: flex; align-items: flex-end; justify-content: center;
    gap: calc(3 * var(--u)); padding-bottom: calc(13 * var(--u));
    box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(182, 240, 60, .35);
    z-index: 4;
}
.hv-export i { width: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--ink); }
.hv-export i:nth-child(1) { height: calc(9 * var(--u)); }
.hv-export i:nth-child(2) { height: calc(18 * var(--u)); }
.hv-export i:nth-child(3) { height: calc(13 * var(--u)); }

/* --- la corde ------------------------------------------------------------ */

.hv-ribbon {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 3; pointer-events: none; overflow: visible;
}
.hv-ribbon__bed { stroke: rgba(233, 239, 247, .06); stroke-width: 26; }
.hv-ribbon__seg { stroke-width: 16; }
.hv-ribbon__seg--z2 { stroke: var(--z2); }
.hv-ribbon__seg--z4 { stroke: var(--z4); }
.hv-ribbon__seg--slate { stroke: #3A4A63; }

/* --- la montre ----------------------------------------------------------- */

/* Le boîtier est descendu dans le bracelet plutôt que posé en haut : avec 30
   unités de bracelet au-dessus et 94 en dessous, la montre semblait glisser vers
   le bas de son bracelet. 62 de chaque côté, c'est ce que montre une montre
   photographiée de face. Le boîtier ne peut pas remonter plus haut — la carte
   Safari s'arrête à 324 — donc c'est le bracelet du bas qui a été raccourci.
   Couronne et bouton se placent depuis --case-top : déplacer le boîtier sans les
   emmener les laisserait flotter le long du bracelet. */
.hv-watch {
    --case-top: calc(40 * var(--u));
    position: absolute;
    left: calc(308 * var(--u)); top: calc(352 * var(--u));
    width: calc(210 * var(--u)); height: calc(340 * var(--u));
    z-index: 4;
}
.hv-watch__band {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: calc(118 * var(--u));
    background: var(--volt);
    background-image: repeating-linear-gradient(135deg,
        rgba(12, 21, 36, .10) 0 calc(3 * var(--u)),
        rgba(12, 21, 36, 0) calc(3 * var(--u)) calc(8 * var(--u)));
}
.hv-watch__band--top {
    top: calc(-22 * var(--u)); height: calc(82 * var(--u));
    border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
}
.hv-watch__band--bottom {
    top: calc(274 * var(--u)); height: calc(78 * var(--u));
    border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
.hv-watch__crown {
    position: absolute; right: calc(-7 * var(--u)); top: calc(var(--case-top) + 84 * var(--u));
    width: calc(12 * var(--u)); height: calc(38 * var(--u));
    border-radius: calc(6 * var(--u));
    background: linear-gradient(180deg, #DCE3EE, #97A3B6);
    box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .45);
}
.hv-watch__btn {
    position: absolute; right: calc(-5 * var(--u)); top: calc(var(--case-top) + 132 * var(--u));
    width: calc(8 * var(--u)); height: calc(28 * var(--u));
    border-radius: calc(4 * var(--u)); background: #8F9BAE;
}
.hv-watch__case {
    position: absolute; left: 0; top: var(--case-top);
    width: calc(210 * var(--u)); height: calc(250 * var(--u));
    border-radius: calc(58 * var(--u));
    background: linear-gradient(150deg, #F4F7FC 0%, #C3CDDC 55%, #94A1B5 100%);
    box-shadow:
        0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, .55),
        inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(255, 255, 255, .85),
        inset 0 calc(-4 * var(--u)) calc(10 * var(--u)) rgba(12, 21, 36, .35);
}
.hv-watch__screen {
    position: absolute; inset: calc(11 * var(--u));
    border-radius: calc(46 * var(--u));
    background: #04070D;
    box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(0, 0, 0, .9),
                inset 0 0 calc(26 * var(--u)) rgba(0, 0, 0, .65);
    padding: calc(18 * var(--u)) calc(17 * var(--u));
    display: flex; flex-direction: column;
    font-variant-numeric: tabular-nums;
}
.hv-w__top { display: flex; align-items: center; justify-content: space-between; }
.hv-w__top span:last-child { font-size: calc(11 * var(--u)); font-weight: 500; color: #7D8BA1; }
.hv-w__app {
    display: flex; align-items: center; gap: calc(6 * var(--u));
    font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .08em; color: #C6D1E1;
}
.hv-w__app i {
    width: calc(7 * var(--u)); height: calc(7 * var(--u));
    border-radius: 50%; background: var(--volt);
}
/* « THRESHOLD » est bien plus long que « SEUIL » : sans nowrap ni marge de
   manœuvre sur la pastille, « REP 2/4 » passait à la ligne en anglais et
   déformait le cadran. L'anglais déborde presque toujours plus. */
.hv-w__tags {
    display: flex; align-items: center;
    gap: calc(7 * var(--u)); margin-top: calc(11 * var(--u));
    white-space: nowrap;
}
.hv-w__zone {
    background: var(--z4); color: var(--ink);
    font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: .03em;
    padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: 999px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.hv-w__rep { font-size: calc(11.5 * var(--u)); font-weight: 600; color: #E9EFF7; }
.hv-w__label {
    margin-top: calc(12 * var(--u));
    font-size: calc(9 * var(--u)); font-weight: 600; letter-spacing: .16em; color: #7D8BA1;
}
.hv-w__pace { display: flex; align-items: baseline; gap: calc(5 * var(--u)); margin-top: calc(3 * var(--u)); }
.hv-w__pace span {
    font-family: var(--font-display); font-weight: 800;
    font-size: calc(46 * var(--u)); line-height: .95; letter-spacing: -.02em; color: #F5F8FD;
}
.hv-w__pace em { font-style: normal; font-size: calc(15 * var(--u)); font-weight: 600; color: #7D8BA1; }
.hv-w__sub {
    display: flex; justify-content: space-between; margin-top: calc(11 * var(--u));
    font-size: calc(11.5 * var(--u)); font-weight: 500; color: #7D8BA1;
}
.hv-w__gauge { margin-top: auto; position: relative; height: calc(14 * var(--u)); }
.hv-w__zones {
    position: absolute; left: 0; top: calc(2 * var(--u));
    width: 100%; height: calc(10 * var(--u));
}
/* Les zones déjà courues sont atténuées ; la rép en cours est pleine. Le même
   motif que la carte, mais lu comme une progression. */
.hv-w__zones i:nth-child(odd) { background: var(--z4); opacity: .55; }
.hv-w__zones i:nth-child(even) { background: #3A4A63; opacity: .55; }
.hv-w__zones i:first-child, .hv-w__zones i:last-child { background: var(--z2); opacity: .55; }
.hv-w__zones i:nth-child(4) { opacity: 1; }
.hv-w__zones i:nth-child(3) { opacity: 1; }
.hv-w__cursor {
    position: absolute; left: 41%; top: 0;
    width: calc(6 * var(--u)); height: calc(14 * var(--u));
    border-radius: calc(3 * var(--u));
    background: #FFFFFF;
    box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 255, 255, .7);
}
/* La capture logée dans le châssis du téléphone : elle occupe l'écran entier,
   recadrée et non déformée, et les coins suivent le rayon de l'écran. */
.phone--shot .phone__screen { padding: 0; }
.phone--shot picture { display: contents; }
.phone--shot img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}

/* -------------------------------------------------------------- flow (how) */

/* --p vit ici et non sur .phone : la boîte du visuel se dimensionne sur la
   hauteur du téléphone, y compris dans la carte qui n'en contient pas. */
.flows {
    --p: 1px;
    --art-pad: clamp(14px, 2vw, 22px);
    display: grid; gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 4vw, 40px);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.flow {
    display: flex; flex-direction: column; gap: 16px; height: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 22px; padding: clamp(16px, 1.6vw, 22px);
}
.section--alt .flow { background: var(--bg); }

.flow__head { display: flex; align-items: center; gap: 9px; }
.flow__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: var(--font-display); font-weight: 800; font-size: 12px;
}
.flow__label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
/* Les trois visuels sont centrés sur un même axe, et c'est la hauteur du plus
   grand — le téléphone — qui la fixe pour les trois. Tant que l'illustration
   absorbait la place restante de la carte, une légende d'une ligne de plus —
   c'est le cas de l'étape 2 — raccourcissait sa boîte d'autant et faisait
   remonter le téléphone de 11 px par rapport à celui de l'étape 1. Deux
   appareils censés être le même à deux instants ne peuvent pas se décaler d'une
   carte à l'autre, et la longueur d'une traduction n'a rien à y faire. */
.flow__art {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(600 * var(--p) + 2 * var(--art-pad));
    padding-block: var(--art-pad);
}
.flow__body { margin: auto 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* -------------------------------------------------------------------- phone
   Same technique as the watch: one --p variable drives every dimension. */

.phone { flex: 0 0 auto; }

.phone__screen {
    position: relative; overflow: hidden;
    width: calc(276 * var(--p)); height: calc(600 * var(--p));
    border-radius: calc(38 * var(--p));
    background: var(--bg);
    padding: calc(10 * var(--p));
    display: flex; flex-direction: column;
    box-shadow:
        0 0 0 calc(10 * var(--p)) #121926,
        0 0 0 calc(11 * var(--p)) rgba(255, 255, 255, .10),
        0 calc(26 * var(--p)) calc(48 * var(--p)) calc(-18 * var(--p)) rgba(10, 15, 25, .5);
}
.section--alt .phone__screen { background: var(--bg); }

.phone__island {
    /* Calée sur l'encoche réelle de la capture voisine, pour que les deux
       téléphones de la section soient superposables : celle-ci mesure
       198x57 px dans une image de 640 de large, affichée à l'échelle
       276/640 = 0,431 — soit 85,4 x 24,6, à 9,9 du haut. */
    position: absolute; top: calc(9.9 * var(--p)); left: 50%; translate: -50% 0;
    width: calc(85.4 * var(--p)); height: calc(24.6 * var(--p));
    border-radius: 999px; background: #05080d; z-index: 3;
}

.ph-status {
    display: flex; align-items: center; justify-content: space-between;
    height: calc(30 * var(--p)); padding: 0 calc(8 * var(--p));
    font-size: calc(11.5 * var(--p)); color: var(--text);
}
.ph-time { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-icons { display: inline-flex; align-items: center; gap: calc(4 * var(--p)); }
.ph-icons i { display: block; background: currentColor; opacity: .75; }
.ph-signal { width: calc(13 * var(--p)); height: calc(9 * var(--p)); clip-path: polygon(0 70%, 22% 70%, 22% 100%, 0 100%, 0 70%, 30% 45%, 52% 45%, 52% 100%, 30% 100%, 30% 45%, 60% 20%, 82% 20%, 82% 100%, 60% 100%); }
.ph-wifi { width: calc(11 * var(--p)); height: calc(9 * var(--p)); clip-path: polygon(50% 100%, 0 40%, 14% 26%, 50% 62%, 86% 26%, 100% 40%); }
.ph-batt { width: calc(18 * var(--p)); height: calc(9 * var(--p)); border-radius: calc(2 * var(--p)); }

.ph-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(4 * var(--p)) calc(6 * var(--p)) calc(6 * var(--p));
    color: var(--muted); font-size: calc(12.5 * var(--p)); font-weight: 600;
}
.ph-back::before { content: "‹ "; font-size: calc(15 * var(--p)); }
.ph-avatar {
    width: calc(22 * var(--p)); height: calc(22 * var(--p)); border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
}

.ph-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: calc(10 * var(--p));
    padding: 0 calc(6 * var(--p));
}

.ph-kicker {
    margin: 0; font-size: calc(9.5 * var(--p)); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.ph-title {
    /* Le guillemet fermant tombait seul sur une ligne. */
    text-wrap: balance;
    margin: calc(3 * var(--p)) 0 0;
    font-family: var(--font-display); font-weight: 800;
    font-size: calc(26 * var(--p)); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.ph-meta { margin: calc(3 * var(--p)) 0 0; font-size: calc(11.5 * var(--p)); color: var(--muted); }

.ph-card {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: calc(13 * var(--p)); padding: calc(10 * var(--p)) calc(11 * var(--p));
}
.section--alt .ph-card { background: var(--surface); }
.ph-cardlabel {
    margin: 0 0 calc(7 * var(--p)); font-size: calc(9 * var(--p)); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

/* The effort profile — the same bar motif that travels to the watch. */
.ph-profile { display: flex; align-items: flex-end; gap: calc(3 * var(--p)); height: calc(38 * var(--p)); }
.ph-profile b { width: calc(8 * var(--p)); height: calc(34 * var(--p)); border-radius: calc(3 * var(--p)); background: var(--volt); }
.ph-profile s { width: calc(4 * var(--p)); height: calc(12 * var(--p)); border-radius: calc(2 * var(--p)); background: var(--border); }
/* On the coach's page the workout is not ours yet: neutral bars. */
.ph-profile--flat b { background: var(--slate); opacity: .5; }
.ph-profile--flat s { background: var(--slate); opacity: .26; }

.ph-rows { border: 1px solid var(--border); border-radius: calc(13 * var(--p)); overflow: hidden; }
.ph-rows div {
    display: flex; justify-content: space-between;
    padding: calc(8 * var(--p)) calc(11 * var(--p));
    font-size: calc(11.5 * var(--p)); color: var(--muted);
}
.ph-rows div + div { border-top: 1px solid var(--border); }
.ph-rows b {
    font-family: var(--font-display); font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ph-actions { display: flex; gap: calc(7 * var(--p)); }
.ph-ghost {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    height: calc(34 * var(--p)); border-radius: calc(10 * var(--p));
    border: 1px solid var(--border); background: var(--bg);
    color: var(--muted); font-size: calc(11.5 * var(--p)); font-weight: 600;
}
.section--alt .ph-ghost { background: var(--surface); }

/* The injected button: dashed halo marks it as an addition to the page. */
.ph-inject {
    margin-top: auto; margin-bottom: calc(6 * var(--p));
    border-radius: calc(15 * var(--p));
    outline: calc(2 * var(--p)) dashed rgba(182, 240, 60, .55);
    outline-offset: calc(4 * var(--p));
}
.ph-export {
    display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--p));
    height: calc(42 * var(--p)); border-radius: calc(12 * var(--p));
    background: var(--volt); color: var(--ink);
    font-size: calc(13 * var(--p)); font-weight: 800;
    box-shadow: 0 calc(10 * var(--p)) calc(20 * var(--p)) calc(-7 * var(--p)) rgba(182, 240, 60, .6);
}
.ph-export .logo__mark { width: calc(17 * var(--p)); height: calc(11 * var(--p)); }
.ph-export .logo__mark .bar-slate,
.ph-export .logo__mark .bar-volt { fill: var(--ink); }
.ph-export .logo__mark .bar-slate { opacity: .45; }

.ph-toolbar {
    display: flex; align-items: center; justify-content: center;
    height: calc(38 * var(--p)); margin: 0 calc(-4 * var(--p)) calc(-4 * var(--p));
    border-top: 1px solid var(--border); background: var(--surface);
}
.section--alt .ph-toolbar { background: var(--surface-2); }
.ph-url {
    display: inline-flex; align-items: center; gap: calc(5 * var(--p));
    height: calc(26 * var(--p)); padding: 0 calc(14 * var(--p));
    border-radius: calc(8 * var(--p));
    background: var(--bg); border: 1px solid var(--border);
    font-size: calc(11 * var(--p)); color: var(--text);
}
.section--alt .ph-url { background: var(--surface); }

/* ------------------------------------------------------------ watch mockup
   Every dimension is `calc(n * var(--u))`, so --u alone rescales the whole
   device. Not `em`: an element that sets its own font-size in em would then
   compound it into its padding and margins. */

.watch {
    --u: 1px;
    margin: 0;
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 1;
}

/* Trail-loop band: woven nylon rather than a flat volt slab. */
.watch__band {
    width: calc(126 * var(--u)); height: calc(92 * var(--u));
    flex: 0 0 auto;
    background:
        repeating-linear-gradient(48deg, rgba(12, 21, 36, .07) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(5 * var(--u))),
        linear-gradient(90deg, rgba(12, 21, 36, .22), rgba(12, 21, 36, 0) 42%, rgba(12, 21, 36, 0) 58%, rgba(12, 21, 36, .22)),
        var(--volt);
}
.watch__band--top {
    border-radius: calc(26 * var(--u)) calc(26 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
    box-shadow: inset 0 calc(-12 * var(--u)) calc(18 * var(--u)) rgba(12, 21, 36, .16);
}
.watch__band--bottom {
    border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));
    margin-top: calc(-16 * var(--u));
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: calc(6 * var(--u)); padding-bottom: calc(12 * var(--u));
    box-shadow: inset 0 calc(12 * var(--u)) calc(18 * var(--u)) rgba(12, 21, 36, .14);
}
.watch__band--bottom i {
    width: calc(5 * var(--u)); height: calc(5 * var(--u));
    border-radius: 999px; background: var(--ink); opacity: .5;
}

.watch__case {
    position: relative; z-index: 1;
    width: calc(248 * var(--u)); height: calc(290 * var(--u)); margin-top: calc(-16 * var(--u));
    background: linear-gradient(158deg, #E4E7EC 0%, #A9B0BC 26%, #7C8593 52%, #C6CCD5 76%, #8B94A2 100%);
    padding: calc(9 * var(--u));
    border-radius: calc(62 * var(--u));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center;
}
/* Digital crown: ridged cylinder, with the volt ring as the brand signature. */
.watch__crown {
    position: absolute; right: calc(-9 * var(--u)); top: calc(88 * var(--u));
    width: calc(12 * var(--u)); height: calc(44 * var(--u));
    border-radius: calc(4 * var(--u));
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .30) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(3 * var(--u))),
        linear-gradient(90deg, #6E7784, #C9CFD8 45%, #8A929E);
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(182, 240, 60, .45);
}
.watch__btn {
    position: absolute; right: calc(-6 * var(--u)); top: calc(146 * var(--u));
    width: calc(8 * var(--u)); height: calc(52 * var(--u));
    border-radius: calc(4 * var(--u));
    background: linear-gradient(90deg, #5E6773, #A7AEB9 50%, #737C89);
}
/* Action button, left side. */
.watch__action {
    position: absolute; left: calc(-6 * var(--u)); top: calc(108 * var(--u));
    width: calc(8 * var(--u)); height: calc(46 * var(--u));
    border-radius: calc(4 * var(--u));
    background: linear-gradient(90deg, #C2621F, #FB923C 55%, #C2621F);
}

.watch__screen {
    width: 100%; height: 100%;
    border-radius: calc(46 * var(--u)); background: #000;
    padding: calc(17 * var(--u)) calc(16 * var(--u));
    overflow: hidden; color: #E9EFF7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.w-top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: calc(11 * var(--u)); color: #93A0B4;
    font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 600;
}
.w-live { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.w-live::before {
    content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u));
    border-radius: 999px; background: var(--volt);
}

.w-tags { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(11 * var(--u)); }
.w-zone {
    border-radius: 999px; padding: calc(3 * var(--u)) calc(9 * var(--u));
    font-family: var(--font-display); font-weight: 800;
    font-size: calc(11 * var(--u)); letter-spacing: .04em; color: var(--ink);
}
.w-zone.z4 { background: var(--z4); }
.w-zone.z5 { background: var(--z5); }
.w-rep {
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(12 * var(--u)); color: #E9EFF7;
    font-variant-numeric: tabular-nums;
}

.w-label {
    margin-top: calc(12 * var(--u)); font-size: calc(9.5 * var(--u));
    font-weight: 700; letter-spacing: .16em; color: #93A0B4;
}
.w-pace { display: flex; align-items: baseline; gap: calc(5 * var(--u)); margin-top: calc(1 * var(--u)); }
.w-pace__v {
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(54 * var(--u)); line-height: 1; letter-spacing: -.035em;
    font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.w-pace__u { font-size: calc(15 * var(--u)); font-weight: 600; color: #93A0B4; }

.w-sub {
    display: flex; justify-content: space-between; margin-top: calc(9 * var(--u));
    font-size: calc(10.5 * var(--u)); font-weight: 600; color: #93A0B4;
    font-variant-numeric: tabular-nums;
}

.w-zones { display: flex; gap: calc(3 * var(--u)); margin-top: calc(11 * var(--u)); }
.w-zones i { flex: 1; height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); opacity: .28; }
.w-zones i.on { opacity: 1; }
.w-zones .z1 { background: var(--z1); }
.w-zones .z2 { background: var(--z2); }
.w-zones .z3 { background: var(--z3); }
.w-zones .z4 { background: var(--z4); }
.w-zones .z5 { background: var(--z5); }

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1040px) {
    .watch { --u: .78px; }
    .flows { --p: .92px; }
    .faq { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (max-width: 1000px) {
    .hero { padding-top: clamp(80px, 12vh, 104px); text-align: center; }
    .hero__inner { grid-template-columns: minmax(0, 1fr); }
    /* Titre, sous-titre, **formulaire**, puis le visuel. Le visuel passait avant
       le formulaire, comme sur la planche de design ; il fait maintenant 630
       unités de haut, ce qui repoussait le champ email sous la ligne de
       flottaison — donc le CTA collant s'affichait par-dessus le visuel dès
       l'arrivée sur la page. Sur une page dont l'unique métier est de collecter
       une adresse, l'action passe avant la démonstration.
       `display: contents` fait participer les enfants du texte à la grille du
       hero, pour pouvoir les ordonner un par un. */
    .hero__copy { display: contents; }
    .h1 { order: 1; }
    .hero__sub { order: 2; max-width: none; margin-inline: auto; }
    .form--hero { order: 3; margin-top: 4px; }
    .hero__art {
        order: 4; margin-block: 20px 4px;
        /* La gouttière ne sert à rien sous un dessin dont les bords sont vides :
           la lui rendre gagne 11 % de taille de texte là où il en manque. */
        margin-inline: calc(-1 * var(--pad));
    }
    .hero__bars { display: none; }
    .h1 { font-size: clamp(30px, 8.4vw, 40px); }

    .form__row { flex-direction: column; }
    .form__micro { text-align: center; }
    .form__error { text-align: center; }
    /* Le reste du hero passe au centre à cette largeur ; une rangée flex ne
       suit pas text-align, et les pastilles restaient collées à gauche sous
       une légende centrée. */
    .plat__row { justify-content: center; }
    .btn { width: 100%; }

    .faq { grid-template-columns: minmax(0, 1fr); }
    .faq__head { margin-bottom: 4px; }

    .final__bars { right: 18px; bottom: -18px; gap: 9px; }
    .final__bars i { width: 14px; }
    .final__bars i:nth-child(1) { height: 88px; }
    .final__bars i:nth-child(2) { height: 42px; }
    .final__bars i:nth-child(3) { height: 116px; }
    .final__bars i:nth-child(4) { height: 52px; }
    .final__bars i:nth-child(n+5) { display: none; }
    .final__title { text-wrap: pretty; }

    .footer__inner { flex-direction: column; text-align: center; }

    /* room for the sticky bar */
    .section--final { padding-bottom: 96px; }
}

@media (max-width: 560px) {
}

@media (max-width: 420px) {
    .watch { --u: .62px; }
    .flows { --p: .82px; }
}

/* ------------------------------------------------------------------ legal */

.legal { max-width: 720px; padding-block: clamp(48px, 8vw, 80px); }
.legal h1 {
    margin: 12px 0 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(30px, 5vw, 40px); letter-spacing: -.02em;
}
.legal h2 { margin: 36px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em;
    background: var(--surface); border: 1px solid var(--border);
    padding: 1px 6px; border-radius: 6px;
}
.legal__switch { margin-top: 36px; }
.legal .back { display: inline-block; margin-top: 12px; font-weight: 600; text-decoration: none; }