/* @file public_html/assets/css/app.css
 * @brief Feuille de style unique du site.
 *
 * Un seul fichier (G58-a) : à ~300 lignes, quatre fichiers seraient quatre requêtes
 * et quatre endroits où chercher. À scinder le jour où ça dépasse ~800 lignes.
 *
 * Palette héritée de _old/__data.php (G40) : c'est la continuité visuelle avec
 * l'ancien site, que les premiers utilisateurs reconnaîtront.
 *
 * Polices système pour l'instant : MuseoSansRounded (T088) est repoussée jusqu'à ce
 * que le design soit figé : zéro requête, zéro conversion, rendu correct partout.
 */

/* ---------------------------------------------------------------- tokens
 *
 * THÈME À TROIS ÉTATS (D-010, G39). L'ordre de ces trois blocs est significatif :
 *
 *   1. :root                                   -> palette CLAIRE, définition de base
 *   2. @media (prefers-color-scheme: dark)     -> sombre, UNIQUEMENT sans choix explicite
 *      :root:not([data-theme="light"])            (d'où le :not, qui protège le choix « clair »)
 *   3. :root[data-theme="dark"]                -> sombre forcé, l'emporte toujours
 *
 * RÈGLE : aucune couleur ne doit avoir sa SEULE définition dans le bloc 2 ou 3.
 * Toute couleur existe d'abord sur :root nu, les autres blocs ne font que la
 * redéfinir. Sinon un token manque dans l'un des trois états et l'écran casse.
 */
:root {
    --red:      rgb(231, 58, 50);
    --pink:     rgb(250, 95, 157);
    --purple:   rgb(177, 85, 224);
    --blue:     rgb(17, 161, 236);
    --green:    rgb(46, 193, 99);
    --yellow:   rgb(249, 200, 59);
    --orange:   rgb(241, 128, 58);
    --teal:     rgb(35, 213, 171);
    --darkblue: rgb(0, 80, 125);

    --ink:      rgb(32, 43, 54);
    --ghost:    rgb(112, 132, 153);
    --mist:     rgb(220, 223, 227);
    --paper:    rgb(255, 255, 255);

    /* Tokens de RÔLE : ce sont les seuls que les blocs de thème redéfinissent.
       Chacun doit exister ici, sur :root nu, sinon il manquera dans un des états. */
    --bg:       var(--paper);
    --fg:       var(--ink);
    --muted:    var(--ghost);
    --line:     var(--mist);
    --surface:  rgb(247, 248, 249);

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    --r-s: 8px; --r-m: 16px; --r-l: 24px;

    --sh-card:  0 1px 2px rgba(32, 43, 54, .06), 0 4px 12px rgba(32, 43, 54, .08);
    --sh-float: 0 8px 32px rgba(32, 43, 54, .16);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Helvetica, Arial, sans-serif;

    /* Pile d'affichage pour le logotype et les grands chiffres. Grotesques serrées
       et bien dessinées, disponibles nativement : on cherche une capitale nette,
       pas une police à télécharger (T088 reste repoussée). */
    --font-display: "Helvetica Neue", "Segoe UI", Inter, Roboto,
                    "Arial Black", Arial, sans-serif;

    --w-max: 1080px;
}

/* 2. Sombre par préférence système : seulement si aucun choix explicite n'a été fait.
 *    Le :not([data-theme="light"]) est ce qui permet à un utilisateur de forcer le
 *    clair et de le rester quand son OS bascule en sombre le soir. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:      var(--ink);
        --fg:      var(--mist);
        --muted:   var(--ghost);
        --line:    rgb(54, 65, 78);
        --surface: rgb(44, 56, 68);
    }
}

/* 3. Sombre forcé : l'emporte sur la préférence système dans les deux sens. */
:root[data-theme="dark"] {
    --bg:      var(--ink);
    --fg:      var(--mist);
    --muted:   var(--ghost);
    --line:    rgb(54, 65, 78);
    --surface: rgb(44, 56, 68);
}

/* Indique au navigateur quelles apparences la page sait rendre : les contrôles
   natifs (champs, ascenseurs) suivent alors le thème choisi. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

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

html {
    -webkit-text-size-adjust: 100%;
    /* L'en-tête « sautait » d'une page à l'autre : une page courte (menu du calcul
       mental, liste des decks) n'a pas de barre de défilement, une page longue en a
       une, et la largeur utile change de ~15 px. On réserve donc toujours la
       gouttière, avec un repli pour les navigateurs qui ne connaissent pas la
       propriété. */
    scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.6 var(--font);
    /* Pas de min-width : _old imposait 900px, ce qui cassait tout le mobile (G45). */
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--sp-3); font-weight: 800; }
h1 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.02em; }
h2 { font-size: clamp(20px, 3vw, 28px); }
h3 { font-size: 18px; }
p  { margin: 0 0 var(--sp-4); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus toujours visible : navigation clavier (G46). */
:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: var(--r-s);
}

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

.container {
    width: 100%;
    max-width: var(--w-max);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

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

/* Lien d'évitement : caché jusqu'au focus clavier. */
.skip-link {
    position: absolute; left: -9999px; top: var(--sp-2);
    background: var(--ink); color: #fff;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-s); z-index: 100;
}
.skip-link:focus { left: var(--sp-4); }

/* ---------------------------------------------------------------- header */
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); min-height: 64px;
}
/* Logotype.
 *
 * Dégradé signature de l'ancien site (#ee7752 vers #e73c7e vers #23a6d5 vers #23d5ab,
 * G43) appliqué à l'ensemble du mot, balayage continu de 12 secondes.
 *
 * J'avais remplacé ce plein dégradé par un simple reflet passant, pour gagner en
 * contraste. Arbitrage tranché par Mathieu en faveur du dégradé complet : c'est
 * la signature visuelle que les anciens utilisateurs reconnaissent, et elle prime
 * ici sur le gain de lisibilité. Les améliorations de NETTETÉ sont conservées
 * (graisse 900, 24 px, pile d'affichage dédiée, lissage), et elles compensent
 * une partie de la perte de densité.
 */
.site-header__brand {
    /* Plus grand, plus gras, plus espacé : les trois leviers de netteté d'un
       logotype en capitales. La graisse 900 est ce qui le distingue vraiment du
       reste de la navigation. */
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: .16em;
    /* Compense l'espacement de la dernière lettre, sinon le mot paraît décalé. */
    padding-right: .16em;
    line-height: 1;

    /* Rendu plus net sur écrans standards : sans lissage sous-pixel horizontal,
       les capitales grasses bavent légèrement. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;

    color: var(--fg);

    background-image: linear-gradient(
        100deg,
        #ee7752 0%, #e73c7e 25%, #23a6d5 50%, #23d5ab 75%, #ee7752 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: brand-sweep 12s linear infinite;
}
.site-header__brand:hover { text-decoration: none; }

@keyframes brand-sweep {
    from { background-position:   0% 50%; }
    to   { background-position: 300% 50%; }
}

/* Sans background-clip:text, -webkit-text-fill-color rendrait le mot invisible. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .site-header__brand {
        background-image: none;
        -webkit-text-fill-color: currentColor;
        animation: none;
    }
}

/* Mouvement réduit : le dégradé reste, figé sur une position lisible. */
@media (prefers-reduced-motion: reduce) {
    .site-header__brand { animation: none; background-position: 40% 50%; }
}

@media (max-width: 480px) {
    .site-header__brand { font-size: 20px; letter-spacing: .12em; }
}
.site-header__nav { display: flex; align-items: center; gap: var(--sp-1); }

.nav-link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-s);
    font-size: 14px; font-weight: 600; color: var(--muted);
}
.nav-link:hover { background: var(--line); color: var(--fg); text-decoration: none; }
.nav-link--lang { font-variant: small-caps; letter-spacing: .04em; }
.nav-link--cta {
    background: var(--green); color: #fff;
}
.nav-link--cta:hover { background: var(--green); filter: brightness(.94); color: #fff; }

/* ------------------------------------------------ menu réglages (thème/langue)
 *
 * Construit sur <details>/<summary> : ouverture, fermeture et navigation clavier
 * sont natives. Aucune ligne de JavaScript n'est nécessaire pour que le menu
 * fonctionne (G20) : settings.js ne fait qu'ajouter la fermeture au clic extérieur.
 */
.menu { position: relative; }

.menu > summary {
    list-style: none; cursor: pointer;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-s);
    font-size: 14px; font-weight: 600; color: var(--muted);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--line); color: var(--fg); }

.menu__panel {
    position: absolute; right: 0; top: calc(100% + var(--sp-2));
    min-width: 190px; z-index: 60;
    padding: var(--sp-2);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    box-shadow: var(--sh-float);
    text-align: left;
}
.menu__group + .menu__group { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.menu__title {
    padding: var(--sp-1) var(--sp-3);
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-s);
    font-size: 14px; color: var(--fg);
}
.menu__item:hover { background: var(--surface); text-decoration: none; }
.menu__item[aria-current="true"] { font-weight: 700; }
.menu__item[aria-current="true"]::after { content: "✓"; color: var(--green); }

/* ------------------------------------------------------------------ main */
.main { min-height: 60vh; padding: var(--sp-7) 0 var(--sp-8); }

.hero { text-align: center; margin-bottom: var(--sp-7); }
.hero p { color: var(--muted); font-size: 18px; max-width: 40ch; margin-inline: auto; }

/* ------------------------------------------------------- grille sections */
/* Grille des sections.
 *
 * grid-auto-rows: 1fr force TOUTES les rangées à la hauteur de la plus haute :
 * les dix blocs font exactement la même taille, quelle que soit la longueur de
 * leur description ou la langue affichée (les libellés espagnols sont plus longs
 * que les français, ce qui déformait la grille).
 *
 * Sans le couple `li { display:flex }` + `.card { height:100% }`, l'élément de
 * grille s'étire mais la carte qu'il contient garde sa hauteur naturelle : c'est
 * la vraie cause de l'irrégularité, qu'un min-height ne corrige qu'en apparence.
 */
.sections {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    list-style: none; padding: 0; margin: 0;
}

.sections > li { display: flex; }

/* Blocs francs : angles quasi droits, bordure nette, aucun effet de profondeur.
 * Les cartes flottantes à grand rayon et ombre portée signalent la maquette
 * rapide ; un outil de préparation professionnelle doit avoir l'air d'un outil.
 * L'accent de section est une barre pleine à gauche, pas un dégradé. */
.card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-2);
    /* width:100% + height:100% : la carte occupe tout l'élément de grille, qui a
       lui-même la hauteur de la rangée. C'est ce qui égalise réellement les blocs. */
    width: 100%; height: 100%;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 4px);
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--bg);
    min-height: 168px;
    transition: border-color .12s ease, background .12s ease;
}
/* Barre d'accent : élément séparé plutôt que border-left, pour qu'elle ne
   décale pas le contenu et reste franche dans les deux thèmes. */
.card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--accent, var(--ghost));
}
.card:hover {
    border-color: var(--accent, var(--ghost));
    background: var(--surface);
    text-decoration: none;
}

.card__icon {
    width: 28px; height: 28px;
    color: var(--accent, var(--fg));
    margin-bottom: var(--sp-1);
}
.card__title {
    font-weight: 800; font-size: 16px;
    letter-spacing: -.01em;
}
/* La description prend l'espace restant : le badge « bientôt » est ainsi poussé
   en bas de carte, à la même hauteur sur les dix blocs. */
.card__desc  { color: var(--muted); font-size: 14px; margin: 0; flex: 1 1 auto; }

/* Sections à venir : l'accent devient neutre et l'icône s'efface, mais le bloc
   garde exactement la même géométrie : la grille ne doit pas se déformer. */
.card--soon { --accent: var(--line); }
.card--soon .card__icon { color: var(--muted); opacity: .5; }
.card--soon .card__title { color: var(--muted); }
.card--soon:hover { border-color: var(--line); background: var(--bg); }

.badge-soon {
    align-self: flex-start; margin-top: auto;
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line);
    padding: 3px var(--sp-2); border-radius: 2px;
}

/* Couleurs de section (G41) : appliquées via data-color. */
[data-color="red"]      { --accent: var(--red); }
[data-color="pink"]     { --accent: var(--pink); }
[data-color="purple"]   { --accent: var(--purple); }
[data-color="blue"]     { --accent: var(--blue); }
[data-color="green"]    { --accent: var(--green); }
[data-color="yellow"]   { --accent: var(--yellow); }
[data-color="orange"]   { --accent: var(--orange); }
[data-color="teal"]     { --accent: var(--teal); }
[data-color="darkblue"] { --accent: var(--darkblue); }
/* La section Ressources utilise l'encre : presque invisible sur fond sombre.
   Son accent suit donc la couleur du TEXTE, qui s'inverse avec le thème :
   noir en clair, clair en sombre. C'est le seul token de section dépendant du
   thème, et c'est volontaire : une couleur neutre doit rester neutre ET lisible. */
[data-color="ink"]      { --accent: var(--fg); }

/* --------------------------------------------------------------- boutons */
.btn {
    display: inline-block; cursor: pointer;
    padding: var(--sp-3) var(--sp-5);
    border: 0; border-radius: var(--r-m);
    background: var(--accent, var(--ink)); color: #fff;
    font: 700 16px/1.2 var(--font);
    text-align: center;
}
.btn:hover { filter: brightness(.94); text-decoration: none; }
.btn--ghost {
    background: transparent; color: var(--fg);
    box-shadow: inset 0 0 0 2px var(--line);
}
.btn--block { display: block; width: 100%; }

/* -------------------------------------------------------------- formulaires */
.field { margin-bottom: var(--sp-4); text-align: left; }

.field__label {
    display: block; margin-bottom: var(--sp-2);
    font-size: 14px; font-weight: 700;
}

.field__input {
    width: 100%; padding: var(--sp-3) var(--sp-4);
    border: 2px solid var(--line); border-radius: var(--r-m);
    background: var(--bg); color: var(--fg);
    font: 16px/1.4 var(--font);
    /* 16px minimum : en dessous, iOS zoome automatiquement à la mise au point,
       ce qui décale toute la page et donne l'impression d'un bug. */
}
.field__input:focus { border-color: var(--blue); outline: none; }
.field__input[aria-invalid="true"] { border-color: var(--red); }

.field__hint  { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--muted); font-weight: 400; }
.field__error { margin: var(--sp-2) 0 0; font-size: 14px; color: var(--red); font-weight: 600; }

.field--check label {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    font-size: 14px; cursor: pointer;
}
.field--check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }

/* ----------------------------------------------------------------- flash */
.flash-stack {
    position: fixed; top: var(--sp-4); left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2);
    width: min(520px, calc(100% - var(--sp-5)));
}
.flash {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-m); box-shadow: var(--sh-float);
    color: #fff; font-size: 15px;
}
.flash--success { background: var(--green); }
.flash--error   { background: var(--red); }
.flash--warning { background: var(--orange); }
.flash--info    { background: var(--blue); }
.flash__text  { flex: 1; }
.flash__close {
    background: none; border: 0; color: inherit;
    font-size: 22px; line-height: 1; cursor: pointer; opacity: .8;
}

/* ------------------------------------------------------- layout exercice */
.page--focus { background: var(--bg); }

.focus-bar { border-bottom: 1px solid var(--line); }
.focus-bar__progress { height: 6px; background: var(--line); }
.focus-bar__fill {
    height: 100%; background: var(--accent, var(--green));
    transition: width .3s ease;
}

/* Barre de temps : transition linéaire d'une seconde, exactement le pas du
   décompte : une transition « ease » donnerait des à-coups visibles. */
.focus-bar__progress--timer .focus-bar__fill {
    background: var(--green);
    transition: width 1s linear, background-color .4s ease;
}
/* Le dernier tiers passe à l'orange, les 10 dernières secondes au rouge : la
   pression du temps doit se lire d'un coup d'œil, sans quitter l'énoncé des yeux. */
.focus-bar__progress--timer.is-warning .focus-bar__fill { background: var(--orange); }
.focus-bar__progress--timer.is-critical .focus-bar__fill { background: var(--red); }
.focus-bar__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); min-height: 56px;
    max-width: var(--w-max); margin: 0 auto; padding: 0 var(--sp-4);
    font-size: 14px;
}
.focus-bar__step  { color: var(--muted); font-weight: 600; }
.focus-bar__timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }
.focus-bar__exit  { color: var(--muted); font-weight: 600; }

.focus-main {
    max-width: 640px; margin: 0 auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
    text-align: center;
}

/* ------------------------------------------------------------ calcul mental */
.math-prompt {
    font-size: clamp(36px, 9vw, 64px); font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    margin: var(--sp-6) 0;
}
.math-input {
    width: 100%; padding: var(--sp-4);
    border: 2px solid var(--line); border-radius: var(--r-m);
    background: var(--bg); color: var(--fg);
    font: 800 28px/1.2 var(--font); text-align: center;
    font-variant-numeric: tabular-nums;
}
.math-input:focus { border-color: var(--green); outline: none; }

.keypad {
    display: grid; gap: var(--sp-2);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--sp-4);
}
.keypad__key {
    padding: var(--sp-4); border: 1px solid var(--line);
    border-radius: var(--r-m); background: var(--bg); color: var(--fg);
    font: 700 20px/1 var(--font); cursor: pointer;
    /* 44px minimum : cible tactile accessible (G46). */
    min-height: 52px;
}
.keypad__key:active { background: var(--line); }
.keypad__key--wide { grid-column: span 2; }

.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: var(--sp-6) 0; }
.stat { text-align: center; }
.stat__value { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ flashcards */
/* Hauteur FIXE, pas min-height : le cadre ne doit jamais changer de taille en
   révélant le verso, sinon le bouton « voir la réponse » se déplace sous le
   curseur et il faut bouger la souris pour noter. Le contenu défile à
   l'intérieur si une carte est plus longue que les autres. */
.flashcard {
    height: 320px;
    padding: var(--sp-5);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface);
    overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center;
}
/* RETOURNEMENT 3D. Le verso s'ajoutait auparavant sous le recto, dans le même
   cadre : correct fonctionnellement, mais on ne retournait rien et le geste
   mental de la flashcard était perdu. La perspective vit sur le cadre, la
   rotation sur l'enveloppe, et chaque face masque son dos.
   `position: relative` sur le cadre et `absolute` sur les faces : les deux faces
   se superposent au même endroit, sinon la carte ferait deux fois sa hauteur. */
.flashcard { position: relative; perspective: 1400px; overflow: hidden; }
.flashcard__inner {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.4, .1, .3, 1);
}
.flashcard__inner.is-flipped { transform: rotateY(180deg); }

.flashcard__face {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--sp-5);
    overflow-y: auto;
    /* Sans cela, la face arrière reste lisible en miroir pendant la rotation. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.flashcard__face--back { transform: rotateY(180deg); text-align: left; }

.flashcard__front  { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.4; }
.flashcard__hint   { font-size: 14px; color: var(--muted); margin: var(--sp-3) 0 0; font-style: italic; }
.flashcard__echo   {
    font-size: 13px; color: var(--muted); margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
}
.flashcard__answer { font-size: 17px; line-height: 1.65; margin: 0; }
.flashcard__actions { margin-top: var(--sp-5); }

/* Mouvement réduit : on garde le changement de face, on retire la rotation. */
@media (prefers-reduced-motion: reduce) {
    .flashcard__inner { transition: none; }
}

@media (max-width: 480px) {
    .flashcard { height: 380px; }
}

/* Quatre notes de largeur égale : le choix doit être instantané, or une grille
   irrégulière fait hésiter. Ordre du plus dur au plus facile, de gauche à droite. */
/* Écart franc avec « voir la réponse » : les notes sont une décision différente,
   et un bouton collé au précédent invite au double-clic accidentel. */
.grades {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}
.grade {
    padding: var(--sp-4) var(--sp-2);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--bg); color: var(--fg);
    font: 700 13px/1.2 var(--font); cursor: pointer;
    min-height: 56px;
    transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.grade:hover:not(:disabled) { background: var(--surface); }

/* Grisées tant que le verso n'est pas révélé : visibles pour annoncer ce qui
   vient, inactives pour empêcher de se noter avant d'avoir vu la réponse. */
.grade:disabled {
    opacity: .35; cursor: not-allowed;
    border-color: var(--line); color: var(--muted);
}

.grade--again:not(:disabled) { border-color: var(--red); color: var(--red); }
.grade--hard:not(:disabled)  { border-color: var(--orange); color: var(--orange); }
.grade--good:not(:disabled)  { border-color: var(--green); color: var(--green); }
.grade--easy:not(:disabled)  { border-color: var(--blue); color: var(--blue); }

.btn:disabled { opacity: .4; cursor: not-allowed; }

.flashcard__shortcuts {
    margin-top: var(--sp-4); text-align: center;
    font-size: 12px; color: var(--muted);
}
/* Les raccourcis n'ont aucun sens sur un écran tactile. */
@media (pointer: coarse) { .flashcard__shortcuts { display: none; } }

/* --------------------------------------------------- problèmes business */
.problem__statement {
    font-size: 18px; line-height: 1.7;
    padding: var(--sp-5);
    border: 1px solid var(--line); border-left: 4px solid var(--blue);
    border-radius: 4px; background: var(--surface);
    margin: 0 0 var(--sp-5);
}
.problem__row { display: flex; gap: var(--sp-3); align-items: stretch; }
.problem__row .math-input { font-size: 22px; text-align: left; }
.problem__row .btn { white-space: nowrap; }

.problem__solution {
    margin-top: var(--sp-5); padding: var(--sp-5);
    border: 1px solid var(--line); border-radius: 4px;
}
.problem__solution-title {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 var(--sp-3);
}
.problem__steps { margin: 0; padding-left: var(--sp-5); }
.problem__steps li {
    padding: var(--sp-2) 0; font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--line);
}
.problem__steps li:last-child { border-bottom: 0; font-weight: 700; }
.problem__actions { margin-top: var(--sp-5); }

.feedback { font-weight: 800; min-height: 28px; }
.feedback--ok { color: var(--green); }
.feedback--ko { color: var(--red); }

/* ------------------------------------------------------- bandeau progression */
.progress-bar {
    display: flex; align-items: center; gap: var(--sp-6);
    flex-wrap: wrap;
    padding: var(--sp-5);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface);
    margin-bottom: var(--sp-6);
}
.progress-bar__main { flex: 1 1 260px; min-width: 0; }
.progress-bar__rank {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.progress-bar__level {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.progress-bar__title { font-size: 18px; font-weight: 800; }
.progress-bar__track { height: 6px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-bar__fill { height: 100%; background: var(--green); transition: width .4s ease; }
.progress-bar__hint { margin: var(--sp-2) 0 0; font-size: 13px; color: var(--muted); }

.progress-bar__stats { display: flex; gap: var(--sp-6); }
.stat__icon {
    width: 18px; height: 18px; vertical-align: -2px;
    color: var(--line);
}
.stat__icon.is-active { color: var(--orange); }

/* ------------------------------------------------------------- classement */
.board { width: 100%; border-collapse: collapse; }
.board th, .board td {
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.board th {
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.board td:last-child, .board th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.board__rank { width: 48px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.board tr.is-me { background: var(--surface); }
.board tr.is-me .board__rank { color: var(--green); }
.board__podium-1 { color: var(--yellow); }
.board__podium-2 { color: var(--ghost); }
.board__podium-3 { color: var(--orange); }

.tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tabs a {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--line); border-radius: 2px;
    font-size: 14px; font-weight: 600; color: var(--muted);
}
.tabs a[aria-current="true"] { border-color: var(--fg); color: var(--fg); font-weight: 800; }
.tabs a:hover { text-decoration: none; background: var(--surface); }

/* ------------------------------------------------------ encart de conversion */
.save-prompt {
    margin-top: var(--sp-7);
    padding: var(--sp-5);
    border: 1px solid var(--line); border-left: 4px solid var(--blue);
    border-radius: 4px; background: var(--surface);
    text-align: left;
}
.save-prompt__text { margin: 0 0 var(--sp-4); font-size: 15px; }
.save-prompt__login { margin: var(--sp-3) 0 0; font-size: 13px; text-align: center; }

/* --------------------------------------------------------- nav mobile */
.nav-mobile { display: none; }

@media (max-width: 720px) {
    .nav-mobile {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: var(--bg);
        border-top: 1px solid var(--line);
        /* Encoches et barres système des téléphones récents. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .nav-mobile__item {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        /* 56 px : très au-delà des 44 px minimum d'une cible tactile (G46). */
        min-height: 56px; padding: var(--sp-2) 0;
        color: var(--muted); font-size: 10px; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase;
    }
    .nav-mobile__item:hover { text-decoration: none; }
    .nav-mobile__item[aria-current="page"] { color: var(--fg); }
    .nav-mobile__icon { width: 22px; height: 22px; }
    .nav-mobile__label {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* La barre recouvre le bas de page : on dégage la hauteur correspondante. */
    .site-footer { padding-bottom: calc(var(--sp-8) + 56px); }

    /* CE QUI EST DANS LA BARRE INFÉRIEURE DISPARAÎT DE L'EN-TÊTE, et rien de
       plus. La règle masquait auparavant TOUS les liens sauf la connexion, ce
       qui rendait les amis et les notifications inaccessibles sur mobile :
       aucun des deux n'est dans la barre du bas. Un lien de navigation qui
       disparaît sans remplaçant n'est pas un lien.

       Les icônes rendent la sélection possible : cinq pictogrammes de 20px
       tiennent là où cinq libellés débordaient. */
    .site-header__nav .nav-link--home,
    .site-header__nav .nav-link--leaderboard,
    .site-header__nav .nav-link--profile { display: none; }

    .site-header__nav .menu { display: block; }
}

/* ------------------------------------------------------------------ quiz */
.quiz__question { font-size: 20px; font-weight: 700; line-height: 1.5; margin: 0 0 var(--sp-5); }

.quiz__choices { display: grid; gap: var(--sp-3); }
.quiz__choice {
    padding: var(--sp-4);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--bg); color: var(--fg);
    font: 16px/1.4 var(--font); text-align: left; cursor: pointer;
    min-height: 56px;
    transition: border-color .12s ease, background .12s ease;
}
.quiz__choice:hover:not(:disabled) { border-color: var(--fg); background: var(--surface); }
.quiz__choice:disabled { cursor: default; }

/* La bonne réponse ET le mauvais choix sont marqués : voir les deux côte à côte
   apprend plus qu'un simple verdict. */
.quiz__choice.is-correct { border-color: var(--green); background: var(--surface); font-weight: 700; }
.quiz__choice.is-wrong   { border-color: var(--red); opacity: .75; text-decoration: line-through; }

.quiz__feedback {
    margin-top: var(--sp-5); padding: var(--sp-5);
    border: 1px solid var(--line); border-left: 4px solid var(--yellow);
    border-radius: 4px; background: var(--surface);
}
.quiz__verdict { font-size: 22px; font-weight: 800; margin: 0 0 var(--sp-2); }
.quiz__verdict.is-correct { color: var(--green); }
.quiz__verdict.is-wrong   { color: var(--red); }
.quiz__explanation { margin: 0; line-height: 1.65; }
#quiz .btn { margin-top: var(--sp-5); }

/* ------------------------------------------------------------- ressources */
.resources { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }

.resource__link {
    display: grid; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--bg);
    transition: border-color .12s ease, background .12s ease;
}
.resource__link:hover { border-color: var(--fg); background: var(--surface); text-decoration: none; }
.resource__type {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.resource__title { font-size: 16px; font-weight: 800; }
.resource__desc  { font-size: 14px; color: var(--muted); line-height: 1.6; }
.resource__meta  { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- footer */
.site-footer {
    border-top: 1px solid var(--line);
    padding: var(--sp-6) 0;
    text-align: center;
    color: var(--muted); font-size: 14px;
}
.counters { margin: 0 0 var(--sp-3); }
.counters strong { color: var(--fg); }
.counters__sep { margin: 0 var(--sp-2); opacity: .5; }
.site-footer__links { display: flex; gap: var(--sp-4); justify-content: center; margin-bottom: var(--sp-3); }
.site-footer__legal { margin: 0; font-size: 13px; }

/* ============================================================ tranches H et I
   Processus de recrutement, questions de fit, études de cas.

   Aucune couleur n'est définie ici en dur : tout passe par les tokens de rôle
   (--fg, --muted, --line, --surface, --accent), eux-mêmes redéfinis dans les
   trois états de thème. C'est la règle G39-a : une couleur dont la seule
   définition vivrait dans un bloc @media disparaîtrait dans l'autre thème.
   =========================================================================== */

/* ------------------------------------------------------- éléments communs */
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: var(--sp-4); }
.section-lead { color: var(--muted); font-size: 15px; margin: var(--sp-5) 0; }
.tier-title {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); margin: var(--sp-6) 0 var(--sp-3);
}
.tabs__tab--on { border-color: var(--fg); color: var(--fg); font-weight: 800; }

.notice {
    padding: var(--sp-4); border: 1px solid var(--line);
    border-left: 4px solid var(--accent, var(--ghost));
    border-radius: 4px; background: var(--surface);
    font-size: 15px; margin-bottom: var(--sp-5);
}
.notice--warn   { border-left-color: var(--orange); }
.notice--ok     { border-left-color: var(--green); }
.notice--resume {
    border-left-color: var(--blue); display: flex; flex-wrap: wrap;
    gap: var(--sp-3); align-items: center; justify-content: space-between;
}

.firm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0; }
.inline-form  { display: inline; }
.link-button  {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline;
}
.link-button:hover { color: var(--red); }
.tag {
    display: inline-block; padding: 2px var(--sp-2); margin-right: var(--sp-2);
    border: 1px solid var(--line); border-radius: 2px;
    font-size: 12px; color: var(--muted);
}

/* Tout tableau large défile DANS son conteneur : sans cela, la page entière
   défile latéralement sur mobile : le défaut le plus irritant qui soit. */
.table-scroll { overflow-x: auto; margin-bottom: var(--sp-5); }
.exhibit__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.exhibit__table th, .exhibit__table td {
    padding: var(--sp-3); text-align: left;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.exhibit__table thead th { font-weight: 800; color: var(--fg); }
.exhibit__table tbody th { color: var(--muted); font-weight: 600; }

.content-meta { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.content-meta__date { font-size: 13px; color: var(--muted); }
.report { margin-top: var(--sp-4); }
.report .field__input { margin-bottom: var(--sp-3); }

/* ------------------------------------------------------ liste des cabinets */
/* Une ligne par cabinet, par ordre alphabétique. Remplace la grille de cartes
   groupées par famille : pour trouver un cabinet il fallait d'abord savoir dans
   quelle famille le chercher, et quinze cartes occupaient trois écrans. */
.firm-list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.firm-list__item { border-bottom: 1px solid var(--line); }
.firm-list__link {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-2);
    color: var(--fg); text-decoration: none;
}
.firm-list__link:hover { background: var(--surface); text-decoration: none; }
.firm-list__name { font-size: 17px; font-weight: 700; }
.firm-list__meta { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------ faits d'un processus */
/* Un seul niveau, sans titres de section : ce qui ne tient pas en une puce n'a
   pas sa place sur la fiche. */
.facts { margin: 0 0 var(--sp-6); padding-left: var(--sp-5); }
.facts__item { margin-bottom: var(--sp-3); font-size: 16px; line-height: 1.6; }

/* ------------------------------------------- banque de questions repliable */
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist__item { border-bottom: 1px solid var(--line); }
.qlist__summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-2); cursor: pointer;
}
.qlist__summary:hover { background: var(--surface); }
.qlist__summary::-webkit-details-marker { display: none; }
.qlist__question { flex: 1 1 240px; font-size: 16px; font-weight: 600; }
/* Le chevron indique l'état sans dépendre du marqueur natif, qui diffère d'un
   navigateur à l'autre. */
.qlist__summary::after { content: '+'; color: var(--muted); font-weight: 800; }
.qlist__details[open] .qlist__summary::after { content: '\2212'; }
.qlist__body  { padding: 0 var(--sp-2) var(--sp-5); }
.qlist__label {
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: var(--sp-4) 0 var(--sp-2);
}

/* ---------------------------------------------------------------------- fit */
.fit__question  { font-size: 22px; line-height: 1.35; margin-bottom: var(--sp-4); }
.fit__countdown { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: var(--muted); }
.fit__countdown.is-warning { color: var(--orange); }
.fit__countdown.is-late    { color: var(--red); }
.fit__notes     { min-height: 140px; resize: vertical; }
.fit__answer    { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.fit__answer h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fit__flags     { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.fit__flags li  { margin-bottom: var(--sp-2); font-size: 15px; }
.fit__hint      { font-size: 13px; color: var(--muted); text-align: center; }

.recorder { margin-bottom: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.recorder__state  { font-size: 13px; color: var(--muted); }
.recorder__player { width: 100%; }
.recorder__note   { flex: 1 0 100%; font-size: 12px; color: var(--muted); margin: 0; }

/* -------------------------------------------------- historique et carnet STAR */
.history, .stories { list-style: none; margin: 0; padding: 0; }
.history__item { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.history__rating {
    flex: 0 0 auto; align-self: flex-start;
    padding: 2px var(--sp-2); border-radius: 2px;
    font-size: 12px; font-weight: 800; border: 1px solid var(--line); color: var(--muted);
}
.history__rating--1 { border-color: var(--red);    color: var(--red); }
.history__rating--2 { border-color: var(--orange); color: var(--orange); }
.history__rating--3 { border-color: var(--blue);   color: var(--blue); }
.history__rating--4 { border-color: var(--green);  color: var(--green); }
.history__question { font-weight: 600; margin-bottom: var(--sp-1); }
.history__meta     { font-size: 13px; color: var(--muted); margin: 0; }
.history__notes    { margin-top: var(--sp-2); font-size: 14px; }

.stories__item  { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.stories__title { font-size: 18px; margin-bottom: var(--sp-1); }
.stories__meta  { font-size: 13px; color: var(--muted); margin-bottom: var(--sp-2); }
.stories__warn  { color: var(--orange); font-weight: 600; }
.stories__tags  { margin-bottom: var(--sp-2); }
.stories__detail { font-size: 14px; }
.stories__actions {
    display: flex; gap: var(--sp-4); align-items: baseline;
    font-size: 14px; margin: var(--sp-3) 0 0;
}

.star__field { min-height: 80px; resize: vertical; }
.star__tags  { border: 1px solid var(--line); border-radius: 4px; padding: var(--sp-4); margin-bottom: var(--sp-4); }
.star__meter { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.star__meter.is-late { color: var(--orange); font-weight: 600; }

/* --------------------------------------------------------------------- chat */
.chat {
    max-height: 58vh; overflow-y: auto;
    padding: var(--sp-4); margin-bottom: var(--sp-4);
    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
}
.chat__msg { max-width: 85%; margin-bottom: var(--sp-4); }
.chat__body {
    margin: 0; padding: var(--sp-3) var(--sp-4);
    border-radius: 4px; font-size: 15px; line-height: 1.6;
    background: var(--bg); border: 1px solid var(--line);
}
/* Interviewer à gauche, candidat à droite : la lecture du fil doit être
   immédiate, sans avoir à lire une étiquette de rôle. */
.chat__msg--interviewer .chat__body { border-left: 3px solid var(--accent, var(--blue)); }
.chat__msg--candidate { margin-left: auto; }
.chat__msg--candidate .chat__body { background: var(--surface); border-color: var(--accent, var(--blue)); }
.chat__msg--system .chat__body {
    background: transparent; border-style: dashed;
    color: var(--muted); font-size: 14px;
}
.chat__msg.is-pending .chat__body { opacity: .5; }
.chat__form  { display: flex; gap: var(--sp-3); align-items: flex-end; }
.chat__input { flex: 1 1 auto; resize: vertical; min-height: 60px; }
.chat__timer { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); margin-bottom: var(--sp-2); }
.chat__timer.is-late { color: var(--orange); font-weight: 700; }
.chat__hint  { font-size: 12px; color: var(--muted); text-align: center; margin-top: var(--sp-3); }

/* UNE ÉTUDE DE CAS N'EST PAS UN EXERCICE CENTRÉ (C23, C24).
   Le gabarit « focus » centre son contenu dans 640 px, ce qui est juste pour une
   flashcard ou une opération : un objet court, seul au milieu de l'écran. Une
   étude de cas est l'inverse — des paragraphes, des tableaux et des graphiques
   qu'on relit en diagonale. Centré et à 640 px, le texte se lisait mal et le
   graphique arrivait à la taille d'une vignette.
   Le ciblage passe par `data-section`, déjà posé par le gabarit : aucune autre
   section n'est touchée, et il n'y a pas de classe supplémentaire à penser. */
.page--focus[data-section="cases"] .focus-main {
    max-width: 1040px;
    text-align: left;
}
.page--focus[data-section="cases"] .chat { max-height: 72vh; }
.page--focus[data-section="cases"] .chat__body { text-align: left; font-size: 16px; }

/* L'énoncé et ses exhibits prennent toute la largeur ; seules les réponses du
   candidat restent en bulle à droite, ce qui garde le fil lisible d'un coup. */
.page--focus[data-section="cases"] .chat__msg--interviewer,
.page--focus[data-section="cases"] .chat__msg--system { max-width: 100%; }
.page--focus[data-section="cases"] .exhibit { padding: var(--sp-5); }
.page--focus[data-section="cases"] .exhibit__chart { min-height: 300px; }
.page--focus[data-section="cases"] .exhibit__axis { font-size: 12px; }

/* Rappel du cas en cours, au-dessus du contexte initial (C25). */
.case-head { margin-bottom: var(--sp-4); }
.case-head__title { font: 800 22px/1.25 var(--font); margin: 0; }
.case-head__meta {
    margin: var(--sp-1) 0 0; font-size: 13px; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}

/* ----------------------------------------------------------------- exhibits */
.exhibit {
    margin: var(--sp-4) 0 0; padding: var(--sp-4);
    border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.exhibit__title {
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin-bottom: var(--sp-3);
}
.exhibit__chart { width: 100%; height: auto; }
.exhibit__grid  { stroke: var(--line); stroke-width: 1; }
.exhibit__axis  { fill: var(--muted); font-size: 11px; }
.exhibit__bar   { fill: currentColor; }
.exhibit__line  {
    fill: none; stroke: currentColor; stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round;
}
/* Quatre teintes de séries, prises dans la palette de la charte (G40). */
.exhibit__serie--1 { color: var(--blue); }
.exhibit__serie--2 { color: var(--orange); }
.exhibit__serie--3 { color: var(--teal); }
.exhibit__serie--4 { color: var(--purple); }
.exhibit__legend {
    list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-4);
    margin: var(--sp-3) 0 0; padding: 0; font-size: 13px;
}
.exhibit__legend-item::before {
    content: ''; display: inline-block; width: 10px; height: 10px;
    margin-right: var(--sp-2); border-radius: 2px; background: currentColor;
}
.exhibit__note { font-size: 12px; color: var(--muted); margin: var(--sp-3) 0 0; }

/* ------------------------------------------------------------ debrief de cas */
.case-reco {
    font-size: 16px; line-height: 1.7;
    padding-left: var(--sp-4); border-left: 3px solid var(--blue);
}
.case-review { margin: 0 0 var(--sp-6); padding-left: var(--sp-5); }
.case-review__item    { margin-bottom: var(--sp-4); }
.case-review__prompt  { font-weight: 600; margin-bottom: var(--sp-2); }
.case-review__debrief { color: var(--muted); font-size: 15px; margin: 0; }
.rating { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
/* Les notes sont des <label> et non des <button> : le formulaire fonctionne
   sans JavaScript, l'input radio est masqué mais reste focusable. */
.rating .grade { cursor: pointer; }
.rating .grade:focus-within { outline: 2px solid var(--fg); outline-offset: 2px; }

@media (max-width: 720px) {
    .chat { max-height: 50vh; }
    .chat__form { flex-direction: column; align-items: stretch; }
    .chat__msg  { max-width: 100%; }
    .fit__question { font-size: 19px; }
}

/* ========================================================= retours du 2026-08-18
   Encart de classement, échelle de niveaux, marqueurs de consultation,
   calculatrice de brouillon, cohérence typographique de la banque de fit.
   =========================================================================== */

/* ------------------------------------------------------- encart de classement */
/* CLASSEMENT COMPACT (C22). Le podium était une liste verticale : trois lignes,
   plus un rang personnel séparé par un filet, plus un lien, chacun avec sa marge.
   L'encart faisait le double du bandeau de progression qu'il suit, pour trois
   nombres. Le podium passe donc en ligne — trois colonnes côte à côte — et le
   pied tient sur une seule ligne. Même information, un tiers de la hauteur. */
.rank-card {
    margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5);
    /* Pas de barre d'accent ici : le classement n'appartient à aucune section,
       et une barre bleue sur le hub le faisait lire comme un encart d'études de
       cas. Les barres de couleur restent réservées à ce qui a une section. */
    border: 1px solid var(--line);
    border-radius: 4px; background: var(--surface);
}
.rank-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.rank-card__title  { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.rank-card__period { font-size: 13px; color: var(--muted); }
.rank-card__podium {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
}
.rank-card__row {
    display: flex; align-items: baseline; gap: var(--sp-2);
    padding: 0; font-size: 14px;
    flex: 1 1 160px; min-width: 0;
}
.rank-card__row.is-me { font-weight: 800; }
.rank-card__rank {
    flex: 0 0 auto; font-variant-numeric: tabular-nums;
    font-weight: 800; color: var(--muted);
}
/* Le score se lit COLLÉ AU NOM, pas à l'autre bout de la colonne : « Marie 1 240 »
   est une information, « Marie ……… 1 240 » demande un aller-retour de l'oeil pour
   rattacher un nombre à quelqu'un. Un pseudo long est donc tronqué plutôt que de
   repousser le score au loin. */
.rank-card__name {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-card__xp   { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.rank-card__foot {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-3) 0 0; font-size: 13px;
}
.rank-card__you  { color: var(--muted); }
.rank-card__link { margin: 0; }

/* ------------------------------------------------ répartition d'un deck */
/* Trois segments et un fond : connues, en cours, difficiles, et le reste qui
   n'a jamais été vu. Les couleurs ne sont pas décoratives, elles ordonnent :
   vert pour ce qui est acquis, jaune pour ce qui progresse, rouge pour ce qui
   résiste. Le fond neutre porte les cartes jamais ouvertes. */
.deck-split {
    display: flex; width: 100%; height: 6px; margin-top: var(--sp-3);
    border-radius: 3px; overflow: hidden; background: var(--line);
}
.deck-split__part { display: block; height: 100%; }
.deck-split__part--known    { background: var(--green); }
.deck-split__part--learning { background: var(--yellow); }
.deck-split__part--hard     { background: var(--red); }
.deck-split__legend {
    display: block; margin-top: var(--sp-2);
    font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- guide « se donner un cas » */
/* Encart repliable en tête de la section meetings. Il porte la couleur de la
   section par --accent, comme tout ce qui appartient à une section. */
.meeting-guide {
    margin-bottom: var(--sp-5); padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--line); border-left: 4px solid var(--accent, var(--pink));
    border-radius: 4px; background: var(--surface);
}
.meeting-guide__summary {
    cursor: pointer; font-weight: 800; font-size: 14px;
    text-transform: uppercase; letter-spacing: .06em;
}
.meeting-guide__steps {
    margin: var(--sp-4) 0 0; padding-left: var(--sp-5);
    font-size: 14px; line-height: 1.6;
}
.meeting-guide__steps li { margin-bottom: var(--sp-2); }
.meeting-guide__note {
    margin: var(--sp-3) 0 0; font-size: 13px; color: var(--muted);
}

/* ---------------------------------------------------- échelle des niveaux */
.ladder { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.ladder__item {
    display: flex; align-items: baseline; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--line);
    /* Les niveaux non atteints restent lisibles mais en retrait : les masquer
       supprimerait l'objectif, les afficher pleins effacerait la progression. */
    color: var(--muted);
}
.ladder__item.is-reached { color: var(--fg); }
.ladder__item.is-current {
    background: var(--surface);
    border-left: 3px solid var(--accent, var(--blue));
    font-weight: 700;
}
.ladder__level {
    flex: 0 0 24px; font-variant-numeric: tabular-nums;
    font-weight: 800; font-size: 13px;
}
.ladder__name  { flex: 1 1 auto; }
.ladder__range { font-size: 13px; font-variant-numeric: tabular-nums; }

.xp-sources { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.xp-sources__item {
    display: flex; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.xp-sources__value { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ------------------------------------------------ marqueur de consultation */
/* Un crochet discret, jamais une couleur seule : l'information « déjà vu » ne
   doit pas dépendre de la perception des couleurs (G46). */
.seen-mark {
    display: inline-block; margin-left: var(--sp-2);
    color: var(--green); font-weight: 800;
}
.resource.is-seen .resource__title,
.firm-list__item.is-seen .firm-list__name { color: var(--muted); }

/* ----------------------------------------------------------- calculatrice */
.calc { margin: var(--sp-4) 0; border: 1px solid var(--line); border-radius: 4px; }
.calc__summary {
    padding: var(--sp-3) var(--sp-4); cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--muted);
}
.calc__summary::-webkit-details-marker { display: none; }
.calc__summary::after { content: '+'; float: right; font-weight: 800; }
.calc[open] .calc__summary::after { content: '\2212'; }
.calc__body { padding: 0 var(--sp-4) var(--sp-4); }
.calc__screen {
    display: block; width: 100%; margin-bottom: var(--sp-3);
    padding: var(--sp-3); border: 1px solid var(--line); border-radius: 4px;
    background: var(--bg); text-align: right;
    font: 700 22px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    /* L'expression peut dépasser : elle défile plutôt que d'élargir le bloc. */
    overflow-x: auto; white-space: nowrap;
}
.calc__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.calc__key {
    /* 48 px : au-dessus du minimum tactile de 44 px (G46). */
    min-height: 48px; padding: var(--sp-2);
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface); color: var(--fg);
    font-size: 17px; font-weight: 600; cursor: pointer;
}
.calc__key:hover { background: var(--line); }
.calc__key--action { background: var(--accent, var(--blue)); color: var(--white, #fff); border-color: transparent; }
.calc__note { margin: var(--sp-3) 0 0; font-size: 12px; color: var(--muted); }

/* --------------------------------------- cohérence typographique de la banque */
/* Les trois blocs de la réponse attendue portaient trois tailles différentes,
   héritées de styles génériques distincts. Le lecteur en déduisait une hiérarchie
   qui n'existe pas : structure, attendu et red flags ont la même importance. */
.qlist__text { font-size: 15px; line-height: 1.65; margin: 0 0 var(--sp-4); }
.qlist__flags { padding-left: var(--sp-5); }
.qlist__flags li { margin-bottom: var(--sp-2); }

/* ------------------------------- écart entre attendu et question suivante */
/* Même respiration que les flashcards : « voir la réponse » et « suivant » sont
   deux décisions différentes, et les coller provoque des clics accidentels. */
.fit__answer .grades { margin-top: var(--sp-5); }
#fit [data-role="next"] { margin-top: var(--sp-6); }

.notice__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.notice__aside   { color: var(--muted); }

/* ============================================================ tranches J et K
   Simulations, fichiers de travail, disponibilités, notifications.

   Aucun composant nouveau n'invente sa propre grammaire : les cartes reprennent
   .card, les graphiques réutilisent les classes .exhibit__* du composant serveur
   pour que le rendu JS et le rendu PHP soient strictement identiques (G58). */

/* ------------------------------------------------------------- simulations */
/* Deux colonnes sur large écran : les curseurs à gauche, le graphique à droite,
   pour que l'effet d'un déplacement soit visible sans quitter le curseur des
   yeux. En dessous de 720px la lecture passe en pile, curseurs d'abord. */
.sim {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: var(--sp-6);
    align-items: start;
}
@media (max-width: 720px) {
    .sim { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.sim__controls { display: flex; flex-direction: column; gap: var(--sp-5); }

.sim__control-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--sp-3); margin-bottom: var(--sp-2);
    font-size: 14px; font-weight: 600;
}
.sim__control-value {
    font-variant-numeric: tabular-nums;
    color: var(--muted); font-weight: 700;
}

/* Le curseur natif est stylé au minimum : sa piste et sa poignée doivent juste
   respecter les tokens de couleur et rester assez hautes pour le doigt. */
.sim__slider {
    width: 100%; height: 28px;
    accent-color: var(--blue);
    cursor: pointer;
}

.sim__chart { min-width: 0; }
.sim__chart .exhibit { margin: 0; }

/* Les indicateurs dérivés (seuil, marge, valeur actuelle) sous le graphique :
   même composant .stat que les écrans de fin d'exercice. */
.sim__chart .stats { margin-top: var(--sp-4); }

.sim__challenge { margin-top: var(--sp-6); }

/* Paragraphe d'ouverture d'une simulation : plus large que le corps de texte
   courant parce qu'il se lit d'une traite, avant de toucher aux curseurs. */
.sim__intro {
    max-width: 68ch; margin: 0 0 var(--sp-5);
    padding-left: var(--sp-4);
    border-left: 3px solid var(--accent, var(--teal));
    font-size: 15px; line-height: 1.65; color: var(--fg);
}

/* Marqueur tracé par chart.js : une ligne verticale de seuil (point mort, prix
   optimal) et son étiquette. Pointillé pour ne jamais être confondu avec une
   série de données. */
.chart__marker {
    stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 4 3;
}
.chart__marker-label { fill: var(--red); font-size: 11px; font-weight: 700; }

/* ------------------------------------------------- fichiers de travail */
.wf-questions { display: flex; flex-direction: column; gap: var(--sp-4); }

.wf-question {
    border: 1px solid var(--line); border-radius: var(--r-m);
    padding: var(--sp-4) var(--sp-5); background: var(--bg);
}
.wf-question .field { margin-bottom: 0; }

/* L'état d'enregistrement reste discret et n'occupe jamais de place variable :
   il apparaît en couleur douce et disparaît sans décaler la question. */
.wf-question__state {
    display: block; min-height: 16px; margin-top: var(--sp-2);
    font-size: 12px; color: var(--green);
}

.wf-results { display: flex; flex-direction: column; gap: var(--sp-4); }

.wf-result {
    border-left: 3px solid var(--line);
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
}
.wf-result.is-correct { border-left-color: var(--green); }
.wf-result.is-wrong   { border-left-color: var(--red); }

.wf-result__prompt  { font-weight: 600; margin: 0 0 var(--sp-2); }
.wf-result__answers {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
    font-size: 14px; font-variant-numeric: tabular-nums;
}
.wf-result__given    { color: var(--fg); }
.wf-result__expected { color: var(--muted); }
.wf-result__why {
    margin: var(--sp-2) 0 0; font-size: 14px;
    color: var(--muted); line-height: 1.6;
}

/* ------------------------------------------------------- disponibilités */
/* La grille est un vrai tableau (sept colonnes de jours, une ligne par heure) :
   les entêtes de ligne et de colonne portent le sens pour un lecteur d'écran,
   ce qu'une grille de div ne saurait pas faire. Le CSS ne gère donc ici que la
   densité et la surface tactile. */
.avail { table-layout: fixed; font-size: 13px; }
.avail th { font-weight: 600; color: var(--muted); }
.avail tbody th { text-align: right; padding-right: var(--sp-2); }
.avail td { padding: 2px; }

/* La case entière est cliquable, pas seulement la coche : viser une case à
   cocher de 13px dans une grille de 105 cellules est impossible au doigt. */
.avail__cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 32px;
    border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--bg); cursor: pointer;
}
.avail__cell:hover { background: var(--surface); }
.avail__cell input { margin: 0; cursor: pointer; accent-color: var(--blue); }

/* -------------------------------------------------------- notifications */
/* La cloche est un lien de navigation ordinaire : seul le compteur la distingue,
   et il n'apparaît que s'il y a réellement quelque chose à lire. */
.nav-link--bell { position: relative; }

.nav-link__badge {
    display: inline-block; min-width: 18px; margin-left: var(--sp-1);
    padding: 0 5px; border-radius: 9px;
    background: var(--red); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Non lue : un fond très léger plutôt qu'une gras ou une pastille. La liste
   reste lisible même quand tout est non lu. */
.history__item.is-unread { background: var(--surface); }

/* ============================================================== tranche L
   Documents légaux, signalement, administration de groupe.

   Un document légal n'est pas une page d'interface : c'est de la prose longue
   que quelqu'un doit pouvoir lire d'un bout à l'autre, parfois pour vérifier un
   point précis. Sa mise en page vise donc la lecture suivie, pas la densité. */

.legal-doc { max-width: 68ch; }

.legal-doc h2 {
    margin: var(--sp-7) 0 var(--sp-3);
    font-size: 18px; font-weight: 800;
}
.legal-doc h3 {
    margin: var(--sp-5) 0 var(--sp-2);
    font-size: 15px; font-weight: 700; color: var(--muted);
}
.legal-doc p,
.legal-doc li { line-height: 1.7; }
.legal-doc p  { margin: 0 0 var(--sp-4); }

.legal-doc ul,
.legal-doc ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.legal-doc li { margin-bottom: var(--sp-2); }

/* Le premier paragraphe d'un document sert de résumé : il porte le ton du texte
   et décide si la personne continue. */
.legal-doc > p:first-of-type { font-size: 17px; color: var(--muted); }

/* Le pied de page porte désormais quatre liens au lieu d'un : ils passent à la
   ligne plutôt que de déborder sur mobile. */
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }


/* ------------------------------------------------ formulaire de recherche */
/* `.compare-form` était une classe ORPHELINE : elle venait du comparateur de
   cabinets supprimé en tranche H, et plus aucune règle ne la visait. Les quatre
   formulaires qui la portent tombaient donc sur la mise en page par défaut,
   champ et bouton collés l'un à l'autre sans respiration.

   Une ligne sur large écran, une colonne sur mobile. Le bouton s'aligne sur le
   BAS du champ et non sur son haut, parce que le champ porte une étiquette et
   un texte d'aide au-dessus de lui : aligner sur le haut ferait flotter le
   bouton au niveau du libellé. */
.compare-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.compare-form .field {
    flex: 1 1 260px;
    margin-bottom: 0;
}

.compare-form .btn { flex: 0 0 auto; }

@media (max-width: 560px) {
    .compare-form { flex-direction: column; align-items: stretch; }
    .compare-form .btn { width: 100%; }
}


/* ------------------------------------------------- navigation en icônes */
/* Les liens d'en-tête portaient leur libellé en toutes lettres : six mots
   alignés qui débordaient sur mobile, d'où une règle qui les masquait tous. En
   icônes, les cinq tiennent sur toute largeur et aucun ne se cache.

   Le libellé n'est pas perdu : il est en `aria-label` et en `title`, donc
   annoncé par un lecteur d'écran et affiché au survol (G46). */
.nav-link--icon {
    display: inline-flex; align-items: center; justify-content: center;
    /* 40px : cible tactile confortable pour une icône de 20px. */
    width: 40px; height: 40px; padding: 0;
}

.nav-link__icon { width: 20px; height: 20px; }

/* Le lien de la page courante est marqué : sans libellé, c'est le seul repère
   qui dit où l'on est. */
.nav-link--icon.is-current { color: var(--fg); background: var(--surface); }

/* La connexion garde son libellé : c'est l'action qu'on veut voir, et la seule
   dont l'icône seule laisserait un visiteur hésitant. */
.nav-link--cta {
    display: inline-flex; align-items: center; gap: var(--sp-2);
}
.nav-link--cta .nav-link__icon { width: 18px; height: 18px; }

/* Le menu des réglages porte désormais une icône plutôt qu'un caractère de
   demi-lune : il s'aligne donc sur la même hauteur que les liens voisins. */
/* Les deux menus prennent la même boîte que les liens en icône : 40 × 40. Sans
   largeur fixe, le bouton de langue mesurait la largeur du texte qu'il portait,
   et la barre entière se décalait au changement de langue. FR, EN et ES font
   deux caractères chacun mais pas la même largeur de glyphes : le décalage était
   d'un ou deux pixels, assez pour que les icônes voisines bougent. */
.menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    /* Tabulaire : les lettres majuscules occupent la même avance, donc le
       centrage optique est identique pour les trois codes. */
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* La cloche : le compteur se pose sur son coin, pas à côté. À côté, il
   décalait les liens voisins chaque fois qu'il apparaissait ou disparaissait. */
.nav-link--bell { position: relative; }

.nav-link--bell .nav-link__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; margin: 0; padding: 0 4px;
    border-radius: 8px;
    background: var(--red); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Une cloche qui a quelque chose à dire prend la couleur d'accent : le badge
   seul est facile à manquer du coin de l'oeil. */
.nav-link--bell.has-unread { color: var(--fg); }


/* -------------------------------------------- disponibilités par plages */
/* Remplace la grille de 105 cases à cocher. Le modèle mental est une règle
   hebdomadaire (« lundi à vendredi, 18 h à 21 h »), pas un calendrier à
   remplir : la mise en page suit cette phrase, jours d'abord, heures ensuite. */
.avail-form {
    border: 1px solid var(--line); border-radius: var(--r-m);
    padding: var(--sp-5); margin-bottom: var(--sp-6);
}

.avail-form__days {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    border: 0; padding: 0; margin: 0 0 var(--sp-5);
}
.avail-form__days legend { margin-bottom: var(--sp-3); }

/* Les jours sont des pastilles cliquables, pas des cases alignées : sept
   pastilles se visent au doigt, sept cases de 13px non. */
.avail-day {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 40px; padding: 0 var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--r-s);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.avail-day:hover { background: var(--surface); }
.avail-day input { margin: 0; cursor: pointer; accent-color: var(--teal); }

/* Compteur « 7 sur 20 » de l'écran des créneaux : le plafond se lit avant
   d'être atteint, pas au moment du refus. */
.avail__count {
    margin: 0 0 var(--sp-4); font-size: 13px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.avail-form__times {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4);
}
.avail-form__times .field { flex: 1 1 140px; margin-bottom: 0; }
.avail-form__times .btn   { flex: 0 0 auto; }

.avail-list { list-style: none; margin: 0; padding: 0; }

.avail-list__day {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}

/* Largeur fixe pour le nom du jour : sans elle, les plages ne s'alignent pas
   d'une ligne à l'autre et la liste se lit deux fois moins vite. */
.avail-list__name  { flex: 0 0 64px; font-weight: 700; }
.avail-list__none  { color: var(--muted); font-size: 14px; }
.avail-list__ranges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Une plage est une pastille dont le clic la retire. La croix dit ce que fait
   le clic : sans elle, on n'ose pas cliquer. */
.avail-chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: 34px; padding: 0 var(--sp-3);
    border: 1px solid var(--line); border-radius: var(--r-s);
    background: var(--surface); color: var(--fg);
    font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.avail-chip:hover { border-color: var(--red); color: var(--red); }
.avail-chip__x { font-size: 16px; line-height: 1; color: var(--muted); }
.avail-chip:hover .avail-chip__x { color: var(--red); }

@media (max-width: 560px) {
    .avail-form__times { flex-direction: column; align-items: stretch; }
    .avail-form__times .btn { width: 100%; }
    .avail-list__name { flex: 1 0 100%; }
}


/* ------------------------------------------------- créneaux proposés */
/* Une invitation peut porter jusqu'à trois dates : c'est ce qui évite le cycle
   refus / réinvitation / refus. La liste ne s'affiche qu'au-delà d'un créneau,
   sinon il n'y a rien à choisir. */
.slot-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }

.slot-list__item {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--r-s);
    margin-bottom: var(--sp-2);
}

/* Le créneau retenu porte la couleur de section : c'est la seule information de
   la liste qu'on cherche du regard. */
.slot-list__item.is-chosen {
    border-color: var(--accent, var(--pink));
    background: var(--surface);
}

.slot-list__when { font-weight: 600; font-variant-numeric: tabular-nums; }

.slot-list__tag {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--accent, var(--pink));
}

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

/* Bandeau d'aperçu (T378) : volontairement voyant. Discret, il manquerait son
   seul but, qui est de rappeler que la page montre du contenu non publié. */
.preview-banner {
    padding: var(--sp-3) var(--sp-4);
    background: var(--yellow); color: var(--ink);
    font-size: 13px; font-weight: 800; text-align: center;
    letter-spacing: .02em;
}