/*
 * Boussole — design system des pages publiques
 * © 2026 MoJo Piktures. Tous droits réservés.
 *
 * Sommaire
 *   1. Jetons (couleurs, typographie, espacements, rayons, profondeur, verre, mouvement)
 *   2. Base
 *   3. Typographie
 *   4. Mise en page
 *   5. Liquid Glass (niveaux 1, 2, 3 et variante sombre)
 *   6. Composants : marque, navigation, boutons, champs, contrôle segmenté,
 *      divulgation, alertes, pastilles, liste de caractéristiques, frise, code,
 *      étapes, pied de page
 *   7. Sections : accueil, suivi, authentification, erreur
 *   8. Mouvement et accessibilité
 *
 * Points de rupture (non variabilisables en CSS) : 640px, 900px, 1200px.
 */

/* ── 1. Jetons ─────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Couleurs — l'encre reprend le marine du logo, l'accent le bleu de l'application. */
    --ink:          #042747;
    --ink-hover:    #0A3561;
    --text:         #0F1729;
    --text-2:       #46505F;
    --text-3:       #677080;
    --paper:        #FBFBFD;
    --white:        #FFFFFF;
    --silver:       #EEF0F4;
    --silver-2:     #DFE3EA;
    --line:         rgba(4, 39, 71, .08);
    --line-strong:  rgba(4, 39, 71, .16);
    --accent:       #0066CC;
    --accent-hover: #0057B0;
    --accent-soft:  #E9F2FC;
    --success:      #0F7B4C;
    --success-soft: #E7F6EE;
    --warning:      #9A5B00;
    --warning-soft: #FFF5E0;
    --danger:       #C42B1C;
    --danger-soft:  #FDECEA;
    --night:        #050B16;
    --night-2:      #0B1424;

    /* Lumière ambiante : halos derrière le verre (jamais derrière du texte long). */
    --glow-blue:   rgba(56, 132, 255, .22);
    --glow-lilac:  rgba(168, 139, 250, .18);
    --glow-cyan:   rgba(34, 211, 238, .12);

    /* Typographie — SF Pro sur les appareils Apple, Inter ailleurs. */
    --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Inter", "Segoe UI", sans-serif;
    --font-serif:   "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif;
    --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --fs-display: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem);
    --fs-title-1: clamp(2.25rem, 1.45rem + 3.2vw, 4.25rem);
    --fs-title-2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
    --fs-title-3: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem);
    --fs-lead:    clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
    --fs-body:    1.0625rem;
    --fs-small:   .9375rem;
    --fs-caption: .8125rem;

    /* Espacements (base 4px) */
    --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;   --s-5: 1.5rem;
    --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;   --s-10: 8rem;
    --section-y: clamp(4.5rem, 3rem + 5vw, 7.5rem);
    --gutter: clamp(1rem, .6rem + 2vw, 2rem);
    --container: 1200px;
    --measure: 36rem;

    /* Rayons */
    --r-xs: 8px;  --r-sm: 12px;  --r-md: 18px;  --r-lg: 28px;  --r-xl: 40px;  --r-pill: 999px;

    /* Profondeur */
    --shadow-1: 0 1px 2px rgba(4, 39, 71, .05), 0 6px 18px -10px rgba(4, 39, 71, .16);
    --shadow-2: 0 2px 6px rgba(4, 39, 71, .05), 0 22px 44px -22px rgba(4, 39, 71, .26);
    --shadow-3: 0 4px 10px rgba(4, 39, 71, .05), 0 42px 84px -34px rgba(4, 39, 71, .38);

    /* Liquid Glass — trois niveaux, voir section 5. */
    --glass-1-bg:   rgba(255, 255, 255, .62);
    --glass-1-blur: 14px;
    --glass-2-bg:   rgba(255, 255, 255, .5);
    --glass-2-blur: 22px;
    --glass-3-bg:   linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .26));
    --glass-3-blur: 30px;
    --glass-rim: linear-gradient(155deg,
                    rgba(255, 255, 255, .95) 0%,
                    rgba(255, 255, 255, .35) 28%,
                    rgba(4, 39, 71, .07) 62%,
                    rgba(255, 255, 255, .7) 100%);
    --glass-rim-dark: linear-gradient(155deg,
                    rgba(255, 255, 255, .38) 0%,
                    rgba(255, 255, 255, .07) 35%,
                    rgba(255, 255, 255, 0) 60%,
                    rgba(255, 255, 255, .2) 100%);

    /* Mouvement */
    --ease-out:    cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --t-fast: 160ms;
    --t-med:  320ms;
    --t-slow: 700ms;

    --nav-h: 60px;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 32px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--text);
    font: 400 var(--fs-body)/1.55 var(--font-text);
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid rgba(0, 102, 204, .55);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection { background: rgba(0, 102, 204, .18); }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    padding: .75rem 1.25rem;
    border-radius: var(--r-pill);
    background: var(--ink); color: var(--white);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: none; text-decoration: none; }

main:focus { outline: none; }

/* ── 3. Typographie ────────────────────────────────────────────────────── */

.display, .title-1, .title-2, .title-3 {
    font-family: var(--font-display);
    color: var(--text);
    font-weight: 700;
    text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.045em; }
.title-1 { font-size: var(--fs-title-1); line-height: 1.02; letter-spacing: -.038em; }
.title-2 { font-size: var(--fs-title-2); line-height: 1.08; letter-spacing: -.028em; }
.title-3 { font-size: var(--fs-title-3); line-height: 1.25; letter-spacing: -.018em; font-weight: 650; }

/* Accent éditorial : un ou deux mots en serif italique, jamais une phrase entière. */
.serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.012em;
    font-size: 1.08em;
    line-height: .9;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--text-2);
    letter-spacing: -.014em;
    max-width: var(--measure);
    text-wrap: pretty;
}
.body-text { color: var(--text-2); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--text-3); line-height: 1.45; }

.eyebrow {
    display: inline-block;
    margin-bottom: var(--s-4);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--accent);
}

.mono { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* ── 4. Mise en page ───────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }

.section { position: relative; padding-block: var(--section-y); }
.section-head { max-width: 48rem; margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.section-head .lead { margin-top: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

.stack > * + * { margin-top: var(--stack, var(--s-4)); }

/* Lumière ambiante : dégradés radiaux (peu coûteux, aucun filtre). */
.ambient {
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ambient::before, .ambient::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.ambient::before {
    width: 70vmax; height: 70vmax;
    top: -32vmax; right: -22vmax;
    background: radial-gradient(closest-side, var(--glow-blue), transparent 72%);
}
.ambient::after {
    width: 58vmax; height: 58vmax;
    bottom: -30vmax; left: -20vmax;
    background: radial-gradient(closest-side, var(--glow-lilac), transparent 72%);
}
.ambient--soft::before { opacity: .65; }
/* Les halos s'éteignent avant le bas de leur section : jamais de démarcation nette. */
.hero .ambient, .page-hero .ambient {
    -webkit-mask: linear-gradient(#000 55%, transparent);
    mask: linear-gradient(#000 55%, transparent);
}
.ambient--soft::after  { opacity: .55; }

/* ── 5. Liquid Glass ───────────────────────────────────────────────────── *
 * Niveau 1 (léger)        : pastilles, étiquettes, contrôles secondaires.
 * Niveau 2 (intermédiaire): navigation, champ de suivi, panneaux d'appoint.
 * Niveau 3 (prononcé)     : un seul élément focal par écran (lentille, carte d'authentification).
 * Sombre                  : surfaces posées sur la section nuit.
 * Chaque niveau combine : translucidité, diffusion (flou + saturation), liseré
 * spéculaire (::before), reflet supérieur (::after) et ombre portée.          */

.glass {
    position: relative;
    isolation: isolate;
    border-radius: var(--r-lg);
}
.glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
.glass::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 70% at 50% -12%, rgba(255, 255, 255, .5), transparent 58%);
    pointer-events: none;
    z-index: -1;
}

.glass--1 {
    background: var(--glass-1-bg);
    -webkit-backdrop-filter: blur(var(--glass-1-blur)) saturate(160%);
    backdrop-filter: blur(var(--glass-1-blur)) saturate(160%);
    box-shadow: var(--shadow-1);
}
.glass--2 {
    background: var(--glass-2-bg);
    -webkit-backdrop-filter: blur(var(--glass-2-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-2-blur)) saturate(180%);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.glass--3 {
    background: var(--glass-3-bg);
    -webkit-backdrop-filter: blur(var(--glass-3-blur)) saturate(200%);
    backdrop-filter: blur(var(--glass-3-blur)) saturate(200%);
    box-shadow:
        var(--shadow-3),
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -22px 44px -30px rgba(4, 39, 71, .2);
}
.glass--dark {
    background: linear-gradient(160deg, rgba(30, 41, 62, .55), rgba(10, 16, 28, .42));
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1);
    color: var(--white);
}
.glass--dark::before { background: var(--glass-rim-dark); }
.glass--dark::after  { background: radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .1), transparent 55%); }

/* Reflet qui suit le pointeur (souris uniquement, voir boussole.js). */
.glass[data-light]::after {
    background:
        radial-gradient(260px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, .42), transparent 62%),
        radial-gradient(120% 70% at 50% -12%, rgba(255, 255, 255, .45), transparent 58%);
    transition: background var(--t-med) var(--ease-out);
}
.glass--dark[data-light]::after {
    background:
        radial-gradient(300px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, .09), transparent 62%),
        radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .08), transparent 55%);
}

/* Navigateurs sans backdrop-filter : surfaces plus opaques pour rester lisibles. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass--1 { background: rgba(255, 255, 255, .92); }
    .glass--2 { background: rgba(255, 255, 255, .9); }
    .glass--3 { background: rgba(255, 255, 255, .88); }
    .glass--dark { background: rgba(16, 24, 40, .94); }
}

/* ── 6. Composants ─────────────────────────────────────────────────────── */

/* Icônes (sprite SVG) */
.icon {
    width: 1.25em; height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1.5em; }

/* Marque */
.brand {
    display: inline-flex; align-items: center; gap: .625rem;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--ink);
    object-fit: cover;
    box-shadow: 0 0 0 .5px rgba(4, 39, 71, .3), 0 4px 10px -4px rgba(4, 39, 71, .5);
}
.brand__mark--fallback { display: grid; place-items: center; color: var(--white); }

/* Navigation flottante */
.site-nav {
    position: fixed;
    top: 12px; left: 50%;
    z-index: 50;
    width: min(1120px, calc(100% - 24px));
    transform: translateX(-50%);
}
.site-nav__bar {
    display: flex; align-items: center; gap: var(--s-2);
    height: var(--nav-h);
    padding: 0 8px 0 14px;
    border-radius: var(--r-pill);
    transition: height var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.site-nav.is-scrolled .site-nav__bar {
    height: 54px;
    background: rgba(255, 255, 255, .72);
}
.site-nav__links {
    display: flex; align-items: center; gap: 2px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.site-nav__link {
    display: inline-flex; align-items: center;
    height: 38px;
    padding: 0 .9rem;
    border-radius: var(--r-pill);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.site-nav__link:hover { background: rgba(4, 39, 71, .06); color: var(--text); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.site-nav__actions { display: flex; align-items: center; gap: var(--s-1); }
.site-nav__toggle { display: none; }

.site-nav__sheet {
    position: absolute;
    top: calc(100% + 10px); left: 0; right: 0;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top center;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.site-nav.is-open .site-nav__sheet {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}
.site-nav__sheet ul { display: grid; gap: 2px; padding: 0; margin: 0 0 var(--s-4); list-style: none; }
.site-nav__sheet a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px;
    padding: 0 var(--s-4);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.02em;
}
.site-nav__sheet a:not(.btn):hover { background: rgba(4, 39, 71, .06); text-decoration: none; }
.site-nav__sheet .btn + .btn { margin-top: var(--s-2); }

/* Boutons */
.btn {
    --btn-h: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--btn-h);
    padding: 0 1.375rem;
    border: 0;
    border-radius: var(--r-pill);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--t-fast) var(--ease-out),
        background-color var(--t-fast) var(--ease-out),
        box-shadow var(--t-med) var(--ease-out),
        color var(--t-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn .icon { transition: transform var(--t-med) var(--ease-out); }
.btn:hover .icon--arrow { transform: translateX(3px); }

.btn--primary {
    background: var(--ink);
    color: var(--white);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 1px 2px rgba(4, 39, 71, .25),
        0 12px 28px -12px rgba(4, 39, 71, .6);
}
.btn--primary:hover { background: var(--ink-hover); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(4, 39, 71, .25), 0 16px 34px -12px rgba(4, 39, 71, .65); }

.btn--glass {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(4, 39, 71, .1), inset 0 1px 0 rgba(255, 255, 255, .85), var(--shadow-1);
}
.btn--glass:hover { background: rgba(255, 255, 255, .82); color: var(--text); }

.btn--light {
    background: var(--white);
    color: var(--ink);
    box-shadow: inset 0 -1px 0 rgba(4, 39, 71, .12), 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.btn--light:hover { background: #F1F5FB; color: var(--ink); }

.btn--ghost-dark {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .14); color: var(--white); }

.btn--text {
    min-height: auto;
    padding: 0;
    background: none;
    color: var(--accent);
    border-radius: 4px;
}
.btn--text:active { transform: none; }

.btn--sm { --btn-h: 40px; padding: 0 1rem; font-size: var(--fs-small); }
.btn--lg { --btn-h: 56px; padding: 0 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__label { opacity: .55; }
.btn__spinner {
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn:not([aria-busy="true"]) .btn__spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Champs */
.form { display: grid; gap: var(--s-5); }
.form-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .5rem; min-width: 0; }
.field__label {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
}
.field__label a { font-weight: 500; }
.field__optional { font-weight: 400; color: var(--text-3); }
.field__hint  { font-size: var(--fs-caption); color: var(--text-3); }
.field__error { font-size: var(--fs-caption); color: var(--danger); font-weight: 500; }

.input, .select {
    width: 100%;
    height: 54px;
    padding: 0 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    font-size: 1.0625rem;
    color: var(--text);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.input::placeholder { color: #9AA1AD; }
.input:hover, .select:hover { border-color: rgba(4, 39, 71, .28); }
.input:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, .16);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(196, 43, 28, .14); }
.select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346505F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px;
    cursor: pointer;
}

.input-group { position: relative; display: flex; align-items: stretch; }
.input-group .input { flex: 1; min-width: 0; }
.input-group__prefix {
    display: inline-flex; align-items: center;
    padding: 0 .9rem;
    border: 1px solid var(--line-strong);
    border-right: 0;
    border-radius: 16px 0 0 16px;
    background: var(--silver);
    color: var(--text-2);
    font-weight: 600;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}
.input-group__prefix + .input { border-radius: 0 16px 16px 0; }
.input-group__action {
    position: absolute; right: 6px; top: 50%;
    display: inline-grid; place-items: center;
    width: 42px; height: 42px;
    border: 0; border-radius: 12px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.input-group__action:hover { background: rgba(4, 39, 71, .06); color: var(--text); }
.input-group--action .input { padding-right: 3.5rem; }

/* Choix sous forme de tuiles (zone de livraison) */
.choices { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; border: 0; padding: 0; margin: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__body {
    display: grid; gap: .25rem;
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .7);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.choice__title { font-weight: 650; letter-spacing: -.015em; }
.choice__meta { font-size: var(--fs-caption); color: var(--text-3); }
.choice__check {
    position: absolute; top: 14px; right: 14px;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    color: transparent;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.choice input:hover + .choice__body { border-color: rgba(4, 39, 71, .3); }
.choice input:checked + .choice__body { border-color: var(--accent); background: var(--white); box-shadow: 0 0 0 4px rgba(0, 102, 204, .12); }
.choice input:checked + .choice__body .choice__check { background: var(--accent); border-color: var(--accent); color: var(--white); }
.choice input:focus-visible + .choice__body { outline: 3px solid rgba(0, 102, 204, .55); outline-offset: 3px; }

/* Contrôle segmenté */
.segmented {
    position: relative;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding: 4px;
    border-radius: var(--r-pill);
    background: rgba(4, 39, 71, .06);
    box-shadow: inset 0 1px 2px rgba(4, 39, 71, .08);
    border: 0;
    margin: 0;
    min-width: 0;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px;
    padding: 0 .9rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-med) var(--ease-out);
}
.segmented input:checked + label { color: var(--text); }
.segmented input:focus-visible + label { outline: 3px solid rgba(0, 102, 204, .55); outline-offset: 1px; }
.segmented__thumb {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    width: calc((100% - 8px) / var(--segments, 2));
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(4, 39, 71, .12), 0 6px 16px -8px rgba(4, 39, 71, .3), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform var(--t-med) var(--ease-spring);
}
.segmented:has(input:nth-of-type(2):checked) .segmented__thumb { transform: translateX(100%); }
.segmented:has(input:nth-of-type(3):checked) .segmented__thumb { transform: translateX(200%); }

.segmented--dark { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.segmented--dark label { color: rgba(255, 255, 255, .62); }
.segmented--dark input:checked + label { color: var(--ink); }

/* Divulgation (accordéon natif) */
.disclosure {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .6);
    interpolate-size: allow-keywords;
}
.disclosure + .disclosure { margin-top: var(--s-3); }
.disclosure > summary {
    display: flex; align-items: center; gap: var(--s-3);
    min-height: 64px;
    padding: var(--s-4) var(--s-5);
    font-weight: 650;
    letter-spacing: -.015em;
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .count {
    font-weight: 500;
    color: var(--text-3);
    font-size: var(--fs-small);
}
.disclosure > summary .chevron {
    margin-left: auto;
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(4, 39, 71, .06);
    transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast);
}
.disclosure > summary .count + .chevron { margin-left: var(--s-2); }
.disclosure > summary:has(.count) .count { margin-left: auto; }
.disclosure[open] > summary .chevron { transform: rotate(180deg); }
.disclosure > summary:hover .chevron { background: rgba(4, 39, 71, .1); }
.disclosure__body { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); }
.disclosure::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--t-med) var(--ease-out), content-visibility var(--t-med) allow-discrete;
}
.disclosure[open]::details-content { block-size: auto; }

.disclosure--dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); color: var(--white); }
.disclosure--dark > summary .chevron { background: rgba(255, 255, 255, .08); }
.disclosure--dark .disclosure__body { color: rgba(255, 255, 255, .72); }

/* Alertes */
.alert {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-small);
    line-height: 1.5;
    border: 1px solid transparent;
}
.alert .icon { margin-top: .1em; }
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert--success { background: var(--success-soft); color: var(--success); border-color: rgba(15, 123, 76, .18); }
.alert--error   { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(196, 43, 28, .18); }
.alert--info    { background: var(--accent-soft);  color: #0A4F96;       border-color: rgba(0, 102, 204, .16); }
.alert--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(154, 91, 0, .2); }

/* Pastilles */
.chip {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 34px;
    padding: 0 .9rem 0 .7rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--text-2);
}
.chip__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22A06B;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, .18);
}
.badge {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 28px;
    padding: 0 .75rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-caption);
    font-weight: 600;
    background: var(--silver);
    color: var(--text-2);
}
.badge--accent  { background: var(--accent-soft);  color: #0A4F96; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }

/* Liste de caractéristiques */
.specs { display: grid; margin: 0; }
.specs > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--line);
}
.specs > div:first-child { border-top: 0; }
.specs dt { color: var(--text-3); font-size: var(--fs-small); }
.specs dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Frise de suivi */
.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--s-4);
    padding-bottom: var(--s-6);
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before {
    content: "";
    position: absolute;
    left: 13px; top: 30px; bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--silver-2);
}
.timeline__step:last-child::before { display: none; }
.timeline__step[data-state="done"]::before { background: var(--ink); }
.timeline__marker {
    position: relative;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--white);
    border: 2px solid var(--silver-2);
    color: var(--white);
}
.timeline__step[data-state="done"] .timeline__marker { background: var(--ink); border-color: var(--ink); }
.timeline__step[data-state="current"] .timeline__marker {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 6px rgba(0, 102, 204, .14);
}
.timeline__step[data-state="current"] .timeline__marker::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--white);
}
.timeline__title { font-weight: 650; letter-spacing: -.015em; line-height: 28px; }
.timeline__step[data-state="todo"] .timeline__title { color: var(--text-3); font-weight: 500; }
.timeline__meta { font-size: var(--fs-caption); color: var(--text-3); margin-top: .15rem; }
.timeline__note { font-size: var(--fs-small); color: var(--text-2); margin-top: .4rem; }

/* Code à usage unique */
.otp { position: relative; }
.otp__input {
    width: 100%;
    height: 64px;
    border-radius: 18px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .8);
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: .5em;
    text-align: center;
    text-transform: uppercase;
    text-indent: .5em;
}
.otp__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 102, 204, .16); }
.otp__cells { display: none; }
/* Avec JS : six cases visuelles, le vrai champ reste dessous (collage, remplissage auto, lecteurs d'écran). */
.js .otp__cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(6px, 1.6vw, 10px);
    pointer-events: none;
}
.js .otp__input {
    position: absolute; inset: 0;
    height: 100%;
    color: transparent;
    caret-color: transparent;
    background: transparent;
    border-color: transparent;
    letter-spacing: 0;
    text-indent: 0;
    font-size: 16px;
}
.js .otp__input:focus { box-shadow: none; border-color: transparent; }
.otp__cell {
    display: grid; place-items: center;
    aspect-ratio: 5 / 6;
    border-radius: 16px;
    border: 1px solid var(--line-strong);
    background: rgba(255, 255, 255, .82);
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    font-weight: 600;
    color: var(--text);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.otp__cell.is-filled { transform: translateY(-1px); }
.otp.is-focused .otp__cell.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, .16);
}
.otp.is-focused .otp__cell.is-active::after {
    content: "";
    width: 2px; height: 1.1em;
    background: var(--accent);
    animation: caret 1s steps(1) infinite;
}
.otp.is-focused .otp__cell.is-active.is-filled::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }

/* Étapes (inscription) */
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.stepper__item { display: grid; gap: .5rem; font-size: var(--fs-caption); font-weight: 600; color: var(--text-3); }
.stepper__bar { height: 4px; border-radius: 4px; background: var(--silver-2); overflow: hidden; }
.stepper__bar::after {
    content: ""; display: block; height: 100%;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-slow) var(--ease-out);
}
.stepper__item.is-done .stepper__bar::after, .stepper__item[aria-current="step"] .stepper__bar::after { transform: scaleX(1); }
.stepper__item[aria-current="step"] .stepper__bar::after { background: var(--accent); }
.stepper__item[aria-current="step"], .stepper__item.is-done { color: var(--text); }

/* Règles de mot de passe */
.rules-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-caption); color: var(--text-3); }
.rules-list li { display: flex; align-items: center; gap: .5rem; transition: color var(--t-fast); }
.rules-list li::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    flex: none;
    transition: background-color var(--t-fast), border-color var(--t-fast);
}
.rules-list li.is-met { color: var(--success); }
.rules-list li.is-met::before {
    border-color: var(--success);
    background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Pied de page */
.site-footer {
    position: relative;
    padding: var(--s-8) 0 var(--s-6);
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.site-footer__grid {
    display: grid; gap: var(--s-7);
    grid-template-columns: 1fr;
}
.site-footer__about { max-width: 22rem; }
.site-footer__about p { margin-top: var(--s-4); color: var(--text-3); font-size: var(--fs-small); }
.site-footer__nav { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__nav h2 { font-size: var(--fs-caption); font-weight: 600; color: var(--text); margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer__nav ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.site-footer__nav a { color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.site-footer__nav a:hover { color: var(--text); }
.site-footer__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
    margin-top: var(--s-7); padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    font-size: var(--fs-caption); color: var(--text-3);
}
@media (min-width: 900px) {
    .site-footer__grid { grid-template-columns: 1.2fr 1fr; }
}

/* ── 7. Sections ───────────────────────────────────────────────────────── */

/* 7.1 Accueil — hero */
.hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(3.5rem, 2rem + 6vw, 7rem));
    padding-bottom: clamp(3rem, 2rem + 5vw, 6.5rem);
    overflow: clip;
}
.hero__grid {
    position: relative; z-index: 1;
    display: grid;
    gap: clamp(3rem, 2rem + 4vw, 5rem);
    align-items: center;
}
.hero__copy .chip { margin-bottom: var(--s-6); }
/* Le halo bas du hero s'éteint avant la limite de la section (pas de démarcation). */
.hero .ambient::after { bottom: auto; top: 18%; width: 46vmax; height: 46vmax; }
.hero__copy .lead { margin-top: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-7); }
.hero__returning { margin-top: var(--s-6); max-width: 30rem; }
.hero__returning .caption { margin-bottom: var(--s-2); }

/* Champ de suivi en verre */
.track-field {
    display: flex; align-items: center; gap: var(--s-2);
    padding: 6px 6px 6px 18px;
    border-radius: var(--r-pill);
}
.track-field .icon { color: var(--text-3); }
.track-field input {
    flex: 1; min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 1rem;
    color: var(--text);
    text-transform: uppercase;
}
.track-field input::placeholder { text-transform: none; color: #8C94A1; }
.track-field input:focus { outline: none; }
.track-field:focus-within { box-shadow: var(--shadow-2), 0 0 0 4px rgba(0, 102, 204, .16), inset 0 1px 0 rgba(255, 255, 255, .55); }
.track-field--lg { padding: 8px 8px 8px 22px; }
.track-field--lg input { height: 52px; font-size: 1.125rem; }

/* Boussole interactive (assets/js/compass.js)
 * Couches, de l'arrière vers l'avant : ombre portée, cadran (lunette + carte),
 * réfraction du bord, couche animée, aiguille, pivot, dôme de verre.
 * Le corps pivote en 3D ; les couches avant étant plus « hautes » (translateZ),
 * elles glissent légèrement par rapport à la carte : effet de profondeur. */
.compass-stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-4);
}
.compass-stage::before {
    content: "";
    position: absolute;
    inset: -6% -10% 18%;
    background:
        radial-gradient(closest-side at 34% 40%, rgba(56, 132, 255, .26), transparent),
        radial-gradient(closest-side at 68% 62%, rgba(168, 139, 250, .24), transparent),
        radial-gradient(closest-side at 66% 28%, rgba(34, 211, 238, .14), transparent);
    pointer-events: none;
}
.compass {
    --tilt: 0;
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
    perspective: 1100px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.compass__body {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.compass__dial, .compass__refraction, .compass__motion {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
}
.compass__dial { filter: drop-shadow(0 30px 50px rgba(4, 39, 71, .18)) drop-shadow(0 6px 12px rgba(4, 39, 71, .12)); }
.compass__refraction {
    transform: translateZ(2px) translate(var(--rx, 0px), var(--ry, 0px)) scale(1.05);
    -webkit-mask: radial-gradient(circle closest-side, transparent 77.5%, #000 81.5%, #000 84.4%, transparent 85%);
    mask: radial-gradient(circle closest-side, transparent 77.5%, #000 81.5%, #000 84.4%, transparent 85%);
    opacity: .95;
    pointer-events: none;
}
.compass__motion { transform: translateZ(6px); pointer-events: none; }

.compass__graticule path { stroke: rgba(4, 39, 71, .07); stroke-width: .7; fill: none; }
.compass__tropic { stroke: rgba(4, 39, 71, .24); stroke-width: .8; stroke-dasharray: 3 4; fill: none; }
.compass__tropic-label { fill: rgba(4, 39, 71, .45); font: 600 7.5px var(--font-text); letter-spacing: .22em; }
.compass__land path, .compass__land circle, path.compass__land {
    fill: rgba(4, 39, 71, .075);
    stroke: rgba(4, 39, 71, .2);
    stroke-width: .8;
    stroke-linejoin: round;
}
path.compass__land--florida { fill: rgba(4, 39, 71, .13); stroke: rgba(4, 39, 71, .42); }
path.compass__land--haiti { fill: rgba(0, 102, 204, .2); stroke: #0066CC; stroke-width: 1.1; }
.compass__place { fill: rgba(4, 39, 71, .32); font: 600 8px var(--font-text); letter-spacing: .3em; text-anchor: middle; }
.compass__label {
    fill: var(--ink);
    font: 650 10.5px var(--font-text);
    letter-spacing: .16em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 3.5px;
    stroke-linejoin: round;
}
.compass__label--to { fill: #0057B0; }

.compass__route { fill: none; stroke-linecap: round; transition: opacity var(--t-med) var(--ease-out); }
.compass__route--air { stroke: url(#compass-air-route); stroke-width: 2; }
.compass__route--sea { stroke: #0B8A8A; stroke-width: 2.2; stroke-dasharray: .1 6.5; }
.compass__route-glow { fill: none; stroke: #6D9BFF; stroke-width: 10; opacity: .32; transition: opacity var(--t-med) var(--ease-out); }
.compass[data-mode="air"] .compass__route--sea,
.compass[data-mode="sea"] .compass__route--air { opacity: .28; }
.compass[data-mode="sea"] .compass__route-glow--air { opacity: .08; }

.compass__pin { fill: var(--white); stroke: var(--ink); stroke-width: 2.6; }
.compass__pin--to { fill: #0066CC; stroke: var(--white); }

.compass__trail { fill: none; stroke-linecap: round; stroke-width: 3.2; opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.compass__trail--air { stroke: #2F7BF0; }
.compass__trail--sea { stroke: #0FA3A3; }
.compass[data-mode="air"] .compass__trail--air,
.compass[data-mode="sea"] .compass__trail--sea { opacity: .85; }
.compass__marker-glow { fill: url(#compass-marker-glow); }
.compass__marker [data-glyph] { display: none; }
.compass[data-mode="air"] .compass__marker [data-glyph="air"],
.compass[data-mode="sea"] .compass__marker [data-glyph="sea"] { display: inline; }
.compass__glyph { fill: var(--ink); stroke: var(--white); stroke-width: 1.2; paint-order: stroke; stroke-linejoin: round; }
.compass__arrival { fill: none; stroke: #0066CC; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.compass__arrival.is-arrived { animation: compass-arrival 1.3s var(--ease-out); }
@keyframes compass-arrival {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.4); }
}

.compass__tick { stroke: rgba(4, 39, 71, .32); stroke-width: .8; fill: none; }
.compass__tick--medium { stroke: rgba(4, 39, 71, .55); stroke-width: 1.1; }
.compass__tick--major { stroke: var(--ink); stroke-width: 1.8; }
.compass__cardinal { fill: var(--text-2); font: 650 15px var(--font-display); text-anchor: middle; dominant-baseline: central; }
.compass__cardinal--north { fill: #0066CC; }

.compass__needle {
    position: absolute;
    left: 50%; top: 50%;
    width: 8.25%; height: 66%;
    transform: translate(-50%, -50%) translateZ(26px) rotate(var(--rest, 133deg));
    filter: drop-shadow(0 10px 8px rgba(4, 39, 71, .28));
    will-change: transform;
}
.compass__needle svg { width: 100%; height: 100%; }
.compass__hub {
    position: absolute;
    left: 50%; top: 50%;
    width: 7%; height: 7%;
    border-radius: 50%;
    transform: translate(-50%, -50%) translateZ(30px);
    background: radial-gradient(circle at 35% 30%, #FFFFFF, #DCE2EA 55%, #A9B4C4);
    box-shadow: 0 3px 8px rgba(4, 39, 71, .35), inset 0 -1px 2px rgba(4, 39, 71, .25), inset 0 1px 1px #fff;
}

/* Dôme de verre : reflet spéculaire mobile, tranche irisée, épaisseur (ombres internes). */
.compass__glass {
    position: absolute;
    inset: 7.5%;
    border-radius: 50%;
    transform: translateZ(38px);
    pointer-events: none;
    background:
        radial-gradient(ellipse 46% 30% at var(--hx, 44%) var(--hy, 24%), rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 70%),
        radial-gradient(circle at 50% 50%, transparent 66%, rgba(255, 255, 255, .16) 82%, rgba(255, 255, 255, .34) 100%);
    box-shadow:
        inset 0 22px 34px -22px rgba(255, 255, 255, .95),
        inset 0 -30px 46px -26px rgba(4, 39, 71, .26),
        inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.compass__glass::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    padding: 1.5px;
    background: conic-gradient(from var(--rim, 210deg),
        rgba(255, 255, 255, .95), rgba(168, 139, 250, .6), rgba(56, 132, 255, .55),
        rgba(34, 211, 238, .5), rgba(255, 255, 255, .9), rgba(255, 255, 255, .35), rgba(255, 255, 255, .95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.compass__glass::after {
    /* Croissant de lumière sur le bord supérieur. */
    content: "";
    position: absolute;
    inset: 2% 12% auto;
    height: 22%;
    border-radius: 50% 50% 40% 40% / 100% 100% 30% 30%;
    background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}
.compass__shadow {
    position: absolute;
    left: 14%; right: 14%; bottom: -5%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(4, 39, 71, .22), transparent);
    transform: translateX(var(--sx, 0px));
}

.compass-controls { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2); }
.compass-controls .segmented { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(4, 39, 71, .08), var(--shadow-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.compass-controls .segmented label { min-height: 36px; font-size: var(--fs-caption); }
.compass-note { position: relative; z-index: 1; text-align: center; max-width: 30rem; }

/* 7.2 Accueil — trois bénéfices */
.benefits {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}
.benefit {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-6) 0;
    border-bottom: 1px solid var(--line);
}
.benefit .benefit__figure {
    font-family: var(--font-display);
    font-size: clamp(3rem, 2.2rem + 3vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .95;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.benefit .benefit__unit { margin-top: .35rem; font-size: var(--fs-small); font-weight: 600; color: var(--text-3); }
.benefit h3 { margin-top: var(--s-5); }
.benefit p { color: var(--text-2); max-width: 26rem; }

/* 7.3 Accueil — fonctionnement */
.how { display: grid; gap: var(--s-7); }
.how__steps { counter-reset: step; display: grid; margin: 0; padding: 0; list-style: none; }
.how__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    padding: var(--s-6) 0;
    border-top: 1px solid var(--line);
}
.how__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
    line-height: .9;
    color: var(--accent);
    min-width: 2.2ch;
}
.how__step h3 { margin-bottom: var(--s-2); }
.how__step p { color: var(--text-2); max-width: 32rem; }

/* 7.4 Accueil — tarifs (section nuit) */
.night {
    background: var(--night);
    color: var(--white);
    overflow: clip;
}
.night .ambient::before { background: radial-gradient(closest-side, rgba(40, 110, 255, .38), transparent 72%); }
.night .ambient::after  { background: radial-gradient(closest-side, rgba(150, 110, 255, .26), transparent 72%); }
.night .title-1, .night .title-2, .night .title-3 { color: var(--white); }
.night .eyebrow { color: #7FB6FF; }
.night .lead, .night .body-text { color: rgba(255, 255, 255, .72); }
.night .caption { color: rgba(255, 255, 255, .55); }
.night a:not(.btn) { color: #8EC1FF; }

.pricing { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 2rem + 4vw, 5rem); align-items: start; }
.rates { display: grid; margin: var(--s-7) 0 0; }
.rate {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-4);
    padding: var(--s-5) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.rate:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rate dt { display: grid; gap: .2rem; }
.rate dt strong { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; }
.rate dt span { font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.rate dd { text-align: right; }
.rate__price { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rate__price small { font-size: .45em; font-weight: 600; color: rgba(255, 255, 255, .6); letter-spacing: -.01em; }
.rate__min { display: block; margin-top: .35rem; font-size: var(--fs-caption); color: rgba(255, 255, 255, .55); }

.estimator { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); }
.estimator__title { font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; margin-bottom: var(--s-5); }
.estimator__label { display: block; font-size: var(--fs-small); font-weight: 600; color: rgba(255, 255, 255, .78); margin: var(--s-5) 0 var(--s-2); }
.estimator__weight { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: center; }
.estimator__weight .input {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
    color: var(--white);
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.estimator__weight .input::placeholder { color: rgba(255, 255, 255, .35); font-weight: 400; }
.estimator__weight .input:focus { background: rgba(255, 255, 255, .1); border-color: #6AA8FF; box-shadow: 0 0 0 4px rgba(106, 168, 255, .22); }
.estimator__result {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.estimator__total {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.estimator__detail { margin-top: var(--s-2); font-size: var(--fs-small); color: rgba(255, 255, 255, .62); min-height: 1.5em; }
.estimator__compare { margin-top: var(--s-4); font-size: var(--fs-small); color: rgba(255, 255, 255, .78); min-height: 1.5em; }
.estimator .btn { margin-top: var(--s-6); }

.pricing-more { position: relative; z-index: 1; margin-top: var(--s-8); display: grid; gap: var(--s-3); }
.flat-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.flat-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: .7rem 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.flat-list li:first-child { border-top: 0; }
.flat-list strong { color: var(--white); font-variant-numeric: tabular-nums; }

/* 7.5 Accueil — règles d'expédition */
.rules { display: grid; gap: var(--s-3); }
.rules__list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rules__list li { display: flex; gap: .65rem; align-items: flex-start; }
.rules__list li .icon { margin-top: .2em; color: var(--text-3); }
.rules__warning { margin-top: var(--s-4); }
.facts { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-7); }
.fact {
    display: flex; gap: var(--s-3); align-items: flex-start;
    padding: var(--s-5);
    border-radius: var(--r-md);
}
.fact .icon { color: var(--accent); margin-top: .15em; }
.fact strong { display: block; font-weight: 650; letter-spacing: -.015em; }
.fact span { color: var(--text-2); font-size: var(--fs-small); }

/* 7.6 Accueil — appel final */
.closing { padding-top: 0; }
.closing__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 2rem + 5vw, 6rem) var(--gutter);
    border-radius: var(--r-xl);
    text-align: center;
}
.closing__panel > *:not(.ambient) { position: relative; z-index: 1; }
.closing__panel .lead { margin: var(--s-5) auto 0; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-7); }

/* 7.7 Suivi */
.page-hero {
    position: relative;
    padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .lead { margin-top: var(--s-4); }
.page-hero form { margin-top: var(--s-6); max-width: 40rem; }
.page-hero .field__hint { margin-top: var(--s-3); padding-left: var(--s-5); }
.track-result { position: relative; z-index: 1; display: grid; gap: var(--s-5); padding-bottom: var(--section-y); }
.parcel { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); }
.parcel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.parcel__number { font-family: var(--font-mono); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.parcel__status { display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-size: var(--fs-title-2); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: var(--s-5); }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 5px rgba(0, 102, 204, .14); }
.status-dot--success { background: #1B9E62; box-shadow: 0 0 0 5px rgba(27, 158, 98, .16); }
.status-dot--warning { background: #D98A00; box-shadow: 0 0 0 5px rgba(217, 138, 0, .16); }
.status-dot--danger  { background: var(--danger); box-shadow: 0 0 0 5px rgba(196, 43, 28, .14); }
.progress { display: grid; grid-template-columns: repeat(var(--steps, 6), 1fr); gap: 6px; margin-top: var(--s-5); }
.progress span { height: 6px; border-radius: 6px; background: var(--silver-2); }
.progress span.is-done { background: var(--ink); }
.progress span.is-current { background: var(--accent); }
.parcel__body { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.parcel__flags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.track-tips { display: grid; gap: var(--s-2); margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-small); }

/* 7.8 Authentification */
.auth {
    position: relative;
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
    display: grid;
    place-items: center;
    padding: calc(var(--nav-h) + 3rem) var(--gutter) 3rem;
    overflow: clip;
}
/* Les halos se placent derrière la carte : c'est ce que le verre laisse deviner. */
.auth .ambient::before { top: 8%; right: 18%; width: 44vmax; height: 44vmax; }
.auth .ambient::after  { bottom: 0; left: 20%; width: 40vmax; height: 40vmax; }
.auth .ambient, .lost .ambient {
    -webkit-mask: linear-gradient(#000 70%, transparent);
    mask: linear-gradient(#000 70%, transparent);
}
.auth__inner { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.auth__inner--wide { max-width: 560px; }
.auth__card { padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); border-radius: var(--r-xl); }
.auth__head { margin-bottom: var(--s-6); }
.auth__head .body-text { margin-top: var(--s-3); }
.auth__alt { margin-top: var(--s-5); text-align: center; color: var(--text-2); font-size: var(--fs-small); }
.auth__alerts { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.auth__resend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin-top: var(--s-5); color: var(--text-3); font-size: var(--fs-small); }
.auth__summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--silver); font-size: var(--fs-small); }
.step-actions { display: flex; gap: var(--s-3); }
.step-actions .btn { flex: 1; }
.step-actions .btn--glass { flex: 0 0 auto; }
.js [data-step]:not(.is-active) { display: none; }

.auth-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    height: calc(var(--nav-h) + 16px);
    padding: 0 var(--gutter);
}
.auth-footer { position: relative; z-index: 1; padding: var(--s-5) var(--gutter) var(--s-6); text-align: center; color: var(--text-3); font-size: var(--fs-caption); }
.auth-footer a { color: var(--text-2); }

/* 7.9 Erreur */
.lost { min-height: 100vh; display: grid; place-items: center; text-align: center; position: relative; padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem; overflow: clip; }
.lost__inner { position: relative; z-index: 1; max-width: 36rem; }
.lost__code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-3); letter-spacing: .1em; }
.lost .lead { margin: var(--s-5) auto 0; }
.lost__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-7); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
    .site-nav__links, .site-nav__actions .site-nav__link, .site-nav__actions .btn { display: none; }
    .site-nav__toggle {
        display: inline-grid; place-items: center;
        margin-left: auto;
        width: 44px; height: 44px;
        border: 0; border-radius: 50%;
        background: rgba(4, 39, 71, .06);
        color: var(--text);
        cursor: pointer;
    }
    .site-nav__toggle .icon--close { display: none; }
    .site-nav.is-open .site-nav__toggle .icon--menu { display: none; }
    .site-nav.is-open .site-nav__toggle .icon--close { display: block; }

    /* Verre simplifié sur mobile : moins de flou, même lisibilité. */
    .glass--3 { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
    .compass { width: min(100%, 380px); }
}

@media (min-width: 640px) {
    .facts { grid-template-columns: repeat(3, 1fr); }
    .parcel__body { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .site-nav__sheet { display: none; }
    .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .benefits { grid-template-columns: repeat(3, 1fr); border-top: 0; }
    .benefit { padding: 0 var(--s-6); border-bottom: 0; border-left: 1px solid var(--line); }
    .benefit:first-child { padding-left: 0; border-left: 0; }
    .how { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-9); align-items: start; }
    .how__head { position: sticky; top: calc(var(--nav-h) + 56px); }
    .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pricing-more { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .pricing-more .disclosure + .disclosure { margin-top: 0; }
    .rules { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s-5); }
    .rules .disclosure + .disclosure { margin-top: 0; }
}

@media (min-width: 1200px) {
    .hero { min-height: min(100vh, 980px); display: grid; align-items: center; }
}

/* ── 8. Mouvement et accessibilité ─────────────────────────────────────── */

.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
    .glass::before, .glass::after { display: none; }
    .btn { border: 1px solid ButtonText; }
}

@media print {
    .site-nav, .site-footer, .ambient, .hero__visual { display: none !important; }
    body { background: #fff; }
}

/* Lien temporairement indisponible (renvoi de code pendant le délai serveur). */
a[aria-disabled="true"] { color: var(--text-3); pointer-events: none; cursor: default; text-decoration: none; }
.auth__summary .btn--text { font-size: inherit; }

/* Liens dans un texte : soulignés, pas seulement colorés (WCAG 1.4.1). */
p a:not(.btn), li a:not(.btn), .track-tips a, .auth-footer a, .fact a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}
.site-footer__nav li a, .site-nav__sheet li a, .site-nav__links li a { text-decoration: none; }
.disclosure--dark > summary .count { color: rgba(255, 255, 255, .62); }
.compass__label--center { text-anchor: middle; }
.compass__label-sub { font-size: 8.5px; letter-spacing: .24em; }