/*
 * Klareco — surcouche transverse de la coquille (squelette UI, V8-1T-01 / #659).
 * Transposition du §3 de maquettes/assets/maquette.css (socle P0 validé le 31/08) :
 * app-screen, app bar, hero, corps de page, tab bar (fixed), menu « Plus »,
 * composants transverses (tuiles, lignes, états vides, page douce, toast…).
 * Le CSS propre à une feature va dans son fichier dédié (jamais inline).
 * Bureau ≥ 992 px : même arbre de templates — la tab bar laisse place à la barre
 * haute (P0-02 ④), la colonne .app-main reste centrée à 720 px.
 */

/* ------------------------------------------------------------------ */
/* 1. Écran mobile : colonne + barre d'app + tab bar                    */
/* ------------------------------------------------------------------ */
.app-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--brand-bg);
}

.app-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 1rem;
    background: var(--brand-secondary);
    color: var(--brand-on-dark);
    font-size: .74rem;
    font-weight: 700;
}

.app-bar-brand { letter-spacing: .18em; font-weight: 800; font-size: .72rem; }
.app-bar-brand b { color: var(--brand-accent-light); }
.brand-logo { vertical-align: middle; margin-right: .45rem; }
.app-bar-stats { color: var(--brand-accent-light); }
.app-bar-light { background: var(--brand-surface); color: var(--brand-secondary); border-bottom: 1px solid var(--brand-line); }
.app-bar .btn-icon { color: inherit; padding: .1rem .3rem; border: 0; background: transparent; line-height: 1; }

/* Hero sombre (doc 82) — en mobile pleine largeur BORDS DROITS comme la maquette
   (rétropédalage François 03/09 : la zone sombre reste carrée en mobile), carte arrondie en bureau */
.hero {
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* ne jamais se faire compresser par l'écran flex (retour P0-08) */
    padding: 1.5rem 1.4rem 1.8rem;
    background: linear-gradient(168deg, var(--brand-secondary) 0%, var(--brand-secondary-2) 58%, var(--brand-secondary-3));
    color: var(--brand-on-dark);
}

.hero::after {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    top: -120px;
    right: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--brand-accent-rgb), .16), transparent 60%);
    pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }
.hero h1 { color: var(--brand-on-dark); font-size: 1.9rem; line-height: 1.12; margin: .25rem 0 .2rem; }
.hero .hero-sub { font-size: .78rem; color: var(--brand-on-dark-muted); max-width: 300px; }
.hero-center { text-align: center; }
.hero-center .hero-sub { margin-inline: auto; }

/* Tuiles de stats dans le hero */
.hero-stats { display: flex; gap: .6rem; margin-top: .95rem; }
.hero-stat { flex: 1; padding: .7rem .5rem; text-align: center; border-radius: 15px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); }
.hero-stat .num { font-family: var(--brand-font-display); font-size: 1.5rem; line-height: 1.1; color: var(--brand-on-dark); }
.hero-stat .lbl { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-on-dark-muted); }

/* Corps de page : pleine largeur mobile, colonne 720 px centrée */
.app-body { padding: 1.15rem 0 7.5rem; flex: 1; }
.app-main {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 1rem;
}
.app-body .card { margin-bottom: .8rem; }

/* Tab bar flottante — position fixed dans l'app (dans les maquettes : absolue au cadre) */
.app-tabbar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    width: min(calc(100% - 28px), 420px);
    z-index: 30;
    display: flex;
    padding: 7px 6px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--brand-secondary-rgb), .06);
    box-shadow: var(--brand-shadow-float);
}

.app-tabbar .nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px 5px;
    border-radius: 16px;
    color: var(--brand-muted);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    position: relative;
}

.app-tabbar .nav-link.active {
    color: var(--brand-secondary);
    background: linear-gradient(120deg, rgba(var(--brand-accent-rgb), .18), rgba(var(--brand-accent-rgb), .28));
}

.app-tabbar .nav-link.disabled { color: var(--brand-line); }
.app-tabbar .nav-link svg { width: 22px; height: 22px; }
.app-tabbar .tab-badge { position: absolute; top: 3px; right: 14px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand-warning); color: var(--brand-on-dark); font-size: .55rem; line-height: 16px; text-align: center; }

/* Utilitaire absent de Bootstrap 5 : un enfant de flex ne rétrécit jamais sous la largeur de son
   contenu (min-width: auto) — sans ceci, un nom long + ses badges débordent de la carte au lieu de
   se tronquer / se replier (profil, lien de parrainage, fiche produit — retour François 12/09). */
.min-w-0 { min-width: 0 !important; }

/* ------------------------------------------------------------------ */
/* 2. Menu « Plus » (offcanvas bas)                                     */
/* ------------------------------------------------------------------ */
.menu-more { --bs-offcanvas-height: auto; max-height: 78%; border-radius: 26px 26px 0 0; }
.menu-more .list-group-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .4rem; border: 0; border-bottom: 1px solid var(--brand-line-soft); font-size: .84rem; font-weight: 700; color: var(--brand-secondary); background: transparent; }
.menu-more .list-group-item svg { width: 20px; height: 20px; color: var(--brand-accent-deep); }
.menu-more .menu-group { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-muted); padding: .9rem .4rem .2rem; }

/* Entrée verrouillée / sans route : visible, grisée, avec sa condition (C1-R21, E5.7) */
.menu-locked { opacity: .55; }
.menu-locked .condition { display: block; font-size: .6rem; color: var(--brand-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Badge de file (menus) */
.queue-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand-warning); color: var(--brand-on-dark); font-size: .58rem; font-weight: 800; line-height: 18px; text-align: center; display: inline-block; }

/* ------------------------------------------------------------------ */
/* 2 bis. Splash & onboarding (P0-04)                                   */
/* ------------------------------------------------------------------ */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(168deg, var(--brand-secondary), var(--brand-secondary-2) 55%, var(--brand-secondary-3)); color: var(--brand-on-dark); }
.splash::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--brand-accent-rgb), .14), transparent 62%); animation: splash-halo 2.6s ease infinite alternate; }
@keyframes splash-halo { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.12); opacity: 1; } }
.splash-logo { position: relative; font-weight: 800; letter-spacing: .3em; font-size: 1.55rem; }
.splash-logo b { color: var(--brand-accent-light); }
.splash-star { position: relative; font-size: 1.6rem; color: var(--brand-accent-light); margin: .75rem 0 .4rem; animation: splash-twinkle 1.6s ease infinite; }
@keyframes splash-twinkle { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
.splash-tagline { position: relative; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--brand-on-dark-muted); }
.splash-base { position: absolute; bottom: 56px; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brand-on-dark-muted); }

.onboarding { flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(168deg, var(--brand-secondary), var(--brand-secondary-2) 60%, var(--brand-secondary-3)); color: var(--brand-on-dark); }
.onboarding-slide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.9rem 0; }
.onboarding-art { position: relative; width: 190px; height: 190px; margin-bottom: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4.6rem; color: var(--brand-accent-light); background: radial-gradient(circle at 34% 30%, var(--brand-secondary-3), var(--brand-secondary)); box-shadow: inset 0 0 0 1.5px rgba(var(--brand-accent-rgb), .35), 0 18px 44px rgba(var(--brand-secondary-rgb), .35); }
.onboarding-art i { position: absolute; font-style: normal; font-size: .95rem; color: var(--brand-accent-light); animation: splash-twinkle 2s infinite; }
.onboarding-art .star-a { top: 16px; right: 30px; }
.onboarding-art .star-b { bottom: 24px; left: 22px; animation-delay: .7s; }
.onboarding-slide h1 { color: var(--brand-on-dark); font-size: 1.7rem; line-height: 1.15; margin-bottom: .5rem; }
.onboarding-slide p { font-size: .8rem; color: var(--brand-on-dark-muted); max-width: 280px; line-height: 1.65; }
.onboarding-foot { padding: 1.1rem 1.5rem 1.9rem; }
.onboarding-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 1rem; }
.onboarding-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.onboarding-dots i.on { width: 22px; border-radius: var(--brand-radius-pill); background: var(--brand-accent-light); }
@media (min-width: 992px) {
    /* Le voile reste plein écran, mais dots et boutons prennent la largeur de la page de connexion
       (.auth-wrap, 26 rem) — ils couraient sur toute la largeur en bureau (retour recette Axel 11/09) */
    .onboarding-foot { width: 100%; max-width: 26rem; margin-inline: auto; }
}

/* ------------------------------------------------------------------ */
/* 3. Tuiles, avatars, lignes                                           */
/* ------------------------------------------------------------------ */
.kpi-tile { border-radius: 15px; padding: .75rem .8rem; background: var(--brand-surface); border: 1px solid var(--brand-line); }
.kpi-tile .kpi-value { font-family: var(--brand-font-display); font-size: 1.6rem; line-height: 1; color: var(--brand-secondary); }
.kpi-tile .kpi-label { font-size: .66rem; font-weight: 700; color: var(--brand-text); margin-top: .2rem; }
.kpi-tile .kpi-date { font-size: .6rem; color: var(--brand-muted); }
.kpi-tile .kpi-trend { font-size: .62rem; margin-top: .15rem; }
.kpi-tile .kpi-trend .delta { font-size: .62rem; }
/* La méthode de calcul (V8-34 : chaque chiffre du cockpit se recompte à la main) — un bouton ⓘ qui
   ouvre une feuille lisible, plus une infobulle au survol (retour François 13/09, recette #544). */
.kpi-tile .kpi-help { border: 0; background: none; padding: 0 .1rem; margin: 0; font: inherit; font-weight: 400; font-size: .8rem; line-height: 1; color: var(--brand-muted); cursor: pointer; vertical-align: baseline; }
.kpi-tile .kpi-help:hover, .kpi-tile .kpi-help:focus-visible { color: var(--brand-accent); }
/* La feuille « Comment ce chiffre est compté » : une information par ligne (retour François 15/09, recette #551 — « on aère ») */
.sheet-modal .kpi-sheet-figure { font-size: 1rem; margin-bottom: .9rem; display: flex; flex-direction: column; gap: .15rem; }
.sheet-modal .kpi-sheet-figure b { font-family: var(--brand-font-display); font-size: 1.8rem; line-height: 1.1; color: var(--brand-secondary); }
.sheet-modal .kpi-sheet-figure .kpi-sheet-label { font-weight: 600; }
.sheet-modal .kpi-sheet-figure .kpi-sheet-meta { font-size: .9rem; }
.sheet-modal .kpi-sheet-help { font-size: .95rem; line-height: 1.55; }
.sheet-modal ul.kpi-sheet-help { padding-left: 1.15rem; margin: 0 0 1rem; }
.sheet-modal ul.kpi-sheet-help li { margin-bottom: .5rem; }
/* Le ⓘ d'une carte (« La course », la grille du rapport) : même bouton, même feuille */
.console-section-title .kpi-help, .report-sheet .kpi-help { border: 0; background: none; padding: 0 .1rem; font: inherit; font-weight: 400; font-size: .85rem; color: var(--brand-muted); cursor: pointer; }
.console-section-title .kpi-help:hover, .report-sheet .kpi-help:hover { color: var(--brand-accent); }
.sheet-modal dl.kpi-methods { margin: 0 0 .6rem; }
.sheet-modal dl.kpi-methods dt { font-weight: 700; margin-top: .55rem; }
.sheet-modal dl.kpi-methods dd { margin: .1rem 0 0; font-size: .92rem; line-height: 1.5; }
/* La carte « La course » et la légende des listes (retour François 13/09, recette #544) : une ligne =
   un libellé à gauche, sa valeur à droite, un filet léger entre les lignes — les nombres se lisent
   en bout de ligne ; la légende se lit ligne par ligne, pas au kilomètre. */
.course-block { padding: .15rem 0 .35rem; }
.course-block + .course-block, .course-total { border-top: 1px solid var(--brand-line); margin-top: .35rem; padding-top: .45rem; }
.course-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .28rem 0; color: var(--brand-muted); }
.course-row + .course-row { border-top: 1px dashed var(--brand-line); }
.course-row.course-head { color: inherit; padding-top: .1rem; }
/* La sortie d'un coaching (retour François 14/09, recette #536) : repliée tant que le coaching n'a pas eu lieu
   (un bouton l'ouvre — <details>, sans JS), la date ne s'affiche que pour une sortie « date ». */
.outcome-toggle > summary { list-style: none; cursor: pointer; }
.outcome-toggle > summary::-webkit-details-marker { display: none; }
.outcome-toggle[open] > summary { display: none; }
.outcome-form:has(input[name="sortie"][value="decision"]:checked) .outcome-date { display: none; }
/* En-tête personnalisé du menu Plus (retour François 14/09) : prénom, e-mail du compte, un mot d'élan. */
.menu-me { min-width: 0; }
/* Le profil : une pastille par rôle, qui passent à la ligne proprement (Régine en porte quatre). */
.menu-me-roles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.menu-role-pill { font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: var(--brand-radius-pill); background: rgba(var(--brand-accent-rgb), .12); color: var(--brand-accent-deep); }
.menu-me-mail { font-size: .8rem; color: var(--brand-muted); margin-top: .15rem; overflow-wrap: anywhere; }
.menu-me-mood { font-size: .9rem; color: var(--brand-accent-deep); font-weight: 700; margin-top: .35rem; }
/* Carte « Mes rendez-vous » (V8-26, retour recette #536 cas 3 : aérer) : chaque ligne d'attente
   (appels à faire, appel à caler, mot du lendemain) est un bloc séparé par un filet, le lien sur sa ligne. */
.events-line { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--brand-line); line-height: 1.7; }
.events-line + .events-line { margin-top: .9rem; }
.events-line > div + div { margin-top: .3rem; }
.events-line a { display: inline-block; margin-top: .6rem; font-weight: 700; }
/* La carte elle-même respire : de l'air sous l'en-tête (titre + sous-titre + Voir) et en bas. */
.events-card .card-body { padding-bottom: 1.15rem; }
.events-card .card-subtitle { margin-top: .2rem; line-height: 1.6; }
.course-row .v { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--brand-text); }
.course-names { color: var(--brand-muted); font-style: italic; padding: 0 0 .3rem; }
.care-legend { list-style: none; padding-left: 0; margin: 0; }
.care-legend li { display: flex; gap: .5rem; align-items: baseline; padding: .18rem 0; }
.care-legend li + li { border-top: 1px dashed var(--brand-line); }
.care-legend .ico { flex: 0 0 1.25rem; text-align: center; }
.kpi-tile-dark { background: var(--brand-secondary-2); border-color: transparent; }
.kpi-tile-dark .kpi-value { color: var(--brand-on-dark); }
.kpi-tile-dark .kpi-label { color: var(--brand-on-dark); }
.kpi-tile-dark .kpi-date { color: var(--brand-on-dark-muted); }

.avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-3)); color: var(--brand-accent-light); font-weight: 800; font-size: .88rem; flex: 0 0 auto; }
.avatar-initials.avatar-lg { width: 56px; height: 56px; font-size: 1.25rem; }
.avatar-initials.avatar-sm { width: 28px; height: 28px; font-size: .7rem; }
.avatar-initials.avatar-ok { background: var(--brand-success); color: var(--brand-on-dark); }

/* Ligne de liste (contact, filleule, coureuse) */
.row-item { display: flex; align-items: center; gap: .7rem; padding: .65rem 0; border-bottom: 1px dashed var(--brand-line-soft); }
.row-item:last-child { border-bottom: 0; }
.row-item .row-text { flex: 1; min-width: 0; }
.row-item .row-text b { display: block; font-size: .82rem; color: var(--brand-secondary); }
.row-item .row-text span { font-size: .68rem; color: var(--brand-muted); }
/* Badge long sous le nom (row_item `tag`) — jamais à droite où il écraserait le texte sur mobile */
.row-item .row-text .row-tag { display: table; margin-top: .25rem; font-size: .6rem; white-space: nowrap; }
/* Plusieurs petites étiquettes sur une ligne (les portes du vivier 💼 / 🥂 — retour recette #658, 10/09) */
.row-item .row-text .row-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.row-item .row-text .row-tags .row-tag { display: inline-block; margin-top: 0; }
/* Ligne empilée (row_item `stacked`, retour François 10/09 sur le vivier) : le texte prend toute la largeur
   à côté de l'avatar, l'action descend en pied, alignée à droite — plus de colonne qui écrase le texte. */
.row-item.is-stacked { flex-wrap: wrap; }
.row-item.is-stacked .row-text b { font-size: .9rem; }
.row-item.is-stacked .row-text span { font-size: .72rem; }
.row-item.is-stacked .row-foot { flex: 0 0 100%; display: flex; justify-content: flex-end; margin-top: .35rem; }
/* Fait : on grise, on ne barre pas (retour François 31/08) */
.row-item.is-done .row-text, .row-item.is-done .row-text b { color: var(--brand-muted); }
.row-item.is-done .gesture-icon { opacity: .6; }
/* La ligne de celle qui regarde (liste d'équipe) : fond doux + pastille « toi » — qu'elle se retrouve d'un coup d'œil. */
.row-item.is-me { background: rgba(var(--brand-accent-rgb), .08); border-radius: 12px; padding-left: .5rem; padding-right: .5rem; margin: 0 -.5rem; }
.row-item .row-me { font-size: .58rem; vertical-align: middle; margin-left: .2rem; }
/* Ligne à cocher (sélection « prendre dans ma course », V8-22 bis) : toute la ligne est l'étiquette */
label.row-item { cursor: pointer; margin: 0; }
.row-item .row-check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; }
/* Ligne de contact (carnet) : trois lignes identiques partout — le nom, les étiquettes (.row-tags : force du
   lien + statut), le dernier geste sur toute la largeur — plus de badge à droite qui écrasait « relance prévue
   aujourd'hui · WhatsApp » sur trois lignes à 390 px (retour François 12/09, recette #690). */
.contact-row .row-text > span { display: block; margin-top: .2rem; font-size: .72rem; }

/* Jauge horizontale (libellé + détail + barre) */
.gauge { margin-bottom: .7rem; }
.gauge-head { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: .25rem; }
.gauge-head b { font-weight: 700; color: var(--brand-secondary); }
.gauge-head span { color: var(--brand-muted); font-size: .66rem; }

/* Pastille de série 🔥 */
.streak { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: var(--brand-radius-pill); background: rgba(var(--brand-accent-rgb), .18); color: var(--brand-secondary); font-size: .7rem; font-weight: 800; }
.hero .streak { background: rgba(255, 255, 255, .12); color: var(--brand-on-dark); }

/* Geste / tâche du jour */
.gesture-icon { flex: 0 0 40px; height: 40px; border-radius: 13px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

/* Sélecteur à options (statut, force du lien, canal, motif) */
.picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.picker-4 { grid-template-columns: repeat(4, 1fr); }
.picker .opt { border: 1.5px solid var(--brand-line); border-radius: 14px; padding: .5rem .55rem; background: var(--brand-surface); font-size: .7rem; text-align: left; color: var(--brand-text); }
.picker .opt .em { font-size: 1.05rem; display: block; }
.picker .opt b { display: block; color: var(--brand-secondary); font-size: .74rem; }
.picker .opt small { display: block; color: var(--brand-muted); font-size: .6rem; line-height: 1.2; }
.picker .opt { cursor: pointer; }
.picker .opt:has(input:checked) { border-color: var(--brand-accent); background: var(--brand-surface-soft); box-shadow: 0 3px 9px rgba(var(--brand-accent-rgb), .22); }
.picker-4 .opt { text-align: center; padding: .45rem .2rem; }
/* Une tuile par ligne (picker cols: 1) : emoji et libellé côte à côte, même hauteur pour toutes — le type d'événement (14/09). */
.picker-1 { grid-template-columns: 1fr; }
.picker-1 .opt { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; }
.picker-1 .opt .em { display: inline-block; font-size: 1.2rem; flex: 0 0 auto; }
.picker-1 .opt b { display: inline-block; font-size: .84rem; }

/* Compteur global d'invitations avec jours repères (C5-R19) — barre à crans + grille de repères */
.invitation-counter .counter-num { font-family: var(--brand-font-display); font-size: 2.6rem; line-height: 1; color: var(--brand-secondary); }
.invitation-counter .counter-row { display: flex; align-items: center; gap: .6rem; }
.invitation-counter .track { position: relative; height: 12px; margin: .7rem 0 .5rem; }
.invitation-counter .track .progress { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.invitation-counter .tick { position: absolute; top: -4px; width: 3px; height: 20px; margin-left: -1px; border-radius: 2px; background: var(--brand-line); }
.invitation-counter .tick.is-reached { background: var(--brand-success); }
.repere-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.repere { border: 1px solid var(--brand-line); border-radius: 12px; padding: .4rem .3rem; text-align: center; background: var(--brand-surface-soft); }
.repere .repere-day { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted); font-weight: 800; }
.repere .repere-val { font-family: var(--brand-font-display); font-size: 1.25rem; line-height: 1.1; color: var(--brand-secondary); }
.repere .repere-state { font-size: .58rem; color: var(--brand-muted); }
.repere.is-reached { border-color: var(--brand-success); background: var(--brand-success-soft); }
.repere.is-reached .repere-val, .repere.is-reached .repere-state { color: var(--brand-success); }
.repere.is-next { border-color: var(--brand-accent); background: rgba(var(--brand-accent-rgb), .12); }
.repere.is-next .repere-state { color: var(--brand-accent-deep); font-weight: 800; }

/* Encart conseil en ligne (conseil contextuel dans une page) */
.lumi-inline { position: relative; background: var(--brand-surface-soft); border: 1px dashed var(--brand-accent); border-radius: 12px; padding: .65rem .8rem .65rem 2.6rem; font-size: .76rem; color: var(--brand-accent-deep); }
.lumi-inline::before { content: '✨'; position: absolute; left: .8rem; top: .6rem; font-size: 1.1rem; }

/* ------------------------------------------------------------------ */
/* 4. Composants d'état                                                 */
/* ------------------------------------------------------------------ */
.empty-state { text-align: center; padding: 1.6rem 1rem; color: var(--brand-muted); }
.empty-state .emoji { font-size: 2rem; margin-bottom: .4rem; }
.empty-state h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.empty-state p { font-size: .78rem; max-width: 280px; margin: 0 auto .8rem; }

.soft-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.6rem; }
.soft-page .emoji { font-size: 2.6rem; margin-bottom: .6rem; }
.soft-page h1 { font-size: 1.6rem; }
.soft-page p { font-size: .8rem; color: var(--brand-muted); max-width: 300px; }

.toast-k { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 36; max-width: 84%; padding: .7rem 1.25rem; border-radius: var(--brand-radius-pill); background: var(--brand-secondary); color: var(--brand-on-dark); font-size: .78rem; font-weight: 700; text-align: center; box-shadow: 0 12px 32px rgba(var(--brand-secondary-rgb), .4); }
.toast-k b { color: var(--brand-accent-light); }

.quiet-hours { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 12px; background: rgba(var(--brand-secondary-rgb), .07); font-size: .7rem; color: var(--brand-secondary); font-weight: 700; }

/* Bandeau d'état en tête d'écran (info, en attente, signal doux — jamais de rouge) */
.race-state { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.race-state .emoji { font-size: 1.2rem; }
.race-state.is-paused { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-secondary); }
.race-state.is-rest { background: var(--brand-info-soft); color: var(--brand-info); }
.race-state.is-deferred { background: rgba(var(--brand-accent-rgb), .15); color: var(--brand-accent-deep); }
.race-state.is-late { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }

/* ------------------------------------------------------------------ */
/* 5. Authentification (colonne publique)                               */
/* ------------------------------------------------------------------ */
.auth-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 1.1rem 2rem; width: 100%; max-width: 26rem; margin-inline: auto; }
.auth-wrap .brand-lockup { text-align: center; margin-bottom: 1rem; }
.auth-wrap .brand-lockup .app-bar-brand { font-size: 1rem; color: var(--brand-secondary); }
.auth-wrap .brand-lockup small { display: block; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-muted); margin-top: .2rem; }
.auth-wrap h1 { font-size: 1.6rem; margin-bottom: .2rem; }
.auth-wrap .lead-k { font-size: .8rem; color: var(--brand-text); margin-bottom: 1rem; }
.seal { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted); margin-top: .8rem; }

/* Erreur de champ : ton doux ambre, jamais rouge, avec respiration (retour François 01/09) */
.field-error { font-size: .68rem; color: var(--brand-warning-deep); margin: .2rem 0 .8rem; line-height: 1.3; }
.form-control.is-soft-invalid { border-color: var(--brand-warning); background-color: color-mix(in srgb, var(--brand-warning) 5%, transparent); }

/* Champ révélable (mot de passe) */
.input-reveal { position: relative; }
.input-reveal .reveal { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--brand-muted); font-size: .9rem; }

/* Code à 6 chiffres (2FA) */
.code-inputs { display: flex; gap: .45rem; justify-content: center; }
.code-inputs .form-control { width: 2.6rem; padding: .7rem .2rem; text-align: center; font-size: 1.3rem; font-weight: 800; font-family: var(--brand-font-display); }
.code-inputs .form-control.is-filled { border-color: var(--brand-accent); background: var(--brand-surface-soft); }

/* Mention éditeur en pied des pages publiques */
.powered-by { letter-spacing: .12em; font-size: .62rem; }

/* Boutons rendus comme des liens de navigation (Plus, tiroirs) */
button.nav-link { border: 0; background: transparent; }

/* Corps de page sans tab bar (layout public) : pas de réserve en bas */
.app-body-flush { padding-bottom: 2rem; }

/* ------------------------------------------------------------------ */
/* 6. Bureau ≥ 992 px : même arbre, barre haute à la place de la tab bar */
/* ------------------------------------------------------------------ */
/* Barre haute membre (P0-02 ④) : cachée en mobile, remplace app bar + tab bar en bureau */
.member-topbar { border-bottom: 1px solid var(--brand-line); background: var(--brand-surface); }
.member-topbar .navbar-nav .nav-link { font-weight: 700; font-size: .82rem; color: var(--brand-muted); }
.member-topbar .navbar-nav .nav-link.active { color: var(--brand-secondary); }
.member-topbar .navbar-nav .nav-link.disabled { color: var(--brand-line); }
.member-topbar .app-bar-stats { color: var(--brand-accent-deep); font-size: .74rem; font-weight: 700; }
.member-topbar .nav-link .queue-badge { vertical-align: text-bottom; }

@media (min-width: 992px) {
    .app-tabbar { display: none; }
    .app-body { padding-bottom: 2.5rem; }
    /* Le hero rejoint la colonne 720 px, en carte arrondie (P0-02 ④) — en mobile il reste pleine largeur, bords droits */
    .hero { max-width: 720px; width: calc(100% - 2rem); margin: 1rem auto 0; border-radius: var(--brand-radius-card); }
}

/* Cartes sur deux colonnes dès 768 px (P0-02 ④) — grille opt-in posée par l'écran */
.card-cols { display: grid; grid-template-columns: 1fr; gap: .8rem; align-items: start; }
.card-cols .card { margin-bottom: 0; }
@media (min-width: 768px) {
    .card-cols { grid-template-columns: 1fr 1fr; }
    .card-cols .span-2 { grid-column: span 2; }
}

/* ------------------------------------------------------------------ */
/* 7. Classes utilitaires calculées (le style inline est proscrit)      */
/* ------------------------------------------------------------------ */
/* Largeur de barre de progression par pas de 5 % */
.progress-step-0 { width: 0; }
.progress-step-5 { width: 5%; }
.progress-step-10 { width: 10%; }
.progress-step-15 { width: 15%; }
.progress-step-20 { width: 20%; }
.progress-step-25 { width: 25%; }
.progress-step-30 { width: 30%; }
.progress-step-35 { width: 35%; }
.progress-step-40 { width: 40%; }
.progress-step-45 { width: 45%; }
.progress-step-50 { width: 50%; }
.progress-step-55 { width: 55%; }
.progress-step-60 { width: 60%; }
.progress-step-65 { width: 65%; }
.progress-step-70 { width: 70%; }
.progress-step-75 { width: 75%; }
.progress-step-80 { width: 80%; }
.progress-step-85 { width: 85%; }
.progress-step-90 { width: 90%; }
.progress-step-95 { width: 95%; }
.progress-step-100 { width: 100%; }

/* Position horizontale par pas de 5 % (repères de compteurs) */
.pos-0 { left: 0; }
.pos-5 { left: 5%; }
.pos-10 { left: 10%; }
.pos-15 { left: 15%; }
.pos-20 { left: 20%; }
.pos-25 { left: 25%; }
.pos-30 { left: 30%; }
.pos-35 { left: 35%; }
.pos-40 { left: 40%; }
.pos-45 { left: 45%; }
.pos-50 { left: 50%; }
.pos-55 { left: 55%; }
.pos-60 { left: 60%; }
.pos-65 { left: 65%; }
.pos-70 { left: 70%; }
.pos-75 { left: 75%; }
.pos-80 { left: 80%; }
.pos-85 { left: 85%; }
.pos-90 { left: 90%; }
.pos-95 { left: 95%; }
.pos-100 { left: 100%; }

/* ------------------------------------------------------------------ */
/* 8. Course d'équipe & kickoff (fil groupe 1, lot 1 ter)               */
/* ------------------------------------------------------------------ */
/* Checklist cochable (préparation, opt-in — components/checklist) */
.checklist .form-check { padding: .5rem 0 .5rem 2rem; border-bottom: 1px dashed var(--brand-line-soft); font-size: .8rem; }
.checklist .form-check:last-child { border-bottom: 0; }
.checklist .form-check-input { width: 1.3rem; height: 1.3rem; margin-left: -2rem; margin-top: .05rem; border-radius: 7px; }
.checklist .form-check-input:checked + label { color: var(--brand-muted); }

/* Carte d'événement de course (components/event_card) */
.event-card { border: 1px solid var(--brand-line); border-radius: 16px; padding: .75rem .85rem; background: var(--brand-surface); margin-bottom: .6rem; }
.event-card .ev-head { display: flex; align-items: center; gap: .6rem; }
.event-card .ev-emoji { flex: 0 0 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--brand-surface-soft); border: 1px solid var(--brand-line); }
.event-card .ev-title { font-weight: 800; font-size: .84rem; color: var(--brand-secondary); }
.event-card .ev-when { font-size: .66rem; color: var(--brand-muted); }
.event-card .ev-body { font-size: .76rem; color: var(--brand-text); margin: .5rem 0 .4rem; }
.event-card.is-accent { border-color: var(--brand-accent); }
.event-card.is-done { opacity: .7; }

/* Tâche du déroulé (components/race_task) : texte pleine largeur, pied type + XP + action */
.race-task { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px dashed var(--brand-line-soft); align-items: flex-start; }
.race-task:last-child { border-bottom: 0; }
.race-task .rt-body { flex: 1; min-width: 0; }
.race-task .rt-text { font-size: .8rem; color: var(--brand-secondary); line-height: 1.35; }
.race-task .rt-foot { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .35rem; }
.race-task .rt-foot .rt-action { margin-left: auto; }
.race-task.is-done .rt-text { color: var(--brand-muted); }
.race-task.is-done .gesture-icon { opacity: .6; }
.task-type { font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; padding: .1rem .45rem; border-radius: var(--brand-radius-pill); }
.task-type.auto { background: rgba(31, 157, 107, .12); color: var(--brand-success); }
.task-type.decl { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-secondary); }
.task-type.hybr { background: rgba(var(--brand-accent-rgb), .18); color: var(--brand-accent-deep); }
.xp-pending { font-size: .6rem; color: var(--brand-muted); font-style: italic; }

/* Ordre du jour du kickoff (ligne verticale à puces) */
.timeline { position: relative; padding-left: 1.3rem; }
.timeline::before { content: ''; position: absolute; left: .42rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--brand-line); }
.tl-item { position: relative; padding: .3rem 0 .55rem; font-size: .76rem; }
.tl-item::before { content: ''; position: absolute; left: -1.3rem; top: .55rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); border: 2px solid var(--brand-surface); }
.tl-item.is-auto::before { background: var(--brand-success); }
.tl-item.is-future::before { background: var(--brand-line); }
.tl-when { display: block; font-size: .62rem; color: var(--brand-muted); }

/* Bande claire d'en-tête des pages publiques (kickoff, vitrine) — pleine largeur mobile */
.public-hero { padding: 1.6rem 1.4rem 1.2rem; background: var(--brand-surface); border-bottom: 1px solid var(--brand-line); }
.public-hero h1 { font-size: 1.9rem; line-height: 1.1; }
@media (min-width: 992px) {
    /* Comme le hero membre : la bande rejoint la colonne 720 px, en carte arrondie (P0-02 ④) */
    .public-hero { max-width: 720px; width: calc(100% - 2rem); margin: 1rem auto 0; border-radius: var(--brand-radius-card); border: 1px solid var(--brand-line); }
}

/* ------------------------------------------------------------------ */
/* 9. Écran Course & quotidien (fil groupes 2-3, lot 1 ter)             */
/* ------------------------------------------------------------------ */
/* Barre des 3 phases (components/race_phases) */
.phase-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: .5rem 0 .3rem; }
.phase-track .phase { position: relative; height: 10px; border-radius: 6px; background: var(--brand-line-soft); overflow: hidden; }
.phase-track .phase i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--brand-accent-deep), var(--brand-accent-light)); }
.phase-track .phase.is-done i { background: var(--brand-success); }
.phase-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: .58rem; color: var(--brand-muted); text-align: center; }
.phase-labels .is-current { color: var(--brand-secondary); font-weight: 800; }

/* Jalons (components/race_milestones) — en retard : ambre « il t'attend », jamais rouge (C5-R04) */
/* Aéré le 15/09 (retour François, recette #538) : plus de corps, plus de marge, une information par ligne. */
.milestone { border: 1px solid var(--brand-line-soft); border-left: 4px solid var(--brand-accent); border-radius: 8px; padding: .8rem .95rem; margin: .75rem 0; font-size: .84rem; line-height: 1.5; }
.milestone .ms-head { margin-bottom: .3rem; }
.milestone .ms-measure { font-weight: 700; color: var(--brand-secondary); }
.milestone.is-done { border-left-color: var(--brand-success); color: var(--brand-muted); }
.milestone.is-soft { border-left-color: var(--brand-on-dark-muted); }
.milestone.is-late { border-left-color: var(--brand-warning); }
.milestone.is-current { background: var(--brand-surface-soft); }
.milestone b { color: var(--brand-secondary); }
.milestone .ms-day { display: inline-block; min-width: 2.4rem; font-family: var(--brand-font-display); font-size: 1rem; color: var(--brand-secondary); }
.milestone.is-done .ms-day { color: var(--brand-success); }
.milestone .ms-meta { font-size: .76rem; color: var(--brand-muted); margin-top: .15rem; }
.milestone .progress { margin: .5rem 0 .35rem; }
.ms-celebrate { display: inline-block; font-size: .62rem; color: var(--brand-success); font-weight: 800; }

/* Bandeau d'état de la course (pause, repos, retard) — jamais de rouge */
.race-state { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.race-state .emoji { font-size: 1.2rem; }
.race-state.is-paused { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-secondary); }
.race-state.is-rest { background: var(--brand-info-soft); color: var(--brand-info); }
.race-state.is-deferred { background: rgba(var(--brand-accent-rgb), .15); color: var(--brand-accent-deep); }
.race-state.is-late { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }

/* Le bouton « ⋯ » de la carte Ma course (P3-11 — un seul point d'entrée pause / retrait / arrêt) */
/* Le menu « ⋯ Options » de la carte Ma course : un vrai bouton, évident (retour François 05/09) */
/* « ⋯ Options » à côté de « Ma course » : même corps que son voisin, texte centré dans la pastille (retour François 15/09, recette #538). */
.race-more { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: 0 0 auto; }

/* Écran atténué (pause, feuille de décision ouverte) — la carte .race-keep reste nette */
.race-dim .card:not(.race-keep) { opacity: .55; }

/* Gestes optionnels d'un jour de repos (« envie quand même ? ») */
.race-optional .race-task .rt-text { color: var(--brand-muted); }

/* Grille du check-in 5×5 (components/race_checkin) */
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: .5rem 0; }
.grid-5 .dot { aspect-ratio: 1; border-radius: 50%; background: var(--brand-line-soft); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--brand-secondary); }
.grid-5 .dot.on { background: rgba(var(--brand-accent-rgb), .35); }
.grid-5 .daylab { text-align: center; font-size: .6rem; color: var(--brand-muted); }
/* La semaine réelle Lu → Di (V8-22) : 7 colonnes, pour que la 6ᵉ journée bonus existe */
.grid-5.is-week { grid-template-columns: repeat(7, 1fr); }
.grid-5.is-week .dot { font-size: .7rem; }

/* Emplacement réservé d'une zone livrée plus tard (components/race_placeholder) */
.zone-placeholder { border: 1.5px dashed var(--brand-line); border-radius: var(--brand-radius-card); padding: .9rem 1rem; color: var(--brand-muted); font-size: .74rem; background: transparent; margin-bottom: .8rem; }
.zone-placeholder b { color: var(--brand-secondary); display: block; font-family: var(--brand-font-display); font-size: 1.1rem; }

/* Niveau + XP + série (components/level_bar, posé dans le hero de Ma journée) */
.level-bar { display: flex; align-items: center; gap: .8rem; }
.level-bar .level-num { font-family: var(--brand-font-display); font-size: 2rem; line-height: 1; color: var(--brand-accent-light); }
.level-bar .level-title { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.level-bar .level-title-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.level-bar .level-xp, .level-bar .streak { white-space: nowrap; }
.level-bar .progress { height: .4rem; margin-top: .3rem; }

/* Célébration plein écran (components/celebration — confettis CSS depuis le 07/09, décision François) */
.celebration-overlay { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1.6rem; background: rgba(10, 17, 29, .66); }
.celebration { background: var(--brand-surface); border-radius: var(--brand-radius-card); padding: 1.3rem; max-width: 300px; text-align: center; box-shadow: 0 22px 60px rgba(0, 0, 0, .4); }
.celebration .emoji { font-size: 2.2rem; margin-bottom: .3rem; }
.celebration h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.celebration p { font-size: .78rem; color: var(--brand-text); line-height: 1.6; margin-bottom: .8rem; }
/* Les confettis de la maquette P0-07 (décision François 07/09 : on les garde) : 16 brins en CSS pur,
   couleurs des jetons (accent, accent clair, violet, crème, succès), chute + rotation en continu (2,4 s, comme
   la maquette), au-dessus du voile et derrière la carte —
   aucune bibliothèque, aucun JS ; coupés si la personne a demandé moins d'animations. */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -4vh; width: 9px; height: 14px; border-radius: 2px; opacity: 0; background: var(--brand-accent); animation: confetti-fall 2.4s ease-in infinite; }
.confetti i:nth-child(5n + 2) { background: var(--brand-accent-light); }
.confetti i:nth-child(5n + 3) { background: var(--brand-violet); }
.confetti i:nth-child(5n + 4) { background: var(--brand-surface-soft); }
.confetti i:nth-child(5n) { background: var(--brand-success); border-radius: 50%; width: 10px; height: 10px; }
.confetti i:nth-child(1) { left: 4%; animation-delay: .05s; }
.confetti i:nth-child(2) { left: 11%; animation-delay: .35s; }
.confetti i:nth-child(3) { left: 17%; animation-delay: .1s; }
.confetti i:nth-child(4) { left: 24%; animation-delay: .5s; }
.confetti i:nth-child(5) { left: 30%; animation-delay: .2s; }
.confetti i:nth-child(6) { left: 37%; animation-delay: .6s; }
.confetti i:nth-child(7) { left: 43%; animation-delay: 0s; }
.confetti i:nth-child(8) { left: 50%; animation-delay: .45s; }
.confetti i:nth-child(9) { left: 56%; animation-delay: .15s; }
.confetti i:nth-child(10) { left: 63%; animation-delay: .7s; }
.confetti i:nth-child(11) { left: 69%; animation-delay: .3s; }
.confetti i:nth-child(12) { left: 76%; animation-delay: .55s; }
.confetti i:nth-child(13) { left: 82%; animation-delay: .25s; }
.confetti i:nth-child(14) { left: 88%; animation-delay: .65s; }
.confetti i:nth-child(15) { left: 94%; animation-delay: .4s; }
.confetti i:nth-child(16) { left: 98%; animation-delay: .8s; }
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* Flashs en toasts flottants (HAUT d'écran, sous la barre — préférence François 05/09) :
   avec le morphing qui conserve le défilement, un flash posé dans la page serait invisible ;
   flottant et fixe, il se voit où qu'on soit. Auto-refermé par assets/flashes.js. */
.flash-zone { position: fixed; left: 50%; transform: translateX(-50%); top: calc(4rem + env(safe-area-inset-top)); z-index: 1085; width: min(92%, 640px); }
.flash-zone .alert { box-shadow: var(--brand-shadow-card); margin-bottom: .5rem; }
@media (min-width: 992px) { .flash-zone { top: 5rem; } }
/* Mises à jour en place (morphing Turbo, doctrine #528) : l'ancrage de défilement du navigateur
   compense tout bloc retiré puis recréé pendant le morph et fait sauter la page de plusieurs
   centaines de pixels (recette #531, 07/09 : « j'ai eu un rechargement et je suis remonté en haut »).
   On le désactive : le défilement est alors tenu par Turbo seul (turbo-refresh-scroll: preserve). */
html { overflow-anchor: none; }

/* Feuille de décision (components/sheet_modal — offcanvas bas) + carte de choix */
.sheet-modal { --bs-offcanvas-height: auto; max-height: 82%; border: 0; border-radius: 26px 26px 0 0; padding: 1.2rem 1.1rem 1.5rem; overflow-y: auto; }
.sheet-modal h2 { font-size: 1.35rem; margin-bottom: .2rem; }
.sheet-modal .lead-k { font-size: .78rem; color: var(--brand-text); margin-bottom: .9rem; }
.choice { display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 1.5px solid var(--brand-line); border-radius: 16px; background: var(--brand-surface); margin-bottom: .5rem; }
.choice .choice-emoji { flex: 0 0 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--brand-surface-soft); }
.choice b { display: block; font-size: .84rem; color: var(--brand-secondary); }
.choice span { font-size: .7rem; color: var(--brand-muted); }
/* La surbrillance suit le radio coché — jamais une classe posée par le serveur (recette #539, 08/09) */
.choice:has(input:checked) { border-color: var(--brand-accent); background: var(--brand-surface-soft); box-shadow: 0 3px 9px rgba(var(--brand-accent-rgb), .22); }
.choice .form-check-input { margin-left: auto; flex: 0 0 auto; }

/* Notification in-app (components/notification — carte posée dans la page) */
.notif-card { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 18px; background: var(--brand-surface); }
.notif-card.notif-static { box-shadow: var(--brand-shadow-card); border: 1px solid var(--brand-line); margin-bottom: .6rem; }
.notif-icon { flex: 0 0 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-secondary-3)); color: var(--brand-accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.notif-card b { display: block; font-size: .78rem; color: var(--brand-secondary); }
.notif-card span { display: block; font-size: .72rem; color: var(--brand-text); line-height: 1.45; }
.notif-card .notif-meta { font-size: .6rem; color: var(--brand-muted); margin-top: 1px; }
.notif-card.is-unread { border-left: 4px solid var(--brand-accent); }

/* Compte à rebours d'une course d'équipe (sur hero sombre) */
.countdown { display: flex; gap: .5rem; justify-content: center; }
.countdown .cd { text-align: center; min-width: 58px; padding: .5rem .3rem; border-radius: 14px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); }
.countdown .cd b { display: block; font-family: var(--brand-font-display); font-size: 1.6rem; line-height: 1; color: var(--brand-on-dark); }
.countdown .cd small { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-on-dark-muted); }

/* Encadré « mot proposé » (marraine — signé d'elle, envoyé par elle, jamais par la machine) */
.suggest-box { border: 1px dashed var(--brand-line); border-radius: 12px; padding: .55rem .7rem; font-size: .78rem; background: var(--brand-surface-soft); }

/* Anneau vide (place réservée de la vue « 4 semaines » du check-in, dessinée au fil groupe 7) */
.ring-sm { width: 56px; height: 56px; margin: 0 auto; border: 6px solid var(--brand-line-soft); border-radius: 50%; }

/* ------------------------------------------------------------------ */
/* 10. Calculateur de palier & copilote (fil groupe 4, lot 1 ter)       */
/* ------------------------------------------------------------------ */
/* La boîte du calculateur (components/calculator) — points et commandes, jamais un euro (C5-R11) */
.calc { border: 1px solid var(--brand-line); border-radius: 16px; padding: .85rem; background: var(--brand-surface); }
.calc .calc-gap { display: flex; align-items: baseline; gap: .4rem; font-family: var(--brand-font-display); font-size: 1.6rem; color: var(--brand-secondary); }
.calc .calc-gap small { font-family: var(--brand-font-body); font-size: .8rem; color: var(--brand-muted); }
.calc .calc-gap-line { font-size: .78rem; color: var(--brand-muted); line-height: 1.6; }
.calc .calc-gap-line + .calc-gap-line { margin-top: .1rem; }
.calc .calc-gap-line + :not(.calc-gap-line) { margin-top: .9rem; }
.calc .calc-note + .calc-result, .calc .calc-result + .calc-note { margin-top: .9rem; }
.calc-result { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .6rem 0; }
.calc-result .cr { background: var(--brand-surface-soft); border-radius: 12px; padding: .55rem .6rem; text-align: center; }
.calc-result .cr b { display: block; font-size: 1.3rem; color: var(--brand-primary); font-family: var(--brand-font-display); }
.calc-result .cr small { font-size: .74rem; color: var(--brand-muted); white-space: nowrap; }
.calc-note { font-size: .86rem; line-height: 1.6; color: var(--brand-text); background: rgba(var(--brand-accent-rgb), .12); border-radius: 10px; padding: .8rem .9rem; }
.calc-note > div + div { margin-top: .35rem; }
/* Message honnête (structure, points inconnus, seuil de réalisme) — jamais un chiffre absurde, jamais de rouge */
.calc-note.is-honest { background: rgba(var(--brand-secondary-rgb), .07); }

/* Objection du copilote (components/objection) : dépliable, réponse courte puis longue */
.objection { border-bottom: 1px dashed var(--brand-line-soft); }
.objection:last-child { border-bottom: 0; }
.objection summary { list-style: none; cursor: pointer; padding: .8rem 0; font-size: .9rem; line-height: 1.45; font-weight: 700; color: var(--brand-secondary); display: flex; gap: .5rem; align-items: center; }
.objection summary::-webkit-details-marker { display: none; }
.objection summary::after { content: "›"; margin-left: auto; color: var(--brand-muted); transition: transform .25s ease; }
.objection[open]:not(.is-closing) summary::after { transform: rotate(90deg); }
/* Le dépliage glisse comme un collapse Bootstrap (retour Axel, recette #546, redemandé sur les cinq lois
   de l'écran Partager le 14/09) : race.js anime la hauteur de TOUT <details data-slide> de l'app — délégation
   sur le document, la règle ci-dessous vaut donc pour l'objection du copilote comme pour les lois
   (Firefox et Safari n'interpolent pas la hauteur « auto » du contenu natif — Chrome seul) ;
   le temps du glissement, le contenu est rogné et le chevron suit le sens (is-closing). Sans JS : ouverture native. */
details[data-slide].is-sliding { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .objection summary::after { transition: none; } }
.objection .obj-short { font-size: .86rem; line-height: 1.55; background: var(--brand-surface-soft); border-radius: 10px; padding: .65rem .8rem; margin-bottom: .5rem; }
.objection .obj-long { font-size: .84rem; line-height: 1.55; color: var(--brand-text); padding-bottom: .8rem; }
.objection .obj-tag { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-muted); }

/* Script de phase (components/script_card) — copiable, jamais envoyé par la machine (J-02) */
.script-card { border-left: 3px solid var(--brand-accent); background: var(--brand-surface-soft); border-radius: 0 12px 12px 0; padding: .55rem .7rem; font-size: .8rem; margin-bottom: .5rem; }
.script-card b { display: block; font-size: .7rem; color: var(--brand-secondary); margin-bottom: .15rem; }

/* ------------------------------------------------------------------ */
/* 11. Événements de la course (fil groupe 5, lot 1 ter)                */
/* ------------------------------------------------------------------ */
/* Ligne d'un fil (components/feed_item) — victoires du tableau collectif, à venir, sorties */
.feed-item { display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .78rem; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .feed-emoji { flex: 0 0 28px; font-size: 1rem; text-align: center; }
.feed-item .feed-when { font-size: .62rem; color: var(--brand-muted); }

/* Réponse à une invitation (components/reply_pill) — « non » est une vraie réponse (C5-R19) */
.reply-pill { font-size: .6rem; font-weight: 800; padding: .15rem .5rem; border-radius: var(--brand-radius-pill); }
.reply-yes { background: rgba(31, 157, 107, .12); color: var(--brand-success); }
.reply-maybe { background: rgba(var(--brand-accent-rgb), .18); color: var(--brand-accent-deep); }
.reply-no { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-muted); }
.reply-wait { background: var(--brand-line-soft); color: var(--brand-muted); }

/* ------------------------------------------------------------------ */
/* 12. Terrain : mallettes, apéros Pschitt & vivier (fil groupe 6)      */
/* ------------------------------------------------------------------ */
/* Carte de mallette (components/kit_card) — mise en page 01/09 : état sur la ligne du nom, action en pied.
   Recette #657 (09/09) : plus de picto, le nom en titre de carte, la description en texte courant,
   l'état en information secondaire (petit, atténué) sous la description. */
.kit-card { border: 1px solid var(--brand-line); border-radius: 16px; padding: .75rem .8rem; background: var(--brand-surface); margin-bottom: .6rem; }
.kit-card .kit-head { display: flex; gap: .7rem; align-items: flex-start; }
.kit-card .kit-text { flex: 1; min-width: 0; font-size: .8rem; }
.kit-card .kit-title { margin-bottom: .2rem; }
.kit-card .kit-title b { font-size: 1.05rem; line-height: 1.25; }
/* Pastille d'état toujours sous le nom, à gauche — même place quelle que soit la longueur du nom */
.kit-card .kit-state-row { margin-bottom: .35rem; }
.kit-card .kit-desc { color: var(--brand-text); margin-bottom: .3rem; }
.kit-card .kit-text b { color: var(--brand-secondary); }
.kit-card .kit-text small { color: var(--brand-muted); font-size: .68rem; }
.kit-card .kit-foot { display: flex; justify-content: flex-end; margin-top: .5rem; }
.kit-state { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .5rem; border-radius: var(--brand-radius-pill); white-space: nowrap; }
.kit-home { background: rgba(31, 157, 107, .12); color: var(--brand-success); }
.kit-away { background: rgba(var(--brand-accent-rgb), .22); color: var(--brand-accent-deep); }
/* Retour à traiter (V8-39) : la checklist attend — ton secondaire, jamais de rouge */
.kit-back { background: color-mix(in srgb, var(--brand-secondary) 14%, transparent); color: var(--brand-secondary); }
.kit-rebuild { background: var(--brand-line-soft); color: var(--brand-muted); }
/* Retour dépassé : liseré accent, jamais de rouge (C5-R04) */
.kit-card.is-late { border-color: rgba(var(--brand-accent-rgb), .6); }

/* Rentabilité par voyage (P8-11) — un constat des ventes, visible de la vendeuse seule (C9-R10) */
.trip-row { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .78rem; }
.trip-row:last-child { border-bottom: 0; }
.trip-row .tr-who b { color: var(--brand-secondary); }
.trip-row .tr-val { text-align: right; white-space: nowrap; }
.trip-row .tr-val b { color: var(--brand-primary); }
/* Le détail d'un voyage (#738) : une commande par bloc, en feuille ou sur la page « Tous ses voyages » */
.journey-order { padding: .45rem 0; border-bottom: 1px dashed var(--brand-line-soft); }
.journey-order:last-of-type { border-bottom: 0; }

/* La pastille numérotée des sorties et des étapes (components/step_mark — #739) : les glyphes ① ② des maquettes
   sortaient d'une police de secours dans les titres ; ici le chiffre est dans la police du texte, cerclé d'accent */
.step-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45em;
    height: 1.45em;
    margin-right: .35em;
    border: 1.5px solid var(--brand-accent);
    border-radius: 50%;
    font-family: var(--bs-body-font-family);
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-accent);
    vertical-align: .14em;
}
.private-eye { font-size: .66rem; color: var(--brand-muted); display: flex; align-items: center; gap: .3rem; }

/* --- Classes partagées avec le carnet (P2, section 15) — leur unique occurrence
       vit ici depuis la déduplication de la reprise du #672 ------------------------------ */
/* Puces de filtre défilantes (carnet : 7 statuts · vivier : tous / hôtesses / mallette / apéro) */
.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem 0 .4rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
    /* Bureau : ni doigt pour faire défiler, ni barre visible — les puces passent à la ligne (retour recette Axel 11/09) */
    .chips { flex-wrap: wrap; overflow: visible; }
}
.chip { flex: 0 0 auto; padding: .35rem .75rem; border-radius: var(--brand-radius-pill); border: 1px solid var(--brand-line); background: var(--brand-surface); font-size: .7rem; font-weight: 700; color: var(--brand-text); white-space: nowrap; }
.chip.active { background: var(--brand-secondary); border-color: var(--brand-secondary); color: var(--brand-on-dark); }
.chip .cnt { opacity: .6; font-weight: 600; margin-left: .2rem; }

/* Force du lien (fort / moyen / faible / influente — clés CSS historiques temp-*) */
.temp { display: inline-flex; align-items: center; gap: .2rem; font-size: .62rem; font-weight: 800; padding: .12rem .5rem; border-radius: var(--brand-radius-pill); }
.temp-hot { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }
.temp-warm { background: rgba(var(--brand-accent-rgb), .18); color: var(--brand-accent-deep); }
.temp-cold { background: var(--brand-info-soft); color: var(--brand-info); }
.temp-vip { background: var(--brand-violet-soft); color: var(--brand-violet); }

/* Ligne de contact : relance due (point ambre, jamais rouge — C5-R04) */
.row-item.is-due .row-text span { color: var(--brand-warning); font-weight: 700; }
.due-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-warning); margin-right: .3rem; vertical-align: middle; }

/* Tags libres + suggérés (invitées d'un apéro, e-mails libres) */
.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-k { font-size: .66rem; padding: .2rem .6rem; border-radius: var(--brand-radius-pill); background: var(--brand-line-soft); color: var(--brand-text); }
.tag-k.is-suggested { background: transparent; border: 1px dashed var(--brand-line); color: var(--brand-muted); }

/* ------------------------------------------------------------------ */
/* 13. Pilotage : vue santé, feux & diagnostic (fil groupe 7, lot 1 ter) */
/* ------------------------------------------------------------------ */

/* Vue santé du capitaine (P4-03) : ligne de coureuse, badge d'état */
.health-row .row-text b { display: flex; align-items: center; gap: .35rem; }
.health-badge { font-size: .6rem; font-weight: 800; padding: .1rem .5rem; border-radius: var(--brand-radius-pill); }
.health-fond { background: var(--brand-success-soft); color: var(--brand-success); }
.health-ralentit { background: rgba(var(--brand-accent-rgb), .18); color: var(--brand-accent-deep); }
.health-silence { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }
.health-pause { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-muted); }
.health-arrivee { background: var(--brand-success-soft); color: var(--brand-success); }
/* Carte « Les seuils » : une ligne par état, badge en tête (retour de recette François 12/09, #543) */
.health-thresholds li { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; font-size: .85rem; }
.health-thresholds li + li { border-top: 1px solid var(--brand-line); }
.health-thresholds .health-badge { flex-shrink: 0; white-space: nowrap; }

/* Feux marraine (P8-06) — le rouge n'existe que côté marraine (C5-R16) ; sans tone : pause */
.light-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.light-dot.light-green { background: var(--brand-success); }
.light-dot.light-orange { background: var(--brand-warning); }
.light-dot.light-red { background: var(--brand-danger); }
.signal-chip { font-size: .62rem; font-weight: 700; padding: .1rem .45rem; border-radius: var(--brand-radius-pill); background: var(--brand-line-soft); color: var(--brand-text); margin-right: .2rem; }

/* Diagnostic guidé de décrochage (P8-07) */
.diag-step { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .8rem; }
.diag-step:last-child { border-bottom: 0; }
.diag-step .ds-q { flex: 1; }
.diag-step .ds-q b { display: block; color: var(--brand-secondary); }
.diag-step .ds-a { display: flex; gap: .3rem; flex-shrink: 0; }

/* ------------------------------------------------------------------ */
/* 14. Après la course (J91+) & capsules (fil groupes 8-9, lot 1 ter)   */
/* ------------------------------------------------------------------ */

/* Bilan J90 (P9-01) : les faits en chiffres — jamais une note (décision 26/08) */
.bilan-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.bilan-facts .bf { background: var(--brand-surface-soft); border-radius: 12px; padding: .55rem .6rem; text-align: center; }
.bilan-facts .bf b { display: block; font-size: 1.35rem; color: var(--brand-secondary); font-family: var(--brand-font-display); }
.bilan-facts .bf small { font-size: .62rem; color: var(--brand-muted); }

/* Les moments qui restent */
.moment { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .78rem; }
.moment:last-child { border-bottom: 0; }
.moment .m-when { flex: 0 0 44px; font-size: .62rem; font-weight: 800; color: var(--brand-accent-deep); padding-top: .15rem; }

/* Les suites au choix — la membre choisit, rien d'automatique */
.suite-card { border: 1px solid var(--brand-line); border-radius: 14px; padding: .65rem .75rem; margin-bottom: .5rem; display: flex; gap: .6rem; align-items: center; background: var(--brand-surface); }
.suite-card .sc-emoji { font-size: 1.3rem; }
.suite-card b { display: block; font-size: .8rem; color: var(--brand-secondary); }
.suite-card small { font-size: .68rem; color: var(--brand-muted); }

/* Avant / après sur snapshots (components/kpi_tile en variante comparée — P9-02) */
.kpi-compare { margin-bottom: .8rem; }
.kpi-compare:last-child { margin-bottom: 0; }
.before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: stretch; }
.before-after .ba { border-radius: 12px; padding: .6rem .65rem; text-align: center; }
.before-after .ba-before { background: var(--brand-surface-soft); border: 1px dashed var(--brand-line); }
.before-after .ba-after { background: rgba(var(--brand-accent-rgb), .14); border: 1px solid rgba(var(--brand-accent-rgb), .45); }
.before-after .ba small { display: block; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--brand-muted); margin-bottom: .15rem; }
.before-after .ba b { font-size: 1.3rem; font-family: var(--brand-font-display); color: var(--brand-secondary); }
.before-after .ba-arrow { display: flex; align-items: center; font-size: 1.1rem; color: var(--brand-accent-deep); }

/* Rétrospective (P9-03) — anonymisation réelle en base, dite à l'écran */
.retro-q { padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .8rem; }
.retro-q:last-child { border-bottom: 0; }
.retro-q b { display: block; color: var(--brand-secondary); margin-bottom: .25rem; }
.anon-note { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 700; color: var(--brand-success); background: var(--brand-success-soft); border-radius: var(--brand-radius-pill); padding: .15rem .6rem; }
.feedback-quote { background: var(--brand-surface-soft); border-radius: 12px; padding: .5rem .65rem; font-size: .76rem; font-style: italic; margin-bottom: .4rem; }
.feedback-quote small { display: block; font-style: normal; font-size: .62rem; color: var(--brand-muted); margin-top: .15rem; }

/* Révélées (components/star_card — P9-05) : privé capitaine, jamais un classement public (C5-R21) */
.standout { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .8rem; }
.standout:last-child { border-bottom: 0; }
.standout .st-rank { flex: 0 0 26px; height: 26px; border-radius: 50%; background: rgba(var(--brand-accent-rgb), .2); color: var(--brand-accent-deep); font-weight: 800; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.private-band { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 12px; background: rgba(var(--brand-secondary-rgb), .07); border: 1px dashed var(--brand-secondary); font-size: .72rem; font-weight: 700; color: var(--brand-secondary); }

/* Course archivée (P9-06) — lecture seule, rien ne s'efface */
.archived-band { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 12px; background: var(--brand-line-soft); font-size: .72rem; font-weight: 700; color: var(--brand-muted); }
.is-archived .card { opacity: .92; }

/* Bilan miroir marraine (P9-07) — les faits, jamais le carnet (C5-R06) */
.mirror-issue { border: 1px solid var(--brand-line); border-radius: 14px; padding: .6rem .7rem; margin-bottom: .5rem; font-size: .78rem; background: var(--brand-surface); }
.mirror-issue.is-chosen { border-color: var(--brand-accent); background: var(--brand-surface-soft); }
.mirror-issue b { display: block; color: var(--brand-secondary); }
.mirror-issue ul { margin: .25rem 0 0; padding-left: 1rem; font-size: .74rem; color: var(--brand-text); }
/* Cadence semaine par semaine — la pause est une force, pas une faute : jamais de rouge (C5-R04) */
.pause-strip { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin: .3rem 0; }
.pause-strip i { flex: 1; background: var(--brand-success); opacity: .55; }
.pause-strip i.slow { background: var(--brand-warning); }
.pause-strip i.pause { background: var(--brand-line); }
.pause-strip i.off { background: var(--brand-line-soft); }

/* Capsules (components/capsule — P6-11, P6-12) : couverture, sections, accusé de lecture */
.capsule-cover { border-radius: var(--brand-radius-card); padding: 1.2rem 1rem; background: linear-gradient(160deg, var(--brand-secondary-2), var(--brand-secondary)); color: var(--brand-on-dark); }
.capsule-cover .cp-kind { font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--brand-accent-light); font-weight: 800; }
.capsule-cover h2 { color: var(--brand-on-dark); font-size: 1.5rem; margin: .2rem 0; }
.capsule-cover .cp-meta { font-size: .68rem; color: var(--brand-on-dark-muted); }
.capsule-section { padding: .7rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .82rem; }
.capsule-section:last-child { border-bottom: 0; }
.capsule-section h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.capsule-progress { display: flex; gap: .3rem; }
.capsule-progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.capsule-progress i.done { background: var(--brand-success); }
.capsule-progress i.on { background: var(--brand-accent); }
/* Accusé de lecture (blocage doux J0) : fixé en bas, passe DEVANT la tab bar — la seule fois où l'app fait attendre */
.capsule-ack { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(100%, 720px); z-index: 40; padding: .8rem .9rem 1.1rem; background: var(--brand-surface); border-top: 1px solid var(--brand-line); box-shadow: 0 -8px 24px rgba(var(--brand-secondary-rgb), .12); }
.capsule-ack .form-check-label { font-size: .76rem; }

/* Interdits (P6-11) — six choses qu'on ne fait jamais */
.interdit { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .8rem; }
.interdit:last-child { border-bottom: 0; }
.interdit .no { flex: 0 0 30px; height: 30px; border-radius: 9px; background: rgba(var(--brand-secondary-rgb), .08); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--brand-secondary); font-size: .76rem; }

/* ------------------------------------------------------------------ */
/* 15. Carnet (P2 — V8-1T-10)                                           */
/* Les classes partagées vivent ailleurs (dédupliqué à la reprise du    */
/* WIP #672) : timeline / sheet-modal / choice / race-dim en section 9, */
/* chips / temp-* / is-due / due-dot / tags en section 12.              */
/* ------------------------------------------------------------------ */

/* Barre des paliers de la liste (hero du carnet — 12 · 50 · 100 · 200 · 500) */
.capital { display: flex; align-items: center; gap: .6rem; font-size: .7rem; color: var(--brand-on-dark-muted); }
.capital .progress { flex: 1; height: .35rem; }

/* Note « privé » en pied des vues du carnet (components/lock_note — C5-R06) */
.lock-note { display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .66rem; color: var(--brand-muted); text-align: center; padding: .4rem .6rem; }

/* Feuille commande : une ligne produit = libellé pleine largeur, puis quantité × points (V8-18) */
.order-line { border: 1px solid var(--brand-line); border-radius: 12px; padding: .5rem .7rem; margin-top: .5rem; background: var(--brand-surface); }
.order-line-qty { width: 4.5rem; flex: 0 0 auto; }

/* Feuille commande : les suggestions dans leur panneau, distinctes du panier (retour recette 05/09) */
.order-results { border: 1px solid var(--brand-line); border-radius: 12px; padding: .5rem .7rem; background: var(--brand-surface-soft); max-height: 15rem; overflow-y: auto; }

/* En-tête de fiche contact (sur hero sombre) */
.contact-head { display: flex; gap: .8rem; align-items: center; }
.contact-head .avatar-initials { width: 56px; height: 56px; font-size: 1.3rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.contact-head h1 { font-size: 1.6rem; margin: 0; color: var(--brand-on-dark); }
.contact-head .meta { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.contact-head .meta .badge { background: rgba(255, 255, 255, .14); color: var(--brand-on-dark); }
.contact-head .meta .temp { background: rgba(255, 255, 255, .92); }

/* Les 3 gestes en un tap */
.gestures-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.gestures-3 .btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; font-size: .68rem; line-height: 1.15; border-radius: 16px; }
.gestures-3 .btn .em { font-size: 1.3rem; }

/* Memory Jogger */
.jogger-prompt { background: var(--brand-secondary); color: var(--brand-on-dark); border-radius: var(--brand-radius-card); padding: 1.1rem 1rem; }
.jogger-prompt .q { font-family: var(--brand-font-display); font-size: 1.35rem; line-height: 1.15; }
.jogger-prompt .sub { font-size: .7rem; color: var(--brand-on-dark-muted); }
.jogger-steps { display: flex; gap: .3rem; margin: .5rem 0 .2rem; }
.jogger-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.jogger-steps i.on { background: var(--brand-accent-light); }
.jogger-steps i.done { background: var(--brand-success); }
.name-input { display: flex; gap: .4rem; }
.name-input .form-control { flex: 1; }

/* ------------------------------------------------------------------ */
/* 16. Compléments hors vue course (V8-1T-11) : compte, e-mails,        */
/* bannière de recette, console des invitations                         */
/* ------------------------------------------------------------------ */

/* Grille de préférences famille × canal (components/pref_grid — E11.2, C11-R01) */
.pref-head { display: grid; grid-template-columns: 1fr 52px 52px; gap: .3rem; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-muted); text-align: center; padding: 0 0 .3rem; }
.pref-head span:first-child { text-align: left; }
.pref-row { display: grid; grid-template-columns: 1fr 52px 52px; gap: .3rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .78rem; }
.pref-row:last-child { border-bottom: 0; }
.pref-row b { display: block; color: var(--brand-secondary); font-size: .8rem; }
.pref-row small { color: var(--brand-muted); font-size: .64rem; }
.pref-row .form-check { display: flex; justify-content: center; padding: 0; margin: 0; }
.pref-row .form-check-input { margin: 0; }

/* Registre des consentements (components/consent_item — ledger Consent, C11-R03) */
.consent-item { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px dashed var(--brand-line-soft); font-size: .76rem; }
.consent-item:last-child { border-bottom: 0; }
.consent-item .ci-icon { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line); display: flex; align-items: center; justify-content: center; }
.consent-item b { display: block; color: var(--brand-secondary); }
.consent-item .ci-meta { font-size: .62rem; color: var(--brand-muted); }

/* Gabarit e-mail P0-14 (components/email_frame) + aperçu du catalogue */
.email-preview { min-height: 100vh; background: var(--brand-bg); padding: 2rem 1rem; }
.email-preview .email-wrap { margin-bottom: 1.5rem; }
.email-wrap { max-width: 560px; margin: 0 auto; background: var(--brand-surface); border: 1px solid var(--brand-line); border-radius: 12px; overflow: hidden; font-family: var(--brand-font-body); }
.email-head { background: var(--brand-secondary); color: var(--brand-on-dark); padding: 1.1rem 1.4rem; font-weight: 800; letter-spacing: .18em; font-size: .8rem; }
.email-body { padding: 1.4rem; font-size: .88rem; line-height: 1.6; color: var(--brand-text); }
.email-body h1 { font-size: 1.6rem; }
.email-cta { display: inline-block; padding: .8rem 1.4rem; border-radius: 14px; background: var(--brand-accent); color: var(--brand-secondary) !important; font-weight: 800; text-decoration: none; }
.email-foot { padding: .9rem 1.4rem; font-size: .68rem; color: var(--brand-muted); border-top: 1px solid var(--brand-line); }

/* Bandeau « environnement de recette » (_partials/env_banner — V8-15, J-11) : rayé ambre, toutes surfaces */
.env-banner { position: sticky; top: 0; z-index: 60; text-align: center; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .28rem .6rem; background: repeating-linear-gradient(-45deg, var(--brand-warning) 0 10px, color-mix(in srgb, var(--brand-warning) 78%, white) 10px 20px); color: var(--brand-secondary); }

/* États d'invitation d'activation (console P1-15 — V8-14) */
.invite-state { font-size: .62rem; font-weight: 800; padding: .12rem .5rem; border-radius: var(--brand-radius-pill); white-space: nowrap; }
.invite-todo { background: var(--brand-line-soft); color: var(--brand-muted); }
.invite-sent { background: color-mix(in srgb, var(--brand-accent) 18%, transparent); color: var(--brand-accent-deep); }
.invite-done { background: var(--brand-success-soft); color: var(--brand-success); }
.invite-noemail { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }

/* Modale de confirmation montrée ouverte dans un écran du catalogue (wrapper .is-static-modal) */
.is-static-modal .modal { display: block; position: static; height: auto; width: auto; overflow: visible; background: color-mix(in srgb, var(--brand-secondary) 45%, transparent); border-radius: var(--brand-radius-card); padding: 1rem 0; margin-top: 1rem; }
.is-static-modal .modal-dialog { min-height: 0; margin: 0 auto; max-width: 540px; transform: none; }
.is-static-modal .modal-content { box-shadow: 0 22px 60px rgba(0, 0, 0, .3); }

/* ------------------------------------------------------------------ */
/* 17. Constellation de la marraine (P4-07 → P4-11 — V8-1T-11)          */
/* ------------------------------------------------------------------ */

/* Cartes-étoiles (components/constellation_star — états 🔥🌙🕯️⏸️, relais CL-04) */
.star-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.star-card { position: relative; border: 1px solid var(--brand-line); border-radius: 18px; padding: .8rem .75rem .7rem; background: var(--brand-surface); text-align: center; }
.star-card .avatar-initials { width: 46px; height: 46px; font-size: 1.05rem; margin: 0 auto .35rem; }
.star-card .star-name { font-weight: 800; font-size: .84rem; color: var(--brand-secondary); }
.star-card .star-state { font-size: .64rem; color: var(--brand-muted); }
.star-card .star-race { margin-top: .4rem; font-size: .62rem; padding: .15rem .5rem; border-radius: var(--brand-radius-pill); display: inline-block; background: var(--brand-line-soft); color: var(--brand-text); }
.star-card.is-hot { border-color: color-mix(in srgb, var(--brand-warning) 50%, transparent); }
.star-card.is-candle { border-color: var(--brand-line); background: var(--brand-surface-soft); }
.star-card.is-paused { opacity: .75; }
.star-card .light { position: absolute; top: .55rem; right: .6rem; font-size: 1rem; }
.star-card.is-relay::after { content: 'relais'; position: absolute; top: .5rem; left: .6rem; font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-violet); }

/* Feux de course en texte (● coloré) — visibles de la marraine seule (C5-R16) */
.light-green { color: var(--brand-success); }
.light-amber { color: var(--brand-warning); }
.light-red { color: var(--brand-danger); }

/* Bandeau « qui m'accompagne » (P4-11) — coach de relais en violet (CL-04) */
.who-band { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 16px; background: var(--brand-surface); border: 1px solid var(--brand-line); }
.who-band b { display: block; font-size: .82rem; color: var(--brand-secondary); }
.who-band .flex-grow-1 span { font-size: .68rem; color: var(--brand-muted); }
.avatar-initials.avatar-relay { background: var(--brand-violet); }

/* ------------------------------------------------------------------ */
/* 18. Animation d'équipe : cercles, annonces, notifications            */
/* (P6-01 → P6-13 — V8-1T-11)                                           */
/* ------------------------------------------------------------------ */

/* Onglets des cercles (components/circle_tabs) */
.circle-tabs .nav-link { display: flex; align-items: center; gap: .3rem; }
.circle-tabs .nav-link .badge { font-size: .5rem; }

/* Feu de camp (components/campfire — chaleur collective, jamais un score individuel) */
.campfire { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 14px; background: var(--brand-surface-soft); border: 1px solid var(--brand-line); }
.campfire .cf-emoji { font-size: 1.5rem; }
.campfire b { display: block; font-size: .78rem; color: var(--brand-secondary); }
.campfire small { font-size: .62rem; color: var(--brand-muted); }
.campfire .cf-text { flex: 1; min-width: 0; }
.campfire .progress { height: .4rem; }
.ritual-cta { flex-shrink: 0; white-space: nowrap; }

/* Message d'un cercle (components/post) : types, réactions, états 📌 🙈 🚩 */
.post { padding: .75rem 0; border-bottom: 1px dashed var(--brand-line-soft); }
.post:last-child { border-bottom: 0; }
.post-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; }
.post-head .avatar-initials { width: 32px; height: 32px; font-size: .78rem; }
.post-head b { font-size: .8rem; color: var(--brand-secondary); }
.post-head .post-when { font-size: .62rem; color: var(--brand-muted); }
.post-head > div { flex: 1; min-width: 0; }
.post-type { flex-shrink: 0; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .5rem; border-radius: var(--brand-radius-pill); }
.post-type.msg { background: rgba(var(--brand-secondary-rgb), .08); color: var(--brand-secondary); }
.post-type.win { background: color-mix(in srgb, var(--brand-accent) 20%, transparent); color: var(--brand-accent-deep); }
.post-type.ask { background: var(--brand-info-soft); color: var(--brand-info); }
.post-type.tip { background: var(--brand-success-soft); color: var(--brand-success); }
.post-type.sys { background: var(--brand-line-soft); color: var(--brand-muted); }
.post-body { font-size: .82rem; color: var(--brand-text); line-height: 1.5; }
.post-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.react { border: 1px solid var(--brand-line); background: var(--brand-surface); border-radius: var(--brand-radius-pill); padding: .15rem .55rem; font-size: .66rem; color: var(--brand-text); }
.react.is-on { border-color: var(--brand-accent); background: var(--brand-surface-soft); font-weight: 700; }
.react.help { border-color: var(--brand-success); color: var(--brand-success); font-weight: 800; }
.post.is-pinned { background: var(--brand-surface-soft); border-radius: 12px; padding: .75rem .7rem; border-bottom: 0; margin-bottom: .4rem; }
.post.is-hidden .post-body { color: var(--brand-muted); font-style: italic; }
.post.is-system .post-body { font-size: .76rem; }
.post-flag { font-size: .6rem; font-weight: 800; padding: .08rem .45rem; border-radius: var(--brand-radius-pill); }
.flag-pinned { background: color-mix(in srgb, var(--brand-accent) 20%, transparent); color: var(--brand-accent-deep); }
.flag-hidden { background: var(--brand-line-soft); color: var(--brand-muted); }
.flag-reported { background: var(--brand-warning-soft); color: var(--brand-warning-deep); }

/* Refus du filtre zéro-promesse (components/filter_block — C11-R04, rien n'est enregistré) */
.filter-block { border: 1px solid var(--brand-warning); background: color-mix(in srgb, var(--brand-warning) 8%, transparent); border-radius: 12px; padding: .6rem .8rem; font-size: .74rem; color: var(--brand-warning-deep); }
.filter-block b { color: var(--brand-warning-deep); }
.filter-block mark { background: color-mix(in srgb, var(--brand-warning) 25%, transparent); color: inherit; padding: 0 .2em; border-radius: 3px; }
.form-control.is-blocked { border-color: var(--brand-warning); }

/* RGPD & import (P8-14 / P8-15) : page légale publique, étapes d'import, deltas du comparatif */
.legal { font-size: .82rem; line-height: 1.6; }
.legal h2 { font-size: 1.15rem; margin: 1rem 0 .3rem; }
.legal table { font-size: .76rem; }
.legal-toc { font-size: .74rem; }
.legal-toc a { display: block; padding: .15rem 0; }
/* Le rituel d'import (V8-41) : un stepper à trois pas reliés — faits en vert, pas courant accentué, à venir en retrait
   (retours François 15/09, recette #551 : « on aère », « plus sexy »). Colonnes sur grand écran, pile sur téléphone. */
.import-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; counter-reset: none; }
.import-stepper li { position: relative; display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--brand-line-soft); background: var(--brand-surface); font-size: .84rem; line-height: 1.45; opacity: .75; }
.import-stepper li.current { opacity: 1; border-color: var(--brand-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 18%, transparent); }
.import-stepper li.done { opacity: 1; border-color: color-mix(in srgb, var(--brand-success) 45%, var(--brand-line-soft)); background: color-mix(in srgb, var(--brand-success) 7%, var(--brand-surface)); }
.import-stepper .is-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-secondary); color: var(--brand-on-dark); font-size: .8rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.import-stepper li.current .is-num { background: var(--brand-accent); color: var(--brand-secondary); }
.import-stepper li.done .is-num { background: var(--brand-success); }
.import-stepper .is-text b { display: block; font-size: .95rem; color: var(--brand-secondary); }
.import-stepper .is-text > span { color: var(--brand-muted); }
@media (min-width: 992px) {
    .import-stepper { grid-template-columns: repeat(3, 1fr); }
    /* Le fil qui relie les pas */
    .import-stepper li:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -.75rem; width: .75rem; height: 2px; background: var(--brand-line); }
}
/* Le résumé du rapport à blanc : un compteur par tuile, son sens dessous ; « is-hot » = un compteur qui mérite un œil */
.import-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 992px) { .import-summary { grid-template-columns: repeat(5, 1fr); } }
.import-summary .isum { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .8rem; border-radius: 14px; background: var(--brand-line-soft); }
.import-summary .isum b { font-family: var(--brand-font-display); font-size: 1.5rem; line-height: 1.1; color: var(--brand-secondary); }
.import-summary .isum span { font-size: .82rem; font-weight: 700; }
.import-summary .isum small { font-size: .72rem; color: var(--brand-muted); line-height: 1.35; }
.import-summary .isum.is-hot { background: color-mix(in srgb, var(--brand-accent) 16%, var(--brand-surface)); }
/* L'encart « fiches relais reconnues » : une information à lire avant d'appliquer */
.import-callout { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .95rem; border-radius: 14px; border-left: 4px solid var(--brand-accent); background: color-mix(in srgb, var(--brand-accent) 10%, var(--brand-surface)); font-size: .84rem; line-height: 1.45; }
.import-callout .ic-ico { font-size: 1.4rem; line-height: 1; }
.import-callout b { color: var(--brand-secondary); }
/* Les deux gestes : appliquer d'abord, rejeter à côté — pleine largeur sur téléphone */
.import-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.import-actions form { flex: 1 1 220px; }
.import-actions .btn { width: 100%; padding-block: .7rem; }
.delta { font-weight: 800; font-size: .74rem; }
.delta.up { color: var(--brand-success); }
.delta.down { color: var(--brand-accent-deep); }
.delta.flat { color: var(--brand-muted); }

/* Annonces (components/announcement) + bandeau non-lues (P6-08) */
.announce { border: 1px solid var(--brand-line); border-radius: 16px; padding: .8rem .85rem; background: var(--brand-surface); margin-bottom: .6rem; }
.announce.is-unread { border-left: 4px solid var(--brand-accent); }
.announce.is-pinned { background: var(--brand-surface-soft); }
.announce .an-head { display: flex; align-items: center; gap: .5rem; font-size: .64rem; color: var(--brand-muted); margin-bottom: .3rem; }
.announce .an-title { font-weight: 800; font-size: .88rem; color: var(--brand-secondary); }
.announce .an-body { font-size: .8rem; margin: .3rem 0 .5rem; }
.announce-band { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--brand-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand-accent) 50%, transparent); font-size: .74rem; font-weight: 700; color: var(--brand-secondary); }
.read-ratio { display: flex; align-items: center; gap: .6rem; font-size: .74rem; }
.read-ratio .progress { flex: 1; height: .5rem; }