/* =========================================================================
   INSTITUT DU BIOHACKING · FEUILLE DE STYLE DU SITE PUBLIC
   Socle de la direction artistique v1.0 (docs/da/socle.css) + composants
   de pages. Aucune valeur en dur : tout passe par les jetons.
   Après toute modification : incrémenter le ?v= dans layout.blade.php.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES (auto-hébergées, htdocs/fonts/ · aucun CDN)
   ------------------------------------------------------------------------- */

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/newsreader-var-latin.woff2") format("woff2-variations");
    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: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/newsreader-var-latin-ext.woff2") format("woff2-variations");
    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: "Newsreader";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/newsreader-var-latin-italic.woff2") format("woff2-variations");
    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: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400.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: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500.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: "Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600.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: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

/* -------------------------------------------------------------------------
   2. JETONS
   ------------------------------------------------------------------------- */

:root {
    /* Couleurs brutes — passer par les rôles ci-dessous dans les composants */
    --nuit-900: #0a141c;
    --nuit-800: #0f1e2b;
    --nuit-700: #172e40;
    --nuit-600: #22415a;

    --encre: #111a22;
    --ardoise: #4e5c68;
    --ardoise-clair: #7a8792;

    --blanc: #ffffff;
    --papier: #f7f5f1;
    --lin: #efeae2;
    --ligne: #e1dad0;
    --ligne-forte: #8a7c6c;
    --ligne-nuit: #2a3d4e;

    --ambre-700: #8f4e1e;
    --ambre-600: #a75d24;
    --ambre-500: #c2762f;
    --ambre-400: #d9924a;
    --ambre-300: #e9b47c;
    --ambre-100: #f6e3cc;

    --sauge: #2f6b54;
    --sauge-clair: #7fbfa3;
    --brique: #9b3226;
    --brique-clair: #e8a79e;

    /* Rôles */
    --fond: var(--papier);
    --fond-alt: var(--lin);
    --fond-sombre: var(--nuit-900);
    --surface: var(--blanc);
    --texte: var(--encre);
    --texte-doux: var(--ardoise);
    --texte-inverse: var(--papier);
    --texte-doux-inverse: var(--ardoise-clair);
    --bordure: var(--ligne);
    --bordure-champ: var(--ligne-forte);
    --bordure-inverse: var(--ligne-nuit);
    --accent: var(--ambre-600);
    --accent-survol: var(--ambre-700);
    --accent-sur-nuit: var(--ambre-400);
    --succes: var(--sauge);
    --erreur: var(--brique);
    --focus: var(--ambre-600);
    --focus-inverse: var(--ambre-400);

    /* Typographie */
    --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
    --sans: "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --pas-2xs: 0.75rem;
    --pas-xs: 0.8125rem;
    --pas-s: 0.9375rem;
    --pas-base: 1.0625rem;
    --pas-m: 1.1875rem;
    --pas-l: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
    --pas-xl: clamp(1.75rem, 1.35rem + 2vw, 2.375rem);
    --pas-2xl: clamp(2.125rem, 1.5rem + 3.1vw, 3.125rem);
    --pas-3xl: clamp(2.5rem, 1.6rem + 4.5vw, 4rem);

    --interligne-titre: 1.08;
    --interligne-chapo: 1.45;
    --interligne-texte: 1.62;

    --graisse-titre: 500;
    --graisse-texte: 400;
    --graisse-appui: 500;
    --graisse-ui: 500;

    --chasse-mono: 0.16em;

    /* Espacements (base 4) */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;
    --e-8: 64px;
    --e-9: 96px;
    --e-10: 128px;
    --section-y: clamp(72px, 9vw, 136px);

    /* Mise en page */
    --largeur-page: 1180px;
    --largeur-lecture: 66ch;
    --gouttiere: clamp(20px, 5vw, 40px);

    /* Formes */
    --rayon-s: 3px;
    --rayon-m: 6px;
    --rayon-l: 12px;
    --trait: 1px;
    --trait-fort: 2px;

    /* Élévation */
    --ombre-1: 0 1px 2px rgba(10, 20, 28, 0.05);
    --ombre-2: 0 12px 32px -18px rgba(10, 20, 28, 0.28);

    /* Mouvement */
    --duree-courte: 130ms;
    --duree: 190ms;
    --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   3. RESET ET BASE
   ------------------------------------------------------------------------- */

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

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

body {
    background: var(--fond);
    color: var(--texte);
    font-family: var(--sans);
    font-size: var(--pas-base);
    font-weight: var(--graisse-texte);
    line-height: var(--interligne-texte);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: var(--graisse-titre);
    line-height: var(--interligne-titre);
    letter-spacing: -0.012em;
    text-wrap: balance;
}

h1 { font-size: var(--pas-3xl); }
h2 { font-size: var(--pas-2xl); }
h3 { font-size: var(--pas-l); letter-spacing: -0.005em; }
h4 { font-size: var(--pas-m); }

p { text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

strong, b { font-weight: 600; }

::selection { background: var(--ambre-100); color: var(--encre); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: var(--rayon-s);
}
.sur-nuit :focus-visible, .section--nuit :focus-visible { outline-color: var(--focus-inverse); }

/* -------------------------------------------------------------------------
   4. UTILITAIRES DE STRUCTURE
   ------------------------------------------------------------------------- */

.page { width: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--gouttiere); }
.lecture { max-width: var(--largeur-lecture); }
.section { padding-block: var(--section-y); }
.section--lin { background: var(--fond-alt); }
.section--nuit { background: var(--fond-sombre); color: var(--texte-inverse); }
.section--nuit h1, .section--nuit h2, .section--nuit h3 { color: var(--blanc); }
.section--nuit p { color: var(--texte-doux-inverse); }
.section--court { padding-block: clamp(48px, 6vw, 88px); }

.surtitre {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}
.surtitre::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    flex: none;
    align-self: center;
}
.surtitre > span, .surtitre > a { display: inline-block; }
.section--nuit .surtitre { color: var(--accent-sur-nuit); }
.surtitre a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.surtitre a:hover { border-bottom-color: currentColor; }

.chapo {
    font-size: var(--pas-m);
    line-height: var(--interligne-chapo);
    color: var(--texte-doux);
    max-width: var(--largeur-lecture);
}
.section--nuit .chapo { color: var(--texte-doux-inverse); }

.evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--nuit-900);
    color: var(--papier);
    padding: var(--e-3) var(--e-4);
    z-index: 10;
}
.evitement:focus { left: var(--e-3); top: var(--e-3); }

.mention { font-size: var(--pas-xs); color: var(--texte-doux); }

/* -------------------------------------------------------------------------
   5. BOUTONS ET LIENS
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.78em 1.5em;
    min-height: 44px;
    border: var(--trait) solid transparent;
    border-radius: var(--rayon-m);
    font-family: var(--sans);
    font-size: var(--pas-s);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duree) var(--courbe),
                border-color var(--duree) var(--courbe),
                color var(--duree) var(--courbe),
                transform var(--duree-courte) var(--courbe);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn--primaire { background: var(--accent); color: var(--blanc); }
.btn--primaire:hover { background: var(--accent-survol); }

.btn--secondaire { background: transparent; color: var(--texte); border-color: var(--ligne-forte); }
.btn--secondaire:hover { background: var(--blanc); border-color: var(--encre); }

.btn--clair { background: var(--papier); color: var(--nuit-900); }
.btn--clair:hover { background: var(--blanc); }
.btn--fantome { background: transparent; color: var(--papier); border-color: rgba(247, 245, 241, 0.35); }
.btn--fantome:hover { border-color: var(--papier); background: rgba(247, 245, 241, 0.08); }

.btn--danger { background: var(--erreur); color: var(--blanc); }
.btn--danger:hover { background: color-mix(in srgb, var(--erreur) 82%, black); }
.btn--petit { padding: 0.55em 1.1em; min-height: 0; font-size: var(--pas-xs); }
.btn--pleine { width: 100%; }

.lien {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding-bottom: 2px;
    transition: border-color var(--duree) var(--courbe), gap var(--duree) var(--courbe);
}
.lien:hover { border-bottom-color: currentColor; gap: 0.75em; }
.section--nuit .lien { color: var(--accent-sur-nuit); }

.lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--pas-s);
    color: var(--texte-doux);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    cursor: pointer;
}
.lien-bouton:hover { color: var(--texte); }

.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* -------------------------------------------------------------------------
   6. CARTES, BADGES, PILIERS, CHIFFRES
   ------------------------------------------------------------------------- */

.carte {
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.carte:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre-2); }
.carte--statique:hover { border-color: var(--bordure); box-shadow: none; }
.carte p { color: var(--texte-doux); font-size: var(--pas-s); }

.pilier { border-top: var(--trait-fort) solid var(--bordure); padding-top: var(--e-4); }
.pilier__num {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: block;
    margin-bottom: var(--e-3);
}
.pilier h3 { margin-bottom: var(--e-2); }
.pilier p { color: var(--texte-doux); font-size: var(--pas-s); }

.badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--e-2);
    padding: 0.3em 0.7em;
    border-radius: var(--rayon-s);
    background: var(--ambre-100);
    color: var(--ambre-700);
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.badge--neutre { background: var(--lin); color: var(--texte-doux); }
.badge--nuit { background: var(--nuit-700); color: var(--papier); }
.badge--succes { background: color-mix(in srgb, var(--sauge) 14%, var(--papier)); color: var(--sauge); }

.chiffre { display: flex; flex-direction: column; gap: var(--e-1); }
.chiffre__valeur {
    font-family: var(--serif);
    font-size: var(--pas-xl);
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}
.chiffre__label {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.section--nuit .chiffre__label { color: var(--texte-doux-inverse); }

blockquote {
    font-family: var(--serif);
    font-size: var(--pas-l);
    font-style: italic;
    line-height: 1.35;
    max-width: 34ch;
    padding-left: var(--e-5);
    border-left: var(--trait-fort) solid var(--accent);
}

.grille { display: grid; gap: var(--e-5); }
.grille--piliers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-6) var(--e-5); }
.grille--cartes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* -------------------------------------------------------------------------
   7. FORMULAIRES
   ------------------------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ > label {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.champ input, .champ select, .champ textarea {
    font-family: var(--sans);
    font-size: var(--pas-base);
    line-height: 1.4;
    color: var(--texte);
    background: var(--blanc);
    border: var(--trait) solid var(--bordure-champ);
    border-radius: var(--rayon-m);
    padding: 0.68em 0.85em;
    width: 100%;
    box-sizing: border-box;
    /* Sans hauteur commune, un select natif et un champ de date ne tombent
       jamais à la même taille : les libellés se décalent et la ligne penche. */
    min-height: 3rem;
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
/* Hauteur imposée plutôt que minimale : un champ de date embarque ses propres
   sous-éléments et retombe sinon deux pixels au-dessus des autres. */
.champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.champ select { height: 3rem; padding-block: 0; }
.champ textarea { min-height: 0; height: auto; padding-block: 0.68em; }

/* Le select natif impose sa propre hauteur et sa propre flèche : on reprend
   les deux, avec un chevron dessiné en SVG plutôt qu'une police d'icônes. */
.champ select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234e5c68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
    background-size: 12px 8px;
}

/* Safari centre mal le contenu d'un champ de date ; on le rattrape. */
.champ input[type="date"] { -webkit-appearance: none; appearance: none; }
.champ input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.champ input:hover, .champ textarea:hover { border-color: var(--encre); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.champ__aide { font-size: var(--pas-xs); color: var(--texte-doux); }
.champ__erreur { font-size: var(--pas-xs); color: var(--erreur); font-weight: 500; }
.champ[data-erreur] input { border-color: var(--erreur); }

.champ-case { display: flex; align-items: flex-start; gap: var(--e-3); }
.champ-case input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.champ-case label { font-size: var(--pas-s); color: var(--texte-doux); }

.formulaire { display: flex; flex-direction: column; gap: var(--e-5); }

/* Message d'état */
.avis {
    border-left: var(--trait-fort) solid var(--accent);
    background: var(--ambre-100);
    color: var(--ambre-700);
    padding: var(--e-3) var(--e-4);
    border-radius: 0 var(--rayon-m) var(--rayon-m) 0;
    font-size: var(--pas-s);
}
.avis a { color: inherit; font-weight: 600; }
.avis--succes { border-left-color: var(--succes); background: color-mix(in srgb, var(--sauge) 10%, var(--papier)); color: var(--sauge); }
.avis--erreur { border-left-color: var(--erreur); background: color-mix(in srgb, var(--brique) 8%, var(--papier)); color: var(--brique); }

/* -------------------------------------------------------------------------
   8. EN-TÊTE ET PIED DE PAGE
   ------------------------------------------------------------------------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--papier) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: var(--trait) solid var(--bordure);
}
.entete__rang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
    padding-block: var(--e-4);
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    color: var(--nuit-900);
    flex: none;
}
.marque svg { width: 34px; height: 34px; }
.marque__nom {
    font-family: var(--serif);
    font-size: var(--pas-m);
    font-weight: 520;
    letter-spacing: 0.006em;
    line-height: 1.1;
}
.marque--pied { color: var(--papier); }
.marque--pied .marque__nom { color: var(--papier); }

.nav { display: flex; align-items: center; gap: var(--e-6); }
.nav a {
    font-size: var(--pas-s);
    font-weight: 500;
    text-decoration: none;
    color: var(--texte-doux);
    padding-block: var(--e-1);
    border-bottom: 1px solid transparent;
    transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.nav a:hover { color: var(--texte); border-bottom-color: var(--accent); }

.entete__actions { display: flex; align-items: center; gap: var(--e-4); flex: none; }
.entete__session { font-size: var(--pas-s); font-weight: 500; text-decoration: none; color: var(--texte); }
.entete__session:hover { color: var(--accent); }

.pied {
    background: var(--nuit-800);
    color: var(--texte-doux-inverse);
    padding-block: var(--e-8) var(--e-6);
}
.pied__haut {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--e-7);
    padding-bottom: var(--e-7);
    border-bottom: var(--trait) solid var(--bordure-inverse);
}
.pied__signature {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ardoise-clair);
    margin-top: var(--e-3);
}
.pied__colonne h2 {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--papier);
    margin-bottom: var(--e-4);
}
.pied__liens { display: flex; flex-direction: column; gap: var(--e-3); }
.pied__liens a { font-size: var(--pas-s); text-decoration: none; color: var(--ardoise-clair); }
.pied__liens a:hover { color: var(--papier); }
.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-3) var(--e-6);
    padding-top: var(--e-5);
    font-size: var(--pas-xs);
    color: var(--ardoise-clair);
}

/* -------------------------------------------------------------------------
   9. PAGE D'ACCUEIL
   ------------------------------------------------------------------------- */

.heros {
    background: var(--fond-sombre);
    color: var(--texte-inverse);
    padding-block: clamp(88px, 12vw, 168px);
    position: relative;
    overflow: hidden;
}
.heros::after {
    content: "";
    position: absolute;
    inset-block: 0;
    right: calc(var(--gouttiere) * -1);
    width: 46%;
    background: radial-gradient(60% 55% at 70% 30%, rgba(217, 146, 74, 0.10), transparent 70%);
    pointer-events: none;
}
.heros__contenu { position: relative; z-index: 1; max-width: 64ch; }
.heros h1 { color: var(--blanc); }
.heros .chapo { margin-top: var(--e-5); color: var(--texte-doux-inverse); max-width: 52ch; }
.heros .actions { margin-top: var(--e-7); }
.heros__chiffres {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--e-5);
    margin-top: clamp(48px, 7vw, 88px);
    padding-top: var(--e-6);
    border-top: var(--trait) solid var(--bordure-inverse);
    list-style: none;
}
.heros__chiffres .chiffre__valeur { color: var(--blanc); }

.section__entete { max-width: var(--largeur-lecture); margin-bottom: clamp(40px, 5vw, 64px); }
.section__entete h2 + .chapo { margin-top: var(--e-4); }

.offre-carte { justify-content: space-between; }
.offre-carte h3 { margin-top: var(--e-1); }
.offre-carte__accroche { color: var(--texte-doux); font-size: var(--pas-s); }
.offre-carte__prix {
    font-family: var(--serif);
    font-size: var(--pas-xl);
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
    margin-top: var(--e-2);
}
.offre-carte .btn { margin-top: var(--e-4); }

.vide {
    border: var(--trait) dashed var(--ligne-forte);
    border-radius: var(--rayon-l);
    padding: var(--e-7);
    text-align: center;
    color: var(--texte-doux);
    background: var(--surface);
}
.vide h2, .vide h3 { color: var(--texte); margin-bottom: var(--e-3); }
.vide p + p { margin-top: var(--e-3); }
.vide .btn { margin-top: var(--e-5); }

.fondateur { gap: var(--e-4); }
.fondateur__marque {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: var(--trait) solid var(--bordure);
    background: var(--lin);
    color: var(--nuit-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: var(--pas-s);
    font-weight: 500;
    letter-spacing: 0.08em;
}
.fondateur__role {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.fondateurs__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-6);
    margin-top: var(--e-7);
}

.bandeau {
    background: var(--fond-sombre);
    color: var(--texte-inverse);
    padding-block: clamp(64px, 8vw, 112px);
}
.bandeau__grille {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-6);
}
.bandeau h2 { color: var(--blanc); max-width: 20ch; }

/* -------------------------------------------------------------------------
   10. PAGE DE VENTE
   ------------------------------------------------------------------------- */

.offre-heros__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.offre-heros .chapo { margin-top: var(--e-5); }

.panneau-prix {
    background: var(--nuit-800);
    border: var(--trait) solid var(--bordure-inverse);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    position: sticky;
    top: 96px;
}
.panneau-prix__montant {
    font-family: var(--serif);
    font-size: var(--pas-2xl);
    font-weight: 500;
    line-height: 1;
    color: var(--blanc);
    font-variant-numeric: lining-nums tabular-nums;
}
.panneau-prix__note { font-size: var(--pas-s); color: var(--texte-doux-inverse); }
.panneau-prix form { margin-top: var(--e-2); }
.panneau-prix__mention { font-size: var(--pas-xs); color: var(--ardoise-clair); }
.panneau-prix .avis { background: var(--nuit-700); color: var(--papier); border-left-color: var(--accent-sur-nuit); }
.panneau-prix .btn--attente {
    background: var(--nuit-700);
    color: var(--texte-doux-inverse);
    width: 100%;
    cursor: default;
    border-color: var(--bordure-inverse);
}

.programme { display: grid; gap: var(--e-4); }
.programme__item {
    border-top: var(--trait) solid var(--bordure);
    padding-top: var(--e-4);
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    align-items: flex-start;
}
.programme__item p { color: var(--texte-doux); font-size: var(--pas-s); }

.prose { max-width: var(--largeur-lecture); }
.prose h2 { font-size: var(--pas-xl); margin: var(--e-6) 0 var(--e-3); }
.prose h3 { margin: var(--e-5) 0 var(--e-2); }
.prose p { margin-bottom: var(--e-4); }
.prose ul, .prose ol { margin: 0 0 var(--e-4) var(--e-5); }
.prose li { margin-bottom: var(--e-2); }
.prose a { color: var(--accent); font-weight: 500; }
.prose img { border-radius: var(--rayon-l); margin: var(--e-4) 0; }

/* -------------------------------------------------------------------------
   11. FORMULAIRES DE COMPTE
   ------------------------------------------------------------------------- */

.panneau-formulaire {
    max-width: 460px;
    margin-inline: auto;
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: clamp(28px, 4vw, 44px);
}
.panneau-formulaire h1 { font-size: var(--pas-xl); margin-bottom: var(--e-3); }
.panneau-formulaire .chapo { font-size: var(--pas-s); margin-bottom: var(--e-6); }
.panneau-formulaire .avis { margin-bottom: var(--e-5); }
.alternative { margin-top: var(--e-5); font-size: var(--pas-s); color: var(--texte-doux); text-align: center; }
.alternative a { color: var(--accent); font-weight: 500; }

/* -------------------------------------------------------------------------
   12. ESPACE MEMBRE
   ------------------------------------------------------------------------- */

.espace__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
    margin-bottom: clamp(40px, 5vw, 64px);
}
.espace__identite { display: flex; align-items: center; gap: var(--e-5); }
.espace__identite h1 { font-size: var(--pas-xl); }

.avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--nuit-900);
    color: var(--ambre-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: var(--pas-l);
    flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; margin-top: var(--e-2); }
.form-en-ligne { display: inline; }

.avatar-modale {
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
    max-width: 520px;
    width: 92%;
    background: var(--surface);
    color: var(--texte);
}
.avatar-modale::backdrop { background: rgba(10, 20, 28, 0.6); }
.avatar-modale h2 { font-size: var(--pas-l); margin-bottom: var(--e-2); }
.avatar-modale input[type="file"] { font-size: var(--pas-s); margin-block: var(--e-4); }
.avatar-cadre { max-height: 320px; overflow: hidden; border-radius: var(--rayon-m); background: var(--lin); }
.avatar-modale .cropper-view-box, .avatar-modale .cropper-face { border-radius: 50%; }
.avatar-modale__actions { display: flex; align-items: center; gap: var(--e-5); margin-top: var(--e-5); }

.espace__outils { margin-bottom: var(--e-5); }

.page-compte { max-width: 760px; }
.page-compte h1 { font-size: var(--pas-xl); margin-bottom: var(--e-4); }
.suppression__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--e-6);
    margin-block: var(--e-7);
    padding: var(--e-6);
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
}
.suppression__colonnes h2 { font-size: var(--pas-m); margin-bottom: var(--e-3); }
.liste-lisible { list-style: none; display: flex; flex-direction: column; gap: var(--e-2); }
.liste-lisible li {
    font-size: var(--pas-s);
    color: var(--texte-doux);
    padding-left: var(--e-4);
    position: relative;
}
.liste-lisible li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 1px;
    background: var(--ligne-forte);
}
.suppression__form { margin-top: var(--e-7); max-width: 420px; }

/* Une ligne de champs : ils partagent la largeur et s'alignent par le haut,
   donc les libellés restent sur la même ligne quelle que soit la hauteur. */
.champs-ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
    gap: var(--e-5);
}

/* --- Mon compte --- */
.compte {
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: var(--e-6);
    border-top: var(--trait) solid var(--bordure);
}
.compte__entete { margin-bottom: var(--e-5); }
.compte__entete h2 { font-size: var(--pas-l); margin-bottom: var(--e-1); }

.compte__bloc {
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
    margin-bottom: var(--e-4);
}
.compte__bloc-entete { margin-bottom: var(--e-5); }
.compte__bloc-entete h3 { font-size: var(--pas-m); margin-bottom: var(--e-2); }
.compte__bloc-entete p { font-size: var(--pas-s); color: var(--texte-doux); max-width: 62ch; }
.compte__form > .mention { margin-top: var(--e-4); max-width: 62ch; }
.compte__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5);
    margin-top: var(--e-5);
}
.compte__annuler { display: inline-block; margin-top: var(--e-2); }
.compte__sortie { margin-top: var(--e-5); font-size: var(--pas-s); }
.compte__sortie a { color: var(--texte-doux); }
.compte__sortie a:hover { color: var(--erreur); }

.formation-carte { justify-content: space-between; }
.formation-carte h3 { margin-top: var(--e-1); }
.formation-carte .btn { margin-top: var(--e-4); }

/* -------------------------------------------------------------------------
   13. ESPACE DE FORMATION (LMS)
   ------------------------------------------------------------------------- */

.lms { max-width: 860px; }
.lms h1 { font-size: var(--pas-xl); margin-bottom: var(--e-5); }

.progression { margin-bottom: clamp(40px, 5vw, 56px); }
.progression__barre {
    height: 6px;
    background: var(--ligne);
    border-radius: var(--rayon-s);
    overflow: hidden;
}
.progression__barre span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width var(--duree) var(--courbe);
}
.progression__label {
    margin-top: var(--e-2);
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.chapitre { margin-bottom: var(--e-7); }
.chapitre h2 {
    font-size: var(--pas-l);
    padding-bottom: var(--e-3);
    border-bottom: var(--trait-fort) solid var(--bordure);
    margin-bottom: var(--e-4);
}
.lecons { list-style: none; display: grid; gap: var(--e-2); }
.lecon {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-m);
    padding: var(--e-4) var(--e-5);
    transition: border-color var(--duree) var(--courbe);
}
.lecon:hover { border-color: var(--ligne-forte); }
.lecon a { text-decoration: none; font-weight: 500; }
.lecon a:hover { color: var(--accent); }
.lecon__etat {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pas-xs);
    background: var(--lin);
    color: var(--texte-doux);
    flex: none;
}
.lecon--faite .lecon__etat { background: color-mix(in srgb, var(--sauge) 16%, var(--papier)); color: var(--sauge); }
.lecon--bloquee { opacity: 0.55; }
.lecon--bloquee:hover { border-color: var(--bordure); }
.lecon__bloquee { color: var(--texte-doux); }
.lecon__bloquee small { font-family: var(--mono); font-size: var(--pas-2xs); letter-spacing: 0.08em; text-transform: uppercase; }

.a-propos {
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: var(--e-6);
    border-top: var(--trait) solid var(--bordure);
}
.a-propos h2 { font-size: var(--pas-l); margin-bottom: var(--e-3); }
.a-propos__resume { font-weight: 500; margin-bottom: var(--e-3); }
.a-propos__texte { color: var(--texte-doux); max-width: var(--largeur-lecture); }
.a-propos__texte p { margin-bottom: var(--e-3); }
.a-propos__texte img { border-radius: var(--rayon-l); margin: var(--e-3) 0; }

.video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rayon-l);
    overflow: hidden;
    background: var(--nuit-900);
    margin-bottom: var(--e-6);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--attente {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lin);
    border: var(--trait) dashed var(--ligne-forte);
    color: var(--texte-doux);
    font-size: var(--pas-s);
    text-align: center;
    padding: var(--e-5);
}

.lecon-contenu { max-width: var(--largeur-lecture); }
.lecon-contenu p { margin-bottom: var(--e-4); }
.lecon-contenu h2 { font-size: var(--pas-l); margin: var(--e-6) 0 var(--e-3); }
.lecon-contenu h3 { margin: var(--e-5) 0 var(--e-2); }
.lecon-contenu ul, .lecon-contenu ol { margin: 0 0 var(--e-4) var(--e-5); }
.lecon-contenu li { margin-bottom: var(--e-2); }
.lecon-contenu a { color: var(--accent); font-weight: 500; }
.lecon-contenu img { border-radius: var(--rayon-l); margin: var(--e-4) 0; }

.lecon-actions { margin-block: var(--e-7) var(--e-6); }
.lecon-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--e-5);
    padding-top: var(--e-5);
    border-top: var(--trait) solid var(--bordure);
}

/* Auto-évaluation */
.quiz {
    margin-top: var(--e-7);
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
}
.quiz h2 { font-size: var(--pas-l); margin-bottom: var(--e-2); }
.quiz-hint { color: var(--texte-doux); font-size: var(--pas-s); margin-bottom: var(--e-5); }
.quiz-question { border: 0; border-top: var(--trait) solid var(--bordure); padding-block: var(--e-5); }
.quiz-question legend { font-weight: 600; padding-bottom: var(--e-3); }
.quiz-option {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--rayon-m);
    cursor: pointer;
    font-size: var(--pas-s);
}
.quiz-option:hover { background: var(--lin); }
.quiz-option input { accent-color: var(--accent); }
.quiz-question.is-right legend::after { content: " — bonne réponse"; color: var(--succes); font-weight: 500; }
.quiz-question.is-wrong legend::after { content: " — pas tout à fait"; color: var(--erreur); font-weight: 500; }
.quiz-question.is-empty legend::after { content: " — répondez pour vérifier"; color: var(--texte-doux); font-weight: 400; }
.quiz-correct-answer { background: color-mix(in srgb, var(--sauge) 12%, var(--papier)); }
.quiz-explanation {
    margin-top: var(--e-3);
    font-size: var(--pas-s);
    color: var(--texte-doux);
    background: var(--lin);
    border-radius: var(--rayon-m);
    padding: var(--e-3) var(--e-4);
}
.quiz-footer {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    border-top: var(--trait) solid var(--bordure);
    padding-top: var(--e-5);
}
.quiz-score {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

/* -------------------------------------------------------------------------
   14. PAGES LIBRES, JOURNAL, REMERCIEMENT
   ------------------------------------------------------------------------- */

.page-libre { max-width: 760px; }
.page-libre h1 { font-size: var(--pas-2xl); margin-bottom: var(--e-6); }

.journal { max-width: 820px; }
.journal__liste { display: grid; gap: clamp(32px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }

/* Une journée, et dessous tout ce qui a été livré ce jour-là. */
.journee { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--e-5); }
.journee__entete {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1);
    padding-top: var(--e-5);
    border-top: var(--trait-fort) solid var(--ligne-forte);
}
.journee__date {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte);
}
.journee__compte { font-size: var(--pas-2xs); color: var(--ardoise-clair); }
.journee__entrees { display: grid; gap: var(--e-5); padding-top: var(--e-5); border-top: var(--trait) solid var(--bordure); }

.entree { display: grid; gap: var(--e-3); justify-items: start; }
.entree h2 { font-size: var(--pas-m); margin-bottom: var(--e-2); }
.entree p { color: var(--texte-doux); font-size: var(--pas-s); }

@media (max-width: 720px) {
    .journee { grid-template-columns: 1fr; gap: var(--e-4); }
    .journee__entrees { border-top: 0; padding-top: 0; }
}

.merci { max-width: 640px; }
.merci h1 { font-size: var(--pas-2xl); margin-bottom: var(--e-4); }
.merci .chapo { margin-bottom: var(--e-4); }
.merci .btn { margin-top: var(--e-5); }

/* -------------------------------------------------------------------------
   14 bis. LES OUTILS
   ------------------------------------------------------------------------- */

/* --- La grille des outils : une carte par outil, image comprise --- */

.grille--outils { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--e-6); }

.outils-groupe + .outils-groupe { margin-top: var(--e-8); }
.outils-groupe__titre {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-doux);
    padding-bottom: var(--e-3);
    border-bottom: var(--trait) solid var(--bordure);
    margin-bottom: var(--e-5);
}
.outils-groupe__chapo {
    font-size: var(--pas-s);
    color: var(--texte-doux);
    margin-top: calc(var(--e-5) * -1 + var(--e-1));
    margin-bottom: var(--e-5);
}

.outil-carte {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    overflow: hidden;
    transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.outil-carte:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre-2); transform: translateY(-2px); }

/* Le visuel : ce qui donne envie. Verrouillé, il se voit sans se livrer. */
.outil-carte__visuel {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--nuit-800);
    overflow: hidden;
}
.outil-carte__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duree) var(--courbe), filter var(--duree) var(--courbe);
}
.outil-carte:hover .outil-carte__visuel img { transform: scale(1.03); }

.outil-carte__visuel-vide {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, var(--nuit-700), var(--nuit-900));
    color: var(--accent-sur-nuit);
    font-family: var(--serif);
    font-size: var(--pas-3xl);
    line-height: 1;
    opacity: 0.9;
}

/* Le voile du verrou : l'image reste lisible, mais visiblement fermée. */
.outil-carte--verrouille .outil-carte__visuel img,
.outil-carte--bientot .outil-carte__visuel img { filter: grayscale(1) contrast(0.94) brightness(0.86); }
.outil-carte--verrouille:hover .outil-carte__visuel img,
.outil-carte--bientot:hover .outil-carte__visuel img { filter: grayscale(0.15) contrast(1) brightness(1); }
.outil-carte--verrouille .outil-carte__visuel::after,
.outil-carte--bientot .outil-carte__visuel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 20, 28, 0.55), rgba(10, 20, 28, 0.12));
    transition: opacity var(--duree) var(--courbe);
}
.outil-carte--verrouille:hover .outil-carte__visuel::after { opacity: 0.4; }
.outil-carte--bientot:hover .outil-carte__visuel::after { opacity: 0.6; }

.outil-carte__nature {
    position: absolute;
    left: var(--e-4);
    bottom: var(--e-4);
    z-index: 1;
    background: rgba(10, 20, 28, 0.82);
    backdrop-filter: blur(6px);
}

.outil-carte__sceau {
    position: absolute;
    top: var(--e-4);
    right: var(--e-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0.35em 0.7em;
    border-radius: var(--rayon-s);
    background: rgba(10, 20, 28, 0.82);
    backdrop-filter: blur(6px);
    color: var(--papier);
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.outil-carte--verrouille .outil-carte__sceau { color: var(--accent-sur-nuit); }
.outil-carte--bientot .outil-carte__sceau { color: var(--texte-doux-inverse); }
.outil-carte--offert .outil-carte__sceau { color: var(--sauge-clair); }

.outil-carte__corps {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    flex: 1;
    padding: var(--e-6) var(--e-6) var(--e-5);
}
.outil-carte__corps h3 { font-size: var(--pas-l); }
.outil-carte__accroche { font-size: var(--pas-s); color: var(--texte); }
.outil-carte__texte { font-size: var(--pas-s); color: var(--texte-doux); }

/* La promesse chiffrée : le contenu réel de l'outil, en un chiffre. */
.outil-carte__promesse {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-top: auto;
    padding-top: var(--e-4);
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.outil-carte__promesse::before {
    content: "";
    width: 18px;
    height: var(--trait);
    background: var(--accent);
    flex: none;
}

/* Le bandeau de statut : ouvert, offert, ou verrouillé avec son prix. */
.outil-carte__statut {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-5) var(--e-6);
    border-top: var(--trait) solid var(--bordure);
    background: var(--fond);
}
.outil-carte--verrouille .outil-carte__statut,
.outil-carte--bientot .outil-carte__statut { background: var(--fond-sombre); border-top-color: var(--bordure-inverse); }
.outil-carte--verrouille .outil-carte__statut .mention,
.outil-carte--bientot .outil-carte__statut .mention { color: var(--texte-doux-inverse); }

.outil-carte__etat {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.outil-carte--ouvert .outil-carte__etat { color: var(--succes); }
.outil-carte--offert .outil-carte__etat { color: var(--succes); }
.outil-carte--verrouille .outil-carte__etat,
.outil-carte--bientot .outil-carte__etat { color: var(--texte-doux-inverse); }

.outil-carte__pastille {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.outil-carte--verrouille .outil-carte__pastille { background: var(--accent-sur-nuit); }
.outil-carte--bientot .outil-carte__pastille { background: var(--texte-doux-inverse); }

.outil-carte__prix {
    margin-left: auto;
    color: var(--texte);
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: var(--pas-xs);
}
.outil-carte--verrouille .outil-carte__prix { color: var(--accent-sur-nuit); }

.outil-carte__formules { list-style: none; display: grid; gap: var(--e-1); margin-top: var(--e-1); }
.outil-carte__formules a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-2) 0;
    border-top: var(--trait) solid var(--bordure-inverse);
    color: var(--texte-doux-inverse);
    font-size: var(--pas-xs);
    text-decoration: none;
}
.outil-carte__formules a:hover { color: var(--papier); }
.outil-carte__mention-rdv {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-sur-nuit);
}
.outil-carte__formule-prix { flex: none; font-variant-numeric: lining-nums tabular-nums; color: var(--papier); }

.outil__avertissement { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--trait) solid var(--bordure); }

.outil-page { max-width: 880px; }
.outil-page h1 { font-size: var(--pas-xl); margin-bottom: var(--e-4); }

.avis--local {
    border-left-color: var(--succes);
    background: color-mix(in srgb, var(--sauge) 9%, var(--papier));
    color: var(--sauge);
    margin-block: var(--e-5);
}

/* Visible pour les lecteurs d'écran uniquement */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.champ__unite { text-transform: none; letter-spacing: 0; color: var(--ardoise-clair); }
.champ__precedent { color: var(--accent); }
.grille--marqueurs { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e-5); }

/* --- Lecture de bilan : le profil qui règle les repères --- */
.bilan__profil {
    margin-block: var(--e-6);
    padding: var(--e-5) var(--e-6);
    background: var(--fond-alt);
    border-radius: var(--rayon-l);
}
.bilan__profil-etat { font-size: var(--pas-s); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.bilan__pastille {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--succes); flex: none;
}
.bilan__profil-manquant h2 { font-size: var(--pas-m); margin-bottom: var(--e-2); }
.bilan__profil-manquant p { font-size: var(--pas-s); color: var(--texte-doux); }
.bilan__profil-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
    gap: var(--e-4);
    margin-block: var(--e-5) var(--e-3);
    max-width: 640px;
}
.bilan__profil .mention { margin-top: var(--e-3); }

/* --- Les trois étapes --- */
.bilan__etape { margin-top: var(--e-8); padding-top: var(--e-6); border-top: var(--trait-fort) solid var(--bordure); }
.bilan__etape-entete { margin-bottom: var(--e-5); }
.bilan__etape-entete h2 { font-size: var(--pas-l); margin-block: var(--e-1) var(--e-2); }
.bilan__etape-entete .chapo { font-size: var(--pas-s); }

/* --- Étape 1 : le menu des analyses --- */
.bilan__outils-choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5); }
.champ--recherche { flex: 1 1 280px; }
.bilan__prereglages { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.bilan__compteur {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block: var(--e-4) var(--e-5);
}
.bilan__familles { display: flex; flex-direction: column; gap: var(--e-2); }
.bilan__famille {
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--surface);
}
.bilan__famille > summary {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    cursor: pointer;
    list-style: none;
}
.bilan__famille > summary::-webkit-details-marker { display: none; }
.bilan__famille > summary::after {
    content: "+";
    color: var(--texte-doux);
    font-family: var(--mono);
    margin-left: auto;
}
.bilan__famille[open] > summary::after { content: "–"; }
.bilan__famille-nom { font-weight: var(--graisse-appui); }
.bilan__famille-compte {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.bilan__cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--e-2) var(--e-4);
    padding: 0 var(--e-4) var(--e-4);
}
.bilan__case { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--pas-s); cursor: pointer; }
.bilan__case input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.bilan__case-unite { color: var(--ardoise-clair); font-size: var(--pas-xs); margin-left: var(--e-1); }

/* --- Étape 2 : la saisie --- */
.bilan__import { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
/* --- Lecture automatique d'une feuille (PDF) --- */
.bilan__pdf {
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-m);
    background: var(--surface);
    margin-bottom: var(--e-6);
}
.bilan__pdf > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-4);
    cursor: pointer;
    list-style: none;
    font-weight: var(--graisse-appui);
}
.bilan__pdf > summary::-webkit-details-marker { display: none; }
.bilan__pdf-cout {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.06em;
    color: var(--accent);
    font-weight: 400;
}
.bilan__pdf-corps { padding: 0 var(--e-4) var(--e-5); }
.bilan__pdf-corps h3 { font-size: var(--pas-s); margin-bottom: var(--e-3); }
.bilan__pdf-form { margin-top: var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); max-width: 460px; }
.bilan__pdf-bilan { margin-top: var(--e-5); padding-top: var(--e-4); border-top: var(--trait) solid var(--bordure); }
.bilan__pdf-bilan p { font-size: var(--pas-s); }
.bilan__pdf-bilan p + p { margin-top: var(--e-2); }
.bilan__pdf-succes { color: var(--succes); font-weight: var(--graisse-appui); }

.bilan__groupe { border: 0; padding: 0; margin-bottom: var(--e-7); }
.bilan__groupe legend {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--texte-doux);
    padding-bottom: var(--e-3);
}
.bilan__repere-libelle { color: var(--accent); }
.bilan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5); margin-top: var(--e-6); }

/* --- Étape 3 : la lecture --- */
.bilan__synthese {
    padding: var(--e-5);
    background: var(--fond-alt);
    border-radius: var(--rayon-m);
    margin-bottom: var(--e-5);
}
.bilan__synthese-phrase { font-family: var(--serif); font-size: var(--pas-m); margin-bottom: var(--e-2); }
.bilan__filtre { margin-bottom: var(--e-6); }
.resultats__famille { margin-bottom: var(--e-7); }
.resultats__famille-nom {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: var(--e-4);
}

.resultat {
    border-left: var(--trait-fort) solid var(--bordure);
    padding: var(--e-3) 0 var(--e-4) var(--e-5);
    margin-bottom: var(--e-5);
}
.resultat__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.resultat h3 { font-size: var(--pas-m); }
.resultat__valeur { font-family: var(--mono); font-size: var(--pas-m) !important; color: var(--texte) !important; }
.resultat p { color: var(--texte-doux); font-size: var(--pas-s); }
.resultat p + p { margin-top: var(--e-2); }
.resultat__etat {
    font-family: var(--mono);
    font-size: var(--pas-2xs) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: var(--e-1) !important;
}
.resultat__evolution { color: var(--accent) !important; }
.resultat--normal { border-left-color: var(--succes); }
.resultat--normal .resultat__etat { color: var(--succes); }
.resultat--bas, .resultat--haut { border-left-color: var(--accent); }
.resultat--bas .resultat__etat, .resultat--haut .resultat__etat { color: var(--accent); }

/* --- La jauge : la valeur, située --- */
.jauge { margin-block: var(--e-4) var(--e-3); }
.jauge__piste {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--lin);
}
.jauge__zone {
    position: absolute;
    top: 0; bottom: 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--sauge) 35%, var(--lin));
}
.jauge__point {
    position: absolute;
    top: 50%;
    width: 13px; height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--accent);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--accent);
}
.jauge--normal .jauge__point { background: var(--sauge); box-shadow: 0 0 0 1px var(--sauge); }
.jauge__precedent {
    position: absolute;
    top: 50%;
    width: 2px; height: 12px;
    margin-left: -1px;
    transform: translateY(-50%);
    background: var(--ardoise-clair);
}
.jauge__bornes {
    font-family: var(--mono);
    font-size: var(--pas-2xs) !important;
    letter-spacing: 0.06em;
    color: var(--texte-doux);
    margin-top: var(--e-2);
}

.rendez-vous {
    margin-top: var(--e-7);
    background: var(--nuit-800);
    color: var(--texte-inverse);
    border-radius: var(--rayon-l);
    padding: var(--e-6);
}
.rendez-vous h3 { color: var(--blanc); margin-bottom: var(--e-3); }
.rendez-vous p { color: var(--texte-doux-inverse); font-size: var(--pas-s); margin-bottom: var(--e-5); }

@media print {
    .entete, .pied, .rendez-vous, .evitement, .avis--local,
    .bilan__saisie, .bilan__etape#etape-choix, .bilan__profil-form,
    .bilan__actions, .bilan__filtre { display: none !important; }
    body { background: var(--blanc); }
    .section { padding-block: 0; }
    .bilan__resultats { border-top: 0; margin-top: var(--e-4); padding-top: 0; }
    .bilan__synthese { background: none; padding: 0; }
    .resultat { break-inside: avoid; }
    .resultats__famille { break-inside: avoid; }
}

/* -------------------------------------------------------------------------
   14 ter. HABITUDES — INSTALLATION ET PLANS
   ------------------------------------------------------------------------- */

.etapes { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-5); }
.etapes__rang {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--texte-doux);
}
.etapes__jauge { display: flex; gap: var(--e-1); }
.etapes__jauge span { width: 26px; height: 3px; border-radius: 2px; background: var(--ligne); }
.etapes__jauge span.is-faite { background: var(--accent); }

.famille { margin-bottom: var(--e-7); }
.famille h2 {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: var(--e-4);
}

.habitude-choix { justify-content: space-between; }
.habitude-choix h3 { font-size: var(--pas-m); margin-bottom: var(--e-2); }
.habitude-choix__fourchette { font-size: var(--pas-s); color: var(--texte-doux); }
.habitude-choix .btn { margin-top: var(--e-4); }

.preuves { margin-top: var(--e-3); }
.preuves summary {
    font-size: var(--pas-xs);
    color: var(--accent);
    cursor: pointer;
    list-style: none;
}
.preuves summary::-webkit-details-marker { display: none; }
.preuves summary::before { content: "› "; }
.preuves[open] summary::before { content: "⌄ "; }
.preuves p { font-size: var(--pas-xs); color: var(--texte-doux); margin-top: var(--e-2); }

.choix { display: grid; gap: var(--e-3); max-width: var(--largeur-lecture); margin-top: var(--e-5); }
.choix__option {
    text-align: left;
    font-family: var(--sans);
    font-size: var(--pas-base);
    color: var(--texte);
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-m);
    padding: var(--e-4) var(--e-5);
    min-height: 44px;
    cursor: pointer;
    transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.choix__option:hover { border-color: var(--ligne-forte); background: var(--lin); }
.choix__option.is-choisi { border-color: var(--accent); border-width: var(--trait-fort); }

.parade { margin-top: var(--e-8); padding-top: var(--e-6); border-top: var(--trait) solid var(--bordure); }
.parade h2 { font-size: var(--pas-l); margin-bottom: var(--e-2); }

.phrase-plan {
    font-family: var(--serif);
    font-size: var(--pas-l);
    line-height: 1.35;
    margin-block: var(--e-5);
    padding-left: var(--e-5);
    border-left: var(--trait-fort) solid var(--accent);
    max-width: 46ch;
}
.phrase-plan strong { font-weight: 600; color: var(--accent); }
.phrase-plan--petite { font-size: var(--pas-m); margin-block: var(--e-3); }

.fourchette {
    background: var(--lin);
    border-radius: var(--rayon-l);
    padding: var(--e-5) var(--e-6);
    margin-block: var(--e-7);
    max-width: var(--largeur-lecture);
}
.fourchette p { font-size: var(--pas-s); }
.fourchette .mention { margin-top: var(--e-2); }

.habitudes { display: grid; gap: var(--e-4); }
.habitude { gap: var(--e-4); }
.habitude h2 { font-size: var(--pas-l); }
.habitude__depuis {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: var(--e-3);
}
.habitudes__pied { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }

/* -------------------------------------------------------------------------
   14 quater. HABITUDES — LA JOURNÉE ET LE TABLEAU DE BORD
   ------------------------------------------------------------------------- */

.jour h2, .rattrapage h2 {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    font-weight: 500;
    letter-spacing: var(--chasse-mono);
    text-transform: uppercase;
    color: var(--texte-doux);
    margin-bottom: var(--e-4);
}

.jour__ligne {
    background: var(--surface);
    border: var(--trait) solid var(--bordure);
    border-radius: var(--rayon-l);
    padding: var(--e-5) var(--e-6);
    margin-bottom: var(--e-4);
}
.jour__ligne h3 { font-size: var(--pas-m); margin-bottom: var(--e-4); }

.jour__gestes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.jour__gestes .btn { flex: 1 1 auto; min-width: 140px; }

.jour__niveaux { flex-direction: column; align-items: stretch; gap: var(--e-2); }
.jour__question {
    font-size: var(--pas-s);
    color: var(--texte-doux);
    margin-bottom: var(--e-2);
}

.jour__etat {
    font-family: var(--mono);
    font-size: var(--pas-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.jour__etat--fait { color: var(--succes); }

/* --- Après un jour manqué : cause, proposition, reprise ---
   Aucun rouge, aucune icône éteinte, aucun compteur qui retombe : la
   spécification § 3 interdit toute formulation négative, et le style suit. */
.jour__cause { margin-top: var(--e-4); padding-top: var(--e-4); border-top: var(--trait) solid var(--bordure); }
.jour__cause-choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.jour__cause-choix .choix__option { flex: 0 1 auto; }

.jour__proposition {
    margin-top: var(--e-5);
    padding: var(--e-4) var(--e-5);
    background: var(--fond-alt);
    border-radius: var(--rayon-m);
}
.jour__proposition > p { font-size: var(--pas-s); color: var(--texte); margin-bottom: var(--e-4); }
.jour__proposition-choix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.jour__declencheurs summary { font-size: var(--pas-s); cursor: pointer; }
.jour__declencheurs .jour__cause-choix { margin-top: var(--e-3); }

/* La reprise est le seul renforcement chaleureux du produit : elle a droit
   au serif et à la couleur d'accent, que rien d'autre ne porte ici. */
.jour__reprise {
    margin-top: var(--e-3);
    font-family: var(--serif);
    font-size: var(--pas-m);
    line-height: var(--interligne-chapo);
    color: var(--accent);
}

.rattrapage { margin-top: var(--e-7); padding-top: var(--e-5); border-top: var(--trait) solid var(--bordure); }
.rattrapage__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding-block: var(--e-3);
}
.rattrapage__ligne p { font-size: var(--pas-s); color: var(--texte-doux); }

.jour__pied { display: flex; flex-wrap: wrap; gap: var(--e-6); margin-top: var(--e-7); }

.bord { padding-block: var(--e-7); border-top: var(--trait) solid var(--bordure); }
.bord:first-of-type { border-top: 0; }
.bord h2 { font-size: var(--pas-l); margin-bottom: var(--e-3); }
.bord__secondaire {
    font-size: var(--pas-xs);
    color: var(--texte-doux);
    margin-top: var(--e-4);
}

.courbe { width: 100%; height: auto; margin-block: var(--e-5); }
.courbe__bande { fill: var(--ambre-100); opacity: 0.55; }
.courbe__grille { stroke: var(--ligne); stroke-width: 1; }
.courbe__trace { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe__point { fill: var(--accent); }
.courbe__axe {
    font-family: var(--mono);
    font-size: 10px;
    fill: var(--ardoise-clair);
    letter-spacing: 0.06em;
}
.courbe__axe--bande { fill: var(--ambre-700); }

/* -------------------------------------------------------------------------
   15. ADAPTATIONS
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .nav { display: none; }
    .offre-heros__grille { grid-template-columns: 1fr; }
    .panneau-prix { position: static; }
    .heros__contenu { max-width: none; }
    .heros::after { display: none; }
}

@media (max-width: 640px) {
    .entree { grid-template-columns: 1fr; gap: var(--e-3); }
    .espace__entete { align-items: flex-start; }
    .pied__haut { grid-template-columns: 1fr; gap: var(--e-6); }
    .lecon-nav { flex-direction: column; gap: var(--e-3); }
}

/* -------------------------------------------------------------------------
   16. MOUVEMENT
   ------------------------------------------------------------------------- */

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