/* ═══════════════════════════════════════════════════════════════════════
   Premier Essai — direction visuelle « Estrade » v2

   Fichier de jetons canonique. Chargé par le web (BlazorApp/App.razor) ET
   par le mobile (MauiApp/wwwroot/index.html) : une seule modification ici
   couvre les deux plateformes. app.css ne redéfinit AUCUN jeton.

   Justification de chaque valeur : WorkAI/05-maquettes/estrade-v2.html
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ─────────────────────────────────────────────────────
       En thème sombre la séparation vient du trait, pas du remplissage.
       L'ancien --pe-line #28303D était à 1,33:1 du panneau : invisible. */
    --pe-bg:          #0A0D12;
    --pe-panel:       #151B25;
    --pe-panel-2:     #1E2531;
    --pe-line:        #2E3846;   /* 1,46:1 sur panneau */
    --pe-line-strong: #3E4A5C;
    --pe-elevated:    #1C2739;   /* haut du dégradé des blocs de tête */

    /* ── Texte ────────────────────────────────────────────────────────
       --pe-dimmer valait #5C6878 : 3,11:1 sur panneau, sous le minimum
       AA de 4,5:1. Il servait aux libellés de niveau, aux en-têtes de
       colonne et à la navigation — soit une bonne part du texte. */
    --pe-txt:   #EAF0F7;   /* 15,1:1 */
    --pe-txt-2: #A7B4C4;   /*  8,2:1 */
    --pe-txt-3: #8593A5;   /*  5,5:1 */

    /* Alias de compatibilité : les anciens noms restent valides et
       pointent vers les nouvelles valeurs. Ne pas les utiliser dans du
       code neuf — préférer --pe-txt-2 / --pe-txt-3. */
    --pe-dim:    var(--pe-txt-2);
    --pe-dimmer: var(--pe-txt-3);

    /* ── Accent ───────────────────────────────────────────────────────
       Le lime plein est réservé à DEUX rôles : l'action principale de
       l'écran, et « toi » dans un classement. Tout le reste (deltas,
       accents décoratifs) utilise --pe-lime-soft. Quand tout est accent,
       plus rien ne l'est. */
    --pe-lime:      #C8F751;
    --pe-lime-soft: #A8CF44;   /* 9,8:1 — deltas positifs */
    --pe-lime-wash: rgba(200, 247, 81, .08);
    --pe-ink:       #0A0D12;   /* texte posé sur du lime */
    --pe-red:       #F2545B;
    --pe-gold:      #FFC53D;

    /* ── Espacement, base 4 ───────────────────────────────────────────
       Remplace sept valeurs sans relation entre elles (9, 11, 12, 13,
       14, 15, 18 px). */
    --pe-s1: 4px;
    --pe-s2: 8px;
    --pe-s3: 12px;
    --pe-s4: 16px;
    --pe-s5: 20px;
    --pe-s6: 24px;

    /* ── Graisses — trois, pas sept ───────────────────────────────── */
    --pe-w-body: 500;
    --pe-w-head: 700;
    --pe-w-num:  900;

    /* ── Cibles tactiles ─────────────────────────────────────────────
       Minimum 44 px. Les onglets étaient à 40. */
    --pe-tap: 48px;
    --pe-row: 56px;

    --pe-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   Primitives globales
   ═══════════════════════════════════════════════════════════════════════ */

/* LA BASE VIT ICI, PAS DANS app.css.

   Elle n'y était pas, et le mobile s'affichait sur fond blanc : la seule
   feuille qu'il charge est celle-ci, et rien n'y posait le fond ni la
   couleur du texte. Toute règle de base laissée dans app.css est une
   divergence web/mobile invisible jusqu'au premier lancement. */
html, body {
    margin: 0;
    padding: 0;
    background: var(--pe-bg);
    color: var(--pe-txt);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-size: 15px;

    /* Le rebond de fin de course sur iOS découvre un fond blanc sous la
       coquille, alors qu'elle ne défile même pas. */
    overscroll-behavior: none;
}

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

h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Réservé aux titres que la barre d'application répète déjà : retiré de
   l'écran, conservé pour les lecteurs d'écran et l'ancrage du focus. */
.pe-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Focus visible. Il n'existait aucune règle :focus-visible : la
   navigation au clavier était entièrement invisible. */
:focus-visible {
    outline: 2px solid var(--pe-lime);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Chiffres alignés verticalement. Sans ça, aucune colonne de points ne
   se lit — et ce produit est une colonne de points. */
.pe-num, .pe-big, .pe-points, .pe-record,
.pe-board-rank, .pe-board-pts, .pe-board-delta,
.pe-team-record, .pe-div-count, .pe-tile-num, .pe-mod-num {
    font-family: var(--pe-mono);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   Composants partagés
   ═══════════════════════════════════════════════════════════════════════ */

.pe-center { text-align: center; padding: var(--pe-s6) 0; }

.pe-hero {
    display: flex; gap: var(--pe-s3);
    padding: var(--pe-s4); margin-bottom: var(--pe-s3);
    background: linear-gradient(150deg, var(--pe-elevated), var(--pe-panel));
    border: 1px solid var(--pe-line); border-radius: 14px;
}
.pe-hero-block { flex: 1; }
.pe-right { text-align: right; }

.pe-label {
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--pe-txt-3); font-weight: var(--pe-w-head);
}

/* Le total domine, la variation hebdomadaire suit. C'était l'inverse :
   le « +48 » en lime plein écrasait le total de la franchise. */
.pe-big {
    font-size: 44px; font-weight: var(--pe-w-num);
    letter-spacing: -.04em; line-height: 1;
}
.pe-plus { color: var(--pe-lime-soft); }
.pe-hero-block .pe-plus.pe-big { font-size: 28px; }

.pe-card {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 12px; padding: var(--pe-s3);
    margin-bottom: var(--pe-s2); min-height: var(--pe-row);
}

/* La fente de l'équipe du jeune portait deux marqueurs pour la même
   information — bordure lime complète ET fond dégradé — sur la carte la
   plus souvent regardée. Un seul liseré suffit. */
.pe-card-home {
    border-color: var(--pe-line);
    background: var(--pe-panel);
    box-shadow: inset 3px 0 0 var(--pe-lime);
}

.pe-row { display: flex; align-items: center; gap: var(--pe-s3); }
.pe-spacer { flex: 1; }

.pe-crest {
    width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; flex: 0 0 auto;
    font-size: 11px; font-weight: var(--pe-w-head);
    letter-spacing: -.02em; color: #FFFFFF;
}
/* Trois des couleurs d'associations sont trop claires pour du texte
   blanc (Titans 2,77:1, Patriotes 3,63:1). L'encre est choisie selon la
   luminance du fond — voir le composant Crest. */
.pe-crest--ink-dark { color: var(--pe-ink); }

/* Format réduit, pour les listes denses (repêchage, fiche de ligue). */
.pe-crest--sm { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }

.pe-level {
    font-size: 9.5px; font-weight: var(--pe-w-head); letter-spacing: .16em;
    text-transform: uppercase; color: var(--pe-txt-3);
}
.pe-team { font-size: 13.5px; font-weight: var(--pe-w-head); letter-spacing: -.012em; }

/* Le lime est réservé à l'action principale et à « toi ». Les points
   d'une fente sont une donnée, pas un appel à l'action. */
.pe-points { font-weight: var(--pe-w-num); font-size: 17px; color: var(--pe-lime-soft); }
/* Le lime signale un gain. Zero n'en est pas un. */
.pe-points-none { color: var(--pe-txt-3); }
.pe-record { font-size: 11.5px; color: var(--pe-txt-2); font-weight: var(--pe-w-body); }

.pe-empty { text-align: center; padding: 40px var(--pe-s5); color: var(--pe-txt-2); }
.pe-empty-title {
    font-size: 16px; font-weight: var(--pe-w-head);
    color: var(--pe-txt); margin-bottom: 6px;
}
.pe-empty-message { margin-bottom: var(--pe-s4); }

.pe-empty-action {
    display: inline-grid; place-items: center; min-height: var(--pe-tap);
    background: var(--pe-lime); color: var(--pe-ink);
    font-size: 13px; font-weight: 800; padding: 0 var(--pe-s5);
    border-radius: 10px; text-decoration: none;
}

/* ---------- Accueil mobile ---------- */
.pe-mobile-entry {
    height: 100dvh; min-height: 100vh; overflow-y: auto;
    background: var(--pe-bg); -webkit-overflow-scrolling: touch;
}

.pe-welcome {
    position: relative; isolation: isolate;
    min-height: 100%; overflow: hidden;
    display: flex; flex-direction: column;
    padding: max(env(safe-area-inset-top, 0px), 30px) 22px
             max(env(safe-area-inset-bottom, 0px), 24px);
}

.pe-welcome::before,
.pe-welcome::after {
    content: ""; position: absolute; z-index: -1; border: 1px solid #263120;
    border-radius: 50%; pointer-events: none;
}
.pe-welcome::before { width: 330px; height: 330px; top: 128px; right: -175px; }
.pe-welcome::after { width: 166px; height: 166px; top: 210px; right: -68px; }

.pe-welcome-field {
    position: absolute; z-index: -1; top: 47%; left: 42%; right: -60px;
    height: 1px; background: #263120; transform: rotate(-15deg);
    box-shadow: 0 60px #263120, 0 120px #263120; pointer-events: none;
}

.pe-welcome-topline {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--pe-tap); gap: var(--pe-s3);
    animation: pe-welcome-enter .45s cubic-bezier(.22, 1, .36, 1) both;
}
.pe-welcome-brand {
    display: flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 800; letter-spacing: -.025em;
}
.pe-welcome-ball {
    width: 30px; height: 19px; display: grid; place-items: center; flex: 0 0 auto;
    background: var(--pe-lime); color: var(--pe-ink); border-radius: 55% 55% 50% 50%;
    font-family: var(--pe-mono); font-size: 10px; font-weight: 900;
    line-height: 1; transform: rotate(-16deg);
}
.pe-welcome-ball::first-letter { transform: rotate(16deg); }
.pe-welcome-season {
    color: var(--pe-txt-3); font-size: 9px; font-weight: var(--pe-w-head);
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}

.pe-welcome-content {
    flex: 1; display: flex; flex-direction: column; padding-top: clamp(56px, 12vh, 104px);
    animation: pe-welcome-enter .58s .06s cubic-bezier(.22, 1, .36, 1) both;
}
.pe-welcome-kicker {
    margin: 0 0 var(--pe-s3); color: var(--pe-lime-soft);
    font-size: 10px; font-weight: var(--pe-w-head); letter-spacing: .17em;
    text-transform: uppercase;
}
.pe-welcome-title {
    max-width: 7ch; margin: 0;
    font-size: clamp(44px, 14vw, 62px); font-weight: 900;
    line-height: .92; letter-spacing: -.055em;
}
.pe-welcome-copy {
    max-width: 29ch; margin: var(--pe-s5) 0 0;
    color: var(--pe-txt-2); font-size: 14px; line-height: 1.6;
}
.pe-welcome-match-tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    margin-top: var(--pe-s5); padding: 8px 10px;
    border: 1px solid #334027; border-radius: 6px; background: #1c2519;
    color: var(--pe-txt-2); font-family: var(--pe-mono); font-size: 10px;
    font-weight: var(--pe-w-head);
}
.pe-welcome-match-tag span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--pe-lime);
}

.pe-welcome-actions {
    display: grid; gap: 10px; margin-top: auto; padding-top: clamp(40px, 10vh, 88px);
}
.pe-welcome-button {
    width: 100%; min-height: 52px; display: grid; place-items: center;
    border-radius: 11px; padding: var(--pe-s3); text-decoration: none;
    font-size: 14px; font-weight: 800; cursor: pointer;
}
.pe-welcome-button-primary { background: var(--pe-lime); color: var(--pe-ink); border: 0; }
.pe-welcome-button-secondary {
    background: transparent; color: var(--pe-txt); border: 1px solid var(--pe-line-strong);
}
.pe-welcome-button:active { transform: scale(.985); }
.pe-welcome-privacy {
    margin: 12px 0 0; color: var(--pe-txt-3); text-align: center;
    font-size: 10px; line-height: 1.4;
}

@keyframes pe-welcome-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 660px) {
    .pe-welcome-content { padding-top: 32px; }
    .pe-welcome-actions { padding-top: 32px; }
    .pe-welcome-title { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .pe-welcome-topline, .pe-welcome-content { animation: none; }
    .pe-welcome-button:active { transform: none; }
}

.pe-mobile-home { padding: 28px var(--pe-s4) var(--pe-s6); }
.pe-mobile-home .pe-auth-brand {
    font-size: 20px; font-weight: 800; letter-spacing: -.02em; display: block;
}
.pe-mobile-home .pe-auth-tagline {
    font-size: 13px; color: var(--pe-txt-2); margin: 3px 0 22px;
}
.pe-divider { height: 1px; background: var(--pe-line); margin: var(--pe-s3) 0; }
.pe-mini { font-size: 12px; color: var(--pe-txt-2); line-height: 1.5; }
.pe-auth-accent { color: var(--pe-lime); }
.pe-auth-button {
    width: 100%; min-height: var(--pe-tap);
    background: var(--pe-lime); color: var(--pe-ink); border: 0;
    border-radius: 10px; padding: var(--pe-s3);
    font-size: 13px; font-weight: 800; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   Vocabulaire partagé — DÉPLACÉ DEPUIS app.css

   POURQUOI CE DÉPLACEMENT : le mobile ne charge que cette feuille-ci
   (voir MauiApp/wwwroot/index.html). Toute règle utilisée par un composant
   de PremierEssai.SharedUi et laissée dans app.css s'affiche correctement
   sur le web et pas du tout sur mobile — une divergence invisible tant
   qu'on ne lance pas l'application mobile.

   RÈGLE : si un composant de SharedUi utilise une classe, sa règle vit ici.
   app.css ne garde que l'habillage propre au web : barre d'application,
   navigation, sélecteur de saison, écrans d'admin et page d'accueil
   publique. Les champs de formulaire sont ici : MobileLogin s'en sert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- En-tête de page et de section ---------- */
.pe-page-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 18px; }
.pe-hint { font-size: 12.5px; color: var(--pe-dimmer); margin-top: 22px; }

/* .pe-sect était utilisé dans six pages SANS AUCUNE RÈGLE nulle part :
   les en-têtes de section s'affichaient en texte courant. */
.pe-sect {
    font-size: 10px; font-weight: var(--pe-w-head); letter-spacing: .14em;
    text-transform: uppercase; color: var(--pe-txt-3);
    margin: var(--pe-s5) 0 var(--pe-s2);
}

/* ---------- Actions ---------- */
.pe-btn {
    background: var(--pe-lime); color: var(--pe-ink);
    font-size: 14px; font-weight: 800; padding: 0 var(--pe-s6);
    min-height: var(--pe-tap); display: inline-grid; place-items: center;
    border-radius: 10px; text-decoration: none; border: 0; cursor: pointer;
}
.pe-btn-ghost { background: transparent; border: 1px solid var(--pe-line); color: var(--pe-dim); }
/* UN BOUTON INERTE NE DOIT PAS PORTER LA COULEUR DE L'ACTION.
   Baisser l'opacite du lime donnait un olive terne qui se lit comme « a moitie
   actif » plutôt que « verrouille ». On neutralise la couleur, pas seulement son
   intensite. */
.pe-btn:disabled {
    background: var(--pe-panel-2); color: var(--pe-txt-3);
    border-color: var(--pe-line); opacity: 1; cursor: not-allowed;
}

.pe-mini-btn {
    background: transparent; border: 1px solid var(--pe-line); color: var(--pe-txt-2);
    font-size: 11px; font-weight: var(--pe-w-head); padding: 0 var(--pe-s3);
    min-height: 36px; border-radius: 7px; cursor: pointer;
}
.pe-mini-btn:hover { border-color: var(--pe-lime); color: var(--pe-lime); }
.pe-mini-btn:disabled { opacity: .4; cursor: not-allowed; }

.pe-brand-accent { color: var(--pe-lime); }

/* ---------- Carte cliquable ----------
   Une carte entière en cible de clic plutôt qu'un lien à l'intérieur : sur
   téléphone, viser un lien de 13 px au milieu d'une carte est une loterie. */
.pe-card-link {
    display: block; text-decoration: none; color: inherit;
}
.pe-card-link:hover { border-color: var(--pe-lime-soft); }

/* ---------- Rangées d'équipes ---------- */
.pe-team-row {
    display: flex; align-items: center; gap: 9px;
    padding: var(--pe-s2) 0; border-bottom: 1px solid var(--pe-line);
}
.pe-team-row:last-child { border-bottom: 0; }
.pe-team-name { font-size: 13.5px; font-weight: 700; }
.pe-team-diff { font-size: 11px; color: var(--pe-dimmer); min-width: 56px; text-align: right; }

/* ---------- Classements ---------- */
.pe-board { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pe-board td { padding: 11px 8px; border-top: 1px solid var(--pe-line); }
.pe-board tr:first-child td { border-top: 0; }
.pe-board-me { background: rgba(200, 247, 81, .07); }
.pe-board-me .pe-board-name { color: var(--pe-lime); font-weight: 800; }
.pe-board-name { font-weight: 600; }
.pe-board-unnamed { color: var(--pe-dimmer); font-style: italic; }
/* L'invitation a se nommer, posee a côte de SON propre nom uniquement. */
.pe-board-rename { margin-left: 8px; color: var(--pe-lime-soft); font-size: 10.5px;
    font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.pe-delta-up { color: var(--pe-lime-soft); }
.pe-delta-down { color: var(--pe-red); }
.pe-rival { font-size: 11.5px; color: var(--pe-dim); margin-top: 6px; }
.pe-hero-block .pe-delta-up, .pe-hero-block .pe-delta-down { font-size: 11.5px; margin-top: 6px; }

/* ---------- Code d'invitation et étiquettes ---------- */
.pe-code {
    font-family: var(--pe-mono); font-size: 13px; font-weight: var(--pe-w-head);
    letter-spacing: .12em; color: var(--pe-lime);
    background: var(--pe-panel-2); padding: 3px 8px; border-radius: 5px;
}

.pe-tag-ok, .pe-tag-warn, .pe-tag-dim {
    font-size: 9.5px; font-weight: var(--pe-w-head); letter-spacing: .06em;
    text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
}
.pe-tag-ok { background: rgba(200, 247, 81, .15); color: var(--pe-lime); }
.pe-tag-warn { background: rgba(255, 197, 61, .15); color: var(--pe-gold); }
.pe-tag-dim { background: var(--pe-panel-2); color: var(--pe-txt-3); }

/* Rangée de chiffres dans une carte : mêmes règles que .pe-team-row mais
   sans le filet, qui n'a de sens qu'entre des rangées successives. */
.pe-board-row { display: flex; align-items: baseline; gap: 9px; }

/* ---------- Formulaires ----------
   Utilisés par MobileLogin, qui ne charge que cette feuille : laissées dans
   app.css, ces règles donnaient un formulaire de connexion entièrement nu
   sur mobile. */
/* MobileLogin utilise ces trois classes hors du contexte .pe-mobile-home :
   scopées, elles ne s'appliquaient pas et l'écran de connexion mobile
   s'affichait sans marque ni accroche. */
.pe-auth-brand { display: block; font-weight: 800; letter-spacing: -.02em; }
.pe-auth-tagline { font-size: 14px; color: var(--pe-txt-2); margin: 0 0 26px; }
.pe-logo-accent { color: var(--pe-lime); }

.pe-auth-label {
    display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: var(--pe-w-head); color: var(--pe-txt-3); margin: var(--pe-s4) 0 6px;
}
.pe-auth-input {
    width: 100%; box-sizing: border-box; min-height: var(--pe-tap);
    background: var(--pe-panel); border: 1px solid var(--pe-line); border-radius: 10px;
    padding: 0 13px; color: var(--pe-txt); font-size: 16px;
}
/* 16 px et pas moins : sous ce seuil, iOS zoome à la mise au point du champ
   et l'écran se décale. */
.pe-auth-input:focus { border-color: var(--pe-lime); }

.pe-auth-error {
    background: rgba(242, 84, 91, .12); border: 1px solid rgba(242, 84, 91, .4);
    color: var(--pe-red); border-radius: 10px; padding: 11px 13px;
    font-size: 13.5px; margin-bottom: 4px;
}

/* Bandeau « confirme ton courriel ».

   NI ROUGE NI ALARMANT : ce n'est pas une erreur, le compte fonctionne. C'est
   un rappel, et un rappel qui crie finit par se faire ignorer — ou pire, faire
   croire que quelque chose est cassé. D'où le doré, réservé ici à l'avertissement
   tiède, plutôt que --pe-red.

   Le lime plein reste interdit dans ce bandeau : il est réservé à l'action
   principale de l'écran, et un rappel persistant n'en est jamais une. */
.pe-confirm-banner {
    display: flex; align-items: center; gap: var(--pe-s3); flex-wrap: wrap;
    background: rgba(255, 197, 61, .10); border: 1px solid rgba(255, 197, 61, .35);
    border-radius: 10px; padding: 11px 13px; margin-bottom: var(--pe-s4);
}
.pe-confirm-banner-text {
    flex: 1 1 220px; color: var(--pe-txt-2);
    font-size: 13px; line-height: 1.45; font-weight: var(--pe-w-body);
}
.pe-confirm-banner-action {
    min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px;
    border: 1px solid var(--pe-gold); border-radius: 8px; color: var(--pe-gold);
    font-size: 12.5px; font-weight: var(--pe-w-head); text-decoration: none;
    white-space: nowrap;
}
.pe-confirm-banner-action:hover { background: rgba(255, 197, 61, .12); }

.pe-mobile-auth-page {
    min-height: 100%; padding: max(env(safe-area-inset-top, 0px), 30px) 22px
                 max(env(safe-area-inset-bottom, 0px), 28px);
}
.pe-auth-back {
    min-height: 44px; display: inline-flex; align-items: center;
    margin-bottom: var(--pe-s5); color: var(--pe-txt-2); text-decoration: none;
    font-size: 13px; font-weight: var(--pe-w-head);
}
.pe-auth-title {
    margin: 28px 0 4px; font-size: 30px; font-weight: 900;
    line-height: 1; letter-spacing: -.04em;
}
.pe-auth-help {
    margin: 6px 0 0; color: var(--pe-txt-3); font-size: 11.5px; line-height: 1.5;
}
.pe-auth-check {
    display: flex; align-items: flex-start; gap: 10px;
    margin: var(--pe-s5) 0; color: var(--pe-txt-2); font-size: 12.5px; line-height: 1.45;
}
.pe-auth-check input {
    width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
    accent-color: var(--pe-lime);
}
.pe-auth-switch {
    margin: var(--pe-s5) 0 0; color: var(--pe-txt-2);
    text-align: center; font-size: 12.5px;
}
.pe-auth-switch a { color: var(--pe-lime); font-weight: var(--pe-w-head); }

/* ═══════════════════════════════════════════════════════════════════════
   Coquille mobile

   Le gabarit MAUI n'avait ni en-tête ni navigation : @Body seul dans une
   div. L'application ne proposait donc aucun moyen d'aller d'un écran à
   l'autre — c'est la première cause de l'impression d'inachevement, avant
   tout problème de contenu.

   Trois zones fixes : en-tête, contenu défilant, barre d'onglets. Le
   contenu est le SEUL élément qui défile ; sans ça, la barre d'onglets
   disparaît au scroll et le pouce n'a plus de repère.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-mobile-shell {
    /* dvh et pas vh : sur iOS, 100vh inclut la barre d'adresse escamotable,
       ce qui pousse la barre d'onglets sous le bord de l'écran. */
    height: 100dvh; min-height: 100vh;
    display: flex; flex-direction: column; overflow: hidden;
}

/* ANDROID 15+ IMPOSE LE PLEIN ÉCRAN, et env(safe-area-inset-*) y vaut 0.

   Résultat observé sur Pixel 7 / API 36 : le titre se dessinait par-dessus
   l'horloge et les icônes système, et la barre de gestes traversait la barre
   d'onglets. max() garde l'encoche réelle sur iOS et garantit un plancher
   partout ailleurs. */
.pe-mobile-bar {
    flex: 0 0 auto; background: var(--pe-panel);
    border-bottom: 1px solid var(--pe-line);
    padding: max(env(safe-area-inset-top, 0px), 30px) var(--pe-s4) var(--pe-s3);
}
/* Barre d'une sous-page : la flèche à gauche, le titre à côté. La cible fait
   44 px — le minimum tactile — même si le glyphe est plus petit. */
.pe-mobile-bar-sub { display: flex; align-items: center; gap: var(--pe-s3); }
.pe-mobile-bar-copy { min-width: 0; }
.pe-mobile-back {
    flex: 0 0 auto; width: 44px; height: 44px; margin-left: -6px;
    display: grid; place-items: center; border-radius: 12px;
    color: var(--pe-txt); font-size: 20px; line-height: 1; text-decoration: none;
}
.pe-mobile-back:active { background: var(--pe-elevated); }
.pe-mobile-title { font-size: 17px; font-weight: var(--pe-w-head); letter-spacing: -.015em; }
.pe-mobile-sub {
    font-size: 10px; font-weight: var(--pe-w-head); letter-spacing: .16em;
    text-transform: uppercase; color: var(--pe-txt-3); margin-top: 2px;
}

.pe-mobile-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--pe-s4) var(--pe-s4) var(--pe-s6);
}
/* L'accueil mobile portait sa propre marge, qui doublait celle du corps. */
.pe-mobile-body > .pe-mobile-home { padding: 0; }

/* LA BARRE PORTE DÉJÀ LE TITRE. Les pages partagées ont leur propre <h1> pour
   le web ; sur mobile il s'affichait juste en dessous, en double. Retiré de
   l'écran, gardé pour les lecteurs d'écran. */
/* Depuis que la barre porte le titre de la PAGE et non celui de l'onglet, les
   <h1> des heros font double emploi sur mobile. On les retire de l'ecran, jamais
   du document : un lecteur d'ecran doit encore trouver le titre de la page. */
.pe-mobile-shell .pe-page-title,
.pe-mobile-shell .pe-surv-head h1,
.pe-mobile-shell .pe-units-head h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}
/* Sans le titre, le hero n'a plus a reserver la hauteur d'un titre. */
.pe-mobile-shell .pe-surv-head,
.pe-mobile-shell .pe-units-head { min-height: 0; padding-top: 6px; }

.pe-tabbar {
    flex: 0 0 auto; display: flex; background: var(--pe-panel);
    border-top: 1px solid var(--pe-line);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}
.pe-tab {
    flex: 1; min-height: var(--pe-tap);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: var(--pe-txt-3);
}
.pe-tab-icon { font-size: 17px; line-height: 1; }
.pe-tab-label {
    font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.pe-tab-on { color: var(--pe-lime); }

/* ═══════════════════════════════════════════════════════════════════════
   Horaire — écran 2 de jour-de-match-v1.html
   ═══════════════════════════════════════════════════════════════════════ */

.pe-wknav {
    display: flex; align-items: center; gap: var(--pe-s2);
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 12px; padding: 4px var(--pe-s2); margin-bottom: var(--pe-s3);
}
.pe-wknav-arrow {
    min-width: 44px; min-height: 44px; display: grid; place-items: center;
    color: var(--pe-txt-2); font-size: 20px; font-weight: 700;
    text-decoration: none; border-radius: 8px; flex: 0 0 auto;
}
.pe-wknav-arrow:hover { background: var(--pe-panel-2); color: var(--pe-txt); }
/* Le bord de saison reste visible plutôt que de disparaître : une flèche
   absente déplace la date au moment où l'on navigue. */
.pe-wknav-arrow-off { color: var(--pe-line-strong); }
.pe-wknav-cur { flex: 1; text-align: center; min-width: 0; }
.pe-wknav-week { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.pe-wknav-dates {
    font-size: 9.5px; font-weight: var(--pe-w-head); letter-spacing: .08em;
    text-transform: uppercase; color: var(--pe-txt-3); margin-top: 1px;
}

.pe-chiprow {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin-bottom: var(--pe-s3); padding-bottom: 2px;
}
.pe-chiprow::-webkit-scrollbar { display: none; }
.pe-chip {
    display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
    font-size: 11.5px; line-height: 1; font-weight: var(--pe-w-head);
    color: var(--pe-txt-2);
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 99px; white-space: nowrap; text-decoration: none; flex: 0 0 auto;
}
.pe-chip-on {
    background: var(--pe-lime-wash); color: var(--pe-lime);
    border-color: rgba(200, 247, 81, .35);
}

.pe-sched {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; overflow: hidden;
}
.pe-sched-day {
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pe-txt-3); background: var(--pe-panel-2);
    padding: 7px var(--pe-s3); border-bottom: 1px solid var(--pe-line);
    position: sticky; top: 0;
}
.pe-sched-empty {
    background: var(--pe-panel); border: 1px solid var(--pe-line); border-radius: 14px;
    padding: 32px var(--pe-s4); text-align: center;
    font-size: 13px; color: var(--pe-txt-2);
}

/* Rangées serrées : une semaine compte jusqu'à 40 matchs et l'écran sert à
   BALAYER, pas à lire. À 68 px la rangée n'en montrait que sept. */
.pe-srow {
    display: flex; align-items: center; gap: var(--pe-s3);
    padding: 9px var(--pe-s3);
    border-bottom: 1px solid var(--pe-line);
}
.pe-srow:last-child { border-bottom: 0; }
.pe-srow-time {
    font-family: var(--pe-mono); font-variant-numeric: tabular-nums;
    font-size: 11px; line-height: 1.2; color: var(--pe-txt-3);
    width: 40px; flex: 0 0 auto;
}
.pe-srow-main { flex: 1; min-width: 0; }
.pe-srow-teams {
    font-size: 13px; line-height: 1.25; font-weight: var(--pe-w-body);
    color: var(--pe-txt);
}
/* Le gagnant en gras — jamais de marqueur sur le perdant (contrainte H7). */
.pe-srow-winner { font-weight: 800; }

/* Jour de match — accueil hybride A + « prochain coup d'envoi » de B */
.pe-md-head,
.pe-md-pick-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pe-s3);
}
.pe-md-head .pe-page-title,
.pe-md-pick-head .pe-page-title { margin-bottom: var(--pe-s3); }
.pe-md-kicker {
    color: var(--pe-lime-soft); font-size: 9.5px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
}
.pe-md-manage {
    color: var(--pe-txt-2); font-size: 12px; font-weight: 700; text-decoration: none;
    padding: 7px 0;
}
.pe-md-scope {
    display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
    background: var(--pe-panel); border: 1px solid var(--pe-line); border-radius: 12px;
    margin-bottom: var(--pe-s4);
}
.pe-md-scope a {
    min-height: 40px; display: grid; place-items: center; border-radius: 8px;
    color: var(--pe-txt-3); text-decoration: none; font-size: 12px; font-weight: 800;
}
.pe-md-scope .pe-md-scope-on { background: var(--pe-panel-2); color: var(--pe-txt); }
.pe-md-loading { display: flex; justify-content: center; gap: 6px; padding: 52px 0; }
.pe-md-loading span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--pe-lime-soft); opacity: .32;
    animation: pe-md-pulse 1.2s infinite ease-in-out;
}
.pe-md-loading span:nth-child(2) { animation-delay: .15s; }
.pe-md-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes pe-md-pulse { 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pe-md-loading span { animation: none; opacity: .7; } }

.pe-md-feature {
    position: relative; overflow: hidden; padding: var(--pe-s4);
    border: 1px solid var(--pe-line-strong); border-radius: 16px;
    background:
        radial-gradient(circle at 90% 10%, rgba(200,247,81,.14), transparent 35%),
        linear-gradient(145deg, var(--pe-elevated), var(--pe-panel));
    box-shadow: inset 3px 0 0 var(--pe-lime); margin-bottom: var(--pe-s5);
}
.pe-md-feature-top {
    display: flex; align-items: center; gap: 7px; color: var(--pe-txt-2);
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.pe-md-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pe-lime); box-shadow: 0 0 0 4px var(--pe-lime-wash); }
.pe-md-feature-level { margin-left: auto; color: var(--pe-lime-soft); }
.pe-md-feature-date { margin: var(--pe-s4) 0 var(--pe-s2); color: var(--pe-txt-2); font-size: 12px; }
.pe-md-feature-match {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
    font-size: clamp(15px, 4.5vw, 19px); font-weight: 800; letter-spacing: -.02em;
}
.pe-md-feature-match div:first-child { text-align: right; }
.pe-md-feature-match > span { color: var(--pe-txt-3); font: 800 11px var(--pe-mono); }
.pe-md-feature-meta { text-align: center; margin-top: var(--pe-s3); color: var(--pe-txt-3); font-size: 10.5px; }
.pe-md-followed { color: var(--pe-lime); }

.pe-md-section { margin-top: var(--pe-s5); }
.pe-md-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pe-s2); }
.pe-md-section-head h2 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.pe-md-section-head a { color: var(--pe-txt-2); font-size: 11px; text-decoration: none; }
/* Neutre par defaut : le conteneur n'existe pas pour la mise en page. Il ne
   devient une grille que sur large ecran, cote web (voir app.css). */
.pe-md-columns,
.pe-cards { display: contents; }
.pe-md-list { border: 1px solid var(--pe-line); border-radius: 13px; overflow: hidden; background: var(--pe-panel); }
.pe-md-game {
    min-height: 62px; display: flex; align-items: center; gap: var(--pe-s3);
    padding: 9px var(--pe-s3); border-bottom: 1px solid var(--pe-line);
}
.pe-md-game:last-child { border-bottom: 0; }
.pe-md-game time {
    width: 42px; flex: 0 0 42px; white-space: pre-line; text-align: center;
    color: var(--pe-txt-3); font: 700 9.5px/1.35 var(--pe-mono); text-transform: uppercase;
}
.pe-md-game-main { min-width: 0; flex: 1; font-size: 12.5px; font-weight: 700; }
.pe-md-game-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pe-txt-3); font-size: 9.5px; font-weight: 500; margin-top: 4px; }
.pe-md-at { color: var(--pe-txt-3); margin: 0 2px; }
.pe-md-result strong { font: 900 15px var(--pe-mono); }
.pe-md-legend { margin: -4px 0 8px; color: var(--pe-txt-3); font-size: 10px; }
/* Le verdict : le mot d'abord, le pointage en dessous. Le mot repond a la
   question, le pointage la documente. */
.pe-md-verdict { flex: 0 0 auto; text-align: right; }
.pe-md-verdict > span { display: block; font: 800 8px var(--pe-mono); letter-spacing: .1em;
    text-transform: uppercase; }
.pe-md-verdict > strong { display: block; margin-top: 3px; font: 900 15px var(--pe-mono); }
/* Une victoire se dit en lime, une defaite en gris — jamais en rouge. Ce sont
   des enfants de 10 ans qui jouent : l'application n'a pas a sanctionner. */
.pe-md-win { color: var(--pe-lime); }
.pe-md-loss, .pe-md-draw { color: var(--pe-txt-3); }
.pe-md-winner { font-weight: 900; color: var(--pe-txt); }
/* Cumule avec .pe-md-winner : le gras reste, la couleur passe au lime. Declare
   apres pour gagner a specificite egale. */
.pe-md-winner.pe-md-followed { color: var(--pe-lime); }
.pe-md-inline-empty { padding: var(--pe-s4); border: 1px dashed var(--pe-line); border-radius: 12px; color: var(--pe-txt-3); font-size: 12px; text-align: center; }

.pe-md-onboard {
    text-align: center; padding: 34px var(--pe-s4); border: 1px solid var(--pe-line);
    border-radius: 16px; background: linear-gradient(145deg, var(--pe-elevated), var(--pe-panel));
}
.pe-md-onboard-mark { color: var(--pe-lime); font-size: 22px; margin-bottom: var(--pe-s3); }
.pe-md-onboard h2 { margin: var(--pe-s2) auto; max-width: 18ch; font-size: 20px; line-height: 1.15; }
.pe-md-onboard p { margin: 0 auto var(--pe-s5); max-width: 34ch; color: var(--pe-txt-2); font-size: 12.5px; line-height: 1.55; }
.pe-md-onboard .pe-btn { width: 100%; box-sizing: border-box; }
.pe-md-textlink { display: inline-block; margin-top: var(--pe-s4); color: var(--pe-txt-2); font-size: 11.5px; text-decoration: none; }

.pe-md-pick-intro { color: var(--pe-txt-2); font-size: 12.5px; line-height: 1.55; margin: 0 0 var(--pe-s5); max-width: 52ch; }
.pe-md-count { flex: 0 0 auto; color: var(--pe-lime); background: var(--pe-lime-wash); border: 1px solid rgba(200,247,81,.22); border-radius: 99px; padding: 6px 9px; font-size: 10px; font-weight: 800; }
.pe-md-team-group { margin-top: var(--pe-s5); }
.pe-md-team-group h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--pe-s2); font-size: 15px; }
.pe-md-team-group h2 span { color: var(--pe-txt-3); font: 700 10px var(--pe-mono); }
.pe-md-division { color: var(--pe-txt-3); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: var(--pe-s3) 0 6px; }
.pe-md-team-list { border: 1px solid var(--pe-line); border-radius: 13px; overflow: hidden; }
.pe-md-team-choice {
    appearance: none; width: 100%; min-height: 58px; display: flex; align-items: center; gap: 11px;
    padding: 8px 11px; text-align: left; color: var(--pe-txt); background: var(--pe-panel);
    border: 0; border-bottom: 1px solid var(--pe-line); font: inherit; cursor: pointer;
}
.pe-md-team-choice:last-child { border-bottom: 0; }
.pe-md-team-choice-on { background: var(--pe-lime-wash); }
.pe-md-team-choice:disabled { opacity: .62; }
.pe-md-team-color { width: 8px; height: 34px; border-radius: 6px; background: var(--pe-line-strong); flex: 0 0 auto; }
.pe-md-team-copy { min-width: 0; flex: 1; }
.pe-md-team-copy strong, .pe-md-team-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-md-team-copy strong { font-size: 12.5px; }
.pe-md-team-copy small { color: var(--pe-txt-3); font-size: 9.5px; margin-top: 3px; }
.pe-md-team-check { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--pe-line-strong); color: var(--pe-txt-2); font-weight: 900; }
.pe-md-team-choice-on .pe-md-team-check { color: var(--pe-ink); border-color: var(--pe-lime); background: var(--pe-lime); }
.pe-md-sticky-action { position: sticky; bottom: 0; padding: var(--pe-s4) 0 max(var(--pe-s3), env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--pe-bg) 22%); }
.pe-md-sticky-action .pe-btn { width: 100%; box-sizing: border-box; }

/* Mes équipes — répertoire mobile guidé (niveau → équipes). */
.pe-team-browser { position: relative; padding-bottom: 76px; }
.pe-team-browser-head {
    display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center; gap: 8px; margin-bottom: var(--pe-s4);
}
.pe-team-back {
    appearance: none; width: 44px; height: 44px; display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 9px; color: var(--pe-txt);
    background: transparent; text-decoration: none; font: 800 21px/1 var(--pe-body); cursor: pointer;
}
.pe-team-back:active { background: var(--pe-panel-2); }
.pe-team-browser-title { margin-top: 2px; font-size: 19px; font-weight: 850; letter-spacing: -.025em; }
.pe-team-season {
    align-self: start; margin-top: 6px; padding: 6px 8px; border-radius: 99px;
    color: var(--pe-lime-soft); background: var(--pe-lime-wash); font-size: 9px; font-weight: 800;
}
.pe-team-search { position: relative; display: block; margin-bottom: var(--pe-s4); }
.pe-team-search > span {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--pe-txt-3); font-size: 21px; pointer-events: none;
}
.pe-team-search input {
    appearance: none; width: 100%; min-height: 48px; padding: 0 44px;
    border: 1px solid var(--pe-line); border-radius: 11px; outline: none;
    color: var(--pe-txt); background: var(--pe-panel); font: 600 13px var(--pe-body);
}
.pe-team-search input:focus { border-color: rgba(200,247,81,.48); box-shadow: 0 0 0 3px var(--pe-lime-wash); }
.pe-team-search input::placeholder { color: var(--pe-txt-3); }
.pe-team-search button {
    position: absolute; right: 2px; top: 2px; width: 44px; height: 44px;
    border: 0; color: var(--pe-txt-3); background: transparent; font: 500 22px var(--pe-body); cursor: pointer;
}
.pe-team-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pe-s3);
    margin: 0 2px 8px; color: var(--pe-txt-3); font-size: 9px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase;
}
.pe-team-levels { display: grid; gap: 8px; }
.pe-team-level {
    appearance: none; width: 100%; min-height: 62px;
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--pe-line); border-radius: 11px;
    color: var(--pe-txt); background: var(--pe-panel); font-family: inherit; text-align: left; cursor: pointer;
}
.pe-team-level:active { border-color: var(--pe-line-strong); background: var(--pe-panel-2); }
.pe-team-level-mark {
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px;
    color: var(--pe-lime-soft); background: var(--pe-lime-wash); font-size: 13px; font-weight: 900;
}
.pe-team-level-copy { min-width: 0; }
.pe-team-level-copy strong, .pe-team-level-copy small { display: block; }
.pe-team-level-copy strong { font-size: 13.5px; }
.pe-team-level-copy small { margin-top: 3px; color: var(--pe-txt-3); font-size: 9.5px; }
.pe-team-level-selected { color: var(--pe-lime-soft); font-size: 9px; font-weight: 800; white-space: nowrap; }
.pe-team-chevron { color: var(--pe-txt-3); font-size: 22px; }
.pe-team-results { border-top: 1px solid var(--pe-line); }
.pe-team-division {
    padding: 12px 2px 5px; color: var(--pe-txt-3); font-size: 9px;
    font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pe-team-row {
    appearance: none; width: 100%; min-height: 62px; display: flex; align-items: center; gap: 11px;
    padding: 8px 2px; border: 0; border-bottom: 1px solid var(--pe-line);
    color: var(--pe-txt); background: transparent; font-family: inherit; text-align: left; cursor: pointer;
}
.pe-team-row:disabled { opacity: .62; }
.pe-team-row-selected .pe-md-team-copy strong { color: var(--pe-lime); }
.pe-team-row-action {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
    border: 1px solid var(--pe-line-strong); border-radius: 50%; color: var(--pe-txt-2); font-weight: 900;
}
.pe-team-row-selected .pe-team-row-action { color: var(--pe-ink); border-color: var(--pe-lime); background: var(--pe-lime); }
.pe-team-empty {
    padding: 30px var(--pe-s3); border: 1px dashed var(--pe-line); border-radius: 11px;
    color: var(--pe-txt-2); font-size: 12px; line-height: 1.45; text-align: center;
}
/* Barre pleine largeur, pas une carte flottante : arrondie et en retrait, elle
   laissait voir des demi-lignes d'equipe au-dessus, en dessous et de chaque
   cote. On lisait « Barons » coupe en deux derriere le bouton. */
.pe-team-choice-bar {
    position: sticky; z-index: 6; bottom: 0; min-height: 60px;
    display: flex; align-items: center; gap: var(--pe-s3);
    margin: var(--pe-s5) calc(-1 * var(--pe-s3)) 0;
    padding: 10px var(--pe-s3) max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(200,247,81,.32);
    background: var(--pe-bg);
}
.pe-team-choice-bar > span { flex: 1; color: var(--pe-txt-2); font-size: 10px; }
.pe-team-choice-bar strong { display: block; color: var(--pe-txt); font-size: 12px; }
.pe-team-choice-bar button {
    min-height: 40px; padding: 0 13px; border: 0; border-radius: 8px;
    color: var(--pe-ink); background: var(--pe-lime); font: 800 10.5px var(--pe-body); cursor: pointer;
}
.pe-team-drawer-backdrop {
    position: fixed; z-index: 90; inset: 0; width: 100%; height: 100%;
    border: 0; background: rgba(2,6,10,.72); cursor: default;
}
.pe-team-drawer {
    position: fixed; z-index: 91; left: 0; right: 0; bottom: 0;
    max-height: min(72vh, 620px); overflow-y: auto; padding: 18px var(--pe-s4) max(22px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(200,247,81,.3); border-radius: 20px 20px 0 0;
    color: var(--pe-txt); background: var(--pe-panel); box-shadow: 0 -22px 60px rgba(0,0,0,.55);
}
.pe-team-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pe-s3); margin-bottom: 9px; }
.pe-team-drawer-head h2 { margin: 3px 0 0; font-size: 20px; }
.pe-team-drawer-head > button {
    width: 44px; height: 44px; border: 0; border-radius: 9px;
    color: var(--pe-txt-2); background: transparent; font: 500 24px var(--pe-body); cursor: pointer;
}
.pe-team-drawer-list { border-top: 1px solid var(--pe-line); }
.pe-team-picked { min-height: 62px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--pe-line); }
.pe-team-picked > button {
    min-width: 62px; min-height: 44px; padding: 0 7px; border: 0;
    color: var(--pe-red); background: transparent; font: 800 10px var(--pe-body); cursor: pointer;
}
.pe-team-picked > button:disabled { opacity: .55; }
.pe-team-drawer-empty { padding: 28px 4px; color: var(--pe-txt-2); font-size: 12px; text-align: center; }
.pe-team-drawer-note { margin-top: var(--pe-s3); color: var(--pe-txt-3); font-size: 9.5px; }

/* Sélecteur mobile de rejeu — visible seulement sur Franchise et Survivor. */
.pe-compact-season {
    display: flex; align-items: end; gap: 7px; margin: 0 0 var(--pe-s4); padding: 7px 8px;
    border: 1px solid var(--pe-line); border-radius: 10px; background: var(--pe-panel);
}
.pe-compact-season label { min-width: 0; }
.pe-compact-season label:first-child { flex: 1; }
.pe-compact-season label > span {
    display: block; margin: 0 0 3px 3px; color: var(--pe-txt-3);
    font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.pe-compact-season select {
    min-height: 44px; max-width: 100%; padding: 0 27px 0 9px;
    border: 1px solid var(--pe-line-strong); border-radius: 7px;
    color: var(--pe-txt); background: var(--pe-panel-2); font: 800 10.5px var(--pe-body);
}
.pe-compact-season select:disabled { opacity: .55; }
/* Pas-a-pas de semaine : deux cibles de 44 px et un libelle au milieu. Aucun
   menu ne s'ouvre, donc rien ne peut sortir du theme. */
.pe-compact-week {
    align-self: center; display: flex; align-items: center; gap: 2px;
    border: 1px solid var(--pe-line-strong); border-radius: 7px; background: var(--pe-panel-2);
}
.pe-compact-step {
    min-width: 34px; min-height: 44px; border: 0; background: none;
    color: var(--pe-txt); font-size: 15px; line-height: 1; cursor: pointer;
}
/* Le bouton eteint reste LISIBLE mais inerte : c'est lui qui dit « la saison
   s'arrête ici ». Le masquer laisserait croire a un defaut d'affichage. */
.pe-compact-step:disabled { color: var(--pe-txt-3); opacity: .35; cursor: default; }
.pe-compact-week-cur {
    min-width: 74px; text-align: center; color: var(--pe-txt);
    font: 800 10.5px var(--pe-body); white-space: nowrap;
}
.pe-compact-replay {
    align-self: center; padding: 4px 6px; border-radius: 99px;
    color: var(--pe-lime-soft); background: var(--pe-lime-wash);
    font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
}

@media (min-width: 720px) {
    .pe-team-browser { max-width: 680px; margin: 0 auto; }
    .pe-team-levels { grid-template-columns: 1fr 1fr; }
    .pe-team-drawer { left: 50%; right: auto; width: min(520px, calc(100% - 32px)); transform: translateX(-50%); border: 1px solid rgba(200,247,81,.3); border-bottom: 0; }
}

/* Compte mobile — accès durable aux préférences Jour de match */
.pe-account { padding-bottom: var(--pe-s5); }
.pe-account-identity {
    display: flex; align-items: center; gap: var(--pe-s3); padding: 4px 0 var(--pe-s5);
    border-bottom: 1px solid var(--pe-line);
}
.pe-account-avatar {
    width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
    border-radius: 50%; background: var(--pe-lime); color: var(--pe-ink);
    font-size: 14px; font-weight: 900; letter-spacing: .04em;
}
.pe-account-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.pe-account-status { display: flex; align-items: center; gap: 6px; color: var(--pe-txt-3); font-size: 10px; margin-top: 4px; }
.pe-account-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--pe-lime-soft); }
.pe-account-section { margin-top: 26px; }
.pe-account-eyebrow {
    margin-bottom: 8px; color: var(--pe-txt-3); font-size: 9px; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase;
}
.pe-account-link {
    min-height: 68px; display: flex; align-items: center; gap: var(--pe-s3);
    padding: 10px var(--pe-s3); color: var(--pe-txt); text-decoration: none;
    background: var(--pe-panel); border: 1px solid var(--pe-line); border-radius: 13px;
}
.pe-account-link-featured { background: linear-gradient(135deg, var(--pe-elevated), var(--pe-panel)); }
.pe-account-link-mark {
    width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
    border-radius: 50%; background: var(--pe-lime-wash); color: var(--pe-lime); font-size: 14px;
}
.pe-account-link-copy { min-width: 0; flex: 1; }
.pe-account-link-copy strong, .pe-account-link-copy small { display: block; }
.pe-account-link-copy strong { font-size: 13.5px; }
.pe-account-link-copy small { margin-top: 4px; color: var(--pe-txt-3); font-size: 10.5px; line-height: 1.35; }
.pe-account-chevron { color: var(--pe-txt-3); font-size: 24px; }
.pe-account-list { border-top: 1px solid var(--pe-line); }
.pe-account-detail {
    min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--pe-s3);
    border-bottom: 1px solid var(--pe-line); font-size: 11.5px;
}
.pe-account-detail span { color: var(--pe-txt-2); }
.pe-account-detail strong { max-width: 62%; text-align: right; font-size: 10.5px; font-weight: 700; }
.pe-account-logout {
    appearance: none; width: 100%; min-height: var(--pe-tap); margin-top: 34px;
    color: var(--pe-red); background: transparent; border: 1px solid color-mix(in srgb, var(--pe-red) 38%, transparent);
    border-radius: 10px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pe-account-logout:disabled { opacity: .5; }
.pe-srow-at { color: var(--pe-txt-3); margin: 0 3px; }
.pe-srow-meta {
    font-size: 10.5px; line-height: 1.25; color: var(--pe-txt-3); margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-srow-score {
    font-family: var(--pe-mono); font-variant-numeric: tabular-nums;
    font-size: 12.5px; font-weight: var(--pe-w-num); flex: 0 0 auto;
}

/* Le Dernier Debout — A (choix), C (révélation), E (urgence). */
.pe-surv-head { min-height:112px; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--pe-s3); padding:18px 0 16px; }
.pe-surv-head h1 { margin:3px 0 4px; font-size:30px; font-weight:900; letter-spacing:-.055em; }
.pe-surv-head p { color:var(--pe-txt-2); font-size:10.5px; }
.pe-surv-shields { display:flex; gap:5px; padding-top:7px; font-size:16px; }
.pe-surv-shield-full { color:var(--pe-lime); filter:drop-shadow(0 0 5px rgba(200,247,81,.25)); }
.pe-surv-shield-half { color:var(--pe-lime-soft); opacity:.62; }
.pe-surv-shield-empty { color:var(--pe-line-strong); }
.pe-surv-wide { width:100%; box-sizing:border-box; margin-top:var(--pe-s4); }
.pe-surv-onboard { padding:34px var(--pe-s4); text-align:center; border:1px solid var(--pe-line); border-radius:18px; background:radial-gradient(circle at 50% 0,rgba(200,247,81,.12),transparent 38%),linear-gradient(150deg,var(--pe-elevated),var(--pe-panel)); }
.pe-surv-mark { width:58px; height:58px; display:grid; place-items:center; margin:0 auto var(--pe-s4); color:var(--pe-ink); background:var(--pe-lime); border-radius:17px; font-size:24px; transform:rotate(45deg); }
.pe-surv-mark::first-letter { transform:rotate(-45deg); }
.pe-surv-onboard h2 { max-width:14ch; margin:10px auto; font-size:25px; line-height:1.06; letter-spacing:-.04em; }
.pe-surv-onboard p { max-width:35ch; margin:0 auto var(--pe-s5); color:var(--pe-txt-2); font-size:12.5px; line-height:1.55; }
.pe-surv-rule { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:var(--pe-s4); }
.pe-surv-rule strong { font:900 30px var(--pe-mono); color:var(--pe-lime); }
.pe-surv-rule span { max-width:18ch; text-align:left; color:var(--pe-txt-2); font-size:11px; line-height:1.25; }
.pe-surv-views { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:var(--pe-s4); border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel); }
.pe-surv-views a { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; color:var(--pe-txt-3); font-size:11px; font-weight:800; text-decoration:none; }
.pe-surv-views .pe-surv-view-on { color:var(--pe-txt); background:var(--pe-panel-2); }
.pe-surv-dot { width:6px; height:6px; border-radius:50%; background:var(--pe-lime); }
.pe-surv-status { display:flex; align-items:center; justify-content:space-between; gap:var(--pe-s3); padding:12px var(--pe-s3); margin-bottom:var(--pe-s4); border-left:3px solid var(--pe-lime); background:var(--pe-panel); }
.pe-surv-status div span,.pe-surv-status div strong { display:block; }
.pe-surv-status div span { color:var(--pe-txt-3); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pe-surv-status div strong { margin-top:3px; font-size:12.5px; }
.pe-surv-scope { color:var(--pe-lime-soft); font-size:9.5px; font-weight:800; }
.pe-surv-instruction { margin-bottom:10px; }
.pe-surv-instruction span,.pe-surv-instruction strong { display:block; }
.pe-surv-instruction span { color:var(--pe-txt-3); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pe-surv-instruction strong { margin-top:3px; font-size:14px; }
.pe-surv-games { display:grid; gap:9px; }
.pe-surv-game { padding:10px; border:1px solid var(--pe-line); border-radius:13px; background:var(--pe-panel); }
.pe-surv-game-meta { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--pe-txt-3); font:700 8.5px var(--pe-mono); text-transform:uppercase; }
.pe-surv-matchup { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); align-items:stretch; gap:5px; }
.pe-surv-at { display:grid; place-items:center; color:var(--pe-txt-3); font:800 9px var(--pe-mono); }
.pe-surv-team { appearance:none; min-height:58px; padding:8px 6px; border:1px solid var(--pe-line-strong); border-radius:10px; color:var(--pe-txt); background:var(--pe-panel-2); font-family:inherit; cursor:pointer; }
.pe-surv-team span,.pe-surv-team small { display:block; }
.pe-surv-team span { font-size:11.5px; font-weight:800; line-height:1.2; }
.pe-surv-team small { margin-top:5px; color:var(--pe-txt-3); font-size:8.5px; }
.pe-surv-team-selected { border-color:var(--pe-lime); background:var(--pe-lime-wash); box-shadow:inset 0 0 0 1px rgba(200,247,81,.2); }
.pe-surv-team-selected small { color:var(--pe-lime); }
.pe-surv-team-burned { opacity:.38; text-decoration:line-through; cursor:not-allowed; }
.pe-surv-confirm { position:sticky; z-index:5; bottom:0; display:flex; align-items:center; gap:12px; margin:var(--pe-s4) calc(-1 * var(--pe-s3)) 0; padding:16px var(--pe-s3) max(16px,env(safe-area-inset-bottom)); border-top:1px solid rgba(200,247,81,.22); background:var(--pe-bg); }
.pe-surv-confirm div { flex:1; min-width:0; }
.pe-surv-confirm div span,.pe-surv-confirm div strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-surv-confirm div span { color:var(--pe-txt-3); font-size:9px; text-transform:uppercase; }
.pe-surv-confirm div strong { margin-top:3px; font-size:13px; }
.pe-surv-confirm .pe-btn { flex:0 0 auto; padding-inline:16px; }
.pe-surv-sealed { padding:28px var(--pe-s4); text-align:center; border:1px solid rgba(200,247,81,.25); border-radius:16px; background:radial-gradient(circle at 50% 0,rgba(200,247,81,.12),transparent 50%),var(--pe-panel); }
.pe-surv-seal { width:42px; height:42px; display:grid; place-items:center; margin:0 auto var(--pe-s3); border-radius:50%; color:var(--pe-ink); background:var(--pe-lime); font-weight:900; }
.pe-surv-sealed h2 { margin:5px 0 2px; font-size:23px; }
.pe-surv-sealed p { margin:0; color:var(--pe-txt-2); font-size:12px; }
.pe-surv-sealed small { display:block; margin-top:18px; color:var(--pe-txt-3); font-size:9.5px; }
.pe-surv-alert { padding:14px; border:1px solid rgba(255,183,77,.25); border-radius:12px; color:#ffd59a; background:rgba(255,183,77,.07); font-size:11.5px; line-height:1.4; }
.pe-surv-section { margin-top:var(--pe-s5); }
.pe-surv-section>h2 { margin:0 0 9px; font-size:14px; }
.pe-surv-burned { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.pe-surv-burned-team {
    min-width:0; display:flex; align-items:center; gap:8px; padding:8px 9px;
    border:1px solid var(--pe-line); border-radius:9px; background:var(--pe-panel);
}
.pe-surv-burned-team strong {
    min-width:0; overflow:hidden; color:var(--pe-txt-2); font-size:10px;
    font-weight:750; text-overflow:ellipsis; white-space:nowrap;
}
.pe-surv-burned-week {
    flex:0 0 auto; min-width:27px; padding:4px 5px; border-radius:5px;
    color:var(--pe-lime-soft); background:var(--pe-lime-wash);
    font:900 8px var(--pe-mono); letter-spacing:.04em; text-align:center;
}
@media (max-width:340px) { .pe-surv-burned { grid-template-columns:1fr; } }
.pe-surv-pool-switch {
    width:100%; min-height:58px; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center; gap:10px; margin:0 0 var(--pe-s4); padding:8px 11px;
    border:1px solid var(--pe-line-strong); border-radius:12px; color:var(--pe-txt);
    background:var(--pe-panel); font-family:inherit; text-align:left; cursor:pointer;
}
.pe-surv-pool-switch>span:nth-child(2) { min-width:0; }
.pe-surv-pool-switch small,.pe-surv-pool-switch strong,.pe-surv-pool-switch em { display:block; }
.pe-surv-pool-switch small { color:var(--pe-txt-3); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.pe-surv-pool-switch strong { margin-top:2px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.pe-surv-pool-switch em { margin-top:2px; color:var(--pe-txt-3); font-size:8.5px; font-style:normal; }
.pe-surv-pool-switch>b { color:var(--pe-lime); font-size:16px; }
.pe-surv-pool-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:var(--pe-lime); background:var(--pe-lime-wash); font-size:12px; }
.pe-surv-pool-onboard { padding-bottom:var(--pe-s4); }
.pe-surv-onboard-intro { padding:12px 2px 19px; }
.pe-surv-onboard-intro .pe-surv-mark { margin:0 0 13px; }
.pe-surv-onboard-intro h2 { margin:5px 0 6px; font-size:25px; letter-spacing:-.035em; }
.pe-surv-onboard-intro p { max-width:34rem; margin:0; color:var(--pe-txt-2); font-size:11.5px; line-height:1.5; }
.pe-surv-pool-list { display:grid; gap:7px; margin-bottom:var(--pe-s4); }
.pe-surv-pool-option {
    width:100%; min-height:58px; display:grid; grid-template-columns:30px minmax(0,1fr) auto;
    align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--pe-line);
    border-radius:11px; color:var(--pe-txt); background:var(--pe-panel); font-family:inherit;
    text-align:left; cursor:pointer;
}
.pe-surv-pool-option>span:nth-child(2) { min-width:0; }
.pe-surv-pool-option strong,.pe-surv-pool-option small { display:block; }
.pe-surv-pool-option strong { font-size:11.5px; }
.pe-surv-pool-option small { margin-top:3px; color:var(--pe-txt-3); font-size:8.5px; }
.pe-surv-pool-option em { color:var(--pe-txt-3); font-size:7.5px; font-style:normal; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.pe-surv-pool-check { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--pe-line-strong); border-radius:7px; color:var(--pe-ink); font-size:12px; }
.pe-surv-pool-option-on { border-color:rgba(200,247,81,.4); background:var(--pe-lime-wash); }
.pe-surv-pool-option-on .pe-surv-pool-check { border-color:var(--pe-lime); background:var(--pe-lime); }
.pe-surv-sheet-backdrop { position:fixed; z-index:90; inset:0; width:100%; border:0; background:rgba(3,7,18,.72); }
.pe-surv-pool-sheet {
    position:fixed; z-index:91; right:0; bottom:0; left:0; max-height:min(82dvh,680px);
    overflow-y:auto; padding:8px var(--pe-s3) max(20px,env(safe-area-inset-bottom));
    border:1px solid rgba(200,247,81,.22); border-bottom:0; border-radius:19px 19px 0 0;
    background:var(--pe-bg); box-shadow:0 -18px 50px rgba(0,0,0,.38);
}
.pe-surv-sheet-grip { width:38px; height:4px; margin:0 auto 13px; border-radius:4px; background:var(--pe-line-strong); }
.pe-surv-pool-sheet>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.pe-surv-pool-sheet>header h2 { margin:3px 0 0; font-size:20px; }
.pe-surv-pool-sheet>header>button { width:48px; height:48px; border:0; border-radius:50%; color:var(--pe-txt-2); background:var(--pe-panel); font:400 25px/1 var(--pe-body); }
.pe-surv-sheet-list { overflow:hidden; border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel); }
.pe-surv-sheet-pool {
    width:100%; min-height:58px; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center; gap:9px; padding:7px 10px; border:0; border-bottom:1px solid var(--pe-line);
    color:var(--pe-txt); background:transparent; font-family:inherit; text-align:left;
}
.pe-surv-sheet-pool:last-child { border-bottom:0; }
.pe-surv-sheet-pool>span:nth-child(2) { min-width:0; }
.pe-surv-sheet-pool strong,.pe-surv-sheet-pool small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-surv-sheet-pool strong { font-size:11.5px; }
.pe-surv-sheet-pool small { margin-top:3px; color:var(--pe-txt-3); font-size:8.5px; }
.pe-surv-sheet-pool em { color:var(--pe-lime); font-size:8px; font-style:normal; font-weight:850; text-transform:uppercase; }
.pe-surv-sheet-pool-on { background:var(--pe-lime-wash); }
.pe-surv-sheet-label { margin:20px 2px 7px; color:var(--pe-txt-3); font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.pe-surv-sheet-available { min-height:58px; display:flex; align-items:center; gap:10px; padding:7px 8px 7px 11px; border-bottom:1px solid var(--pe-line); }
.pe-surv-sheet-available:last-child { border-bottom:0; }
.pe-surv-sheet-available>span { min-width:0; flex:1; }
.pe-surv-sheet-available strong,.pe-surv-sheet-available small { display:block; }
.pe-surv-sheet-available strong { font-size:11.5px; }
.pe-surv-sheet-available small { margin-top:3px; color:var(--pe-txt-3); font-size:8.5px; }
.pe-surv-sheet-available>button { min-width:76px; min-height:48px; border:1px solid rgba(200,247,81,.35); border-radius:8px; color:var(--pe-lime); background:var(--pe-lime-wash); font:850 9px var(--pe-body); }
.pe-surv-sheet-available>button:disabled { opacity:.55; }
@media (min-width:720px) {
    .pe-surv-pool-sheet { left:50%; width:min(520px,calc(100% - 32px)); transform:translateX(-50%); }
}
.pe-surv-reveal-hero { padding:23px var(--pe-s4); margin-bottom:var(--pe-s4); border-radius:16px; background:radial-gradient(circle at 90% 0,rgba(200,247,81,.16),transparent 45%),linear-gradient(145deg,var(--pe-elevated),var(--pe-panel)); }
.pe-surv-reveal-hero h2 { margin:5px 0 1px; font-size:24px; letter-spacing:-.03em; }
.pe-surv-reveal-hero p { margin:0; color:var(--pe-txt-2); font-size:11px; }
.pe-surv-reveal-list,.pe-surv-standing { overflow:hidden; border:1px solid var(--pe-line); border-radius:13px; background:var(--pe-panel); }
.pe-surv-reveal-row { position:relative; display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:12px; border-bottom:1px solid var(--pe-line); }
.pe-surv-reveal-row:last-child { border-bottom:0; }
/* LE LIME IDENTIFIE, IL NE DECORE PAS.
   Toutes les lignes portaient un pourcentage lime et une barre lime : sur vingt
   lignes a 4 %, le lime colorait 100 % de l'ecran et n'indiquait donc plus rien
   — ma propre ligne etait introuvable. Le neutre devient la regle, le lime
   redevient l'exception qui dit « toi ». */
.pe-surv-reveal-mine { background:var(--pe-lime-wash); box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-surv-reveal-copy { min-width:0; }
.pe-surv-reveal-copy strong,.pe-surv-reveal-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-surv-reveal-copy strong { font-size:12.5px; }
.pe-surv-reveal-copy span { margin-top:3px; color:var(--pe-txt-3); font-size:9px; }
.pe-surv-reveal-row b { color:var(--pe-txt-2); font:900 13px var(--pe-mono); }
/* Le choix majoritaire ressort en blanc plein — c'est une hierarchie, pas une
   recompense : le lime resterait faux ici, personne n'a « gagne » un vote. */
.pe-surv-reveal-row:first-child b { color:var(--pe-txt); }
.pe-surv-reveal-mine b { color:var(--pe-lime); }
.pe-surv-bar { grid-column:1/-1; height:3px; overflow:hidden; border-radius:3px; background:var(--pe-line); }
.pe-surv-bar span { display:block; height:100%; background:var(--pe-txt-3); }
.pe-surv-reveal-row:first-child .pe-surv-bar span { background:var(--pe-txt-2); }
.pe-surv-reveal-mine .pe-surv-bar span { background:var(--pe-lime); }
.pe-surv-standing-row { min-height:50px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:7px; padding:6px 11px; border-bottom:1px solid var(--pe-line); }
.pe-surv-standing-row:last-child { border-bottom:0; }
.pe-surv-standing-me { background:var(--pe-lime-wash); }
.pe-surv-rank { color:var(--pe-txt-3); font:800 11px var(--pe-mono); }
.pe-surv-standing-row strong { font-size:11.5px; }
.pe-surv-standing-row>span:last-child { color:var(--pe-txt-3); font-size:9px; }
/* Repli des choix minoritaires. Le marqueur natif est retire : la fleche par
   defaut du navigateur ne ressemble a rien d'autre dans l'application. */
/* Hors course : ambre et non rouge. Le participant n'a rien fait de mal et
   continue de jouer — le rouge dirait « erreur », l'ambre dit « attention,
   quelque chose a change ». */
.pe-surv-eliminated { display:flex; gap:11px; align-items:flex-start; margin:0 0 var(--pe-s4);
  padding:12px 13px; border:1px solid rgba(224,164,88,.42); border-radius:13px;
  background:linear-gradient(140deg,rgba(224,164,88,.11),var(--pe-panel)); }
.pe-surv-eliminated-mark { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid rgba(224,164,88,.4); border-radius:9px; color:#E0A458; font-size:14px; }
.pe-surv-eliminated .pe-md-kicker { color:#E0A458; }
.pe-surv-eliminated strong { display:block; margin-top:3px; font-size:12.5px; }
.pe-surv-eliminated p { margin-top:4px; color:var(--pe-txt-3); font-size:10.5px; line-height:1.5; }
.pe-surv-out { margin-left:6px; padding:1.5px 6px; border-radius:99px;
  border:1px solid rgba(224,164,88,.4); color:#E0A458;
  font:800 7px var(--pe-mono); letter-spacing:.08em; text-transform:uppercase; vertical-align:1px; }

.pe-surv-reveal-more { margin-top:10px; }
.pe-surv-reveal-more>summary { list-style:none; cursor:pointer; padding:9px 12px;
  border:1px dashed var(--pe-line-strong); border-radius:10px; color:var(--pe-txt-2);
  font-size:11px; font-weight:700; text-align:center; }
.pe-surv-reveal-more>summary::-webkit-details-marker { display:none; }
.pe-surv-reveal-more>summary:hover { color:var(--pe-txt); border-color:var(--pe-txt-3); }
.pe-surv-reveal-more[open]>summary { margin-bottom:10px; }

/* L'absence de choix : hors classement, sans barre, sans lime. */
.pe-surv-nopick { margin-top:12px; padding:9px 12px; border-radius:10px;
  background:var(--pe-panel); color:var(--pe-txt-3); font-size:11px; }
.pe-surv-nopick-mine { color:var(--pe-txt-2); box-shadow:inset 3px 0 0 var(--pe-line-strong); }

.pe-surv-leaderboard { padding-bottom:var(--pe-s4); }
.pe-surv-leaderboard-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.pe-surv-leaderboard-head h2 { margin:0; font-size:14px; }
.pe-surv-leaderboard-head>span { color:var(--pe-txt-3); font:750 8.5px var(--pe-mono); white-space:nowrap; }
.pe-surv-standing-tabs {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:10px; padding:3px;
    border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel);
}
.pe-surv-standing-tabs a {
    min-height:48px; display:grid; place-items:center; border-radius:9px; color:var(--pe-txt-3);
    font-size:10.5px; font-weight:850; text-decoration:none;
}
.pe-surv-standing-tabs .pe-surv-standing-tab-on {
    color:var(--pe-ink); background:var(--pe-lime); box-shadow:0 5px 15px rgba(0,0,0,.2);
}
/* IDENTITE, PAS CELEBRATION.
   Cette carte encadrait de lime et gonflait le chiffre — y compris a « 27e sur
   27 ». Elle felicitait d'etre dernier. Le filet lime a gauche dit « c'est toi »
   sans rien celebrer; le rempli lime reste au podium, ou il recompense
   vraiment quelque chose. */
.pe-surv-rank-hero {
    display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:15px;
    min-height:108px; padding:14px; border:1px solid var(--pe-line); border-radius:15px;
    background:var(--pe-panel); box-shadow:inset 3px 0 0 var(--pe-lime);
}
.pe-surv-rank-position { min-width:0; padding-right:13px; border-right:1px solid var(--pe-line); text-align:center; }
.pe-surv-rank-position strong,.pe-surv-rank-position span { display:block; }
.pe-surv-rank-position strong { color:var(--pe-txt); font:950 31px/1 var(--pe-mono); letter-spacing:-.08em; }
.pe-surv-rank-position span { margin-top:5px; color:var(--pe-txt-3); font:750 8px var(--pe-mono); }
.pe-surv-rank-hero h3 { margin:4px 0 0; font-size:16px; line-height:1.15; letter-spacing:-.025em; }
.pe-surv-rank-hero p { margin:6px 0 0; color:var(--pe-txt-3); font-size:9px; }
.pe-surv-standing-label { margin:18px 2px 7px; color:var(--pe-txt-3); font-size:8px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.pe-surv-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pe-surv-podium-player {
    min-width:0; min-height:91px; display:flex; flex-direction:column; justify-content:center;
    padding:10px 7px; border:1px solid var(--pe-line); border-radius:11px; background:var(--pe-panel); text-align:center;
}
.pe-surv-podium-player>span { color:var(--pe-lime); font:900 13px var(--pe-mono); }
.pe-surv-podium-player strong {
    margin-top:7px; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap;
}
.pe-surv-podium-player small { margin-top:4px; color:var(--pe-txt-3); font-size:7.5px; white-space:nowrap; }
.pe-surv-podium-player:first-child { border-color:rgba(200,247,81,.34); background:linear-gradient(160deg,var(--pe-lime-wash),var(--pe-panel)); }
.pe-surv-podium-me { box-shadow:inset 0 0 0 1px rgba(200,247,81,.34); }
.pe-surv-standing-name { min-width:0; }
.pe-surv-standing-name strong,.pe-surv-standing-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-surv-standing-name small { margin-top:3px; color:var(--pe-txt-3); font-size:7.5px; }
.pe-surv-standing-score { white-space:nowrap; }
.pe-surv-friends-empty {
    padding:28px 18px; border:1px dashed var(--pe-line-strong); border-radius:15px;
    background:var(--pe-panel); text-align:center;
}
.pe-surv-friends-mark { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 12px; border-radius:12px; color:var(--pe-lime); background:var(--pe-lime-wash); }
.pe-surv-friends-empty h3 { margin:0; font-size:15px; }
.pe-surv-friends-empty p { margin:7px auto 0; color:var(--pe-txt-3); font-size:10px; line-height:1.45; }
.pe-surv-friends-empty a { min-height:48px; display:inline-flex; align-items:center; margin-top:10px; color:var(--pe-lime); font-size:10px; font-weight:850; }
@media (max-width:340px) {
    .pe-surv-rank-hero { grid-template-columns:70px minmax(0,1fr); gap:11px; padding-inline:11px; }
    .pe-surv-rank-position { padding-right:10px; }
    .pe-surv-rank-position strong { font-size:27px; }
    .pe-surv-podium { gap:5px; }
    .pe-surv-podium-player { padding-inline:5px; }
}

.pe-md-surv-urgent { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:var(--pe-s4); border:1px solid rgba(200,247,81,.3); border-radius:14px; color:var(--pe-txt); text-decoration:none; background:linear-gradient(115deg,rgba(200,247,81,.12),var(--pe-panel) 58%); box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-md-surv-mark { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:var(--pe-ink); background:var(--pe-lime); font-size:15px; }
.pe-md-surv-copy { flex:1; min-width:0; }
.pe-md-surv-copy span,.pe-md-surv-copy strong,.pe-md-surv-copy small { display:block; }
.pe-md-surv-copy span { color:var(--pe-lime-soft); font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pe-md-surv-copy strong { margin-top:2px; font-size:12.5px; }
.pe-md-surv-copy small { margin-top:3px; color:var(--pe-txt-3); font-size:9px; }
.pe-md-surv-arrow { color:var(--pe-lime); font-size:20px; }
.pe-md-surv-summary { overflow:hidden; margin-bottom:var(--pe-s4); border:1px solid var(--pe-line); border-radius:14px; background:var(--pe-panel); }
.pe-md-surv-summary-urgent { border-color:rgba(200,247,81,.3); box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-md-surv-headline { min-height:68px; display:flex; align-items:center; gap:12px; padding:11px 13px; color:var(--pe-txt); text-decoration:none; background:linear-gradient(115deg,rgba(200,247,81,.1),transparent 64%); }
.pe-md-surv-pools { border-top:1px solid var(--pe-line); }
.pe-md-surv-pools>a { min-height:52px; display:flex; align-items:center; gap:10px; padding:7px 13px 7px 17px; border-bottom:1px solid var(--pe-line); color:var(--pe-txt); text-decoration:none; }
.pe-md-surv-pools>a:last-child { border-bottom:0; }
.pe-md-surv-pools>a>span { min-width:0; flex:1; }
.pe-md-surv-pools strong,.pe-md-surv-pools small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-md-surv-pools strong { font-size:10.5px; }
.pe-md-surv-pools small { margin-top:3px; color:var(--pe-txt-3); font-size:8.5px; }
.pe-md-surv-pools b { color:var(--pe-txt-3); font-size:17px; }
.pe-md-surv-pool-urgent small,.pe-md-surv-pool-urgent b { color:var(--pe-lime); }

/* Jeux — une affiche éditoriale, puis deux accès francs. */
.pe-games-hero { position:relative; overflow:hidden; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 20px 22px; margin:0 0 var(--pe-s4); border:1px solid var(--pe-line); border-radius:18px; background:radial-gradient(circle at 88% 10%,rgba(200,247,81,.17),transparent 31%),linear-gradient(145deg,var(--pe-elevated),var(--pe-panel)); }
/* Le filigrane etait cale a « right:-10px » : sur un hero large, le « E » se
   faisait couper net par le bord et ça se lisait comme un accident de rendu
   plutôt que comme un decor. Il rentre maintenant dans le cadre. */
.pe-games-hero::after { content:"PE"; position:absolute; right:14px; top:-18px; color:rgba(234,240,247,.035); font:950 112px/1 var(--pe-mono); letter-spacing:-.12em; pointer-events:none; }
.pe-games-hero h1 { max-width:12ch; margin:5px 0 8px; font-size:clamp(29px,9vw,48px); font-weight:900; line-height:.98; letter-spacing:-.055em; }
.pe-games-hero p { max-width:42ch; color:var(--pe-txt-2); font-size:11.5px; line-height:1.5; }
.pe-games-list { overflow:hidden; border:1px solid var(--pe-line); border-radius:15px; background:var(--pe-panel); }
.pe-game-module { position:relative; min-height:105px; display:grid; grid-template-columns:25px 44px minmax(0,1fr) 24px; align-items:center; gap:11px; padding:14px 13px; border-bottom:1px solid var(--pe-line); color:var(--pe-txt); text-decoration:none; }
.pe-game-module:last-child { border-bottom:0; }
.pe-game-module-index { align-self:start; padding-top:3px; color:var(--pe-txt-3); font:800 8px var(--pe-mono); }
.pe-game-module-mark { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--pe-line-strong); border-radius:12px; color:var(--pe-lime-soft); background:var(--pe-panel-2); font-size:17px; }
.pe-game-module-copy { min-width:0; }
.pe-game-module-copy small,.pe-game-module-copy strong,.pe-game-module-copy em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-game-module-copy small { color:var(--pe-txt-3); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.pe-game-module-copy strong { margin-top:4px; font-size:17px; line-height:1.1; letter-spacing:-.025em; }
.pe-game-module-copy em { margin-top:7px; color:var(--pe-txt-2); font-size:9.5px; font-style:normal; }
.pe-game-module-arrow { color:var(--pe-txt-3); font-size:20px; }
.pe-game-module-urgent { background:linear-gradient(105deg,rgba(200,247,81,.105),transparent 62%); box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-game-module-urgent .pe-game-module-mark { border-color:var(--pe-lime); color:var(--pe-ink); background:var(--pe-lime); }
.pe-game-module-urgent .pe-game-module-copy em,.pe-game-module-urgent .pe-game-module-arrow { color:var(--pe-lime); }
.pe-games-pulse { display:flex; align-items:center; gap:10px; padding:15px 3px; color:var(--pe-txt-2); }
.pe-games-pulse>span { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--pe-lime-soft); box-shadow:0 0 0 5px rgba(168,207,68,.08); }
.pe-games-pulse small,.pe-games-pulse strong { display:block; }
.pe-games-pulse small { color:var(--pe-txt-3); font-size:7.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.pe-games-pulse strong { margin-top:2px; font-size:10.5px; }
.pe-games-wide { width:100%; }

/* Les Unités — constructeur mobile, marché latéral sur grand écran. */
.pe-units-head { min-height:112px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 0 16px; }
.pe-units-head h1 { margin:3px 0 4px; font-size:30px; font-weight:900; letter-spacing:-.055em; }
.pe-units-head p { color:var(--pe-txt-2); font-size:10.5px; }
.pe-units-rank { min-width:58px; padding:9px 10px; border-left:2px solid var(--pe-lime-soft); background:var(--pe-panel); }
.pe-units-rank span,.pe-units-rank strong { display:block; }
.pe-units-rank span { color:var(--pe-txt-3); font-size:7px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.pe-units-rank strong { margin-top:4px; font:900 18px var(--pe-mono); }
.pe-units-pool { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:8px 10px; margin-bottom:12px; border:1px solid var(--pe-line); border-radius:10px; background:var(--pe-panel); }
.pe-units-pool>span { color:var(--pe-txt-3); font-size:8px; font-weight:800; text-transform:uppercase; }
.pe-units-pool select { min-height:40px; min-width:0; border:1px solid var(--pe-line-strong); border-radius:8px; color:var(--pe-txt); background:var(--pe-panel-2); padding:0 9px; }
.pe-units-wide { width:100%; box-sizing:border-box; }
.pe-units-onboard { padding:32px 20px; border:1px solid var(--pe-line); border-radius:18px; background:radial-gradient(circle at 75% 10%,rgba(200,247,81,.13),transparent 35%),linear-gradient(145deg,var(--pe-elevated),var(--pe-panel)); }
.pe-units-emblem { width:62px; height:62px; display:grid; place-items:center; margin-bottom:20px; border:1px solid rgba(200,247,81,.4); border-radius:18px; color:var(--pe-lime); background:var(--pe-lime-wash); transform:rotate(-5deg); }
.pe-units-emblem span { font:950 28px var(--pe-mono); transform:rotate(5deg); }
.pe-units-onboard h2 { max-width:12ch; margin:6px 0 9px; font-size:28px; font-weight:900; line-height:1.02; letter-spacing:-.045em; }
.pe-units-onboard>p { max-width:40ch; color:var(--pe-txt-2); font-size:11.5px; line-height:1.55; }
.pe-units-rule { display:flex; align-items:center; gap:12px; margin:22px 0; }
.pe-units-rule strong { color:var(--pe-lime); font:950 32px var(--pe-mono); }
.pe-units-rule span { max-width:22ch; color:var(--pe-txt-2); font-size:10px; line-height:1.3; }
.pe-units-waiting { padding:42px 22px; border:1px dashed var(--pe-line-strong); border-radius:18px; background:var(--pe-panel); text-align:center; }
.pe-units-waiting>span { width:48px; height:48px; display:grid; place-items:center; margin:0 auto 16px; border-radius:50%; color:var(--pe-lime-soft); background:var(--pe-lime-wash); font-size:22px; }
.pe-units-waiting h2 { margin:5px 0 8px; font-size:21px; font-weight:850; }
.pe-units-waiting p { max-width:38ch; margin:auto; color:var(--pe-txt-2); font-size:11px; line-height:1.5; }
/* Collee en haut, elle passe DEVANT les fiches de poste. Avec des coins
   arrondis et une marge laterale, on voyait « DÉFENSE / 7 » depasser au-dessus
   et « BAL Stallions » sous le bord : ca se lit comme un defaut d'affichage.
   Une barre qui recouvre doit occuper toute la largeur et n'avoir qu'un bord,
   celui par lequel le contenu disparait. Meme traitement que « pe-units-save »
   en bas et « pe-team-choice-bar » dans Mes equipes. */
.pe-units-budget { position:sticky; z-index:4; top:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px var(--pe-s3); margin:0 calc(-1 * var(--pe-s3)) 12px; border:0; border-bottom:1px solid rgba(200,247,81,.18); background:var(--pe-bg); }
.pe-units-budget div:first-child span,.pe-units-budget div:first-child strong { display:block; }
.pe-units-budget div:first-child span { color:var(--pe-txt-3); font-size:7px; text-transform:uppercase; }
.pe-units-budget div:first-child strong { font:900 17px var(--pe-mono); }
.pe-units-budget div:first-child small { color:var(--pe-txt-3); font-size:8px; }
.pe-units-budget-track { height:4px; overflow:hidden; border-radius:4px; background:var(--pe-line); }
.pe-units-budget-track span { display:block; height:100%; background:var(--pe-lime-soft); }
.pe-units-budget em { color:var(--pe-txt-3); font-size:8px; font-style:normal; white-space:nowrap; }
.pe-units-builder { display:grid; gap:14px; }
.pe-units-slots { display:grid; gap:7px; }
.pe-units-slot { width:100%; min-height:62px; display:grid; grid-template-columns:40px minmax(0,1fr) 30px; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--pe-line); border-radius:11px; color:var(--pe-txt); background:var(--pe-panel); font-family:inherit; text-align:left; }
.pe-units-slot-code { width:40px; height:40px; display:grid; place-items:center; border-radius:9px; color:var(--pe-txt-3); background:var(--pe-panel-2); font:900 9px var(--pe-mono); }
.pe-units-slot-copy { min-width:0; }
.pe-units-slot-copy small,.pe-units-slot-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-slot-copy small { color:var(--pe-txt-3); font-size:7.5px; text-transform:uppercase; }
.pe-units-slot-copy strong { margin-top:3px; font-size:11.5px; }
.pe-units-slot-price { color:var(--pe-txt-3); font:900 15px var(--pe-mono); text-align:center; }
.pe-units-slot-on { border-color:rgba(200,247,81,.55); background:var(--pe-lime-wash); }
.pe-units-slot-on .pe-units-slot-code { color:var(--pe-ink); background:var(--pe-lime); }
.pe-units-slot-filled:not(.pe-units-slot-on) { box-shadow:inset 3px 0 0 var(--pe-lime-soft); }
.pe-units-market { overflow:hidden; border:1px solid var(--pe-line); border-radius:13px; background:var(--pe-panel); }
.pe-units-market>header { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--pe-line); background:linear-gradient(110deg,var(--pe-elevated),var(--pe-panel)); }
.pe-units-market header small { color:var(--pe-lime-soft); font-size:7px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.pe-units-market header h2 { margin-top:2px; font-size:16px; font-weight:850; }
.pe-units-market>header>span { color:var(--pe-txt-3); font-size:8px; }
.pe-units-offer { width:100%; min-height:62px; display:grid; grid-template-columns:25px minmax(0,1fr) 28px 35px; align-items:center; gap:7px; padding:8px 10px; border:0; border-bottom:1px solid var(--pe-line); color:var(--pe-txt); background:transparent; font-family:inherit; text-align:left; }
.pe-units-offer:last-child { border-bottom:0; }
.pe-units-offer:disabled { opacity:.34; }
.pe-units-offer-on { background:var(--pe-lime-wash); box-shadow:inset 3px 0 0 var(--pe-lime); }
/* Le rang et son denominateur : « 3e » au-dessus, « sur 9 » en dessous. Empiler
   garde la colonne etroite sur un ecran de 1080 sans sacrifier le denominateur,
   qui est precisement ce qui rend deux rangs comparables. */
.pe-units-offer-rank { color:var(--pe-txt-3); font:800 10px var(--pe-mono); text-align:center;
  min-width:34px; line-height:1.2; }
/* 6,5 px etait sous le seuil de confort. Le denominateur est ce qui rend deux
   rangs comparables : il doit se lire, pas se deviner. */
.pe-units-offer-rank small { display:block; font-size:8px; font-weight:600; letter-spacing:.02em; color:var(--pe-txt-3); }
.pe-units-offer-copy { min-width:0; }
.pe-units-offer-copy strong,.pe-units-offer-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-offer-copy strong { font-size:11px; }
/* Provenance de l'unite : deux equipes homonymes doivent se distinguer d'un
   coup d'oeil, sans voler la vedette au nom. */
.pe-units-origin { margin-left:6px; padding:1px 5px; border:1px solid var(--pe-line); border-radius:99px;
  color:var(--pe-txt-3); font:800 7.5px/1.5 var(--pe-mono); font-style:normal; text-transform:uppercase;
  letter-spacing:.06em; vertical-align:1px; }
.pe-units-offer-copy small { margin-top:3px; color:var(--pe-txt-3); font-size:7.5px; }
.pe-units-trend { font:850 8.5px var(--pe-mono); text-align:right; }
.pe-units-trend-up { color:var(--pe-lime-soft); }
.pe-units-trend-down { color:#ff9196; }
.pe-units-offer-price { font:950 16px var(--pe-mono); text-align:right; }
.pe-units-offer-price small { display:block; color:var(--pe-txt-3); font-size:6.5px; text-transform:uppercase; }
/* Fond OPAQUE, pas 94 % + flou : le WebView Android n'applique pas
   backdrop-filter ici, et les lignes du marche traversaient la barre. Une barre
   d'action doit cacher ce qu'elle recouvre, sinon le « Confirmer » se lit
   par-dessus un prix. */
.pe-units-save { position:sticky; z-index:5; bottom:0; display:flex; align-items:center; gap:12px; margin:14px calc(-1 * var(--pe-s3)) 0; padding:14px var(--pe-s3) max(14px,env(safe-area-inset-bottom)); border-top:1px solid rgba(200,247,81,.22); background:var(--pe-bg); }
.pe-units-save>div { min-width:0; flex:1; }
.pe-units-save span,.pe-units-save strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-save span { color:var(--pe-txt-3); font-size:7.5px; text-transform:uppercase; }
.pe-units-save strong { margin-top:3px; font-size:10px; }
.pe-units-confirmed { padding-bottom:18px; }
.pe-units-confirmed-top { display:flex; align-items:center; gap:12px; padding:18px; border:1px solid rgba(200,247,81,.25); border-radius:14px 14px 0 0; background:radial-gradient(circle at 90% 0,rgba(200,247,81,.13),transparent 50%),var(--pe-panel); }
.pe-units-confirmed-top>span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--pe-ink); background:var(--pe-lime); font-weight:900; }
.pe-units-confirmed-top small,.pe-units-confirmed-top strong { display:block; }
.pe-units-confirmed-top small { color:var(--pe-lime-soft); font-size:7.5px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.pe-units-confirmed-top strong { margin-top:4px; font-size:12px; }
.pe-units-lineup-summary { margin-bottom:12px; border:1px solid var(--pe-line); border-top:0; border-radius:0 0 14px 14px; background:var(--pe-panel); }
.pe-units-lineup-summary article { min-height:58px; display:grid; grid-template-columns:35px minmax(0,1fr) 30px; align-items:center; gap:9px; padding:7px 11px; border-bottom:1px solid var(--pe-line); }
.pe-units-lineup-summary article:last-child { border-bottom:0; }
.pe-units-lineup-summary article>span { color:var(--pe-lime-soft); font:850 8px var(--pe-mono); }
.pe-units-lineup-summary small,.pe-units-lineup-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-lineup-summary small { color:var(--pe-txt-3); font-size:7px; text-transform:uppercase; }
.pe-units-lineup-summary strong { margin-top:3px; font-size:11px; }
.pe-units-lineup-summary b { font:900 14px var(--pe-mono); text-align:right; }
.pe-units-locked { padding:12px; border-left:2px solid var(--pe-gold); color:var(--pe-txt-2); background:rgba(255,197,61,.06); font-size:10px; line-height:1.45; }
.pe-units-recap>header { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px; border:1px solid rgba(200,247,81,.26); border-radius:16px 16px 0 0; background:radial-gradient(circle at 88% 0,rgba(200,247,81,.16),transparent 46%),linear-gradient(145deg,var(--pe-elevated),var(--pe-panel)); }
.pe-units-recap>header small { color:var(--pe-lime-soft); font-size:8px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.pe-units-recap>header h2 { margin-top:4px; font:950 30px var(--pe-mono); letter-spacing:-.055em; }
.pe-units-recap-rank { min-width:58px; padding-left:13px; border-left:1px solid var(--pe-line-strong); text-align:right; }
.pe-units-recap-rank span,.pe-units-recap-rank strong { display:block; }
.pe-units-recap-rank span { color:var(--pe-txt-3); font-size:7px; text-transform:uppercase; }
.pe-units-recap-rank strong { margin-top:3px; font:900 20px var(--pe-mono); }
.pe-units-score-summary { border-radius:0; margin-bottom:0; }
.pe-units-score-summary article { min-height:68px; }
.pe-units-score-summary em { display:block; margin-top:3px; color:var(--pe-txt-3); font-size:7.5px; font-style:normal; }
.pe-units-score-summary article>b { color:var(--pe-lime-soft); }
.pe-units-recap-foot { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--pe-line); border-top:0; border-radius:0 0 14px 14px; background:var(--pe-panel-2); }
.pe-units-recap-foot span { padding:11px; color:var(--pe-txt-3); font-size:8px; text-align:center; }
.pe-units-recap-foot span+span { border-left:1px solid var(--pe-line); }
.pe-units-recap-foot strong { display:block; margin-top:3px; color:var(--pe-txt); font:850 11px var(--pe-mono); }
.pe-units-revealed .pe-units-confirmed-top>span { color:var(--pe-lime); background:var(--pe-lime-wash); }
.pe-units-views { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin-bottom:14px; border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel); }
.pe-units-views a { min-height:48px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:8px; color:var(--pe-txt-3); font-size:10px; font-weight:850; text-decoration:none; }
.pe-units-views .pe-units-view-on { color:var(--pe-txt); background:var(--pe-panel-2); }
.pe-units-view-dot { width:6px; height:6px; border-radius:50%; background:var(--pe-lime-soft); }
.pe-units-community-hero { min-height:142px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:22px 18px; margin-bottom:24px; border-bottom:1px solid var(--pe-line-strong); background:radial-gradient(circle at 91% 10%,rgba(200,247,81,.13),transparent 38%); }
.pe-units-community-hero>div:first-child { min-width:0; }
.pe-units-community-hero small { color:var(--pe-lime-soft); font-size:7.5px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.pe-units-community-hero h2 { max-width:15ch; margin-top:5px; font-size:clamp(25px,8vw,38px); font-weight:900; line-height:1.02; letter-spacing:-.05em; }
.pe-units-community-hero>div:last-child { flex:0 0 auto; padding-left:14px; border-left:1px solid var(--pe-line-strong); text-align:right; }
.pe-units-community-hero>div:last-child strong,.pe-units-community-hero>div:last-child span { display:block; }
.pe-units-community-hero>div:last-child strong { font:950 25px var(--pe-mono); }
.pe-units-community-hero>div:last-child span { color:var(--pe-txt-3); font-size:7px; text-transform:uppercase; }
.pe-units-community-section { margin:0 0 26px; }
.pe-units-community-section>header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; padding:0 2px; }
.pe-units-community-section>header small { color:var(--pe-lime-soft); font-size:7px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.pe-units-community-section>header h2 { margin-top:2px; font-size:16px; font-weight:850; }
.pe-units-community-section>header>span { color:var(--pe-txt-3); font-size:8px; text-align:right; }
.pe-units-popularity-grid { display:grid; gap:8px; }
.pe-units-popularity { overflow:hidden; border-top:1px solid var(--pe-line-strong); background:var(--pe-panel); }
.pe-units-popularity-title { min-height:42px; display:flex; align-items:center; gap:9px; padding:7px 10px; background:var(--pe-panel-2); }
.pe-units-popularity-title span { color:var(--pe-lime-soft); font:900 8px var(--pe-mono); }
.pe-units-popularity-title strong { font-size:10px; }
.pe-units-popularity-row { position:relative; min-height:54px; display:grid; grid-template-columns:minmax(0,1fr) 36px; align-items:center; gap:8px; padding:7px 10px 10px; border-bottom:1px solid var(--pe-line); }
.pe-units-popularity-row:last-child { border-bottom:0; }
.pe-units-popularity-row>div { min-width:0; }
.pe-units-popularity-row strong,.pe-units-popularity-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-popularity-row strong { font-size:10.5px; }
.pe-units-popularity-row small { margin-top:2px; color:var(--pe-txt-3); font-size:7px; }
.pe-units-popularity-row>b { font:900 11px var(--pe-mono); text-align:right; }
.pe-units-popularity-row>span { position:absolute; right:10px; bottom:6px; left:10px; height:2px; overflow:hidden; background:var(--pe-line); }
.pe-units-popularity-row>span i { display:block; height:100%; background:var(--pe-line-strong); }
.pe-units-popularity-mine { background:var(--pe-lime-wash); }
.pe-units-popularity-mine>b { color:var(--pe-lime-soft); }
.pe-units-popularity-mine>span i { background:var(--pe-lime-soft); }
.pe-units-perfect { position:relative; overflow:hidden; padding:18px; margin-bottom:26px; border:1px solid rgba(200,247,81,.27); border-radius:15px; background:linear-gradient(145deg,var(--pe-elevated),var(--pe-panel)); }
.pe-units-perfect::after { content:"28"; position:absolute; top:-22px; right:-8px; color:rgba(234,240,247,.035); font:950 92px var(--pe-mono); pointer-events:none; }
.pe-units-perfect>header { position:relative; z-index:1; display:flex; align-items:start; justify-content:space-between; gap:12px; }
.pe-units-perfect>header small { color:var(--pe-lime-soft); font-size:7px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.pe-units-perfect>header h2 { margin-top:3px; font-size:19px; font-weight:900; }
.pe-units-perfect>header>strong { color:var(--pe-lime); font:950 27px var(--pe-mono); }
.pe-units-perfect>header>strong small { display:block; color:var(--pe-txt-3); font-size:6px; text-align:right; }
.pe-units-perfect>p { max-width:39ch; margin:7px 0 14px; color:var(--pe-txt-2); font-size:9px; line-height:1.45; }
.pe-units-perfect>div { border-top:1px solid var(--pe-line); }
.pe-units-perfect>div>span { min-height:42px; display:grid; grid-template-columns:31px minmax(0,1fr) 28px; align-items:center; gap:8px; border-bottom:1px solid var(--pe-line); }
.pe-units-perfect>div b { color:var(--pe-lime-soft); font:850 8px var(--pe-mono); }
.pe-units-perfect>div strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-perfect>div em { color:var(--pe-lime-soft); font:850 9px var(--pe-mono); font-style:normal; text-align:right; }
.pe-units-perfect>footer { padding-top:9px; color:var(--pe-txt-3); font-size:7.5px; text-align:right; }
.pe-units-revealed-lineups { border-top:1px solid var(--pe-line-strong); background:var(--pe-panel); }
.pe-units-revealed-lineups article { min-height:58px; display:flex; align-items:center; gap:10px; padding:8px 11px; border-bottom:1px solid var(--pe-line); }
.pe-units-revealed-lineups article>div { min-width:0; flex:1; }
.pe-units-revealed-lineups strong,.pe-units-revealed-lineups small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-revealed-lineups strong { font-size:10.5px; }
.pe-units-revealed-lineups small { margin-top:4px; color:var(--pe-txt-3); font-size:7.5px; }
.pe-units-revealed-lineups article>b { flex:0 0 auto; color:var(--pe-txt-2); font:850 9px var(--pe-mono); }
.pe-units-lineup-mine { background:var(--pe-lime-wash); box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-units-lineup-mine article>b,.pe-units-lineup-mine>b { color:var(--pe-lime-soft); }
.pe-units-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:9px; }
.pe-units-podium article { min-width:0; min-height:92px; display:flex; flex-direction:column; justify-content:center; padding:9px 6px; border-top:2px solid var(--pe-line-strong); background:var(--pe-panel); text-align:center; }
.pe-units-podium article:first-child { border-color:var(--pe-lime-soft); background:linear-gradient(150deg,var(--pe-lime-wash),var(--pe-panel)); }
.pe-units-podium span { color:var(--pe-lime-soft); font:900 11px var(--pe-mono); }
.pe-units-podium strong { margin-top:7px; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-podium b { margin-top:4px; color:var(--pe-txt-3); font:750 7.5px var(--pe-mono); }
.pe-units-standing-list { border-top:1px solid var(--pe-line-strong); background:var(--pe-panel); }
.pe-units-standing-list>div { min-height:52px; display:grid; grid-template-columns:25px minmax(0,1fr) auto 30px; align-items:center; gap:7px; padding:7px 10px; border-bottom:1px solid var(--pe-line); }
.pe-units-standing-list>div>span { color:var(--pe-txt-3); font:850 9px var(--pe-mono); }
.pe-units-standing-list>div>strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-standing-list>div>small { color:var(--pe-txt-3); font-size:7px; white-space:nowrap; }
.pe-units-standing-list>div>b { font:900 10px var(--pe-mono); text-align:right; }
.pe-units-standing-mine { background:var(--pe-lime-wash)!important; box-shadow:inset 3px 0 0 var(--pe-lime); }
.pe-units-community-link { display:grid; margin-top:12px; }

@media (min-width:720px) {
    .pe-games-hero { min-height:250px; padding:42px 38px 34px; }
    .pe-games-hero h1 { font-size:52px; }
    .pe-games-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; gap:12px; background:transparent; }
    .pe-game-module { min-height:150px; grid-template-columns:30px 52px minmax(0,1fr) 28px; border:1px solid var(--pe-line); border-radius:15px; background-color:var(--pe-panel); }
    .pe-game-module-urgent { background:linear-gradient(115deg,rgba(200,247,81,.105),var(--pe-panel) 64%); }
    .pe-units-head h1,.pe-surv-head h1 { font-size:42px; }
    .pe-units-builder { grid-template-columns:minmax(280px,.72fr) minmax(390px,1.28fr); align-items:start; }
    /* Au web les colonnes sont cote a cote : la barre ne recouvre plus rien et
       reprend sa forme de carte. */
    .pe-units-budget { top:8px; margin-inline:0; border:1px solid rgba(200,247,81,.18); border-radius:12px; }
    .pe-units-save { margin-inline:0; border:1px solid rgba(200,247,81,.22); border-radius:12px; }
    .pe-units-onboard,.pe-units-waiting,.pe-units-confirmed { max-width:720px; margin-inline:auto; }
    .pe-units-views { width:440px; }
    .pe-units-community-hero { min-height:190px; padding:32px; }
    .pe-units-popularity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pe-units-community-section,.pe-units-perfect { max-width:860px; }
}