/* ==========================================================================
   FluxFly — site public (fluxfly.be)
   Jetons recopiés de docs/design/fondations.html (mêmes noms, mêmes valeurs
   claires que resources/css/app.css). Composants recopiés des planches 8a
   (bouton, champ, contrôle segmenté), 8b (alerte, accordéon), 8d (barre
   flottante). Mise en page : piste C « Le produit en grand » (oui de méri,
   8 oct.) — le produit en très grand dans ses cadres d'appareil, bandes
   sauge et ivoire, rangées alternées image / texte avec un bouton chacune.
   MODE CLAIR UNIQUEMENT (méri, 8 oct. : « pas de darkmode dans une landing
   page healthcare ») : aucune valeur sombre, même si le système est en sombre.
   Aucun style en ligne ni bloc <style> : la CSP de production les bloque.
   ========================================================================== */

/* ---------- Polices auto-hébergées : aucun appel à un tiers ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Heures et durées des exemples : chasse fixe, comme dans l'application. */
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Police de repli aux mesures d'Inter : le texte ne saute pas quand Inter arrive. */
@font-face {
    font-family: 'Inter fallback';
    src: local('Arial');
    size-adjust: 107.4%;
    ascent-override: 90.2%;
    descent-override: 22.48%;
    line-gap-override: 0%;
}

/* ---------- Jetons (fondations.html), valeurs claires seulement ---------- */
:root {
    color-scheme: light;
    --font-sans: 'Inter', 'Inter fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --type-display: 600 36px/42px var(--font-sans);  --track-display: -0.02em;
    --type-title-1: 600 28px/36px var(--font-sans);  --track-title-1: -0.02em;
    --type-title-2: 600 22px/28px var(--font-sans);  --track-title-2: -0.01em;
    --type-title-3: 600 18px/24px var(--font-sans);  --track-title-3: -0.01em;
    --type-headline: 600 16px/24px var(--font-sans);
    --type-body: 400 15px/24px var(--font-sans);
    --type-callout: 400 14px/20px var(--font-sans);
    --type-subhead: 500 13px/18px var(--font-sans);
    --type-footnote: 400 12px/16px var(--font-sans);
    --type-caption: 600 12px/16px var(--font-sans);  --track-caption: 0.02em;
    --type-time: 500 15px/20px var(--font-mono);
    --type-time-sm: 500 13px/18px var(--font-mono);
    /* Propres au site : texte de lecture (planche 8d §12) et titres en serif de la piste C. */
    --type-reading: 400 16px/28px var(--font-sans);
    --type-hero: 400 clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem) / 1.12 var(--font-serif);
    --type-poster: 400 clamp(2.5rem, 1.2rem + 5vw, 5.25rem) / 1.02 var(--font-serif);
    --type-section: 400 clamp(2rem, 1.4rem + 2.4vw, 3.25rem) / 1.08 var(--font-serif);
    --type-row: 400 clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem) / 1.1 var(--font-serif);
    --type-tagline: 400 clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem) / 1.12 var(--font-serif);

    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
    --page-gutter: 32px; --page-gutter-mobile: 16px;

    --control-h: 44px; --control-h-hero: 52px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 9999px;

    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms; --dur-move: 250ms;

    --color-surface-200: #e7e5e4;
    --color-surface-700: #44403c;
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-600: #2563eb;
    --color-primary-900: #1e3a8a;
    --color-accent-600: #466b4f;
    --color-danger-50: #fef2f2;
    --color-danger-200: #fecaca;
    --color-danger-500: #ef4444;
    --color-danger-700: #b91c1c;
    --color-status-confirmed: #275a36;
    --color-status-confirmed-bg: #d5ead9;

    --bg-page: #fafaf9;
    --bg-card: #ffffff;
    --bg-muted: #f5f5f4;
    --bg-elevated: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #716a64;
    --text-placeholder: #78716c;
    --border-default: #e7e5e4;
    --border-strong: #d6d3d1;
    --border-control: #8f8883;
    --focus-ring: #3b82f6;
    --focus-ring-offset: #ffffff;
    --focus-halo: rgba(59,130,246,.22);
    --action-primary-bg: #1c1917;
    --action-primary-bg-hover: #292524;
    --action-primary-text: #ffffff;
    --seg-on-bg: #ffffff;
    --shadow-soft: 0 1px 2px rgba(28,25,23,.04);
    --shadow-soft-lg: 0 4px 8px rgba(28,25,23,.06), 0 24px 48px -16px rgba(28,25,23,.14);
    --shadow-seg: 0 1px 2px rgba(28,25,23,.06), 0 1px 4px rgba(28,25,23,.08);

    /* Bandes de la piste C, toutes tirées du système : sauge accent-600, fond « Confirmé »,
       texte « Confirmé », sauge du mode sombre (heure en grand), encre. */
    --sage-deep: var(--color-accent-600);
    --sage-soft: var(--color-status-confirmed-bg);
    --sage-ink: var(--color-status-confirmed);
    --sage-light: #a9c6ad;
    --ink: #1c1917;
    /* Cadres d'appareil : une ombre portée longue, sans filet. */
    --shadow-device: 0 2px 6px rgba(28,25,23,.10), 0 40px 80px -32px rgba(28,25,23,.45);
    --shadow-tag: 0 1px 2px rgba(28,25,23,.12), 0 8px 24px -8px rgba(28,25,23,.3);
}
@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-move: 0ms; }
}

/* Zones sur fond foncé (sauge profonde, encre) : mêmes noms de jetons, valeurs du fond. */
.on-dark {
    --text-primary: #fafaf9; --text-secondary: #e3eee5; --text-muted: #e3eee5;
    --border-default: rgba(250,250,249,.18);
    --action-primary-bg: #fafaf9; --action-primary-bg-hover: #e7e2dc; --action-primary-text: #1c1917;
    --focus-ring: #fafaf9; --focus-ring-offset: var(--ink);
    color: var(--text-primary);
}
/* Ce qui est posé sur une bande foncée (étiquettes, cartes, formulaire) garde les couleurs du jour. */
.on-dark .callout, .on-dark .form-card {
    --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #716a64;
    --border-default: #e7e5e4;
    --action-primary-bg: #1c1917; --action-primary-bg-hover: #292524; --action-primary-text: #ffffff;
    --focus-ring: #3b82f6; --focus-ring-offset: #ffffff;
    color: var(--text-primary);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--space-6);
}
body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    font: var(--type-body);
    caret-color: var(--color-primary-600);
    accent-color: var(--action-primary-bg);
}
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
svg { flex: none; }
a { color: var(--color-primary-600); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--color-primary-100); color: var(--color-primary-900); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring); border-radius: var(--radius-sm); }
[hidden] { display: none !important; }
time { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.skip {
    position: absolute; z-index: 30; left: var(--space-4); top: calc(-1 * var(--space-16));
    display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-4);
    border-radius: var(--radius-lg); background: var(--action-primary-bg); color: var(--action-primary-text);
    font: 500 14px/20px var(--font-sans); text-decoration: none;
}
.skip:focus-visible { top: calc(var(--space-3) + env(safe-area-inset-top)); }

.wrap {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-left: max(var(--page-gutter-mobile), env(safe-area-inset-left));
    padding-right: max(var(--page-gutter-mobile), env(safe-area-inset-right));
}
@media (min-width: 768px) {
    .wrap {
        padding-left: max(var(--page-gutter), env(safe-area-inset-left));
        padding-right: max(var(--page-gutter), env(safe-area-inset-right));
    }
}

/* ---------- Bouton (8a §1) ---------- */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--control-h); padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid transparent;
    font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
    background: transparent; color: var(--text-primary);
    transition: background-color var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring); border-radius: var(--radius-lg); }
.btn:disabled { cursor: progress; }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--action-primary-bg-hover); text-decoration: none; }
.btn-primary:active:not(:disabled) { background: var(--color-surface-700); }
.on-dark .btn-primary:active:not(:disabled) { background: var(--color-surface-200); }
.btn-secondary { background: var(--bg-card); border-color: var(--border-control); }
.btn-secondary:hover { background: var(--bg-muted); text-decoration: none; }
.btn-secondary:active { background: var(--color-surface-200); }
.btn-hero { height: var(--control-h-hero); padding: 0 24px; font-size: 15px; border-radius: var(--radius-xl); }
.btn-hero:focus-visible { border-radius: var(--radius-xl); }
.btn.block { display: flex; width: 100%; }
.btn .spin { display: none; }
.btn.is-loading .spin { display: block; animation: ff-spin 900ms linear infinite; }
@keyframes ff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading .spin { animation: none; } }

/* ---------- En-tête ---------- */
.top {
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-default);
    padding-top: env(safe-area-inset-top);
}
.top-in {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    min-height: 64px; padding-block: 10px;
}
/* Très petits écrans (< 383 px) : le bouton du hero et la barre flottante prennent le relais. */
@media (max-width: 382px) { .top .btn { display: none; } }
@media (max-width: 519px) { .top .btn { padding: 0 12px; } }
@media (min-width: 520px) { .top-in { gap: var(--space-2) var(--space-3); } }
.brand {
    position: relative; display: inline-flex; align-items: center; min-height: var(--control-h); margin-right: auto;
    color: var(--text-primary); border-radius: var(--radius-sm);
}
/* Le symbole seul fait 27 px : la piste tactile s'élargit à 45 px sans pousser l'en-tête. */
.brand::after { content: ""; position: absolute; inset: 0 -9px; }
.brand-full { display: none; }
@media (min-width: 520px) {
    .brand-full { display: block; }
    .brand-mark { display: none; }
}
@media (min-width: 768px) {
    .top { position: sticky; top: 0; z-index: 10; }
    html { scroll-padding-top: calc(64px + var(--space-6)); }
}

/* Sélecteur de langue : contrôle segmenté (8a §11, 8d §3), en liens. */
.seg {
    display: inline-flex; padding: 3px; gap: 2px; height: var(--control-h);
    border-radius: var(--radius-md); background: var(--bg-muted);
}
.seg a {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm);
    font: 400 14px/20px var(--font-sans); color: var(--text-secondary); text-decoration: none;
    transition: background-color var(--dur-move) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.seg a::after { content: ""; position: absolute; inset: -4px 0; }
.seg a:hover { color: var(--text-primary); }
.seg a[aria-current="page"] {
    background: var(--seg-on-bg); color: var(--text-primary);
    font-weight: 600; box-shadow: var(--shadow-seg);
}
.seg a:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring-offset), 0 0 0 4px var(--focus-ring); }

/* ---------- Textes communs ---------- */
.prose { font: var(--type-reading); color: var(--text-secondary); max-width: 36em; text-wrap: pretty; }
.prose > * + * { margin-top: var(--space-4); }

/* ---------- Hero ---------- */
.hero-intro { padding-block: var(--space-10); }
.hero-title {
    font: var(--type-hero);
    letter-spacing: -0.01em;
    font-size-adjust: 0.55;
    text-wrap: balance;
    max-width: 15em;
}
.hero-intro .hero-title { font: var(--type-poster); letter-spacing: -0.015em; max-width: 12.5em; }
.hero-lead {
    margin-top: var(--space-5); max-width: 37em; text-wrap: pretty;
    font: 400 clamp(1rem, 0.93rem + 0.3vw, 1.125rem) / 1.65 var(--font-sans); color: var(--text-secondary);
}
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.hero-note { font: var(--type-callout); color: var(--text-secondary); max-width: 25em; text-wrap: pretty; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); margin-top: var(--space-10); }
.facts li { display: grid; gap: 2px; font: var(--type-callout); color: var(--text-secondary); }
/* Au téléphone, moins de texte au-dessus de l'image : les trois arguments reviennent plus bas dans la page. */
@media (max-width: 599px) { .facts { display: none; } }
.facts b { font: 600 18px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); }
@media (min-width: 768px) {
    .hero-intro { padding-block: var(--space-16) var(--space-12); text-align: center; }
    .hero-intro .hero-title, .hero-lead { margin-inline: auto; }
    .hero-act, .facts { justify-content: center; }
    .hero-note { text-align: left; }
}

/* La scène : les appareils plongent dans la bande sauge. */
.stage { position: relative; isolation: isolate; overflow: clip; padding-bottom: var(--space-16); }
.stage::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0;
    top: clamp(96px, 22vw, 300px); background: var(--sage-deep);
}
.devices { position: relative; max-width: 1040px; margin-inline: auto; padding: 0 6% var(--space-10) 0; }
.devices > .phone { position: absolute; right: 0; bottom: 0; width: 25%; max-width: 250px; }
/* Le texte sous les appareils est sur la sauge : le fond est aussi posé sur le bloc (même teinte, aucun raccord visible). */
.stage .on-dark { background: var(--sage-deep); }
.tagline {
    max-width: 21em; margin: var(--space-12) auto 0; text-align: center;
    font: var(--type-tagline); font-size-adjust: 0.55; text-wrap: balance;
}
.tagline-sub { max-width: 34em; margin: var(--space-5) auto 0; text-align: center; font: var(--type-reading); color: var(--text-secondary); text-wrap: pretty; }
.stage-note { margin-top: var(--space-8); text-align: center; font: var(--type-footnote); color: var(--text-muted); }
@media (max-width: 599px) {
    .devices { padding: 0 0 var(--space-10); }
    .devices .browser { display: none; }
    .devices > .phone { position: relative; width: 76%; max-width: 320px; margin-inline: auto; }
}

/* ---------- Cadres d'appareil ---------- */
.browser { position: relative; border-radius: 14px; background: var(--bg-card); box-shadow: var(--shadow-device); }
.browser-bar {
    display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border-bottom: 1px solid var(--border-default); border-radius: 14px 14px 0 0;
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.cap { position: relative; }
.cap img { display: block; width: 100%; height: auto; }
.browser .cap img { border-radius: 0 0 14px 14px; }
.phone { position: relative; padding: 6px; border-radius: 32px; background: var(--ink); box-shadow: 0 2px 6px rgba(28,25,23,.18), 0 30px 60px -20px rgba(28,25,23,.55); }
.phone .cap { overflow: hidden; border-radius: 26px; }

/* Étiquettes posées sur les captures, comme des annotations. */
.callout {
    position: absolute; z-index: 2; translate: 0 -50%;
    display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 24px);
    padding: 7px 14px 7px 12px; border-radius: var(--radius-pill); background: var(--bg-elevated);
    color: var(--text-primary); font: 600 13px/18px var(--font-sans); text-wrap: balance;
    box-shadow: var(--shadow-tag);
}
.callout::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--focus-ring); }
.callout time { font: var(--type-time-sm); }
/* Positions mesurées sur chaque capture, en % de l'image (centre vertical de l'étiquette). */
.co-hero-a { left: 23.5%; top: 29.3%; }
.co-hero-b { left: 45.5%; top: 95.9%; }
.co-hero-m { display: none; }
.co-p1 { left: 21%; top: 92.4%; }
.co-p4 { left: 53.6%; top: 80%; }
.co-p6 { left: 51.5%; top: 28.6%; }
@media (max-width: 599px) {
    .co-hero-m { display: inline-flex; left: 50%; top: auto; bottom: 0; translate: -50% 50%; }
    /* Au téléphone, l'étiquette se pose à cheval sur le bas du cadre : rien de la capture n'est caché. */
    .row .browser .callout { left: 50%; top: auto; bottom: 0; translate: -50% 50%; }
}

/* ---------- Six piliers : rangées alternées sur bandes ---------- */
.pillars-head { padding-block: var(--space-16) var(--space-6); }
.section-title { font: var(--type-section); letter-spacing: -0.01em; font-size-adjust: 0.55; text-wrap: balance; max-width: 18em; }
.pillars-head .prose { margin-top: var(--space-5); max-width: 34em; }
@media (min-width: 768px) {
    .pillars-head { padding-block: calc(var(--space-16) + var(--space-8)) var(--space-8); text-align: center; }
    .pillars-head .section-title, .pillars-head .prose { margin-inline: auto; }
}

.row { padding-block: var(--space-16); }
.row-ink { background: var(--ink); --text-secondary: #d0cac4; --text-muted: #b4ada6; }
.row-sage { background: var(--sage-soft); --text-secondary: var(--sage-ink); }
.row-in {
    display: grid; row-gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "body";
}
.row-head { grid-area: head; }
.row-media { grid-area: media; position: relative; }
.row-body { grid-area: body; }
.row h3 { font: var(--type-row); font-size-adjust: 0.55; text-wrap: balance; max-width: 15em; }
.row-head .prose { margin-top: var(--space-4); }
.row-head .prose strong { font-weight: 500; color: var(--text-primary); }
.ticks { display: grid; gap: var(--space-3); max-width: 34em; }
.ticks li { position: relative; padding-left: 28px; font: var(--type-body); color: var(--text-secondary); text-wrap: pretty; }
/* Coche dessinée en CSS (pas d'image : la CSP n'autorise que les fichiers du site). */
.ticks li::before {
    content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px;
    border-left: 1.75px solid var(--sage-deep); border-bottom: 1.75px solid var(--sage-deep);
    rotate: -45deg;
}
.row-ink .ticks li::before { border-color: var(--sage-light); }
.row-body .btn { margin-top: var(--space-8); }
@media (min-width: 960px) {
    .row { padding-block: 112px; }
    .row-in {
        column-gap: var(--space-16); row-gap: 0; align-items: center;
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: "media ." "media head" "media body" "media .";
    }
    .row-flip .row-in {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas: ". media" "head media" "body media" ". media";
    }
    .row-body { margin-top: var(--space-6); }
}

/* Pilier 2 : l'heure de la réservation en grand, la nuit, et le téléphone du patient. */
.media-night { display: grid; justify-items: center; }
.big-hour {
    justify-self: start; margin-bottom: -0.18em; white-space: nowrap;
    font: 500 clamp(4.5rem, 1.6rem + 11vw, 9.5rem) / 1 var(--font-mono); letter-spacing: -0.05em; color: var(--sage-light);
}
.media-night .phone { z-index: 1; justify-self: end; width: min(64%, 290px); margin-right: 2%; box-shadow: 0 0 0 1px rgba(250,250,249,.14), 0 30px 60px -20px rgba(0,0,0,.6); }
.media-night .callout { position: relative; translate: none; justify-self: end; margin: calc(-1 * var(--space-6)) 2% 0 0; }

/* Pilier 3 : la frise d'un rendez-vous, posée sur la file d'attente. */
.frise {
    position: relative; z-index: 2; display: grid; gap: var(--space-4);
    margin: calc(-1 * var(--space-6)) var(--space-3) 0; padding: var(--space-5);
    border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-soft-lg);
}
.frise li { position: relative; padding-left: 26px; }
.frise li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: calc(-1 * var(--space-4) - 4px); width: 1px; background: var(--border-strong); }
.frise li:last-child::before { display: none; }
.frise li::after { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--sage-deep); box-shadow: 0 0 0 3px var(--bg-elevated); }
.frise-when { font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.frise-when time { font: 500 14px/20px var(--font-mono); }
.frise-what { margin-top: 2px; font: var(--type-callout); color: var(--text-secondary); text-wrap: pretty; }
@media (min-width: 600px) {
    .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: calc(-1 * var(--space-10)) 5% 0; }
    .frise li { padding: 24px 0 0; }
    .frise li::before { left: 14px; right: calc(-1 * var(--space-5)); top: 5px; bottom: auto; width: auto; height: 1px; }
    .frise li::after { top: 0; }
}

/* Pilier 5 : le téléphone, et le choix de la langue posé à côté. */
.media-pocket { display: grid; justify-items: center; padding-block: var(--space-6); }
.media-pocket .phone { width: min(62%, 300px); }
.media-pocket .callout { left: 2%; top: 24%; }
.lang-chip {
    position: absolute; z-index: 2; right: 2%; bottom: 20%;
    display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md);
    background: var(--bg-muted); box-shadow: var(--shadow-tag);
}
.lang-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.lang-chip .on { background: var(--seg-on-bg); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-seg); }

/* ---------- FAQ : accordéon natif (8b §11) ---------- */
.faq-sec { padding-block: var(--space-16); border-top: 1px solid var(--border-default); }
.split { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
    .faq-sec { padding-block: 112px; }
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
}
.faq { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--border-default); }
.faq summary {
    display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    font: 500 15px/24px var(--font-sans); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: 1; }
.faq summary svg { color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-smooth); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq summary:hover { background: var(--bg-muted); }
.faq summary:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.faq details p { padding: 0 var(--space-5) var(--space-5); font: var(--type-reading); color: var(--text-secondary); max-width: 40em; }

/* ---------- Dernier appel + formulaire, sur la sauge ---------- */
.final { padding-block: var(--space-16); background: var(--sage-deep); }
.final-in { display: grid; gap: var(--space-10); }
.final .prose { margin-top: var(--space-5); max-width: 30em; }
@media (min-width: 960px) {
    .final { padding-block: 112px; }
    .final-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: start; }
    .final-head { position: sticky; top: calc(64px + var(--space-12)); }
}

/* ---------- Formulaire (8a §3-5, auth 8d §8) ---------- */
.form-card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-xl); background: var(--bg-card); box-shadow: 0 2px 6px rgba(28,25,23,.10), 0 32px 64px -24px rgba(28,25,23,.40); }
@media (min-width: 768px) { .form-card { padding: var(--space-10); } }
.form-title { font: 400 clamp(2rem, 1.7rem + 1.2vw, 2.5rem) / 1.1 var(--font-serif); font-size-adjust: 0.55; }
.form-card .prose { margin-top: var(--space-3); margin-bottom: var(--space-6); }
.form-card form { display: grid; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font: var(--type-subhead); color: var(--text-secondary); }
.control {
    position: relative; display: flex; align-items: center; height: var(--control-h); border-radius: var(--radius-md);
    --ctl-border: var(--border-control); --ctl-bw: 1px;
    background: var(--bg-input); color: var(--text-primary);
    transition: box-shadow var(--dur-fast) var(--ease-smooth);
}
.control::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--ctl-bw) var(--ctl-border); pointer-events: none; z-index: 1; }
.control input, .control select {
    flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: inherit; background: transparent; color: inherit;
    font: 500 15px/24px var(--font-sans); outline: none; appearance: none; -webkit-appearance: none;
}
.control input:focus-visible, .control select:focus-visible { box-shadow: none; }
.control input::placeholder { color: var(--text-placeholder); font-weight: 400; opacity: 1; }
.control:hover { --ctl-border: var(--text-muted); }
.control:focus-within { --ctl-border: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-halo); }
.control.is-error { --ctl-border: var(--color-danger-500); }
.control.is-error:focus-within { --ctl-bw: 2px; }
.control.select select { padding-right: 44px; cursor: pointer; }
.control.select select:has(option[value=""]:checked) { color: var(--text-placeholder); font-weight: 400; }
.control.select option { color: var(--text-primary); background: var(--bg-elevated); }
.control .trail { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--text-muted); pointer-events: none; }
@media (max-width: 640px) { .control input, .control select { font-size: 16px; } }
.msg { font: var(--type-footnote); color: var(--text-muted); }
.msg.is-error { display: flex; align-items: flex-start; gap: 6px; color: var(--color-danger-700); }
.form-hint { font: var(--type-footnote); color: var(--text-muted); }
.form-legal { font: var(--type-footnote); color: var(--text-muted); }
.form-legal a { color: var(--text-secondary); }
/* Liens dans une phrase : piste tactile de 44 px sans bouger la mise en page. */
.form-legal a, .alert a, .legal-in a { position: relative; white-space: nowrap; }
.form-legal a::after, .alert a::after, .legal-in a::after { content: ""; position: absolute; inset: -15px -2px; }
/* Piège à robots : hors écran, jamais vu ni atteint par un humain. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Bandeau d'alerte (8b §6) : visible seulement quand l'adresse finit par #demo-erreur. */
.alert {
    display: none; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: var(--space-5);
    border-radius: var(--radius-md); background: var(--color-danger-50); border: 1px solid var(--color-danger-200);
    color: var(--color-danger-700); font: var(--type-callout);
}
.alert:target { display: flex; }
.alert b { font-weight: 600; display: block; }
.alert svg { margin-top: 2px; }
.alert a { color: inherit; }

/* ---------- Pied de page ---------- */
.foot { border-top: 1px solid var(--border-default); padding-block: var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.foot-brand { display: flex; align-items: center; gap: var(--space-3); font: var(--type-callout); color: var(--text-muted); }
.foot-brand svg { color: var(--text-primary); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--control-h); font: var(--type-callout); color: var(--text-secondary); }

/* ---------- Barre « Demander une démo » collante, téléphone seulement ---------- */
/* Pilotée par form.js : invisible sans JavaScript. Forme de la barre d'onglets (8d §5). */
.dock { display: none; }
@media (max-width: 767px) {
    html { scroll-padding-bottom: 96px; }
    .dock {
        display: block; position: fixed; z-index: 20;
        left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
        bottom: calc(12px + env(safe-area-inset-bottom));
        padding: 4px; border-radius: var(--radius-xl);
        background: var(--bg-elevated); box-shadow: var(--shadow-soft-lg);
        visibility: hidden; opacity: 0; transform: translateY(calc(100% + 24px));
        transition: transform var(--dur-move) var(--ease-smooth), opacity var(--dur-move) var(--ease-smooth), visibility 0s linear var(--dur-move);
    }
    .dock.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* ---------- Page « merci » ---------- */
.thanks { padding-block: calc(var(--space-16) + var(--space-8)); min-height: 60vh; }
.thanks .prose { margin-top: var(--space-5); }
.thanks .btn { margin-top: var(--space-8); }

/* ---------- Pages légales : lecture longue ---------- */
.legal { padding-block: var(--space-12) var(--space-16); }
.legal-in { max-width: 42rem; font: var(--type-reading); color: var(--text-secondary); }
.legal-in > * + * { margin-top: var(--space-4); }
.legal-in .legal-date { margin-top: var(--space-4); font: var(--type-callout); color: var(--text-muted); }
.legal-in h2 { margin-top: var(--space-12); font: var(--type-title-2); letter-spacing: var(--track-title-2); color: var(--text-primary); text-wrap: balance; }
.legal-in h2 + * { margin-top: var(--space-3); }
.legal-in strong { font-weight: 600; color: var(--text-primary); }
.legal-in ul { list-style: disc; padding-left: 1.25em; }
.legal-in li + li { margin-top: var(--space-2); }
.legal-in li::marker { color: var(--text-muted); }
.legal-uses > div { padding-block: var(--space-4); border-top: 1px solid var(--border-default); }
.legal-uses > div:last-child { border-bottom: 1px solid var(--border-default); }
.legal-uses dt { font-weight: 500; color: var(--text-primary); }
.legal-uses dd { margin-top: var(--space-2); }
.legal-uses dd span { display: block; font: var(--type-caption); letter-spacing: var(--track-caption); color: var(--text-muted); }
.legal-in table { width: 100%; border-collapse: collapse; font: var(--type-callout); }
.legal-in th, .legal-in td { padding: var(--space-3) var(--space-3) var(--space-3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-default); }
.legal-in th { font: var(--type-caption); letter-spacing: var(--track-caption); color: var(--text-muted); }
.legal-in td:first-child { width: 55%; color: var(--text-primary); }
@media (min-width: 960px) { .legal { padding-block: var(--space-16) calc(var(--space-16) + var(--space-8)); } }

/* Planche de symboles SVG hors flux (classe plutôt que style en ligne : la CSP interdit les styles en ligne) */
.icon-sprite { position: absolute; }

/* ---------- Le seul moment animé : les étiquettes du hero se posent sur le produit ---------- */
@media (prefers-reduced-motion: no-preference) {
    .devices .callout { animation: ff-pop 700ms var(--ease-smooth) backwards; }
    .co-hero-a, .co-hero-m { animation-delay: 500ms; }
    .co-hero-b { animation-delay: 1000ms; }
}
@keyframes ff-pop { from { opacity: 0; scale: .9; filter: blur(3px); } }