/* ==========================================================================
   CLR — clr-public, portail joueurs
   Repris tel quel de la maquette (mockup/assets/css/clr-public.css, SPEC § 2) :
   mêmes classes, même rendu. Écarts voulus :
   - couleurs uniquement par les tokens de :root (CLAUDE.md règle 19) : les
     teintes transparentes s'écrivent rgb(var(--blue-rgb) / .13) ;
   - hauteurs en dvh, jamais vh (barre d'adresse mobile, SPEC § 2.4) ;
   - pas de burger : sous 880 px, barre d'onglets en bas (section « Coquille »,
     en fin de fichier).
   Noir + violet dominants. L'accent ambre, complémentaire du violet (jeton --orange, nom conservé), reste un accent RARE et porteur de
   sens : l'accroche du hero, le rang 1, la ligne « vous » du classement, le
   temps manquant d'une partie perdue, le bouton de réservation. Partout
   ailleurs, c'est le bleu.
   ========================================================================== */

/* ---------- Polices servies par le site (public/fonts/) ----------
   Montserrat est la police du site de la franchise : on la reprend pour les
   titres comme pour le texte. JetBrains Mono ne sert qu'aux valeurs chiffrées
   (scores, temps, codes), où l'alignement des chiffres compte. */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-var.woff2') format('woff2-variations'),
         url('../fonts/montserrat-var.woff2') format('woff2');
    font-weight: 100 900; font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-var.woff2') format('woff2-variations'),
         url('../fonts/jetbrains-var.woff2') format('woff2');
    font-weight: 100 800; font-display: swap;
}

:root {
    /* Palette de la marque (alignée sur clr-controller : TV + IHM joueur).
       Seul endroit du site où une couleur s'écrit en clair (SPEC § 2.2). */
    --bg:         #050305;
    --bg-2:       #0a050a;
    --panel:      #160915;
    --panel-hi:   #231024;
    --border:     #4a2748;
    --border-hi:  #6f3a6c;
    --text:       #f5eff5;
    --muted:      #bba8ba;
    --blue:       #e4a9e1;
    --blue-hi:    #f4cff1;
    --blue-dim:   rgb(var(--blue-rgb) / .14);
    --orange:     #ff9f1c;
    --orange-hi:  #ffb84d;
    --orange-dim: rgb(var(--orange-rgb) / .14);
    --success:    #3fb950;
    --danger:     #f85149;
    --warn:       #d29922;
    --on-accent:  #1a0f00;        /* texte sur l'accent ambre */
    --white:      #fff;           /* texte sur un bouton orange */
    --on-blue:    #1a0818;        /* texte sur un fond bleu (avatar) */
    --blue-deep:  #922684;        /* départ des dégradés bleus (barres, avatars) */
    --orange-glow: #ffd08a;       /* repère d'écran orange, au survol */

    /* Les mêmes couleurs en canaux R G B, pour les teintes transparentes :
       rgb(var(--blue-rgb) / .13) = le voile bleu des blocs de chiffres. */
    --bg-rgb:      5 3 5;
    --bg-2-rgb:    10 5 10;
    --panel-rgb:   22 9 21;
    --border-rgb:  74 39 72;
    --muted-rgb:   187 168 186;
    --blue-rgb:    228 169 225;
    --orange-rgb:  255 159 28;
    --success-rgb: 63 185 80;
    --danger-rgb:  248 81 73;
    --warn-rgb:    210 153 34;
    --white-rgb:   255 255 255;
    --blue-deep-rgb: 146 38 132;

    /* Photo de fond : version légère sur téléphone (fin de fichier) */
    --bg-photo: url('../img/bg-circuit.svg');

    --ff-title: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --ff-mono:  'JetBrains Mono', Consolas, ui-monospace, monospace;
    --ff-body:  'Montserrat', 'Segoe UI', system-ui, sans-serif;

    --maxw: 1240px;
    --r: 4px;
}

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

html { scroll-behavior: smooth; }

body {
    /* colonne : l'écran d'accueil prend la place restante sans qu'on ait à
       soustraire à la main la hauteur de la barre, du bandeau et du pied. */
    min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Fond tactique global : photo spatiale + grille + halos.
   L'image est fixe (le pseudo-élément l'est déjà) et passe sous un voile
   sombre dégradé — plus dense en bas, là où le contenu est le plus chargé —
   pour que le texte reste lisible sur toute la hauteur des pages longues. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(60% 55% at 85% 95%, rgb(var(--blue-deep-rgb) / .40), transparent 70%),
        radial-gradient(45% 40% at 10% 0%, rgb(var(--blue-deep-rgb) / .16), transparent 70%),
        linear-gradient(180deg, rgb(var(--bg-rgb) / .30), rgb(var(--bg-rgb) / .55)),
        var(--bg-photo) center / cover no-repeat,
        var(--bg);
}
/* Scanlines très discrètes */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgb(var(--white-rgb) / .014) 0 1px, transparent 1px 3px);
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Primitives
   ========================================================================== */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }

.mono { font-family: var(--ff-mono); }

/* Étiquette technique (petit texte mono espacé) */
.kicker {
    font-family: var(--ff-mono);
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--blue);
    display: flex; align-items: center; gap: 10px;
}
.kicker::before { content: ''; width: 34px; height: 2px; background: currentColor; flex: none; }
.kicker.is-orange { color: var(--orange-hi); }

h1, h2, h3, h4 { font-family: var(--ff-title); font-weight: 900; line-height: 1.02; letter-spacing: .01em; }

.h-sec { font-size: clamp(24px, 3vw, 36px); text-transform: uppercase; margin-top: 10px; }
.h-sec em { font-style: normal; color: var(--blue); }
.h-sec i  { font-style: normal; color: var(--orange-hi); }

.lead { color: var(--muted); max-width: 62ch; margin-top: 14px; font-size: 16px; }
/* Phrase de rappel : tient sur une ligne tant que la largeur le permet */
.lead-line { max-width: none; }

section { padding-block: clamp(56px, 8vw, 96px); position: relative; }

.sec-head { margin-bottom: 38px; }
.sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- Panel (bloc tactique à coins marqués) ---------- */
.panel {
    position: relative;
    background: linear-gradient(180deg, rgb(var(--panel-rgb) / .90) 0%, rgb(var(--bg-2-rgb) / .94) 100%);
    backdrop-filter: blur(3px);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px;
}
.panel.brackets::before,
.panel.brackets::after {
    content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
    border-color: var(--blue); opacity: .85;
}
.panel.brackets::before { top: -1px; left: -1px;  border-top: 2px solid; border-left: 2px solid; }
.panel.brackets::after  { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.panel.brackets.is-orange::before,
.panel.brackets.is-orange::after { border-color: var(--orange); }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--ff-title); font-weight: 800; font-size: 12.5px;
    letter-spacing: .09em; text-transform: uppercase;
    padding: 13px 24px; border: 1px solid transparent; border-radius: var(--r);
    cursor: pointer; transition: .18s ease; white-space: nowrap;
}
/* Le site de la franchise met son bouton de réservation en teinte chaude sur
   fond sombre : on reprend le principe avec l'orange du logo. */
.btn-primary { background: var(--orange); color: var(--on-accent); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-hi); border-color: var(--orange-hi); box-shadow: 0 0 22px rgb(var(--orange-rgb) / .45); }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--border-hi); }
.btn-ghost:hover { border-color: var(--blue); background: var(--blue-dim); color: var(--blue-hi); }
.btn-sm { padding: 8px 14px; font-size: 11px; }

/* ---------- Badges / pastilles ---------- */
.tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-hi); color: var(--muted); background: rgb(var(--white-rgb) / .02);
}
.tag.is-blue    { color: var(--blue);      border-color: rgb(var(--blue-rgb) / .40); background: var(--blue-dim); }
.tag.is-orange  { color: var(--orange-hi); border-color: rgb(var(--orange-rgb) / .45);  background: var(--orange-dim); }
.tag.is-success { color: var(--success);   border-color: rgb(var(--success-rgb) / .40);  background: rgb(var(--success-rgb) / .12); }
.tag.is-danger  { color: var(--danger);    border-color: rgb(var(--danger-rgb) / .40);  background: rgb(var(--danger-rgb) / .12); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: .45; box-shadow: 0 0 0 5px transparent; }
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.nav {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(14px);
    background: rgb(var(--bg-rgb) / .82);
    border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 16px; height: 49px; position: relative; }   /* 49 + 1px de bordure = 50 px pile */

/* Le logo complet en en-tête : sa hauteur commande celle de la barre. */
.brand { display: flex; align-items: center; flex: none; }
.brand .logo-full { display: block; height: 26px; width: auto; flex: none; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ff-title); font-weight: 700; font-size: 12px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
    padding: 7px 11px; border-radius: var(--r); transition: .16s; position: relative;
}
/* Icones de menu : au trait, elles prennent la couleur du lien */
.nav-links svg {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.nav-links a svg { opacity: 1; }
.nav-links a:hover { color: var(--text); background: rgb(var(--white-rgb) / .04); }
.nav-links a.active { color: var(--blue); }

/* Langue et réservation : à droite des liens, et seuls restants sur téléphone */
.nav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta { margin-left: 8px; }
.nav-cta svg {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.nav-cta-short { display: none; }

/* ==========================================================================
   Hero (accueil)
   ========================================================================== */

.hero { padding-block: clamp(44px, 6vw, 80px) clamp(40px, 6vw, 70px); text-align: center; overflow: hidden; }
.hero-logo {
    display: block; margin: 0 auto;
    width: min(430px, 76vw); height: auto;
    filter: drop-shadow(0 0 46px rgb(var(--blue-rgb) / .22));
    animation: rise .8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.97); } }

.hero-sub {
    font-family: var(--ff-mono); font-size: 12px; letter-spacing: .34em;
    text-transform: uppercase; color: var(--muted); margin-top: 26px;
}
.hero-sub b { color: var(--blue); font-weight: 400; }

.hero-title {
    font-family: var(--ff-title); font-weight: 700; text-transform: uppercase;
    font-size: clamp(26px, 4.4vw, 50px); line-height: 1.06; margin-top: 30px;
}
.hero-title span { color: var(--orange-hi); }
.hero-lead { color: var(--muted); max-width: 58ch; margin: 18px auto 0; font-size: 16.5px; }

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

.hero-timer {
    display: inline-flex; align-items: center; gap: 16px; margin-top: 42px;
    padding: 12px 22px; border: 1px solid var(--border); border-radius: var(--r);
    background: rgb(var(--panel-rgb) / .6);
}
.hero-timer .lbl {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted);
}
.hero-timer .val {
    font-family: var(--ff-mono); font-weight: 700; font-size: 30px; letter-spacing: .06em;
    color: var(--danger); text-shadow: 0 0 16px rgb(var(--danger-rgb) / .55);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Bandeau KPI
   ========================================================================== */

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Comme les statistiques et la bande de l'accueil : un bloc de chiffres est bleu. */
.kpi {
    text-align: center; padding: 26px 16px;
    background: rgb(var(--blue-rgb) / .13);
    border-color: rgb(var(--blue-rgb) / .28);
}
.kpi.is-orange { background: rgb(var(--danger-rgb) / .13); border-color: rgb(var(--danger-rgb) / .32); }
.kpi .n {
    font-family: var(--ff-mono); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px);
    color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums;
}
.kpi.is-orange .n { color: var(--danger); }
.kpi .l {
    font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); margin-top: 12px;
}

/* ==========================================================================
   Flux « dernières parties »
   ========================================================================== */

.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feed-card { padding: 20px; transition: .2s; animation: pop .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-10px); } }
.feed-card:hover { border-color: var(--border-hi); transform: translateY(-3px); }
.feed-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feed-team { font-family: var(--ff-title); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.feed-meta { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.feed-stats { display: flex; gap: 22px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.feed-stats div { display: flex; flex-direction: column; gap: 3px; }
.feed-stats .k { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.feed-stats .v { font-family: var(--ff-mono); font-weight: 700; font-size: 17px; color: var(--text); }
.feed-stats .v.blue { color: var(--blue); }

/* ==========================================================================
   Étapes « comment ça marche »
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: st; }
.step { padding: 28px 24px 26px; }
.step::before {
    counter-increment: st; content: '0' counter(st);
    font-family: var(--ff-mono); font-weight: 700; font-size: 46px;
    color: var(--border-hi); line-height: 1; display: block; margin-bottom: 14px;
}
.step h3 { font-size: 17px; text-transform: uppercase; margin-bottom: 10px; color: var(--blue); }
.step p { color: var(--muted); font-size: 14.5px; }

/* ==========================================================================
   Cartes scénario
   ========================================================================== */

.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc { padding: 0; overflow: hidden; transition: .2s; }
.sc:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.sc-visual {
    height: 148px; position: relative; display: grid; place-items: center;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(circle at 50% 120%, rgb(var(--blue-rgb) / .22), transparent 62%),
        repeating-linear-gradient(0deg,  rgb(var(--muted-rgb) / .07) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, rgb(var(--muted-rgb) / .07) 0 1px, transparent 1px 22px);
}
.sc-code { font-family: var(--ff-mono); font-weight: 700; font-size: 34px; letter-spacing: .16em; color: var(--text); opacity: .9; }
.sc-body { padding: 20px 22px 22px; }
.sc-body h3 { font-size: 19px; text-transform: uppercase; }
.sc-body p { color: var(--muted); font-size: 14px; margin-top: 8px; min-height: 44px; }
.sc-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.sc-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
    font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted);
}
.sc-foot b { color: var(--blue); font-weight: 700; }

/* ==========================================================================
   Podium
   ========================================================================== */

.podium { display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 16px; align-items: end; }
.pod { text-align: center; padding: 26px 18px 24px; }
.pod .rank { font-family: var(--ff-mono); font-weight: 700; font-size: 40px; line-height: 1; color: var(--border-hi); }
.pod.p1 { padding-block: 40px 34px; border-color: var(--border-hi); }
.pod.p1 .rank { color: var(--orange-hi); text-shadow: 0 0 22px rgb(var(--orange-rgb) / .5); font-size: 54px; }
.pod.p2 .rank, .pod.p3 .rank { color: var(--blue); opacity: .8; }
.pod .team { font-family: var(--ff-title); font-weight: 800; font-size: 19px; text-transform: uppercase; margin-top: 12px; }
.pod.p1 .team { font-size: 28px; }
.pod .sub { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); margin-top: 5px; letter-spacing: .08em; }
.pod .score {
    font-family: var(--ff-mono); font-weight: 700; font-size: 26px; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--border); color: var(--text);
}
.pod .score span { font-size: 11px; color: var(--muted); letter-spacing: .16em; display: block; margin-top: 4px; font-weight: 400; }

/* ==========================================================================
   Tables (classement, historique)
   ========================================================================== */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r);
    background: rgb(var(--panel-rgb) / .96); backdrop-filter: blur(4px); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 800px; }
table.tbl th {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted); text-align: left; padding: 14px 16px;
    border-bottom: 1px solid var(--border); background: rgb(var(--white-rgb) / .015); white-space: nowrap;
}
table.tbl td { padding: 15px 16px; border-bottom: 1px solid rgb(var(--border-rgb) / .6); vertical-align: middle; }
table.tbl tbody tr { transition: .14s; }
table.tbl tbody tr:hover { background: rgb(var(--blue-rgb) / .05); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
.t-rank { font-family: var(--ff-mono); font-weight: 700; font-size: 17px; color: var(--muted); width: 74px; }
/* Le top 3 en bleu : dans le tableau, l'orange est réservé à la ligne « vous ». */
.t-rank.top { color: var(--blue); }
.t-team { font-family: var(--ff-title); font-weight: 800; font-size: 15px; text-transform: uppercase; }
.t-sub { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; margin-top: 2px; }
.t-num { font-family: var(--ff-mono); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.t-num.blue { color: var(--blue); }
tr.is-me { background: rgb(var(--orange-rgb) / .09) !important; box-shadow: inset 3px 0 0 var(--orange); }
tr.is-me .t-rank { color: var(--orange-hi); }

/* Filtres */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; }
.fgroup { display: flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.fgroup button {
    background: transparent; border: 0; cursor: pointer; color: var(--muted);
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 15px; transition: .15s; border-right: 1px solid var(--border);
}
.fgroup button:last-child { border-right: 0; }
.fgroup button:hover { color: var(--text); background: rgb(var(--white-rgb) / .04); }
.fgroup button.on { background: var(--blue-dim); color: var(--blue); }
select.fsel {
    background: var(--panel); border: 1px solid var(--border); color: var(--text);
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    padding: 10px 14px; border-radius: var(--r); cursor: pointer;
}
.fcount { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); letter-spacing: .12em; margin-left: auto; }

/* ==========================================================================
   Fiche de partie
   ========================================================================== */

/* Ligne de contexte : la nav annonce « mes parties », la page en montre une —
   ce fil rappelle laquelle et où trouver les autres. */
.crumb {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.crumb b { color: var(--text); font-weight: 400; }
.crumb a { color: var(--blue); white-space: nowrap; }
.crumb a:hover { color: var(--blue-hi); }

/* Pas d'overflow:hidden ici : il rognerait les équerres de .panel.brackets. */
.verdict {
    display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
    padding: 34px 32px; position: relative;
}
.verdict::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(600px 220px at 100% 50%, rgb(var(--success-rgb) / .13), transparent 70%);
}
.verdict.failed::after { background: radial-gradient(600px 220px at 100% 50%, rgb(var(--danger-rgb) / .14), transparent 70%); }
.verdict .state {
    font-family: var(--ff-title); font-weight: 900; text-transform: uppercase;
    font-size: clamp(28px, 4vw, 48px); line-height: 1; color: var(--success);
    text-shadow: 0 0 30px rgb(var(--success-rgb) / .4);
}
.verdict.failed .state { color: var(--danger); text-shadow: 0 0 30px rgb(var(--danger-rgb) / .45); }
.verdict .mission { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.verdict .chrono { text-align: right; position: relative; z-index: 1; }
.verdict .chrono .v {
    font-family: var(--ff-mono); font-weight: 700; font-size: clamp(40px, 6vw, 68px); line-height: 1;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.verdict .chrono .k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.metaline { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.metaline div { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }
.metaline b { color: var(--text); font-weight: 400; }

/* Grille modules */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mod { padding: 16px; border-left: 3px solid var(--border-hi); display: flex; flex-direction: column; gap: 4px; transition: .18s; }
.mod:hover { background: var(--panel-hi); }
.mod .id { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.mod .nm { font-family: var(--ff-title); font-weight: 800; font-size: 14.5px; text-transform: uppercase; line-height: 1.15; }
.mod .st { font-family: var(--ff-mono); font-size: 11px; margin-top: 4px; display: flex; align-items: center; gap: 7px; }
.mod.ok      { border-left-color: var(--success); }
.mod.ok .st  { color: var(--success); }
.mod.ko      { border-left-color: var(--danger); }
.mod.ko .st  { color: var(--danger); }
.mod.off     { border-left-color: var(--border); opacity: .5; }
.mod.off .st { color: var(--muted); }

/* Timeline */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
    content: ''; position: absolute; left: -27px; top: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--bg); border: 2px solid var(--blue);
}
.tl-item.ok::before { border-color: var(--success); background: var(--success); }
.tl-item.ko::before { border-color: var(--danger);  background: var(--danger); }
.tl-item .t { font-family: var(--ff-mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.tl-item .d { font-size: 14.5px; margin-top: 2px; }
.tl-item .d b { font-family: var(--ff-title); font-weight: 700; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; }

/* Équipage */
.crew { display: flex; flex-wrap: wrap; gap: 10px; }
.crew .p {
    display: flex; align-items: center; gap: 10px; padding: 7px 15px 7px 7px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
    font-size: 14px;
}
.avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-family: var(--ff-mono); font-weight: 700; font-size: 12px; color: var(--on-blue);
    background: linear-gradient(140deg, var(--blue), var(--blue-deep));
}
.avatar.o { background: linear-gradient(140deg, var(--orange-hi), var(--orange)); color: var(--on-accent); }
.avatar.lg { width: 78px; height: 78px; font-size: 27px; }

/* ==========================================================================
   Profil
   ========================================================================== */

.prof-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.prof-head h1 { font-size: clamp(30px, 4.5vw, 46px); text-transform: uppercase; }
.grade { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-top: 4px; }

.bar { height: 6px; background: var(--panel-hi); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-deep), var(--blue-hi)); border-radius: 999px; }
/* Même barre, en <progress> : sa largeur est une valeur, pas un style en ligne (CSP) */
progress.bar { display: block; width: 100%; border: 0; appearance: none; -webkit-appearance: none; }
progress.bar::-webkit-progress-bar { background: var(--panel-hi); border-radius: 999px; }
progress.bar::-webkit-progress-value { background: linear-gradient(90deg, var(--blue-deep), var(--blue-hi)); border-radius: 999px; }
progress.bar::-moz-progress-bar { background: linear-gradient(90deg, var(--blue-deep), var(--blue-hi)); border-radius: 999px; }

.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badge { text-align: center; padding: 18px 14px; transition: .18s; }
.badge:hover { transform: translateY(-3px); border-color: var(--border-hi); }
.badge .ico {
    width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%;
    display: grid; place-items: center; font-size: 20px;
    background: var(--blue-dim); border: 1px solid rgb(var(--blue-rgb) / .40);
}
.badge h3, .badge h4 { font-size: 13.5px; text-transform: uppercase; }
.badge p { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.badge.locked { opacity: .38; }
.badge.locked .ico { background: rgb(var(--white-rgb) / .03); border-color: var(--border); filter: grayscale(1); }

/* Objectifs restants : une ligne de rappels, pas quatre cartes grisees */
.todo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
.todo-lbl {
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}
.todo-item {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-family: var(--ff-title); font-weight: 800; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .02em; color: var(--muted);
}
.todo-item i { font-style: normal; color: var(--border-hi); font-size: 13px; }
.todo-item b {
    font-family: var(--ff-body); font-weight: 400; font-size: 12px;
    text-transform: none; letter-spacing: 0; color: var(--border-hi);
}

/* ==========================================================================
   Bandeau CTA + footer
   ========================================================================== */

.cta-band {
    text-align: center; padding: clamp(40px, 6vw, 64px) 28px;
    border-color: var(--border-hi);
    background:
        radial-gradient(700px 260px at 50% 0%, rgb(var(--blue-rgb) / .13), transparent 70%),
        linear-gradient(180deg, var(--panel), var(--bg-2));
}
.cta-band h2 { font-size: clamp(22px, 3vw, 34px); text-transform: uppercase; }
.cta-band p { color: var(--muted); margin: 14px auto 26px; max-width: 54ch; }

footer { border-top: 1px solid var(--border); padding-block: 44px 34px; margin-top: 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
.foot-logo { display: block; width: 168px; height: auto; }
.foot-grid p { color: var(--muted); font-size: 13px; margin-top: 14px; max-width: 42ch; }
.foot-grid h5 { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-grid ul { list-style: none; display: grid; gap: 9px; }
.foot-grid ul a { font-size: 14px; color: var(--text); opacity: .8; }
.foot-grid ul a:hover { color: var(--blue); opacity: 1; }
.foot-bot {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
    font-family: var(--ff-mono); font-size: 11px; color: var(--muted); letter-spacing: .06em;
}

/* ==========================================================================
   Animations d'apparition
   ========================================================================== */

/* Masqué uniquement si le JS a démarré : sans JS, la page reste entièrement lisible. */
html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
html.js .rv.in { opacity: 1; transform: none; }

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

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
    .mods   { grid-template-columns: repeat(3, 1fr); }
    .badges { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
    .nav-in { height: 50px; }
    .brand .logo-full { height: 22px; }
    /* Les cinq liens passent dans la barre d'onglets du bas (section « Coquille ») */
    .nav-links { display: none; }

    .kpis, .feed, .steps, .scenarios, .podium, .foot-grid { grid-template-columns: 1fr; }
    .podium .pod.p1 { order: -1; }
    .verdict { grid-template-columns: 1fr; }
    .verdict .chrono { text-align: left; }
    .mods, .badges { grid-template-columns: repeat(2, 1fr); }
    .sec-head--row { align-items: flex-start; }
}
@media (max-width: 520px) {
    .mods, .badges { grid-template-columns: 1fr; }
    .kpi .l { letter-spacing: .12em; }
}

/* Grilles utilitaires */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-side { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .g2, .g-side { grid-template-columns: 1fr; } }

.stack-16 > * + * { margin-top: 16px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-34 { margin-top: 34px; }
.center { text-align: center; }

/* ==========================================================================
   Accueil « un seul écran »
   Tout le contenu de la page d'accueil tient dans la hauteur du viewport :
   deux colonnes, aucune section à faire défiler. En dessous de 1040 px de
   large ou 640 px de haut, la grille se déplie et la page redevient
   naturellement défilante — on ne compresse jamais au point d'illisibilité.
   ========================================================================== */

.screen {
    flex: 1 1 auto;
    display: flex; align-items: center;
    padding-block: clamp(8px, 1.3dvh, 20px);
}
.screen-grid > section { padding-block: 0; }      /* neutralise le padding global des <section> */
.screen-grid {
    display: grid; grid-template-columns: 1.06fr .94fr;
    gap: clamp(20px, 3vw, 46px); align-items: center; width: 100%;
}

/* ---------- Colonne gauche ----------
   La barre ne porte qu'un logo discret (38 px) : le lockup reprend donc sa
   place ici, où il tient son rôle de signature. */
.screen-left .hero-logo {
    display: block; margin: 0 0 clamp(20px, 3dvh, 32px);
    width: min(380px, 80%); height: auto;
    filter: drop-shadow(0 0 46px rgb(var(--blue-rgb) / .22));
    animation: rise .8s cubic-bezier(.2,.7,.3,1) both;
}
.screen-left .hero-title {
    margin-top: 0;
    font-size: clamp(21px, 2.3vw, 32px);
    line-height: 1.12;
}
.screen-left .hero-lead {
    margin: clamp(14px, 2dvh, 20px) 0 0; font-size: 16px; max-width: 48ch;
}
.screen-left .hero-actions { justify-content: flex-start; margin-top: clamp(20px, 2.8dvh, 30px); }

/* Chiffres clés : une bande pleine largeur, juste au-dessus du pied de page */
/* Bandeau défilant : reste sur le fond sombre, ses couleurs d'état
   (vert/rouge) ne tiendraient pas sur un aplat bleu. */
.ticker-band {
    border-top: 1px solid var(--border);
    padding-block: clamp(9px, 1.4dvh, 14px);
    background: rgb(var(--bg-rgb) / .45);
}
.ticker { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* Voile bleu plutôt qu'aplat franc : on garde la section colorée
   du site de la franchise sans qu'elle écrase le reste de la page. */
.figures-band {
    padding-block: clamp(14px, 2dvh, 24px);
    background: rgb(var(--blue-rgb) / .13);
    border-top: 1px solid rgb(var(--blue-rgb) / .28);
}
.figures-band .figures > div { border-left-color: rgb(var(--blue-rgb) / .22); }
.figures {
    display: grid; grid-template-columns: repeat(5, 1fr);
}
.figures > div {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    text-align: center; padding-inline: 14px;
    border-left: 1px solid var(--border);
}
.figures > div:first-child { border-left: 0; }
.figures .n {
    font-family: var(--ff-mono); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px);
    color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums;
}
.figures .l {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted);
}

/* ---------- Colonne droite ---------- */
.screen-right { display: grid; gap: clamp(12px, 1.8dvh, 18px); }
.side-card { padding: clamp(14px, 2dvh, 19px) 18px; }
.side-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.side-link {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
a.side-link:hover { color: var(--blue); }
.side-note {
    font-size: 11.5px; color: var(--muted); margin-top: 11px;
    padding-top: 10px; border-top: 1px solid var(--border);
}

/* Bloc « l'expérience » : les faits qui lèvent les freins à la réservation */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.facts > div {
    display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
    padding: 12px 6px; border-radius: var(--r);
    border: 1px solid rgb(var(--blue-rgb) / .28);
    background: rgb(var(--blue-rgb) / .13);
}
.facts .n {
    font-family: var(--ff-mono); font-weight: 700; font-size: clamp(17px, 1.5vw, 21px);
    color: var(--blue); line-height: 1; white-space: nowrap;
}
.facts .l {
    font-family: var(--ff-mono); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); line-height: 1.3;
}

.side-more {
    display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.side-more:hover { color: var(--blue); }

/* Podium en liste (page classement) */
.rank-list { list-style: none; display: grid; gap: 2px; }
.rank-list li {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
    padding: 7px 8px; border-radius: var(--r); transition: .15s;
}
.rank-list li:hover { background: rgb(var(--white-rgb) / .03); }
.rank-list .pos {
    font-family: var(--ff-mono); font-weight: 700; font-size: 17px; color: var(--blue); opacity: .75;
}
.rank-list .r1 .pos { color: var(--orange-hi); opacity: 1; font-size: 20px; }
.rank-list .who { display: flex; flex-direction: column; min-width: 0; }
.rank-list .who b {
    font-family: var(--ff-title); font-weight: 800; font-size: 15px; text-transform: uppercase;
    letter-spacing: .01em; line-height: 1.2;
}
.rank-list .who i {
    font-style: normal; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-list .pts {
    font-family: var(--ff-mono); font-weight: 700; font-size: 16px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rank-list .r1 .pts { color: var(--orange-hi); }

/* ---------- Actualités : ce qui bouge dans le réseau ---------- */
.news { list-style: none; display: grid; gap: 2px; }
.news li {
    display: grid; grid-template-columns: 104px 1fr; align-items: baseline; gap: 12px;
    padding: 9px 8px; border-radius: var(--r); transition: .15s;
}
.news li:hover { background: rgb(var(--white-rgb) / .03); }
.news-tag {
    font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 4px 8px; text-align: center; white-space: nowrap;
}
.news-tag.is-new { color: var(--orange-hi); border-color: rgb(var(--orange-rgb) / .45); background: var(--orange-dim); }
.news-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.news-body b {
    font-family: var(--ff-title); font-weight: 800; font-size: 13.5px;
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
}
.news-body i { font-style: normal; font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); }

/* ---------- Bandeau défilant des dernières parties ---------- */
.ticker {
    display: flex; align-items: center; gap: 16px;
    padding-bottom: clamp(10px, 1.5dvh, 15px);
    margin-bottom: clamp(10px, 1.5dvh, 15px);
    border-bottom: 1px solid var(--border);
}
.ticker-lbl, .ticker-link {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.ticker-link:hover { color: var(--blue); }
.ticker-mask {
    flex: 1 1 auto; overflow: hidden; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
}
.ticker-track { display: flex; width: max-content; animation: defile 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tk {
    display: inline-flex; align-items: baseline; gap: 9px;
    padding: 0 20px; border-left: 2px solid var(--border-hi); white-space: nowrap;
}
.tk.ok { border-left-color: var(--success); }
.tk.ko { border-left-color: var(--danger); }
.tk b { font-family: var(--ff-title); font-weight: 800; font-size: 12.5px; text-transform: uppercase; }
.tk i { font-style: normal; font-family: var(--ff-mono); font-size: 10px; color: var(--muted); }
.tk em, .tk u {
    font-style: normal; text-decoration: none;
    font-family: var(--ff-mono); font-weight: 700; font-size: 12px;
}
.tk u { color: var(--blue); }
.tk s {
    text-decoration: none; font-family: var(--ff-mono); font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase;
}
.tk.ok s { color: var(--success); }
.tk.ko s { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Pied de page réduit à une ligne */
.foot-slim { border-top: 1px solid var(--border); margin-top: 0; padding-block: 10px; }
.foot-line {
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .05em;
}
.foot-line a:hover { color: var(--blue); }

/* Écran trop étroit ou trop bas : on déplie et on laisse défiler */
@media (max-width: 1040px), (max-height: 650px) {
    .screen { min-height: 0; padding-block: 34px; }
    .screen-grid { grid-template-columns: 1fr; gap: 34px; }
    .screen-left { text-align: center; }
    .screen-left .hero-logo { margin-inline: auto; width: min(230px, 62vw); }
    .screen-left .hero-lead { margin-inline: auto; }
    .screen-left .hero-actions { justify-content: center; }
}
@media (max-width: 880px) {
    .news li { grid-template-columns: 1fr; gap: 6px; }
    .news-tag { justify-self: start; }
    .ticker-lbl span:not(.dot), .ticker-link { display: none; }
}
@media (max-width: 560px) {
    .facts { grid-template-columns: repeat(2, 1fr); }
    .figures { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
    .figures > div:nth-child(odd) { border-left: 0; }
    .run { grid-template-columns: 1fr auto 76px; }
    .run-mods { display: none; }
}

/* ==========================================================================
   Mon espace — le diplôme, puis le relevé de statistiques
   ========================================================================== */

.diploma {
    display: grid; grid-template-columns: auto 1fr 250px;
    gap: clamp(20px, 3vw, 40px); align-items: center;
    padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 38px);
    background:
        radial-gradient(760px 300px at 18% 0%, rgb(var(--blue-rgb) / .10), transparent 70%),
        linear-gradient(180deg, var(--panel), var(--bg-2));
}

/* Sceau : la bombe du logo, en médaillon */
.dip-seal {
    width: 124px; height: 124px; flex: none;
    border-radius: 50%; border: 1px solid var(--border-hi);
    background: rgb(var(--blue-rgb) / .06);
    display: grid; place-items: center; gap: 2px; position: relative;
}
.dip-seal::before {
    content: ''; position: absolute; inset: 7px;
    border: 1px dashed rgb(var(--muted-rgb) / .35); border-radius: 50%;
}
.dip-badge { width: 78px; height: auto; display: block; color: var(--text); }


.dip-kicker {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted);
}
.dip-grade {
    font-family: var(--ff-title); font-weight: 900; text-transform: uppercase;
    font-size: clamp(24px, 2.8vw, 36px); line-height: 1.02; margin-top: 8px;
    color: var(--text);
}
.dip-name {
    font-family: var(--ff-mono); font-size: 16px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue); margin-top: 8px;
}
.dip-cite {
    color: var(--muted); font-size: 13.5px; margin-top: 14px; max-width: 54ch;
    padding-top: 13px; border-top: 1px solid var(--border);
}
.dip-cite b { color: var(--text); font-weight: 600; }
/* Citation du grade, sous la phrase tirée des chiffres */
.dip-quote { color: var(--text); font-size: 13.5px; font-style: italic; margin-top: 10px; max-width: 54ch; }

.dip-next { border-left: 1px solid var(--border); padding-left: clamp(18px, 2.4vw, 28px); }
.dip-next-name {
    font-family: var(--ff-title); font-weight: 900; font-size: 21px;
    text-transform: uppercase; margin-top: 10px;
}
.dip-next-note { font-family: var(--ff-mono); font-size: 10.5px; color: var(--muted); margin-top: 8px; }
.dip-cta { margin-top: 16px; width: 100%; }

/* Échelle des grades */
.grades { list-style: none; margin-top: 18px; display: grid; gap: 5px; }
.grades li {
    font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); opacity: .55;
    display: flex; align-items: center; gap: 9px;
}
.grades li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    border: 1px solid currentColor; flex: none;
}
.grades li.done { opacity: .8; }
.grades li.done::before { background: var(--muted); }
.grades li.now {
    color: var(--blue); opacity: 1; font-weight: 700;
}
.grades li.now::before { background: var(--blue); box-shadow: 0 0 8px var(--blue); }

/* Relevé de statistiques : 4 par rangée */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Même voile bleu que la bande de chiffres de l'accueil */
.stat {
    text-align: center; padding: 20px 12px; transition: .18s;
    background: rgb(var(--blue-rgb) / .13);
    border-color: rgb(var(--blue-rgb) / .28);
}
.stat:hover { background: rgb(var(--blue-rgb) / .19); border-color: rgb(var(--blue-rgb) / .45); }
.stat .n {
    font-family: var(--ff-mono); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px);
    color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat .n .tot { color: var(--muted); font-size: .62em; }
.stat .n sup { font-size: .5em; }
.stat .l {
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin-top: 11px;
}

@media (max-width: 1040px) {
    .diploma { grid-template-columns: auto 1fr; }
    .dip-next { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); padding: 20px 0 0; }
    .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .diploma { grid-template-columns: 1fr; text-align: center; }
    .dip-seal { margin: 0 auto; }
    .dip-cite, .dip-quote { margin-inline: auto; }
    .grades { display: inline-grid; text-align: left; }
}

/* ==========================================================================
   Classement — « votre position »
   Le bloc qui remplace le podium : un classement ne fait revenir que s'il dit
   au joueur ou il en est et ce qui lui manque.
   ========================================================================== */

.standing {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: clamp(20px, 3vw, 40px); align-items: center;
    padding: clamp(22px, 2.8vw, 32px) clamp(24px, 3vw, 34px);
    background:
        radial-gradient(640px 260px at 8% 0%, rgb(var(--orange-rgb) / .10), transparent 70%),
        linear-gradient(180deg, rgb(var(--panel-rgb) / .90), rgb(var(--bg-2-rgb) / .94));
}
.st-rank { text-align: center; padding-right: clamp(18px, 2.4vw, 30px); border-right: 1px solid var(--border); }
.st-rank .n {
    display: block; font-family: var(--ff-mono); font-weight: 700;
    font-size: clamp(42px, 5vw, 62px); line-height: 1; color: var(--orange-hi);
    text-shadow: 0 0 26px rgb(var(--orange-rgb) / .35);
}
.st-rank .n sup { font-size: .42em; }
.st-rank .l {
    display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin-top: 10px;
}
.st-gap p { color: var(--muted); font-size: 14.5px; margin-top: 10px; max-width: 62ch; }
.st-gap p b { color: var(--text); font-weight: 600; }
.st-bar {
    height: 5px; background: var(--panel-hi); border-radius: 999px;
    overflow: hidden; margin-top: 14px; max-width: 420px;
}
.st-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-deep), var(--blue-hi)); }
.st-note {
    font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .1em;
    color: var(--muted); margin-top: 8px;
}
.st-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }

@media (max-width: 880px) {
    .standing { grid-template-columns: auto 1fr; }
    .st-cta { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: center; }
}
@media (max-width: 560px) {
    .standing { grid-template-columns: 1fr; text-align: center; }
    .st-rank { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 16px; }
    .st-gap p, .st-bar { margin-inline: auto; }
}

/* ==========================================================================
   Défilement par écran
   Chaque « écran » occupe la hauteur du viewport et s'aligne au défilement.
   On utilise « proximity » et non « mandatory » : une section plus haute que
   l'écran (un tableau de 18 lignes) doit rester librement défilable, sinon
   son bas devient inatteignable.
   ========================================================================== */

html { scroll-snap-type: y proximity; }

.snap {
    position: relative;
    /* la barre sticky mange 50 px en haut : un écran utile vaut 100dvh moins ça */
    min-height: calc(100dvh - 50px);
    scroll-snap-align: start;
    scroll-margin-top: 50px;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(24px, 4dvh, 48px) clamp(64px, 9dvh, 96px);
}
/* Écran dont le contenu dépasse la hauteur : on aligne en haut, jamais au
   centre — un contenu centré plus haut que l'écran a son sommet inaccessible. */
.snap.top { justify-content: flex-start; padding-block: clamp(28px, 4dvh, 52px) 72px; }

.snap > section { padding-block: 0; }
.snap > section + section { padding-top: clamp(18px, 2.6dvh, 30px); }

/* Repère « ça continue en dessous » */
.scroll-cue {
    position: absolute; left: 50%; bottom: clamp(18px, 3dvh, 30px);
    display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--orange-hi);
    text-shadow: 0 1px 10px rgb(var(--bg-rgb) / .9);
    animation: cue 2.4s cubic-bezier(.4,0,.3,1) infinite;
    transition: color .16s;
}
.scroll-cue:hover { color: var(--orange-glow); }
.scroll-cue svg {
    width: 24px; height: 13px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 1px 8px rgb(var(--bg-rgb) / .9));
}
@keyframes cue {
    0%, 100% { transform: translate(-50%, 0); opacity: .9; }
    50%      { transform: translate(-50%, 8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-snap-type: none; }
    .scroll-cue { animation: none; }
}
/* Sous 1040px de large ou 650px de haut, la mise en page se déplie déjà :
   forcer un écran par section n'aurait plus de sens. */
@media (max-width: 1040px), (max-height: 650px) {
    html { scroll-snap-type: none; }
    .snap { min-height: 0; display: block; padding-block: clamp(40px, 7vw, 72px); }
    .scroll-cue { display: none; }
}

/* ==========================================================================
   Page actualités
   ========================================================================== */

.feature { display: grid; grid-template-columns: 300px 1fr; gap: 0; padding: 0; overflow: hidden; }
.feature-visual {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    gap: 2px; padding: 26px 24px; min-height: 260px;
    border-right: 1px solid var(--border);
    background:
        radial-gradient(420px 260px at 30% 110%, rgb(var(--orange-rgb) / .32), transparent 70%),
        radial-gradient(360px 300px at 80% 0%, rgb(var(--blue-rgb) / .22), transparent 70%),
        repeating-linear-gradient(0deg,  rgb(var(--muted-rgb) / .06) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(90deg, rgb(var(--muted-rgb) / .06) 0 1px, transparent 1px 24px);
}
.feature-tag {
    position: absolute; top: 20px; left: 24px;
    font-family: var(--ff-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--on-accent); background: var(--orange); padding: 5px 11px; border-radius: 999px;
}
.feature-city {
    font-family: var(--ff-title); font-weight: 900; font-size: clamp(30px, 3.2vw, 42px);
    text-transform: uppercase; line-height: .95; letter-spacing: -.02em;
}
.feature-place {
    font-family: var(--ff-title); font-weight: 700; font-size: 17px;
    text-transform: uppercase; color: var(--blue); letter-spacing: .04em;
}
.feature-date {
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .16em;
    color: var(--muted); margin-top: 10px;
}

.feature-body { padding: clamp(22px, 2.6vw, 32px); }
.feature-body h2 { font-size: clamp(21px, 2.3vw, 31px); text-transform: uppercase; margin-top: 10px; }
.feature-body p { color: var(--muted); font-size: 14.5px; margin-top: 14px; max-width: 64ch; }
.news-meta { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.news-meta b { color: var(--blue); font-weight: 400; }

.feature-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.feature-facts li { display: flex; flex-direction: column; gap: 3px; }
.feature-facts b { font-family: var(--ff-mono); font-weight: 700; font-size: 19px; color: var(--blue); }
.feature-facts span { font-family: var(--ff-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Le fil */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post { padding: 20px; display: flex; flex-direction: column; transition: .18s; }
.post:hover { transform: translateY(-3px); border-color: var(--border-hi); }
.post-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.post-date { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }
.post h3 { font-size: 16.5px; text-transform: uppercase; line-height: 1.22; }
.post p { color: var(--muted); font-size: 13.5px; margin-top: 10px; flex: 1 1 auto; }
.post-more {
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blue); margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border);
}
.news-tag.is-record { color: var(--orange-hi); border-color: rgb(var(--orange-rgb) / .45); background: var(--orange-dim); }

@media (max-width: 1040px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .feature { grid-template-columns: 1fr; }
    .feature-visual { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--border); }
    .news-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Page concept
   ========================================================================== */

/* Les deux rôles, séparés par la liaison radio */
.roles { display: grid; grid-template-columns: 1fr 140px 1fr; gap: 0; align-items: stretch; }
.role { padding: clamp(22px, 2.6vw, 30px); }
.role-head { margin-bottom: 14px; }
.role-id {
    font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blue);
}
.role h2 { font-size: clamp(20px, 2.2vw, 28px); text-transform: uppercase; margin-top: 6px; }
.role p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.role-catch {
    color: var(--orange-hi) !important; font-weight: 700; font-size: 15.5px !important;
    margin-top: 14px !important; padding-top: 13px; border-top: 1px solid var(--border);
}

.role-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; text-align: center; }
.role-link svg { width: 40px; height: 60px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.role-link-lbl { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.role-link-note { font-family: var(--ff-mono); font-size: 9px; letter-spacing: .06em; color: var(--muted); line-height: 1.4; max-width: 120px; }

/* Les trois phases */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.phase { padding: 22px; }
.phase.is-main { border-color: rgb(var(--blue-rgb) / .4); background: linear-gradient(180deg, rgb(var(--blue-rgb) / .10), rgb(var(--bg-2-rgb) / .94)); }
.phase-time { font-family: var(--ff-mono); font-weight: 700; font-size: 20px; color: var(--blue); }
.phase h3 { font-size: 17px; text-transform: uppercase; margin-top: 8px; }
.phase p { color: var(--muted); font-size: 13.5px; margin-top: 9px; }

/* Exemples de modules */
.devices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.device { padding: 16px; display: flex; flex-direction: column; gap: 5px; border-left: 3px solid var(--blue); }
.d-id { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--muted); }
.d-name { font-family: var(--ff-title); font-weight: 800; font-size: 14.5px; text-transform: uppercase; }
.d-txt { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }

.states { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.state-lbl { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: 11px; color: var(--muted); }
.led { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.led.blue  { background: var(--blue);    box-shadow: 0 0 9px var(--blue); }
.led.green { background: var(--success); box-shadow: 0 0 9px var(--success); }
.led.red   { background: var(--danger);  box-shadow: 0 0 9px var(--danger); }

/* Les quatre catégories */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat { padding: 22px; display: flex; flex-direction: column; }
.cat-code {
    font-family: var(--ff-mono); font-weight: 700; font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--blue);
}
.cat h3 { font-size: 21px; text-transform: uppercase; margin-top: 8px; }
.cat p { color: var(--muted); font-size: 13.5px; margin-top: 11px; flex: 1 1 auto; }
.cat-foot {
    font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; color: var(--muted);
    margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border);
}
.cat.is-hard .cat-code { color: var(--orange-hi); }
.cat.is-hard { border-color: rgb(var(--orange-rgb) / .4); }

/* Questions fréquentes */
.faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.faq-item { padding: 20px; }
.faq-item h3 { font-size: 14.5px; text-transform: none; color: var(--blue); letter-spacing: 0; }
.faq-item p { color: var(--muted); font-size: 13.5px; margin-top: 9px; }

@media (max-width: 1040px) {
    .roles { grid-template-columns: 1fr; }
    .role-link { flex-direction: row; padding: 18px 0; gap: 16px; }
    .role-link svg { width: 54px; height: 34px; transform: rotate(-90deg); }
    .devices, .cats { grid-template-columns: repeat(2, 1fr); }
    .faq { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .phases, .devices, .cats, .faq { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Coquille du site (lot 1) : barre du haut, barre d'onglets, pied de page.
   Téléphone d'abord (SPEC § 2.4) : sous 880 px, la barre du haut se réduit
   au logo, à la langue et au bouton Réserver, et les cinq onglets passent en
   bas de l'écran, comme dans une application. Pas de burger.
   ========================================================================== */

/* Le contenu pousse le pied de page en bas des pages courtes */
main { flex: 1 0 auto; }

/* Lien d'évitement (navigation clavier, SPEC § 2.7) : visible au focus seulement */
.skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 200;
    padding: 10px 16px; border-radius: var(--r);
    background: var(--blue); color: var(--on-blue);
    font-family: var(--ff-title); font-weight: 700; font-size: 13px;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top)); }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }

/* Zones sûres (viewport-fit=cover) : rien sous l'encoche ni sous les coins
   arrondis en paysage. En application installée sur iPhone, la barre d'état
   est transparente : la barre du haut descend d'autant. */
.wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}
.nav { padding-top: env(safe-area-inset-top); }

/* Sélecteur de langue FR · EN (SPEC § 2.8), dans la barre du haut */
.lang-switch { display: flex; align-items: center; }
.lang-switch a {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px; padding: 0 6px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
    color: var(--muted); border-radius: var(--r); transition: color .16s;
}
.lang-switch a + a::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 1px; height: 12px; margin-top: -6px; background: var(--border-hi);
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a[aria-current="true"] { color: var(--blue); }

/* Détail technique d'une erreur (DEBUG > 0 seulement) : défile dans son cadre */
.error-trace {
    margin-top: 24px; padding: 16px; overflow-x: auto;
    font-family: var(--ff-mono); font-size: 12px; line-height: 1.5; color: var(--muted);
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
}

/* Un élément masqué par l'attribut hidden le reste, même si sa classe lui
   donne un display (le script ne fait que retirer hidden) */
[hidden] { display: none !important; }

/* Bandeau « Nouvelle version — Actualiser » (SPEC § 3.7) : discret, en bas à
   droite ; sur téléphone, au-dessus de la barre d'onglets */
.update-banner {
    position: fixed; z-index: 150;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 8px 8px 16px;
    background: var(--panel-hi); border: 1px solid var(--border-hi); border-radius: var(--r);
    box-shadow: 0 10px 30px rgb(var(--bg-rgb) / .6);
    font-family: var(--ff-title); font-weight: 700; font-size: 13px;
}

/* Proposition d'installation (SPEC § 3.7) : un encart dans la page, jamais
   une fenêtre bloquante. Bouton sur Android, mini-guide sur iPhone. */
.install { margin-top: 28px; max-width: 560px; }
.install-text { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.install .btn { margin-top: 16px; min-height: 44px; }
.install svg {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}
.install-ios { margin: 14px 0 0 20px; display: grid; gap: 6px; font-size: 14.5px; }
.install-ios svg { display: inline-block; vertical-align: -3px; margin-left: 4px; color: var(--blue); }
.install-later {
    display: block; min-height: 44px; margin-top: 8px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.install-later:hover { color: var(--text); }

/* Barre d'onglets : téléphone seulement */
.tabbar { display: none; }

/* Ordinateur étroit : la barre complète de la maquette ne tient qu'à partir
   d'environ 1 060 px. Plutôt que de laisser déborder les libellés, on retire
   les icônes des liens et on raccourcit le bouton de réservation. */
@media (min-width: 881px) and (max-width: 1199px) {
    .nav-in { gap: 12px; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 7px; font-size: 11.5px; letter-spacing: .04em; }
    .nav-links a svg { display: none; }
    .nav-cta-long { display: none; }
    .nav-cta-short { display: inline; }
}

@media (max-width: 880px) {
    /* Fond spatial léger (~60 Ko au lieu de 150 Ko, SPEC § 2.4) */
    :root { --bg-photo: url('../img/bg-circuit.svg'); }

    /* Barre réduite : logo complet (36 px de haut), langue, Réserver.
       Cibles tactiles d'au moins 44 × 44 px. */
    .nav-in { gap: 12px; }
    .brand { min-width: 44px; min-height: 44px; justify-content: center; }
    .nav-tools { margin-left: auto; gap: 8px; }
    .lang-switch a { min-width: 44px; min-height: 44px; }
    .nav-cta { margin-left: 0; min-height: 44px; }
    .nav-cta-long { display: none; }
    .nav-cta-short { display: inline; }

    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
        display: grid; grid-template-columns: repeat(5, 1fr);
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: rgb(var(--bg-rgb) / .94);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--border);
    }
    .tabbar a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        min-width: 0; min-height: 56px; padding: 6px 2px;
        font-family: var(--ff-title); font-weight: 700; font-size: 10px; line-height: 1.2;
        color: var(--muted); transition: color .16s;
        -webkit-tap-highlight-color: transparent;
    }
    .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar svg {
        width: 22px; height: 22px; flex: none;
        fill: none; stroke: currentColor; stroke-width: 1.4;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .tabbar a[aria-current="page"] { color: var(--blue); }

    /* La barre d'onglets est fixe : le bas des pages ne passe pas dessous
       (56 px + 1 px de bordure + la barre de geste du téléphone) */
    body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }

    .update-banner {
        left: max(16px, env(safe-area-inset-left));
        bottom: calc(57px + 12px + env(safe-area-inset-bottom));
    }
    .update-banner .btn { min-height: 44px; }

    /* Pied de page : liens assez hauts pour le doigt */
    .foot-line { justify-content: center; text-align: center; }
    .foot-line a { display: inline-block; padding-block: 12px; }
}

/* Application installée sur téléphone : la barre d'onglets remplace le pied
   de page, dont les liens seront repris dans Mon espace (SPEC § 2.4) */
@media (display-mode: standalone) and (max-width: 880px) {
    .foot-slim { display: none; }
}

/* ==========================================================================
   Formulaires (lot 2 : back-office ; lot 4 : connexion des joueurs).
   Téléphone d'abord (SPEC § 2.4) : champs pleine largeur, texte à 16 px
   (en dessous, iOS zoome sur le champ), cibles d'au moins 44 px.
   ========================================================================== */

/* Grille + gap : le champ caché du jeton CSRF ne crée pas d'espace */
.form { display: grid; gap: 18px; max-width: 560px; }
.form .btn { justify-self: start; min-height: 44px; }
.field label {
    display: block; margin-bottom: 6px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.input {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px;
    font-family: var(--ff-body); font-size: 16px; color: var(--text);
    background: rgb(var(--bg-rgb) / .7);
    border: 1px solid var(--border-hi); border-radius: var(--r);
    transition: border-color .16s;
}
.input:focus { border-color: var(--blue); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.field-error { margin-top: 6px; font-size: 13px; color: var(--danger); }
.input[readonly] { color: var(--muted); }

/* Case à cocher et son libellé : toute la ligne se touche */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blue); }

/* Message en tête de page ou de formulaire : réussite, erreur */
.notice {
    padding: 12px 16px; font-size: 14.5px;
    background: var(--panel); border: 1px solid var(--border-hi);
    border-left: 3px solid var(--blue); border-radius: var(--r);
}
.notice.is-success { border-color: rgb(var(--success-rgb) / .45); border-left-color: var(--success); }
.notice.is-danger  { border-color: rgb(var(--danger-rgb) / .45); border-left-color: var(--danger); }

/* ==========================================================================
   Back-office (SPEC § 3.5) : mêmes couleurs et composants que le site, sans
   barre d'onglets ni service worker ; utilisable au téléphone.
   ========================================================================== */

.admin-page { padding-block: 28px 64px; }
.admin-badge {
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue); white-space: nowrap;
}
.admin-logout { margin-left: auto; }
.admin-logout .btn { min-height: 44px; }

/* Menu : sous la barre du haut, passe à la ligne sur téléphone */
.admin-nav { border-bottom: 1px solid var(--border); background: rgb(var(--bg-rgb) / .7); }
.admin-nav-in { display: flex; flex-wrap: wrap; gap: 4px; padding-block: 4px; }
.admin-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    font-family: var(--ff-title); font-weight: 700; font-size: 12px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
    border-radius: var(--r); transition: color .16s;
}
.admin-nav a:hover { color: var(--text); }
.admin-nav a[aria-current="page"] { color: var(--blue); background: var(--blue-dim); }

.admin-flash { padding-top: 20px; }
/* Pas de barre d'onglets ici : rien à lui réserver en bas de l'écran */
body.admin { padding-bottom: env(safe-area-inset-bottom); }

/* Accueil : une carte par écran */
.admin-list { list-style: none; display: grid; gap: 12px; max-width: 720px; }
.admin-card { display: block; padding: 18px 20px; transition: border-color .16s; }
.admin-card:hover { border-color: var(--border-hi); }
.admin-card b {
    display: block; font-family: var(--ff-title); font-weight: 800; font-size: 15px;
    text-transform: uppercase; letter-spacing: .02em; color: var(--blue);
}
.admin-card span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--muted); }

.admin-h2 { font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }

/* Retour à la liste, au-dessus du titre d'une fiche */
.admin-back a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blue);
}
.admin-back a:hover { color: var(--blue-hi); }

/* Listes (comptes, salles) : une carte par élément, jamais un tableau qui
   défilerait en largeur sur téléphone ; le bouton passe sous le texte */
.admin-item {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 16px; padding: 16px 18px;
}
.admin-item-main { flex: 1 1 260px; min-width: 0; }
.admin-item-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.admin-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-item-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }
.admin-item .btn { min-height: 44px; }

/* Pastille « attention » (partie masquée) */
.tag.is-warn { color: var(--warn); border-color: rgb(var(--warn-rgb) / .45); background: rgb(var(--warn-rgb) / .12); }

/* Filtre d'une liste (salle) : le champ, puis le bouton à côté ou dessous */
.admin-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; max-width: 560px; }
.admin-filter .field { flex: 1 1 220px; }
.admin-filter .btn { min-height: 44px; }
/* Liste déroulante sur fond sombre : le menu ouvert l'est aussi */
select.input { color-scheme: dark; cursor: pointer; }

/* Pages d'une liste, et boutons isolés : cibles tactiles de 44 px */
.admin-pager { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-page .btn-sm { min-height: 44px; }

/* Formulaire long (actualité) : plus large pour écrire, groupé par langue */
.form-wide { max-width: 860px; }
.form-group { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.form-group legend { padding: 0; margin-bottom: 14px; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input-file { display: block; width: 100%; font-size: 16px; color: var(--muted); }
.input-file::file-selector-button {
    min-height: 44px; margin-right: 12px; padding: 0 16px;
    font-family: var(--ff-title); font-weight: 800; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--blue); background: transparent; border: 1px solid var(--border-hi); border-radius: var(--r); cursor: pointer;
}
/* Aperçu de l'échelle des grades : le composant de Mon espace, lisible en entier */
.admin-ladder { padding: 18px 20px; max-width: 720px; }
.admin-ladder .grades li { opacity: 1; }
/* Brevets : encadrés (recalcul, aperçu) et la carte du brevet en deux langues */
.admin-box { padding: 18px 20px; max-width: 720px; }
.admin-badges { grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); }
/* Paramètres d'une règle : seulement ceux du type choisi (classes de son
   <option>). Un navigateur sans :has() ignore ces règles : tous restent visibles */
.rule-form:has(.rule-type) .rule-param { display: none; }
.rule-form:has(option.uses-n:checked) .param-n,
.rule-form:has(option.uses-seconds:checked) .param-seconds,
.rule-form:has(option.uses-category:checked) .param-category,
.rule-form:has(option.uses-scenario_code:checked) .param-scenario_code,
.rule-form:has(option.uses-period:checked) .param-period { display: block; }
/* Liste des types de règle, dépliable sous le choix */
.rule-list { margin-top: 10px; font-size: 13px; }
.rule-list summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--blue); }
.rule-list dt { font-weight: 700; margin-top: 10px; }
.rule-list dd { margin: 2px 0 0; color: var(--muted); }
.admin-image {
    display: block; width: 100%; max-width: 360px; height: auto; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--r);
}

/* Éditeur de texte (SPEC § 3.5, public/js/editor.bundle.js) : un cadre comme un
   champ, la barre d'outils collée sous la barre du site pendant qu'on écrit, le
   texte au rendu de l'article (.prose). Les styles de base de ProseMirror sont
   ici : TipTap ne les ajoute pas (injectCSS: false), son <style> serait bloqué
   par la CSP. */
.editor {
    border: 1px solid var(--border-hi); border-radius: var(--r);
    background: rgb(var(--bg-rgb) / .7); transition: border-color .16s;
}
.editor:focus-within { border-color: var(--blue); }
.editor[data-invalid="true"] { border-color: var(--danger); }
/* 50 px : la barre du site (.nav), plus la zone de sécurité de l'écran */
.editor-bar {
    position: sticky; top: calc(50px + env(safe-area-inset-top)); z-index: 10;
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
    background: var(--panel); border-bottom: 1px solid var(--border-hi);
    border-radius: var(--r) var(--r) 0 0;
}
.editor-btn {
    min-width: 44px; min-height: 44px; padding: 0 12px;
    font-family: var(--ff-title); font-weight: 700; font-size: 12px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text); background: transparent;
    border: 1px solid var(--border-hi); border-radius: var(--r); cursor: pointer;
    transition: border-color .16s, color .16s;
}
.editor-btn:hover { border-color: var(--blue); }
.editor-btn[aria-pressed="true"] { color: var(--blue); background: var(--blue-dim); border-color: var(--blue); }
.editor-btn:disabled { opacity: .4; cursor: default; }
.editor-btn:disabled:hover { border-color: var(--border-hi); }
.editor-doc.prose { margin-top: 0; min-height: 320px; padding: 14px 16px; outline: 0; }
.editor-doc.prose > :first-child { margin-top: 0; }
.editor .notice { margin: 8px; }
/* ProseMirror (le moteur de l'éditeur) : texte qui passe à la ligne, curseur
   entre deux blocs, sélection d'un élément */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; }
.ProseMirror li { position: relative; }
img.ProseMirror-separator { display: inline; border: 0; margin: 0; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0; }
.ProseMirror-gapcursor::after {
    content: ''; display: block; position: absolute; top: -2px; width: 20px;
    border-top: 1px solid var(--text); animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection * { caret-color: transparent; }
.ProseMirror-selectednode { outline: 2px solid var(--blue); }

/* Valeur affichée une seule fois (mot de passe provisoire, clé API) : un
   clic la sélectionne en entier pour la copier ; elle passe à la ligne
   plutôt que de déborder sur téléphone */
.secret {
    margin-top: 12px; padding: 12px 14px;
    font-family: var(--ff-mono); font-size: 17px; letter-spacing: .04em;
    background: rgb(var(--bg-rgb) / .7); border: 1px dashed var(--blue); border-radius: var(--r);
    user-select: all; overflow-wrap: anywhere;
}

/* ==========================================================================
   Fiche de partie (lot 3, SPEC § 3.1) : ce que la maquette écrivait en style
   inline (interdit par la CSP, CLAUDE.md règle 17), et les cas qu'elle ne
   montrait pas (partie interrompue, textes longs sur téléphone).
   ========================================================================== */

/* Le verdict est un titre (h1) : la règle .state de la légende des voyants
   (page Concept) en faisait un élément en ligne */
.verdict .state { display: block; }
/* Partie interrompue : ni victoire ni détonation, aucun halo de couleur */
.verdict.halted::after { background: none; }
.verdict.halted .state { color: var(--text); text-shadow: none; }

/* Textes venus des salles (équipe, scénario, modules, prénoms) : passent à
   la ligne plutôt que de pousser la page en largeur sur téléphone */
.verdict > div, .g-side > div { min-width: 0; }
.verdict .mission, .metaline div, .mod .nm, .crew .p, .tl-item .d { overflow-wrap: anywhere; }

.lead-wide { max-width: 70ch; }
.kpi .n .of { color: var(--muted); }

.sec-head--sm { margin-bottom: 22px; }
.h-sec--sm { font-size: clamp(24px, 3vw, 34px); }

.crew-panel { padding: 20px 22px; }
.crew-panel .kicker { margin-bottom: 12px; }
.tl-panel { padding: 26px 24px; }
.tl-item .pts { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }

/* Bandeau final (revanche, partage) */
.sec-cta { padding-top: 20px; }
.cta-band .kicker { justify-content: center; }
.cta-band .hero-actions { margin-top: 0; }
.btn > svg {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 520px) {
    .verdict { padding: 26px 20px; }
    /* « Reprogrammer une mission » ne tient pas sur une ligne à 360 px */
    .cta-band { padding-inline: 16px; }
    .cta-band .hero-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   Actualités (lot 3, SPEC § 3.1) : la page de la maquette, plus ce qu'elle
   ne montrait pas (image de l'actualité à la une, filtres en liens, pages
   du fil, article complet).
   ========================================================================== */

/* Ce que la maquette écrivait en style inline (CLAUDE.md règle 17) */
.sec-head--tight { margin-bottom: 26px; }
.filters--inline { margin: 0; }
.feature-actions { margin-top: 22px; }
.lead-sm { font-size: 13px; }

/* Message « attention » (aperçu d'une actualité non publiée) */
.notice.is-warn { border-color: rgb(var(--warn-rgb) / .45); border-left-color: var(--warn); }
.notice a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Filtres en liens : ils marchent sans JS et chaque catégorie a son adresse */
.fgroup a {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--muted); font-family: var(--ff-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 10px 15px; transition: .15s; border-right: 1px solid var(--border);
}
.fgroup a:last-child { border-right: 0; }
.fgroup a:hover { color: var(--text); background: rgb(var(--white-rgb) / .04); }
.fgroup a.on { background: var(--blue-dim); color: var(--blue); }

/* À la une avec image : la photo remplit le visuel, sous un voile qui garde
   la ville et la date lisibles */
.feature-visual.has-img { background: var(--bg-2); }
.feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-visual.has-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--bg-rgb) / .15) 35%, rgb(var(--bg-rgb) / .88) 100%);
}
.feature-visual > span:not(.feature-tag) { position: relative; z-index: 1; }
.feature-tag { z-index: 2; }
.feature-body h2 a:hover { color: var(--blue-hi); }

/* Carte du fil : toute la carte mène à l'article (lien du titre étendu),
   le focus clavier entoure la carte */
.post { position: relative; }
.post-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-link:focus-visible { outline: none; }
.post:focus-within { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.post:hover h3 { color: var(--blue-hi); }

/* Pages du fil */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; }
.pager .btn { min-height: 44px; }
.pager-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Article */
.article-page { padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 80px); }
.article-preview { margin-bottom: 16px; }
.back-link a {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--blue);
}
.back-link a:hover { color: var(--blue-hi); }
.article { max-width: 760px; margin-top: 8px; }
.article-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.article-title {
    font-size: clamp(26px, 4vw, 42px); text-transform: uppercase;
    margin-top: 12px; overflow-wrap: anywhere;
}
.article .lead { max-width: none; }
.article-img {
    display: block; width: 100%; height: auto; margin-top: 26px;
    border: 1px solid var(--border); border-radius: var(--r);
}
.article-actions { justify-content: flex-start; margin-top: 34px; }

/* Texte de l'article (App\Support\RichText) et de l'éditeur de texte du back-office */
.prose { margin-top: 26px; font-size: 16px; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 16px; }
.prose h2, .prose h3 { text-transform: uppercase; line-height: 1.2; margin-top: 32px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 18px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue-hi); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 6px; }
.prose blockquote { padding-left: 16px; border-left: 3px solid var(--blue); color: var(--muted); }

@media (max-width: 880px) {
    /* Six filtres ne tiennent pas sur une ligne : ils passent à la ligne,
       chacun assez haut pour le doigt */
    .fgroup { flex-wrap: wrap; gap: 8px; border: 0; overflow: visible; }
    .fgroup a { min-height: 44px; border: 1px solid var(--border); border-radius: var(--r); }
    .fgroup a:last-child { border-right: 1px solid var(--border); }
}
@media (max-width: 520px) {
    .feature-actions .btn, .article-actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ==========================================================================
   Accueil (lot 3, SPEC § 3.1) : la maquette posait l'écran, le bandeau et
   la bande de chiffres directement dans <body> ; ici ils vivent dans le
   <main> commun, qui leur partage la hauteur de la même façon.
   ========================================================================== */

.main-screen { display: flex; flex-direction: column; }
/* Ce que la maquette écrivait en style inline (CLAUDE.md règle 17) */
.screen { scroll-snap-align: start; }
.dot.is-live { color: var(--danger); }

/* Bandeau : la liste est écrite deux fois (la seconde cachée aux lecteurs
   d'écran) ; l'animation la décale d'exactement une longueur, la jointure
   ne se voit pas */
.tk-set { display: flex; }

/* Actualités de l'accueil : toute la ligne mène à l'article, le résumé
   tient sur deux lignes pour garder l'accueil sur un écran */
.news li { position: relative; }
.news-link::after { content: ''; position: absolute; inset: 0; }
.news-link:focus-visible { outline: none; }
.news li:focus-within { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.news li:hover .news-body b { color: var(--blue-hi); }
.news-body i {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* ==========================================================================
   Le concept (lot 3, SPEC § 3.1) : ce que la maquette écrivait en style
   inline (CLAUDE.md règle 17), et une mécanique à plusieurs scénarios.
   ========================================================================== */

.lead-strong { color: var(--text); }
.lead .hl { color: var(--orange-hi); }
.h-sec--xs { font-size: clamp(20px, 2.4vw, 28px); }
/* Une ligne de statistiques par scénario : un seul filet au-dessus */
.cat-foot + .cat-foot { margin-top: 6px; padding-top: 0; border-top: 0; }

/* ==========================================================================
   Connexion et Mon espace (lot 4, SPEC § 3.2)
   ========================================================================== */

/* Code à 6 chiffres : gros, espacé, dans la police des valeurs chiffrées */
.input-code {
    max-width: 14ch; font-family: var(--ff-mono); font-size: 24px;
    letter-spacing: .3em;
}
/* Code affiché en mode test (en attendant les e-mails) */
.test-code {
    margin-top: 8px; font-family: var(--ff-mono); font-weight: 700;
    font-size: 28px; letter-spacing: .3em; color: var(--text);
}
/* Page du code : la nouvelle demande, sous le formulaire principal */
.login-alt { margin-top: 44px; max-width: 560px; }
.login-alt .lead { margin-top: 8px; }
/* Liens du pied de page, repris dans Mon espace (masqué dans l'application,
   SPEC § 2.4) : assez hauts pour le doigt */
.account-links { color: var(--muted); font-size: 14px; }
.account-links a { display: inline-block; padding-block: 12px; color: var(--blue); }

/* Texte lu par les lecteurs d'écran seulement (en-tête de colonne sans libellé visible) */
.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Insigne du diplôme : les couleurs de la maquette, par les tokens */
.dip-badge .ins-blue { stroke: var(--blue); }
.dip-badge .ins-orange { stroke: var(--orange); }

/* Tableau des parties : ce que la maquette écrivait en style inline
   (CLAUDE.md règle 17) */
.t-inline { display: inline; }
.c-date { font-size: 14px; }
.c-site .t-sub { font-size: 12px; }

/* Téléphone : une carte par partie, jamais un tableau qui défile en largeur
   (SPEC § 2.4). Les rôles ARIA du tableau gardent ses en-têtes lisibles. */
@media (max-width: 880px) {
    .tbl-cards { overflow: visible; border: 0; background: none; backdrop-filter: none; }
    .tbl-cards table.tbl { min-width: 0; }
    .tbl-cards thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    .tbl-cards tbody { display: grid; gap: 12px; }
    .tbl-cards tr {
        display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 10px 12px;
        grid-template-areas:
            "team     team  result"
            "scenario scenario scenario"
            "date     site  site"
            "modules  score link";
        padding: 16px; border: 1px solid var(--border); border-radius: var(--r);
        background: rgb(var(--panel-rgb) / .96);
    }
    .tbl-cards td { display: block; padding: 0; border: 0; min-width: 0; }
    .tbl-cards .c-team { grid-area: team; overflow-wrap: anywhere; }
    .tbl-cards .c-result { grid-area: result; justify-self: end; }
    .tbl-cards .c-scenario { grid-area: scenario; }
    .tbl-cards .c-date { grid-area: date; font-size: 12px; color: var(--muted); }
    .tbl-cards .c-site { grid-area: site; }
    .tbl-cards .c-modules { grid-area: modules; }
    .tbl-cards .c-score { grid-area: score; }
    .tbl-cards .c-link { grid-area: link; }
    .tbl-cards .c-link .btn { min-height: 44px; }
    .tbl-cards [data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 3px;
        font-family: var(--ff-mono); font-weight: 400; font-size: 9.5px;
        letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
    }
}

/* Compte : langue du site et des e-mails, déconnexion */
.account-lang fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.account-lang legend {
    padding: 0; margin-bottom: 8px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.lang-choice { display: inline-flex; border: 1px solid var(--border-hi); border-radius: var(--r); overflow: hidden; }
.lang-choice button {
    min-height: 44px; min-width: 120px; padding: 0 18px; cursor: pointer;
    font-family: var(--ff-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); background: transparent; border: 0; transition: .15s;
}
.lang-choice button + button { border-left: 1px solid var(--border-hi); }
.lang-choice button:hover { color: var(--text); background: rgb(var(--white-rgb) / .04); }
.lang-choice button[aria-pressed="true"] { color: var(--blue); background: var(--blue-dim); }
.account-logout, .account-lang + p .btn { min-height: 44px; }

/* Vos données (export) et suppression du compte (RGPD, SPEC § 4.3) */
.account-data { margin-top: 44px; max-width: 640px; }
.account-data .field-hint { margin-top: 8px; }
.account-export { min-height: 44px; }
.account-delete { margin-top: 34px; max-width: 640px; }
.account-delete-lead { margin-top: 10px; color: var(--text); font-weight: 600; }
.account-delete-list { margin: 10px 0 0 20px; display: grid; gap: 6px; color: var(--muted); font-size: 14.5px; }
.btn-danger { background: transparent; color: var(--danger); border-color: rgb(var(--danger-rgb) / .55); min-height: 44px; }
.btn-danger:hover { background: rgb(var(--danger-rgb) / .12); border-color: var(--danger); }

/* Page Sécurité : une carte par appareil connecté, le bouton passe sous le
   texte quand la place manque. Pas « .device » : ce nom est celui des
   modules de la page Concept (colonne, filet bleu). */
.session-list { list-style: none; display: grid; gap: 12px; max-width: 640px; }
.session {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 16px; padding: 16px 18px;
}
.session-main { flex: 1 1 240px; min-width: 0; }
.session-name { margin-right: 8px; overflow-wrap: anywhere; }
.session-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }
.session .btn { min-height: 44px; }

/* Back-office › E-mails : variables permises, aperçu du texte, envoi test */
.email-vars { max-width: 860px; }
.email-var-list { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.email-var-list code { font-family: var(--ff-mono); color: var(--blue); overflow-wrap: anywhere; }
.email-preview { margin-top: 18px; }
.email-preview-subject { margin-top: 8px; font-weight: 700; overflow-wrap: anywhere; }
.email-preview-text {
    margin-top: 8px; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere;
    font-family: var(--ff-body); font-size: 14.5px; line-height: 1.6;
    background: rgb(var(--bg-rgb) / .7); border: 1px solid var(--border); border-radius: var(--r);
}
.admin-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.admin-actions .btn { min-height: 44px; }

/* ==========================================================================
   Classement (lot 6, SPEC § 3.4) : le tableau de la maquette, ses filtres en
   liens et en formulaire (ils marchent sans JS), une carte par joueur sur
   téléphone.
   ========================================================================== */

/* Ce que la maquette écrivait en style inline (CLAUDE.md règle 17) */
.board-head { padding-bottom: 0; }
/* Arrivée sur #tableau (filtre choisi, page suivante) : les filtres restent
   visibles sous la barre du haut, collante (50 px) */
.board { padding-top: 0; scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
.t-num.t-total { font-size: 18px; }
.board-form { display: flex; flex-wrap: wrap; gap: 10px; }
.board-empty { padding: 32px 22px; text-align: center; color: var(--muted); }
.board-empty .btn { min-height: 44px; }
/* Onglets Général / Mes amis, au-dessus des filtres (joueur connecté) */
.board-tabs { display: inline-flex; margin-bottom: 14px; }
/* Nom d'un ami dans « Mes amis » : lien vers sa page */
.t-link { color: inherit; }
.t-link:hover { color: var(--blue-hi); }
.snap > .board-standing { padding-block: 24px 34px; }
/* « Mon espace → » sous le bouton : sans le filet de .side-more, assez haut pour le doigt */
.st-cta .st-more { margin-top: 0; padding-block: 12px; border-top: 0; }
.st-cta .btn { min-height: 44px; }

/* « Votre place » sur la fiche de partie (maquette, partie.html) */
.place-panel { padding: 24px; }
.place-panel .kicker { margin-bottom: 14px; }
.place-n { font-family: var(--ff-mono); font-size: 38px; font-weight: 700; line-height: 1; }
.place-n sup { font-size: 17px; }
.place-text { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.place-text b { color: var(--blue); }
.place-panel .btn { min-height: 44px; }

/* ==========================================================================
   Amis (lot 6, SPEC § 3.11) : listes en cartes, comme les appareils de la
   page Sécurité (.session-list), avec l'avatar de l'équipage ; page d'un
   joueur suivi faite des blocs de Mon espace.
   ========================================================================== */

.account-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.friends-notice { margin-bottom: 16px; }
.friends-title { margin-top: 44px; margin-bottom: 14px; }
.friend-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.friend-main .session-name { margin-right: 0; }
.friend-link { color: var(--text); }
.friend-link:hover { color: var(--blue-hi); }
.friend-actions, .friend-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.friend-actions .btn { min-height: 44px; }
.friends-settings { margin-top: 44px; max-width: 640px; padding: 20px 22px; }
.friends-settings .btn { min-height: 44px; }
.friend-end { padding-top: 0; }
/* Diplôme d'un joueur suivi sans échelle des grades : deux colonnes */
.diploma--short { grid-template-columns: auto 1fr; }

/* Mon lien d'ami : le texte et ses boutons, le QR code à côté (dessous sur
   téléphone) */
.friend-link-panel {
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
    margin-top: 34px; max-width: 860px; padding: 22px;
}
.friend-link-panel .field-hint { margin-top: 10px; }
.friend-link-panel .friend-actions { margin-top: 16px; }
.friend-link-panel .btn { min-height: 44px; }
.friend-url { margin-top: 12px; font-family: var(--ff-mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
/* QR code : modules sombres sur fond clair, marge comprise, pour l'appareil photo */
.qr { display: block; width: 220px; max-width: 100%; height: auto; color: var(--bg); background: var(--text); border-radius: var(--r); }
@media (max-width: 620px) {
    .friend-link-panel { grid-template-columns: 1fr; }
    .qr { width: 280px; justify-self: center; }
}
/* Suivre par adresse e-mail */
.friends-email { margin-top: 24px; max-width: 860px; padding: 22px; }
/* Page d'un lien d'ami (/ami/…) */
.friend-invite { max-width: 560px; padding: 22px; }
.friend-invite .btn, .friend-invite-link { min-height: 44px; }

/* Fiche de partie : « Suivre » dans la pastille d'un équipier, pour le
   joueur connecté qui a joué la partie ; retour ici après la demande */
#equipage { scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
.crew .p { flex-wrap: wrap; }
.crew-follow .btn { min-height: 44px; }
.crew-note { margin-top: 12px; font-size: 13px; }
.crew-note a { display: inline-block; padding-block: 12px; color: var(--blue); }

@media (max-width: 880px) {
    /* Sélecteurs pleine largeur, à 16 px (pas de zoom sur iPhone) et assez
       hauts pour le doigt */
    .board-form { flex: 1 1 100%; }
    .board-form select.fsel { flex: 1 1 200px; min-height: 44px; font-size: 16px; letter-spacing: .04em; }
    .board-form .btn { min-height: 44px; }
    .board .fcount { margin-left: 0; }

    /* Une carte par joueur : rang à gauche, nom, puis ses chiffres */
    .board-cards tr {
        grid-template-columns: 44px repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "rank player   player   player"
            "rank points   missions modules"
            "rank best     best     best";
        align-items: start;
    }
    .board-cards .c-rank { grid-area: rank; width: auto; }
    .board-cards .c-player { grid-area: player; overflow-wrap: anywhere; }
    .board-cards .c-points { grid-area: points; }
    .board-cards .c-missions { grid-area: missions; }
    .board-cards .c-best { grid-area: best; overflow-wrap: anywhere; }
}

/* ==========================================================================
   Accueil parcours (refonte lisibilité) : l'accroche, la nouveauté, le
   déroulé en trois temps, puis le score en ligne. Se lit de haut en bas, sans
   écran unique ; texte plus grand et plus contrasté que l'ancien accueil.
   ========================================================================== */

.main-home { display: flex; flex-direction: column; }
.main-home > section { padding-block: clamp(34px, 5vw, 64px); }

.hero2 { text-align: center; padding-block: clamp(36px, 6vw, 76px) clamp(20px, 3vw, 36px); }
.hero2-in { display: flex; flex-direction: column; align-items: center; }
.hero2 .hero-logo { width: min(520px, 86%); margin: 0 0 clamp(18px, 3vw, 30px); }
.hero2 .kicker { justify-content: center; }
.hero2 .hero-title { margin-top: 12px; font-size: clamp(30px, 5.4vw, 56px); line-height: 1.04; text-transform: uppercase; }
.hero2 .hero-lead { margin: 18px auto 0; max-width: 54ch; font-size: clamp(16px, 2vw, 19px); color: var(--text); }
.hero2 .hero-actions { justify-content: center; margin-top: 28px; }
.btn-lg { min-height: 54px; padding-inline: 28px; font-size: 14px; }

.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.chips li {
    padding: 9px 16px; border-radius: 999px; font-size: 14px; color: var(--muted);
    border: 1px solid rgb(var(--blue-rgb) / .35); background: rgb(var(--blue-rgb) / .10);
}
.chips b { color: var(--blue-hi); font-family: var(--ff-mono); font-weight: 700; }

/* Nouveauté : une carte entière cliquable, la seule à porter l'accent rose */
.new-band { padding-block: clamp(10px, 2vw, 24px) !important; }
.new-card {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 28px;
    padding: clamp(20px, 3vw, 32px); border-color: var(--orange);
    background: linear-gradient(90deg, var(--orange-dim), rgb(var(--panel-rgb) / .9) 60%);
    transition: border-color .15s, box-shadow .15s;
}
.new-card:hover { box-shadow: 0 0 34px rgb(var(--orange-rgb) / .28); border-color: var(--orange-hi); }
.new-badge {
    font-family: var(--ff-mono); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
    padding: 8px 14px; background: var(--orange); color: var(--on-accent); border-radius: var(--r);
}
.new-body h2 { font-size: clamp(20px, 2.6vw, 28px); text-transform: uppercase; }
.new-body p { margin-top: 8px; font-size: 16px; max-width: 62ch; }
.new-go { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--orange-hi); white-space: nowrap; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { position: relative; padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.step-n {
    position: absolute; top: -18px; left: 20px; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--blue-deep); color: var(--white); font: 800 18px var(--ff-title);
    border: 2px solid var(--blue);
}
.step-time { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-top: 6px; }
.step h3 { font-size: 22px; text-transform: uppercase; }
.step p { font-size: 16px; line-height: 1.6; }
.steps-more { text-align: center; margin-top: 28px; }

.after-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; padding: clamp(22px, 3.4vw, 38px); }
.after-card .lead { color: var(--text); max-width: 56ch; }
.after-card .hero-actions { margin-top: 0; }

.news-wide { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news-wide li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
.news-wide .news-body b { font-size: 16px; }
.news-wide .news-body i { font-size: 12px; }

@media (max-width: 880px) {
    .new-card { grid-template-columns: 1fr; justify-items: start; }
    .steps { grid-template-columns: 1fr; gap: 30px; }
    .news-wide { grid-template-columns: 1fr; }
    .after-card .hero-actions { width: 100%; }
}

/* Accueil plus doux : titres moins hauts, casse normale, moins d'air perdu */
.hero2 { padding-block: clamp(24px, 4vw, 48px) clamp(12px, 2vw, 24px); }
.hero2 .hero-logo { width: min(340px, 72%); margin-bottom: 20px; }
.hero2 .hero-title { font-size: clamp(24px, 3.6vw, 38px); line-height: 1.15; text-transform: none; font-weight: 800; letter-spacing: 0; }
.hero2 .hero-lead { font-size: clamp(15px, 1.8vw, 17px); margin-top: 14px; color: var(--muted); }
.hero2 .hero-actions { margin-top: 22px; }
.btn-lg { min-height: 46px; padding-inline: 22px; font-size: 13px; }
.chips { margin-top: 22px; }
.chips li { padding: 7px 13px; font-size: 13px; }
.main-home > section { padding-block: clamp(24px, 3.5vw, 44px); }
.new-body h2 { font-size: clamp(17px, 2vw, 22px); }
.new-body p { font-size: 15px; }
.step h3 { font-size: 18px; }
.step p { font-size: 15px; }
.h-sec { font-size: clamp(20px, 2.4vw, 28px); }
.hero-lead-em { display: inline-block; margin-top: 8px; color: var(--text); font-weight: 800; }

/* Revue du design (accent vert complémentaire du violet) :
   - une seule numérotation par étape (la pastille), pas le « 01 » hérité ;
   - liens du menu sur une ligne ;
   - petites étiquettes mono un peu plus lisibles. */
.steps { counter-reset: none; }
.step::before { content: none; display: none; }
.nav-links a { white-space: nowrap; }
.figures .l { font-size: 11px; letter-spacing: .12em; }
.step-n { background: var(--blue-deep); border-color: var(--blue); }