/* ═══════════════════════════════════════════════════════════════════════
   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-weekly-value { margin-top:5px; font:900 17px var(--pe-mono); letter-spacing:-.025em; }
.pe-weekly-pending { margin-top:6px; color:var(--pe-txt); font-size:15px; font-weight:850; }
.pe-weekly-caption { max-width:31ch; margin:5px 0 0 auto; color:var(--pe-txt-3); font-size:9.5px; line-height:1.45; }
.pe-slot-gains { min-width:128px; }
.pe-slot-gains .pe-points { font-size:12px; }
.pe-slot-gains .pe-record { margin-top:3px; font-size:9px; }

.pe-weekly-impact {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px;
    margin:0 0 var(--pe-s4); padding:14px 2px;
    border-block:1px solid var(--pe-line-strong);
}

/* MONTRE TES COULEURS
   Les couleurs de club vivent dans leurs propres variables. Les presets
   complets (Barons clair/obscur) peuvent aussi remplacer les jetons Estrade,
   mais leurs contrastes sont verifies role par role. */
.pe-themes { width:min(1160px,100%); margin:0 auto; padding-bottom:48px; }
.pe-themes-hero { position:relative; overflow:hidden; min-height:250px; padding:clamp(28px,5vw,58px); border:1px solid var(--pe-line); border-radius:18px; background:linear-gradient(125deg,#17201b 0%,#151b25 58%,#10151d 100%); color:#eaf0f7; }
.pe-themes-hero::after { content:""; position:absolute; right:-7%; top:-45%; width:360px; aspect-ratio:1; border:56px solid rgba(200,247,81,.08); border-radius:50%; }
.pe-themes-kicker,.pe-themes-section-head span { color:var(--pe-lime); font-size:11px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.pe-themes-hero h1 { position:relative; z-index:1; max-width:720px; margin:10px 0 14px; font-size:clamp(38px,6vw,70px); line-height:.92; letter-spacing:-.055em; }
.pe-themes-hero p { position:relative; z-index:1; max-width:650px; margin:0; color:#a7b4c4; font-size:15px; line-height:1.55; }
.pe-themes-impact { position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin-top:24px; padding:10px 14px; border-left:3px solid var(--pe-lime); background:rgba(200,247,81,.06); }
.pe-themes-impact strong { color:var(--pe-lime); font:900 22px/1 monospace; }
.pe-themes-impact span { color:#a7b4c4; font-size:12px; }
.pe-theme-owned,.pe-theme-catalog { margin-top:38px; }
.pe-themes-section-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:15px; }
.pe-themes-section-head h2 { margin:5px 0 0; font-size:clamp(24px,4vw,34px); letter-spacing:-.035em; }
.pe-themes-section-head b { color:var(--pe-txt-3); font:750 11px monospace; text-transform:uppercase; }
.pe-theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.pe-theme-option { --theme-primary:#46556a; --theme-ink:#fff; min-height:78px; display:grid; grid-template-columns:52px minmax(0,1fr) 18px; align-items:center; gap:12px; padding:11px; border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel); color:var(--pe-txt); text-align:left; }
.pe-theme-option:hover { border-color:var(--theme-primary); }
.pe-theme-option.is-active { border-color:var(--theme-primary); background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 15%,var(--pe-panel)),var(--pe-panel)); }
.pe-theme-option > span:nth-child(2) strong { display:block; font-size:13px; }
.pe-theme-option > span:nth-child(2) small { display:block; margin-top:3px; color:var(--pe-txt-3); font-size:10px; }
.pe-theme-option > i { width:16px; height:16px; border:1px solid var(--pe-line-strong); border-radius:50%; }
.pe-theme-option.is-active > i { border:5px solid var(--theme-primary); background:var(--theme-ink); }
.pe-theme-option-light { --theme-primary:#19365e !important; --theme-ink:#fff8f1 !important; border-color:#cad3de; background:#fffcf6; color:#0d284d; }
.pe-theme-option-light > span:nth-child(2) small { color:#566c87; }
.pe-theme-option-light.is-active { background:linear-gradient(135deg,#e7edf3,#fffcf6); }
.pe-theme-option-dark { --theme-primary:#0c2546 !important; --theme-ink:#f3f0ea !important; border-color:#294362; background:#10213a; color:#f3f0ea; }
.pe-theme-option-dark > span:nth-child(2) small { color:#8ca0ba; }
.pe-theme-option-dark.is-active { background:linear-gradient(135deg,#172b49,#10213a); }
.pe-theme-swatch,.pe-theme-mark { width:52px; height:52px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,var(--theme-primary),color-mix(in srgb,var(--theme-primary) 55%,#05070a)); color:var(--theme-ink); font-size:10px; font-weight:900; letter-spacing:.04em; }
.pe-theme-default { background:linear-gradient(145deg,var(--pe-panel-2),#10151c); color:var(--pe-lime); }
.pe-theme-mark img { width:78%; height:78%; object-fit:contain; }
.pe-theme-mark.is-large { width:66px; height:66px; border-radius:14px; }
.pe-theme-sync { margin:12px 0 0; padding:11px 13px; border-left:2px solid var(--pe-lime); background:var(--pe-lime-wash); color:var(--pe-txt-3); font-size:11px; }
.pe-theme-sync strong { color:var(--pe-txt-2); }
.pe-theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pe-theme-card { --theme-primary:#46556a; --theme-ink:#fff; min-height:285px; display:flex; flex-direction:column; padding:18px; border:1px solid var(--pe-line); border-radius:15px; background:linear-gradient(155deg,color-mix(in srgb,var(--theme-primary) 11%,var(--pe-panel)),var(--pe-panel) 42%); }
.pe-theme-card-top { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.pe-theme-card h3 { margin:23px 0 6px; font-size:20px; letter-spacing:-.025em; }
.pe-theme-card p { margin:0 0 18px; color:var(--pe-txt-3); font-size:12px; line-height:1.5; }
.pe-theme-status { padding:5px 8px; border:1px solid var(--pe-line); border-radius:999px; color:var(--pe-txt-3); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pe-theme-status-available { border-color:rgba(200,247,81,.35); color:var(--pe-lime); }
.pe-theme-status-comingsoon { color:#ffc95c; }
.pe-theme-action { min-height:44px; display:grid; place-items:center; width:100%; margin-top:auto; padding:9px 12px; border:1px solid var(--pe-line-strong); border-radius:9px; background:transparent; color:var(--pe-txt); font-size:11px; font-weight:800; text-align:center; text-decoration:none; }
.pe-theme-action:hover:not(:disabled) { border-color:var(--theme-primary); background:color-mix(in srgb,var(--theme-primary) 12%,transparent); }
.pe-theme-action:disabled { cursor:default; opacity:.62; }
.pe-theme-action-buy { border:0; background:var(--pe-lime); color:var(--pe-ink); }
.pe-theme-action-owned { border-color:color-mix(in srgb,var(--theme-primary) 65%,var(--pe-line)); }
.pe-theme-purchase-error { margin:9px 0 0; padding:9px 10px; border-left:2px solid var(--pe-red); background:color-mix(in srgb,var(--pe-red) 8%,transparent); color:var(--pe-txt-2); font-size:11px; line-height:1.45; }
.pe-theme-preview-link { display:inline-flex; align-items:center; min-height:48px; margin-bottom:12px; color:var(--pe-txt); font-size:12px; font-weight:700; text-underline-offset:4px; }
.pe-theme-preview-link:focus-visible { outline:2px solid var(--pe-lime); outline-offset:3px; }
.pe-club-themed { --pe-club-primary:#46556a; --pe-club-ink:#fff; }

/* BARONS DE SAINT-BRUNO
   Les deux variantes reprennent les roles approuves dans la maquette : marine
   pour la structure, rouge pour l'action, ivoire ou nuit pour la toile. Les
   jetons sont portes par la coquille : ils couvrent donc les mêmes composants
   Blazor sur le web et dans le WebView MAUI. */
.pe-club-theme-barons.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#07111f; --pe-panel:#10213a; --pe-panel-2:#172b49;
  --pe-line:#294362; --pe-line-strong:#55789b; --pe-elevated:#172b49;
  --pe-txt:#f3f0ea; --pe-txt-2:#bdcadd; --pe-txt-3:#8ca0ba;
  --pe-lime:#b73733; --pe-lime-soft:#f08c86; --pe-lime-wash:rgba(183,55,51,.13);
  --pe-ink:#fff9f3; --pe-red:#f08c86; --pe-gold:#ffc95c;
  --pe-club-primary:#0c2546; --pe-club-ink:#f3f0ea;
}
.pe-club-theme-barons.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f3f0ea; --pe-panel:#fffcf6; --pe-panel-2:#e7edf3;
  --pe-line:#cad3de; --pe-line-strong:#788ea7; --pe-elevated:#e7edf3;
  --pe-txt:#0d284d; --pe-txt-2:#405977; --pe-txt-3:#566c87;
  --pe-lime:#aa3431; --pe-lime-soft:#8f2927; --pe-lime-wash:rgba(170,52,49,.09);
  --pe-ink:#fff8f1; --pe-red:#aa3431; --pe-gold:#8a5c00;
  --pe-club-primary:#19365e; --pe-club-ink:#f5f1e9;
}
.pe-club-theme-barons { background:var(--pe-bg); color:var(--pe-txt); }
.pe-club-theme-barons .pe-mobile-bar,
.pe-club-theme-barons .pe-tabbar { background:var(--pe-club-primary); border-color:color-mix(in srgb,var(--pe-club-ink) 24%,transparent); }
.pe-club-theme-barons .pe-mobile-title { color:var(--pe-club-ink); }
.pe-club-theme-barons .pe-mobile-sub,
.pe-club-theme-barons .pe-mobile-back { color:color-mix(in srgb,var(--pe-club-ink) 78%,transparent); }

/* PIRATES DU RICHELIEU
   Charbon pour la structure, jaune signal pour l'action et bourgogne pour la
   signature du club. Les angles coupes rappellent un fanion sans transformer
   l'interface en decor de costume. */
.pe-club-theme-pirates.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#10100f; --pe-panel:#1c1b19; --pe-panel-2:#28251f;
  --pe-line:#403b32; --pe-line-strong:#756b59; --pe-elevated:#28251f;
  --pe-txt:#f7f2e7; --pe-txt-2:#d0c7b7; --pe-txt-3:#a09686;
  --pe-lime:#ffcd02; --pe-lime-soft:#ffdc4c; --pe-lime-wash:rgba(255,205,2,.12);
  --pe-ink:#211f1b; --pe-red:#e86590; --pe-gold:#ffcd02;
  --pe-club-primary:#1b1b1b; --pe-club-ink:#ffcd02;
}
.pe-club-theme-pirates.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f4f0e7; --pe-panel:#fffaf0; --pe-panel-2:#eee6d6;
  --pe-line:#d3c6b2; --pe-line-strong:#7d6e57; --pe-elevated:#eee6d6;
  --pe-txt:#25211d; --pe-txt-2:#584f45; --pe-txt-3:#6f6254;
  --pe-lime:#765900; --pe-lime-soft:#765900; --pe-lime-wash:rgba(225,173,0,.12);
  --pe-ink:#fffaf0; --pe-red:#831435; --pe-gold:#765900;
  --pe-club-primary:#24221e; --pe-club-ink:#ffcd02;
}
.pe-club-theme-pirates { background:var(--pe-bg); color:var(--pe-txt); }
.pe-club-theme-pirates .pe-mobile-bar,
.pe-club-theme-pirates .pe-tabbar {
  background:var(--pe-club-primary);
  border-color:color-mix(in srgb,var(--pe-club-ink) 32%,transparent);
}
.pe-club-theme-pirates .pe-mobile-title,
.pe-club-theme-pirates .pe-tab-on { color:var(--pe-club-ink); }
.pe-club-theme-pirates .pe-mobile-sub,
.pe-club-theme-pirates .pe-mobile-back { color:color-mix(in srgb,var(--pe-club-ink) 80%,#f4f0e7); }
.pe-club-theme-pirates .pe-btn,
.pe-club-theme-pirates .pe-theme-action-buy { border-radius:2px 10px 2px 10px; }
.pe-theme-option-pirates.pe-theme-option-light {
  --theme-primary:#831435 !important; --theme-ink:#ffcd02 !important;
  border-color:#d3c6b2; background:#fffaf0; color:#25211d;
}
.pe-theme-option-pirates.pe-theme-option-light > span:nth-child(2) small { color:#6f6254; }
.pe-theme-option-pirates.pe-theme-option-light.is-active { background:linear-gradient(135deg,#eee6d6,#fffaf0); }
.pe-theme-option-pirates.pe-theme-option-dark {
  --theme-primary:#831435 !important; --theme-ink:#ffcd02 !important;
  border-color:#403b32; background:#1c1b19; color:#f7f2e7;
}
.pe-theme-option-pirates.pe-theme-option-dark > span:nth-child(2) small { color:#a09686; }
.pe-theme-option-pirates.pe-theme-option-dark.is-active { background:linear-gradient(135deg,#28251f,#1c1b19); }

/* GRIZZLIS DE BOUCHERVILLE
   Le visage bicolore du logo devient un système neige/nuit. Le bleu profond
   porte la structure; le bleu glace marque l'action en obscur et le bleu moyen
   prend le relais en clair pour conserver un contraste robuste. */
.pe-club-theme-grizzlis.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#071426; --pe-panel:#0c213a; --pe-panel-2:#123052;
  --pe-line:#244765; --pe-line-strong:#50728f; --pe-elevated:#123052;
  --pe-txt:#f1f6f8; --pe-txt-2:#c3d4df; --pe-txt-3:#9db3c5;
  --pe-lime:#b7def3; --pe-lime-soft:#d2edf8; --pe-lime-wash:rgba(183,222,243,.12);
  --pe-ink:#071426; --pe-red:#e98686; --pe-gold:#d9c074;
  --pe-club-primary:#001b49; --pe-club-ink:#f1f6f8;
}
.pe-club-theme-grizzlis.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#eef1ef; --pe-panel:#fafbf8; --pe-panel-2:#dfe6e9;
  --pe-line:#cbd5dc; --pe-line-strong:#70869a; --pe-elevated:#dfe6e9;
  --pe-txt:#13243a; --pe-txt-2:#425970; --pe-txt-3:#5c6e80;
  --pe-lime:#0b4a92; --pe-lime-soft:#073b75; --pe-lime-wash:rgba(11,74,146,.1);
  --pe-ink:#f7faf8; --pe-red:#a34848; --pe-gold:#755f1b;
  --pe-club-primary:#00235d; --pe-club-ink:#f6f8f5;
}
.pe-club-theme-grizzlis { background:var(--pe-bg); color:var(--pe-txt); }
.pe-club-theme-light .pe-themes-hero { background:var(--pe-panel-2); color:var(--pe-txt); }
.pe-club-theme-light .pe-themes-hero p,
.pe-club-theme-light .pe-themes-impact span { color:var(--pe-txt-2); }
.pe-club-theme-light .pe-themes-impact { background:var(--pe-lime-wash); }
.pe-club-theme-light .pe-theme-status-comingsoon { color:var(--pe-gold); }
.pe-club-theme-pirates.pe-club-theme-light .pe-theme-action-buy,
.pe-club-theme-pirates.pe-club-theme-light .pe-btn:not(.pe-btn-ghost):not(:disabled) { background:#ffcd02; color:#211f1b; }
.pe-club-themed.pe-club-theme-grizzlis .pe-mobile-bar,
.pe-club-themed.pe-club-theme-grizzlis .pe-tabbar {
  background:var(--pe-club-primary);
  border-color:color-mix(in srgb,#b7def3 30%,transparent);
}
.pe-club-theme-grizzlis .pe-mobile-title { color:var(--pe-club-ink); }
.pe-club-theme-grizzlis .pe-tab-on { color:#b7def3; }
.pe-club-theme-grizzlis .pe-mobile-sub,
.pe-club-theme-grizzlis .pe-mobile-back { color:#b7cee0; }
.pe-club-theme-grizzlis .pe-btn,
.pe-club-theme-grizzlis .pe-theme-action-buy { border-radius:3px 12px 3px 12px; }
.pe-theme-option-grizzlis.pe-theme-option-light {
  --theme-primary:#00235d !important; --theme-ink:#f6f8f5 !important;
  border-color:#cbd5dc; background:#fafbf8; color:#13243a;
}
.pe-theme-option-grizzlis.pe-theme-option-light > span:nth-child(2) small { color:#5c6e80; }
.pe-theme-option-grizzlis.pe-theme-option-light.is-active { background:linear-gradient(135deg,#dfe6e9,#fafbf8); }
.pe-theme-option-grizzlis.pe-theme-option-dark {
  --theme-primary:#00235d !important; --theme-ink:#f6f8f5 !important;
  border-color:#244765; background:#0c213a; color:#f1f6f8;
}
.pe-theme-option-grizzlis.pe-theme-option-dark > span:nth-child(2) small { color:#9db3c5; }
.pe-theme-option-grizzlis.pe-theme-option-dark.is-active { background:linear-gradient(135deg,#123052,#0c213a); }
.pe-active-theme-logo { width:30px; height:34px; flex:0 0 auto; object-fit:contain; }
.pe-active-theme-logo-mobile { position:absolute; right:var(--pe-s4); bottom:var(--pe-s3); width:28px; height:34px; }
.pe-club-themed .pe-mobile-bar,
.pe-club-themed .pe-tabbar { background:color-mix(in srgb,var(--pe-club-primary) 44%,#0f141c); border-color:color-mix(in srgb,var(--pe-club-primary) 48%,var(--pe-line)); }
.pe-club-themed .pe-mobile-body { background:linear-gradient(180deg,color-mix(in srgb,var(--pe-club-primary) 8%,var(--pe-bg)),var(--pe-bg) 28%); }
.pe-club-themed .pe-account-link-featured { border-color:color-mix(in srgb,var(--pe-club-primary) 58%,var(--pe-line)); background:linear-gradient(135deg,color-mix(in srgb,var(--pe-club-primary) 13%,var(--pe-panel)),var(--pe-panel)); }
.pe-club-themed .pe-account-link-featured .pe-account-link-mark { background:var(--pe-club-primary); color:var(--pe-club-ink); }

/* Club identities — visual interpretations documented in docs/club-identities-2026-09-13.md. */
.pe-club-theme-aces.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#1d1629; --pe-panel:#251c31; --pe-panel-2:#2c2437;
  --pe-line:#4c475b; --pe-line-strong:#898D93; --pe-elevated:#2c2437;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#E4BF52; --pe-lime-soft:#E4BF52; --pe-lime-wash:color-mix(in srgb,#E4BF52 10%,#251c31);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#4D256B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-aces.pe-theme-option-dark {
  --theme-primary:#4D256B !important; --theme-ink:#FFF8F1 !important;
  border-color:#4c475b; background:#251c31; color:#F5F2EB;
}
.pe-theme-option-aces.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-aces.pe-theme-option-dark.is-active { background:#2c2437; }
.pe-club-theme-aces.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f1eeeb; --pe-panel:#FFFCF6; --pe-panel-2:#eae6e3;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#eae6e3;
  --pe-txt:#232239; --pe-txt-2:#4d475b; --pe-txt-3:#5B5B61;
  --pe-lime:#70438B; --pe-lime-soft:#70438B; --pe-lime-wash:color-mix(in srgb,#70438B 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#4D256B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-aces.pe-theme-option-light {
  --theme-primary:#4D256B !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#232239;
}
.pe-theme-option-aces.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-aces.pe-theme-option-light.is-active { background:#eae6e3; }
.pe-club-theme-cougars.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#2d151c; --pe-panel:#361a22; --pe-panel-2:#3c232a;
  --pe-line:#5a4650; --pe-line-strong:#898D93; --pe-elevated:#3c232a;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F1838E; --pe-lime-soft:#F1838E; --pe-lime-wash:color-mix(in srgb,#F1838E 10%,#361a22);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#941E32; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-cougars.pe-theme-option-dark {
  --theme-primary:#941E32 !important; --theme-ink:#FFF8F1 !important;
  border-color:#5a4650; background:#361a22; color:#F5F2EB;
}
.pe-theme-option-cougars.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-cougars.pe-theme-option-dark.is-active { background:#3c232a; }
.pe-club-theme-cougars.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f3eee9; --pe-panel:#FFFCF6; --pe-panel-2:#ede6e1;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#ede6e1;
  --pe-txt:#31202d; --pe-txt-2:#5b4650; --pe-txt-3:#5B5B61;
  --pe-lime:#9E2137; --pe-lime-soft:#9E2137; --pe-lime-wash:color-mix(in srgb,#9E2137 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#941E32; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-cougars.pe-theme-option-light {
  --theme-primary:#941E32 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#31202d;
}
.pe-theme-option-cougars.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-cougars.pe-theme-option-light.is-active { background:#ede6e1; }
.pe-club-theme-diablos.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#2f151a; --pe-panel:#391a20; --pe-panel-2:#3f2328;
  --pe-line:#5d464e; --pe-line-strong:#898D93; --pe-elevated:#3f2328;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F28185; --pe-lime-soft:#F28185; --pe-lime-wash:color-mix(in srgb,#F28185 10%,#391a20);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#9F1E29; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-diablos.pe-theme-option-dark {
  --theme-primary:#9F1E29 !important; --theme-ink:#FFF8F1 !important;
  border-color:#5d464e; background:#391a20; color:#F5F2EB;
}
.pe-theme-option-diablos.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-diablos.pe-theme-option-dark.is-active { background:#3f2328; }
.pe-club-theme-diablos.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f3eee9; --pe-panel:#FFFCF6; --pe-panel-2:#eee6e0;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#eee6e0;
  --pe-txt:#33202b; --pe-txt-2:#5d464e; --pe-txt-3:#5B5B61;
  --pe-lime:#9F1E29; --pe-lime-soft:#9F1E29; --pe-lime-wash:color-mix(in srgb,#9F1E29 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#9F1E29; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-diablos.pe-theme-option-light {
  --theme-primary:#9F1E29 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#33202b;
}
.pe-theme-option-diablos.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-diablos.pe-theme-option-light.is-active { background:#eee6e0; }
.pe-club-theme-dorchesters.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#121f1d; --pe-panel:#172623; --pe-panel-2:#202e2b;
  --pe-line:#425050; --pe-line-strong:#898D93; --pe-elevated:#202e2b;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#EAD05B; --pe-lime-soft:#EAD05B; --pe-lime-wash:color-mix(in srgb,#EAD05B 10%,#172623);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#184E36; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-dorchesters.pe-theme-option-dark {
  --theme-primary:#184E36 !important; --theme-ink:#FFF8F1 !important;
  border-color:#425050; background:#172623; color:#F5F2EB;
}
.pe-theme-option-dorchesters.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-dorchesters.pe-theme-option-dark.is-active { background:#202e2b; }
.pe-club-theme-dorchesters.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efefe9; --pe-panel:#FFFCF6; --pe-panel-2:#e8e8e1;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e8e1;
  --pe-txt:#182a2e; --pe-txt-2:#425050; --pe-txt-3:#5B5B61;
  --pe-lime:#24603E; --pe-lime-soft:#24603E; --pe-lime-wash:color-mix(in srgb,#24603E 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#184E36; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-dorchesters.pe-theme-option-light {
  --theme-primary:#184E36 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#182a2e;
}
.pe-theme-option-dorchesters.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-dorchesters.pe-theme-option-light.is-active { background:#e8e8e1; }
.pe-club-theme-titans.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#101c1b; --pe-panel:#162221; --pe-panel-2:#1e2a29;
  --pe-line:#404c4f; --pe-line-strong:#898D93; --pe-elevated:#1e2a29;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F0D650; --pe-lime-soft:#F0D650; --pe-lime-wash:color-mix(in srgb,#F0D650 10%,#162221);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#123E2E; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-titans.pe-theme-option-dark {
  --theme-primary:#123E2E !important; --theme-ink:#FFF8F1 !important;
  border-color:#404c4f; background:#162221; color:#F5F2EB;
}
.pe-theme-option-titans.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-titans.pe-theme-option-dark.is-active { background:#1e2a29; }
.pe-club-theme-titans.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efeee9; --pe-panel:#FFFCF6; --pe-panel-2:#e8e7e1;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e7e1;
  --pe-txt:#17272c; --pe-txt-2:#414c4f; --pe-txt-3:#5B5B61;
  --pe-lime:#235638; --pe-lime-soft:#235638; --pe-lime-wash:color-mix(in srgb,#235638 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#123E2E; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-titans.pe-theme-option-light {
  --theme-primary:#123E2E !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#17272c;
}
.pe-theme-option-titans.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-titans.pe-theme-option-light.is-active { background:#e8e7e1; }
.pe-club-theme-packers.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#121f1d; --pe-panel:#172623; --pe-panel-2:#1f2d2b;
  --pe-line:#414f50; --pe-line-strong:#898D93; --pe-elevated:#1f2d2b;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F3C94D; --pe-lime-soft:#F3C94D; --pe-lime-wash:color-mix(in srgb,#F3C94D 10%,#172623);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#174C34; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-packers.pe-theme-option-dark {
  --theme-primary:#174C34 !important; --theme-ink:#FFF8F1 !important;
  border-color:#414f50; background:#172623; color:#F5F2EB;
}
.pe-theme-option-packers.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-packers.pe-theme-option-dark.is-active { background:#1f2d2b; }
.pe-club-theme-packers.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efefe9; --pe-panel:#FFFCF6; --pe-panel-2:#e8e8e1;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e8e1;
  --pe-txt:#182a2e; --pe-txt-2:#424f50; --pe-txt-3:#5B5B61;
  --pe-lime:#245D3D; --pe-lime-soft:#245D3D; --pe-lime-wash:color-mix(in srgb,#245D3D 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#174C34; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-packers.pe-theme-option-light {
  --theme-primary:#174C34 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#182a2e;
}
.pe-theme-option-packers.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-packers.pe-theme-option-light.is-active { background:#e8e8e1; }
.pe-club-theme-patriotes.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#101a26; --pe-panel:#16202d; --pe-panel-2:#1e2834;
  --pe-line:#404b58; --pe-line-strong:#898D93; --pe-elevated:#1e2834;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F58A91; --pe-lime-soft:#F58A91; --pe-lime-wash:color-mix(in srgb,#F58A91 10%,#16202d);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#12355D; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-patriotes.pe-theme-option-dark {
  --theme-primary:#12355D !important; --theme-ink:#FFF8F1 !important;
  border-color:#404b58; background:#16202d; color:#F5F2EB;
}
.pe-theme-option-patriotes.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-patriotes.pe-theme-option-dark.is-active { background:#1e2834; }
.pe-club-theme-patriotes.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efeeea; --pe-panel:#FFFCF6; --pe-panel-2:#e8e7e2;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e7e2;
  --pe-txt:#172536; --pe-txt-2:#414b58; --pe-txt-3:#5B5B61;
  --pe-lime:#A62639; --pe-lime-soft:#A62639; --pe-lime-wash:color-mix(in srgb,#A62639 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#12355D; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-patriotes.pe-theme-option-light {
  --theme-primary:#12355D !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#172536;
}
.pe-theme-option-patriotes.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-patriotes.pe-theme-option-light.is-active { background:#e8e7e2; }
.pe-club-theme-rhinos.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#151719; --pe-panel:#1b1d1f; --pe-panel-2:#232527;
  --pe-line:#45484d; --pe-line-strong:#898D93; --pe-elevated:#232527;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#FFAC62; --pe-lime-soft:#FFAC62; --pe-lime-wash:color-mix(in srgb,#FFAC62 10%,#1b1d1f);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#272724; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-rhinos.pe-theme-option-dark {
  --theme-primary:#272724 !important; --theme-ink:#FFF8F1 !important;
  border-color:#45484d; background:#1b1d1f; color:#F5F2EB;
}
.pe-theme-option-rhinos.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-rhinos.pe-theme-option-dark.is-active { background:#232527; }
.pe-club-theme-rhinos.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f0eee9; --pe-panel:#FFFCF6; --pe-panel-2:#e9e6e0;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e9e6e0;
  --pe-txt:#1b222a; --pe-txt-2:#45484d; --pe-txt-3:#5B5B61;
  --pe-lime:#914210; --pe-lime-soft:#914210; --pe-lime-wash:color-mix(in srgb,#914210 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#272724; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-rhinos.pe-theme-option-light {
  --theme-primary:#272724 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#1b222a;
}
.pe-theme-option-rhinos.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-rhinos.pe-theme-option-light.is-active { background:#e9e6e0; }
.pe-club-theme-stallions.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#23141d; --pe-panel:#2b1a23; --pe-panel-2:#32222b;
  --pe-line:#514650; --pe-line-strong:#898D93; --pe-elevated:#32222b;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#E5BCC8; --pe-lime-soft:#E5BCC8; --pe-lime-wash:color-mix(in srgb,#E5BCC8 10%,#2b1a23);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#671D36; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-stallions.pe-theme-option-dark {
  --theme-primary:#671D36 !important; --theme-ink:#FFF8F1 !important;
  border-color:#514650; background:#2b1a23; color:#F5F2EB;
}
.pe-theme-option-stallions.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-stallions.pe-theme-option-dark.is-active { background:#32222b; }
.pe-club-theme-stallions.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f1eee9; --pe-panel:#FFFCF6; --pe-panel-2:#ebe6e1;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#ebe6e1;
  --pe-txt:#28202e; --pe-txt-2:#524650; --pe-txt-3:#5B5B61;
  --pe-lime:#7D2542; --pe-lime-soft:#7D2542; --pe-lime-wash:color-mix(in srgb,#7D2542 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#671D36; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-stallions.pe-theme-option-light {
  --theme-primary:#671D36 !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#28202e;
}
.pe-theme-option-stallions.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-stallions.pe-theme-option-light.is-active { background:#ebe6e1; }
.pe-club-theme-vandoos.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#151617; --pe-panel:#1b1b1d; --pe-panel-2:#232425;
  --pe-line:#44474b; --pe-line-strong:#898D93; --pe-elevated:#232425;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#E2C16B; --pe-lime-soft:#E2C16B; --pe-lime-wash:color-mix(in srgb,#E2C16B 10%,#1b1b1d);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#25221B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vandoos.pe-theme-option-dark {
  --theme-primary:#25221B !important; --theme-ink:#FFF8F1 !important;
  border-color:#44474b; background:#1b1b1d; color:#F5F2EB;
}
.pe-theme-option-vandoos.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-vandoos.pe-theme-option-dark.is-active { background:#232425; }
.pe-club-theme-vandoos.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f0eee9; --pe-panel:#FFFCF6; --pe-panel-2:#e9e6e0;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e9e6e0;
  --pe-txt:#1b2129; --pe-txt-2:#45474b; --pe-txt-3:#5B5B61;
  --pe-lime:#765900; --pe-lime-soft:#765900; --pe-lime-wash:color-mix(in srgb,#765900 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#25221B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vandoos.pe-theme-option-light {
  --theme-primary:#25221B !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#1b2129;
}
.pe-theme-option-vandoos.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-vandoos.pe-theme-option-light.is-active { background:#e9e6e0; }
.pe-club-theme-vicas.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#2c151b; --pe-panel:#351b21; --pe-panel-2:#3b2329;
  --pe-line:#59464e; --pe-line-strong:#898D93; --pe-elevated:#3b2329;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F1CD62; --pe-lime-soft:#F1CD62; --pe-lime-wash:color-mix(in srgb,#F1CD62 10%,#351b21);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#8D202B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vicas.pe-theme-option-dark {
  --theme-primary:#8D202B !important; --theme-ink:#FFF8F1 !important;
  border-color:#59464e; background:#351b21; color:#F5F2EB;
}
.pe-theme-option-vicas.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-vicas.pe-theme-option-dark.is-active { background:#3b2329; }
.pe-club-theme-vicas.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#f2eee9; --pe-panel:#FFFCF6; --pe-panel-2:#ede6e0;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#ede6e0;
  --pe-txt:#2f212c; --pe-txt-2:#5a464e; --pe-txt-3:#5B5B61;
  --pe-lime:#98303A; --pe-lime-soft:#98303A; --pe-lime-wash:color-mix(in srgb,#98303A 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#8D202B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vicas.pe-theme-option-light {
  --theme-primary:#8D202B !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#2f212c;
}
.pe-theme-option-vicas.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-vicas.pe-theme-option-light.is-active { background:#ede6e0; }
.pe-club-theme-vikings.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#121c29; --pe-panel:#172331; --pe-panel-2:#1f2a38;
  --pe-line:#414d5b; --pe-line-strong:#898D93; --pe-elevated:#1f2a38;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#F58C95; --pe-lime-soft:#F58C95; --pe-lime-wash:color-mix(in srgb,#F58C95 10%,#172331);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#173F6D; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vikings.pe-theme-option-dark {
  --theme-primary:#173F6D !important; --theme-ink:#FFF8F1 !important;
  border-color:#414d5b; background:#172331; color:#F5F2EB;
}
.pe-theme-option-vikings.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-vikings.pe-theme-option-dark.is-active { background:#1f2a38; }
.pe-club-theme-vikings.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efeeeb; --pe-panel:#FFFCF6; --pe-panel-2:#e8e7e3;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e7e3;
  --pe-txt:#182739; --pe-txt-2:#424d5b; --pe-txt-3:#5B5B61;
  --pe-lime:#A42A3C; --pe-lime-soft:#A42A3C; --pe-lime-wash:color-mix(in srgb,#A42A3C 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#173F6D; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-vikings.pe-theme-option-light {
  --theme-primary:#173F6D !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#182739;
}
.pe-theme-option-vikings.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-vikings.pe-theme-option-light.is-active { background:#e8e7e3; }
.pe-club-theme-wildcats.pe-club-theme-dark {
  color-scheme:dark;
  --pe-bg:#101822; --pe-panel:#161e29; --pe-panel-2:#1e2630;
  --pe-line:#404955; --pe-line-strong:#898D93; --pe-elevated:#1e2630;
  --pe-txt:#F5F2EB; --pe-txt-2:#D0CAC3; --pe-txt-3:#ABA7A2;
  --pe-lime:#EBC75C; --pe-lime-soft:#EBC75C; --pe-lime-wash:color-mix(in srgb,#EBC75C 10%,#161e29);
  --pe-ink:#16191D; --pe-red:#FFA0A8; --pe-gold:#F1CD62;
  --pe-club-primary:#112E4B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-wildcats.pe-theme-option-dark {
  --theme-primary:#112E4B !important; --theme-ink:#FFF8F1 !important;
  border-color:#404955; background:#161e29; color:#F5F2EB;
}
.pe-theme-option-wildcats.pe-theme-option-dark > span:nth-child(2) small { color:#ABA7A2; }
.pe-theme-option-wildcats.pe-theme-option-dark.is-active { background:#1e2630; }
.pe-club-theme-wildcats.pe-club-theme-light {
  color-scheme:light;
  --pe-bg:#efeeea; --pe-panel:#FFFCF6; --pe-panel-2:#e8e6e2;
  --pe-line:#C6C5C3; --pe-line-strong:#85858A; --pe-elevated:#e8e6e2;
  --pe-txt:#172432; --pe-txt-2:#414955; --pe-txt-3:#5B5B61;
  --pe-lime:#755916; --pe-lime-soft:#755916; --pe-lime-wash:color-mix(in srgb,#755916 10%,#FFFCF6);
  --pe-ink:#FFF8F1; --pe-red:#9F2335; --pe-gold:#755916;
  --pe-club-primary:#112E4B; --pe-club-ink:#FFF8F1;
}
.pe-theme-option-wildcats.pe-theme-option-light {
  --theme-primary:#112E4B !important; --theme-ink:#FFF8F1 !important;
  border-color:#C6C5C3; background:#FFFCF6; color:#172432;
}
.pe-theme-option-wildcats.pe-theme-option-light > span:nth-child(2) small { color:#5B5B61; }
.pe-theme-option-wildcats.pe-theme-option-light.is-active { background:#e8e6e2; }
:is(.pe-club-theme-aces,.pe-club-theme-cougars,.pe-club-theme-diablos,.pe-club-theme-dorchesters,.pe-club-theme-titans,.pe-club-theme-packers,.pe-club-theme-patriotes,.pe-club-theme-rhinos,.pe-club-theme-stallions,.pe-club-theme-vandoos,.pe-club-theme-vicas,.pe-club-theme-vikings,.pe-club-theme-wildcats) { background:var(--pe-bg); color:var(--pe-txt); }
.pe-club-themed:is(.pe-club-theme-aces,.pe-club-theme-cougars,.pe-club-theme-diablos,.pe-club-theme-dorchesters,.pe-club-theme-titans,.pe-club-theme-packers,.pe-club-theme-patriotes,.pe-club-theme-rhinos,.pe-club-theme-stallions,.pe-club-theme-vandoos,.pe-club-theme-vicas,.pe-club-theme-vikings,.pe-club-theme-wildcats) :is(.pe-mobile-bar,.pe-appbar) { background:var(--pe-club-primary); color:var(--pe-club-ink); border-color:color-mix(in srgb,var(--pe-club-ink) 30%,transparent); }
:is(.pe-club-theme-aces,.pe-club-theme-cougars,.pe-club-theme-diablos,.pe-club-theme-dorchesters,.pe-club-theme-titans,.pe-club-theme-packers,.pe-club-theme-patriotes,.pe-club-theme-rhinos,.pe-club-theme-stallions,.pe-club-theme-vandoos,.pe-club-theme-vicas,.pe-club-theme-vikings,.pe-club-theme-wildcats) :is(.pe-mobile-title,.pe-mobile-sub,.pe-mobile-back,.pe-brand,.pe-appbar-link,.pe-brand-accent) { color:var(--pe-club-ink); }
.pe-club-themed:is(.pe-club-theme-aces,.pe-club-theme-cougars,.pe-club-theme-diablos,.pe-club-theme-dorchesters,.pe-club-theme-titans,.pe-club-theme-packers,.pe-club-theme-patriotes,.pe-club-theme-rhinos,.pe-club-theme-stallions,.pe-club-theme-vandoos,.pe-club-theme-vicas,.pe-club-theme-vikings,.pe-club-theme-wildcats) .pe-tabbar { background:var(--pe-panel); color:var(--pe-txt-2); border-color:var(--pe-line); }
:is(.pe-club-theme-aces,.pe-club-theme-cougars,.pe-club-theme-diablos,.pe-club-theme-dorchesters,.pe-club-theme-titans,.pe-club-theme-packers,.pe-club-theme-patriotes,.pe-club-theme-rhinos,.pe-club-theme-stallions,.pe-club-theme-vandoos,.pe-club-theme-vicas,.pe-club-theme-vikings,.pe-club-theme-wildcats) .pe-tab-on { color:var(--pe-lime); }

@media (max-width:900px) { .pe-theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
  .pe-themes { padding-bottom:24px; }
  .pe-themes-hero { min-height:0; padding:27px 20px; border-radius:14px; }
  .pe-themes-hero h1 { font-size:39px; }
  .pe-theme-options,.pe-theme-grid { grid-template-columns:1fr; }
  .pe-theme-card { min-height:250px; }
  .pe-theme-owned,.pe-theme-catalog { margin-top:28px; }
}
.pe-weekly-impact h3 { margin:4px 0 2px; font-size:19px; letter-spacing:-.025em; }
.pe-weekly-impact p { margin:0; color:var(--pe-txt-2); font-size:10.5px; line-height:1.5; }
.pe-weekly-impact>strong { max-width:22ch; color:var(--pe-txt-2); font:800 11px var(--pe-mono); text-align:right; }
.pe-weekly-impact-positive h3 { color:var(--pe-lime-soft); }
.pe-weekly-impact-warning h3 { color:#E0A458; }

@media (max-width:520px) {
    .pe-hero { align-items:flex-start; }
    .pe-hero-block.pe-right { max-width:52%; }
    .pe-weekly-impact { grid-template-columns:1fr; gap:8px; }
    .pe-weekly-impact>strong { text-align:left; }
    .pe-slot-gains { min-width:112px; }
}

.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; }

/* L'ISSUE DE SECOURS D'UN ECRAN QUI NE PROPOSE QU'UNE CHOSE.
   Elle doit rester lisible et peser MOINS que l'action principale : un deuxieme
   bouton plein transformerait une decision en choix entre deux egaux. C'est
   parfois un <button> (il deplie une liste) et parfois un <a> : les deux formes
   se ressemblent, donc le bouton natif est neutralise ici. */
.pe-quiet-link {
    appearance: none; display: block; width: 100%; margin-top: var(--pe-s3);
    padding: 0; border: 0; background: transparent; color: var(--pe-txt-2);
    font-family: inherit; font-size: 11px; font-weight: 800; text-align: center;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.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); }

/* Composition de franchise — même parcours sur le web et dans MAUI. */
.pe-main:has(.pe-franchise-wizard) { max-width: 760px; }
.pe-franchise-context {
    display: grid; gap: 3px; margin: 0 0 var(--pe-s4); padding: 12px 14px;
    border-left: 2px solid var(--pe-lime-soft); background: var(--pe-panel);
}
.pe-franchise-context strong { font-size: 15px; }
.pe-franchise-context small { color: var(--pe-txt-3); font-size: 11.5px; line-height: 1.4; }
.pe-franchise-intro {
    max-width: 62ch; margin: 0 0 18px; color: var(--pe-dim);
    font-size: 13.5px; line-height: 1.55;
}
.pe-franchise-wizard {
    overflow: hidden; border: 1px solid var(--pe-line); border-radius: 16px;
    background: var(--pe-panel);
}
.pe-franchise-progress {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,34%); align-items: center;
    gap: 18px; padding: 15px 17px; border-bottom: 1px solid var(--pe-line);
    background: var(--pe-elevated);
}
.pe-franchise-progress span, .pe-franchise-progress strong { display: block; }
.pe-franchise-progress > div:first-child > span {
    color: var(--pe-lime-soft); font-size: 9px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase;
}
.pe-franchise-progress strong { margin-top: 4px; font-size: 12px; }
.pe-franchise-progress-track {
    height: 5px; overflow: hidden; border-radius: 99px; background: var(--pe-line-strong);
}
.pe-franchise-progress-track span { height: 100%; border-radius: inherit; background: var(--pe-lime); }
.pe-franchise-steps {
    display: flex; overflow-x: auto; border-bottom: 1px solid var(--pe-line);
    scrollbar-width: thin; background: var(--pe-bg);
}
.pe-franchise-steps button {
    appearance: none; min-width: 132px; min-height: 76px; flex: 1; display: grid;
    grid-template-columns: 24px minmax(0,1fr); grid-template-rows: auto auto;
    align-content: center; gap: 2px 8px; padding: 10px; border: 0;
    border-right: 1px solid var(--pe-line); color: var(--pe-txt-2);
    background: transparent; font-family: inherit; text-align: left; cursor: pointer;
}
.pe-franchise-steps button:last-child { border-right: 0; }
.pe-franchise-steps button > span {
    grid-row: 1/3; align-self: center; width: 24px; height: 24px; display: grid; place-items: center;
    border: 1px solid var(--pe-line-strong); border-radius: 50%; color: var(--pe-txt-3);
    font: 800 9px var(--pe-mono);
}
.pe-franchise-steps button strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.pe-franchise-steps button small { overflow: hidden; color: var(--pe-txt-3); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.pe-franchise-steps .pe-franchise-step-done > span { border-color: var(--pe-lime-soft); color: var(--pe-lime-soft); }
.pe-franchise-steps .pe-franchise-step-active { background: var(--pe-lime-wash); box-shadow: inset 0 -3px 0 var(--pe-lime); }
.pe-franchise-steps .pe-franchise-step-active > span { color: var(--pe-ink); border-color: var(--pe-lime); background: var(--pe-lime); }
.pe-franchise-steps .pe-franchise-step-active strong { color: var(--pe-txt); }
.pe-franchise-step-card { max-width: 560px; margin: 0 auto; padding: 28px 22px 24px; }
.pe-franchise-step-card h2 { margin: 5px 0 7px; font-size: 22px; letter-spacing: -.025em; }
.pe-franchise-step-card > p { margin: 0; color: var(--pe-txt-3); font-size: 11px; line-height: 1.5; }
.pe-franchise-home-team { margin: 13px 0 0; min-height: 48px; align-items: center; }
.pe-franchise-home-team:has(input:disabled) { opacity: .55; }
.pe-franchise-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.pe-franchise-actions .pe-btn:first-child:not(:last-child) { margin-right: auto; }
.pe-franchise-action-hint { margin-top: 10px !important; text-align: right; }
.pe-franchise-cancel {
    display: flex; width: max-content; min-height: 48px; align-items: center;
    margin: 10px auto 0; color: var(--pe-txt-3);
    font-size: 11.5px; font-weight: 700; text-underline-offset: 2px;
}
.pe-draft-pick { min-height: 48px; }

@media (max-width: 520px) {
    .pe-franchise-context { margin-top: 2px; }
    .pe-franchise-progress { grid-template-columns: 1fr; gap: 10px; }
    .pe-franchise-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: hidden; }
    .pe-franchise-steps button {
        min-width: 0; min-height: 64px; grid-template-columns: 1fr; grid-template-rows: auto auto;
        justify-items: center; gap: 3px; padding: 7px 3px; text-align: center;
    }
    .pe-franchise-steps button > span { grid-row: auto; width: 24px; height: 24px; }
    .pe-franchise-steps button strong { max-width: 100%; font-size: 8px; }
    .pe-franchise-steps button small { display: none; }
    .pe-franchise-step-card { padding: 22px 15px 20px; }
    .pe-franchise-actions { flex-direction: column-reverse; }
    .pe-franchise-actions .pe-btn { width: 100%; min-height: 48px; box-sizing: border-box; }
    .pe-franchise-action-hint { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   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 {
    position:relative; 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); }

/* Une seule famille d'icônes : trait 1.8, extrémités arrondies, couleur héritée. */
.pe-icon {
    display: inline-block; width: 1.25em; height: 1.25em;
    flex: 0 0 auto; vertical-align: -.2em;
}
.pe-tab-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.pe-tab-icon .pe-icon { width: 20px; height: 20px; }
.pe-mobile-back .pe-icon { width: 21px; height: 21px; }
.pe-md-onboard-mark .pe-icon { width: 24px; height: 24px; }
.pe-account-link-mark .pe-icon { width: 17px; height: 17px; }
.pe-surv-pool-check .pe-icon { width: 16px; height: 16px; stroke-width: 2.2; }
.pe-surv-seal .pe-icon,
.pe-units-confirmed-top > span .pe-icon { width: 21px; height: 21px; stroke-width: 2.3; }

/* ═══════════════════════════════════════════════════════════════════════
   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; display: grid;
    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-game { min-width: 0; padding: var(--pe-s4); }
.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-feature-venue {
    min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--pe-s4); border-top: 1px solid var(--pe-line);
    background: color-mix(in srgb, var(--pe-panel-2) 88%, transparent);
}
.pe-md-venue-label {
    display: flex; align-items: center; gap: 6px; color: var(--pe-lime-soft);
    font: 800 8.5px var(--pe-mono); letter-spacing: .1em; text-transform: uppercase;
}
.pe-md-feature-venue > strong {
    margin-top: var(--pe-s3); color: var(--pe-txt); font-size: 15px; line-height: 1.2;
}
.pe-md-venue-address {
    display: block; margin-top: 5px; color: var(--pe-txt-2); font-size: 10.5px; line-height: 1.45;
}
.pe-md-route,
.pe-md-route-compact {
    appearance: none; border: 1px solid var(--pe-lime); color: var(--pe-lime-soft);
    background: var(--pe-lime-wash); font-family: inherit; font-weight: 800; cursor: pointer;
}
.pe-md-route {
    width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center;
    gap: 7px; margin-top: var(--pe-s4); border-radius: 9px; font-size: 10.5px;
}
.pe-md-route-compact {
    width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
    border-color: var(--pe-line-strong); border-radius: 9px; color: var(--pe-txt-2);
    background: var(--pe-panel-2); font-size: 15px;
}
.pe-md-route:hover,
.pe-md-route:focus-visible { color: var(--pe-panel); background: var(--pe-lime); }
.pe-md-route-compact:hover,
.pe-md-route-compact:focus-visible { border-color: var(--pe-lime); color: var(--pe-lime); }
.pe-md-route:focus-visible,
.pe-md-route-compact:focus-visible { outline: 2px solid var(--pe-lime); outline-offset: 2px; }

@media (min-width: 760px) {
    .pe-md-feature { grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr); }
    .pe-md-feature-venue { border-top: 0; border-left: 1px solid var(--pe-line); }
}
.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: minmax(0, 1fr) auto;
    align-items: center; gap: 8px; margin-bottom: var(--pe-s4);
}
.pe-team-browser-head-with-back { grid-template-columns: 46px minmax(0, 1fr) auto; }
.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-account-danger {
  margin-top: var(--pe-s5); padding-top: var(--pe-s4); border-top: 1px solid var(--pe-line);
}
.pe-account-danger h2 { margin: 0 0 var(--pe-s2); font-size: 16px; }
.pe-account-danger p { color: var(--pe-txt-2); font-size: 12px; line-height: 1.55; }
.pe-account-delete-link, .pe-account-delete-cancel {
  min-height: var(--pe-tap); border: 0; background: transparent; color: var(--pe-txt-2); font: inherit;
}
.pe-account-delete-link { width: 100%; color: #ff8d8d; text-align: center; }
.pe-account-danger-actions { display: grid; gap: var(--pe-s2); margin-top: var(--pe-s3); }
.pe-account-delete-confirm {
  min-height: var(--pe-tap); border: 1px solid #8d3434; border-radius: var(--pe-r2);
  background: #351a1d; color: #ffd8d8; font: inherit; font-weight: 800;
}
.pe-account-delete-confirm:disabled, .pe-account-delete-cancel:disabled { opacity: .5; }
.pe-account-version {
    margin: 13px 0 0; color: color-mix(in srgb, var(--pe-txt-3) 72%, transparent);
    font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums;
    letter-spacing: .02em; line-height: 1.4; text-align: center;
}

/* Politique de confidentialite — lecture editoriale, sans pile de cartes. */
.pe-privacy { max-width: 760px; margin: 0 auto; padding: clamp(18px, 5vw, 48px) 0 64px; }
.pe-privacy-hero { padding: clamp(26px, 7vw, 68px) 0 clamp(30px, 6vw, 54px); }
.pe-privacy-kicker {
  color: var(--pe-lime); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.pe-privacy-hero h1 {
  max-width: 690px; margin: 12px 0 18px; font-size: clamp(34px, 8vw, 66px);
  line-height: .96; letter-spacing: -.055em;
}
.pe-privacy-hero p { max-width: 610px; margin: 0; color: var(--pe-txt-2); font-size: clamp(15px, 2.5vw, 18px); line-height: 1.55; }
.pe-privacy-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--pe-line); }
.pe-privacy-summary a {
  display: grid; gap: 9px; min-width: 0; padding: 18px 14px; color: var(--pe-txt-2); text-decoration: none;
}
.pe-privacy-summary a + a { border-inline-start: 1px solid var(--pe-line); }
.pe-privacy-summary strong { color: var(--pe-lime); font-size: 11px; }
.pe-privacy-summary span { font-size: 11px; line-height: 1.35; }
.pe-privacy-highlight { display: grid; grid-template-columns: 5px 1fr; gap: 22px; margin: clamp(38px, 8vw, 70px) 0; }
.pe-privacy-rule { background: var(--pe-lime); }
.pe-privacy-highlight h2 { margin: 0 0 7px; font-size: clamp(22px, 5vw, 31px); }
.pe-privacy-highlight p { margin: 0; color: var(--pe-txt-2); line-height: 1.6; }
.pe-privacy-section {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: clamp(14px, 4vw, 34px);
  padding: clamp(28px, 6vw, 52px) 0; border-top: 1px solid var(--pe-line);
}
.pe-privacy-index { color: var(--pe-lime); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.pe-privacy-section h2 { margin: -5px 0 20px; font-size: clamp(23px, 4vw, 34px); letter-spacing: -.035em; }
.pe-privacy-section h3 { margin: 24px 0 5px; font-size: 13px; }
.pe-privacy-section p { margin: 0 0 14px; color: var(--pe-txt-2); font-size: 14px; line-height: 1.7; }
.pe-privacy-section a, .pe-auth-privacy-note a { color: var(--pe-lime); }
.pe-privacy-no { padding-inline-start: 16px; border-inline-start: 2px solid var(--pe-line-strong); color: var(--pe-txt-1) !important; }
.pe-auth-privacy-note { margin-top: 14px; text-align: center; }

@media (max-width: 560px) {
  .pe-privacy-summary { grid-template-columns: 1fr; }
  .pe-privacy-summary a { grid-template-columns: 28px 1fr; align-items: baseline; }
  .pe-privacy-summary a + a { border-inline-start: 0; border-top: 1px solid var(--pe-line); }
  .pe-privacy-section { grid-template-columns: 32px minmax(0, 1fr); }
}
.pe-deletion-page { max-width: 620px; margin: 0 auto; padding: clamp(54px, 10vw, 100px) 0; }
.pe-deletion-page h1 { margin: 10px 0 18px; font-size: clamp(38px, 8vw, 64px); letter-spacing: -.055em; line-height: .98; }
.pe-deletion-lead, .pe-deletion-help { color: var(--pe-txt-2); line-height: 1.65; }
.pe-deletion-form { margin: 34px 0; padding-block: 28px; border-block: 1px solid var(--pe-line); }
.pe-deletion-form .pe-account-delete-confirm { width: 100%; margin-top: 18px; }
.pe-deletion-complete { margin-top: 30px; padding-inline-start: 18px; border-inline-start: 4px solid var(--pe-lime); }
.pe-deletion-complete strong { font-size: 22px; }
.pe-deletion-complete p { color: var(--pe-txt-2); }
.pe-deletion-help { margin-top: 34px; font-size: 12px; }
.pe-deletion-help a { color: var(--pe-lime); }
.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-game-tools { margin:0 0 var(--pe-s3); }
.pe-surv-game-tools label {
    display:block; margin:0 0 6px 2px; color:var(--pe-txt-3);
    font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.pe-surv-game-tools input {
    width:100%; min-height:var(--pe-tap); box-sizing:border-box; padding:0 13px;
    border:1px solid var(--pe-line-strong); border-radius:10px; color:var(--pe-txt);
    background:var(--pe-panel); font:500 16px var(--pe-body);
}
.pe-surv-game-tools input:focus { outline:2px solid rgba(200,247,81,.18); border-color:var(--pe-lime); }
.pe-surv-games { display:grid; gap:9px; }
.pe-surv-games-more { min-height:var(--pe-tap); }
.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-personalize {
    margin-top:var(--pe-s4); padding:14px; border:1px solid rgba(200,247,81,.24);
    border-radius:13px; background:linear-gradient(145deg,var(--pe-lime-wash),var(--pe-panel));
}
.pe-surv-personalize p { margin:0; color:var(--pe-txt-2); font-size:11px; line-height:1.5; }
.pe-surv-personalize .pe-surv-wide { margin-top:var(--pe-s3); }
.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; }
/* La raison de la recommandation tient sur deux mots (« Ton équipe », « Mes
   équipes ») : elle s'aligne a droite et s'enroule plutôt que de pousser le nom
   de la partie hors de sa colonne. */
.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; text-align:right; line-height:1.3; }
.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-pool-option-on em { color: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; }
/* AMBRE, PAS LIME : le lime est reserve a l'action principale et a « toi ». Ce
   lien mene a un classement, il ne demande rien. Il emprunte donc la couleur du
   bandeau qui le porte. */
.pe-surv-eliminated p a { color:#E0A458; font-weight:800; text-decoration:underline; text-underline-offset:2px; }
.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; }

/* UN SEUL DEPLIANT POUR TOUT LE MODULE. Il replie maintenant les choix
   minoritaires de la revelation, les niveaux non recommandes de l'ecran d'entree
   et ceux de la feuille : trois listes, un seul geste a apprendre. On ne
   redefinit donc rien ci-dessus, on regle les deux contenus qui s'y ajoutent. */
.pe-surv-reveal-more .pe-surv-pool-list { margin-bottom:0; }
.pe-surv-pool-onboard .pe-surv-reveal-more { margin-bottom:var(--pe-s4); }

/* .pe-sect sert dans six pages : sa taille generale reste ce qu'elle est, seule
   la version de cet ecran se resserre pour rester sous le nom des parties. */
.pe-surv-pool-onboard .pe-sect { margin-inline:2px; font-size:8px; }

/* PARTIE NEUVE : LE TABLEAU NE FAIT PAS SEMBLANT. Le trait pointille dit « ce
   n'est pas encore un classement », la ou un cadre plein aurait dit « voici un
   resultat ». Le lime reste en lavis : le bloc informe, il ne recompense pas. */
.pe-surv-thin {
    display:flex; align-items:flex-start; gap:12px; margin-bottom:var(--pe-s3);
    padding:14px; border:1px dashed var(--pe-line-strong); border-radius:14px;
    background:linear-gradient(140deg,rgba(200,247,81,.07),var(--pe-panel));
}
.pe-surv-thin-mark {
    flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center;
    border:1px solid rgba(200,247,81,.3); border-radius:10px;
    color:var(--pe-lime); background:var(--pe-lime-wash); font-size:15px;
}
.pe-surv-thin strong { display:block; margin-top:3px; font-size:12.5px; font-weight:850; }
.pe-surv-thin p { margin-top:5px; color:var(--pe-txt-3); font-size:10.5px; line-height:1.5; }
/* La regle attend son lien : aucun mecanisme de partage n'existe encore dans le
   projet, et le bloc n'en rend donc aucun pour l'instant. */
.pe-surv-thin a {
    display:inline-block; margin-top:9px; color:var(--pe-lime); font-size:10.5px;
    font-weight:850; text-decoration:underline; text-underline-offset:2px;
}

/* 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; }
/* QUATRE VUES, ET AUCUNE CACHEE PAR UN DEFILEMENT.
   Le controle est passe de deux a quatre entrees (en course, repêches, tous,
   amis) : la grille fixe a deux colonnes aurait tasse « La course des repêchés »
   dans 95 px. Un ruban qui glisse aurait ete plus court a ecrire, mais le defaut
   depend du spectateur — voir la decision § 5 — donc l'onglet actif doit se voir
   sans geste. On enroule sur deux rangees; a trois vues, la derniere prend toute
   la largeur plutot que de laisser un trou. */
.pe-surv-standing-tabs {
    display:flex; flex-wrap:wrap; gap:3px; margin-bottom:10px; padding:3px;
    border:1px solid var(--pe-line); border-radius:12px; background:var(--pe-panel);
}
.pe-surv-standing-tabs a {
    flex:1 1 calc(50% - 9px); min-width:0; min-height:48px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    padding:4px 7px; border-radius:9px; color:var(--pe-txt-3);
    font-size:10.5px; font-weight:850; text-align:center; text-decoration:none;
}
.pe-surv-standing-tabs a>span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* LE COMPTE FAIT PARTIE DU CONTROLE, pas de la decoration : « 3e » ne veut rien
   dire sans sa population, et c'est ici qu'on la choisit. */
.pe-surv-standing-tabs a>small { font:750 7.5px var(--pe-mono); letter-spacing:.06em; opacity:.7; }
.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);
}
.pe-surv-standing-tabs .pe-surv-standing-tab-on>small { opacity:.62; }
/* 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; }
/* Le retour vers MA vue : un lien de navigation, pas une action a recompenser —
   donc pas de lime. */
.pe-surv-rank-hero p a { color:var(--pe-txt); font-weight:850; text-decoration:underline; text-underline-offset:2px; }
.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-market-guide {
    padding:13px 12px; border-bottom:1px solid var(--pe-line);
    background:linear-gradient(135deg,var(--pe-lime-wash),transparent);
}
.pe-units-market-guide>strong { display:block; margin-bottom:10px; font-size:11.5px; }
.pe-units-market-guide>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pe-units-market-guide span { min-width:0; padding-left:8px; border-left:2px solid var(--pe-line-strong); }
.pe-units-market-guide b,.pe-units-market-guide small { display:block; }
.pe-units-market-guide b { color:var(--pe-lime-soft); font:850 8.5px var(--pe-mono); }
.pe-units-market-guide small { margin-top:3px; color:var(--pe-txt-3); font-size:8px; line-height:1.35; }
.pe-units-market-guide p { margin:10px 0 0; color:var(--pe-txt-2); font-size:9.5px; line-height:1.45; }
.pe-units-offer-card { border-bottom:1px solid var(--pe-line); background:transparent; }
.pe-units-offer-card:last-child { border-bottom:0; }
.pe-units-offer-card-on { background:var(--pe-lime-wash); box-shadow:inset 3px 0 0 var(--pe-lime); }
.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 4px; border:0; color:var(--pe-txt); background:transparent; font-family:inherit; text-align:left; }
.pe-units-offer:disabled { opacity:.34; }
.pe-units-offer-results { box-sizing:border-box; display:flex; align-items:center; min-width:0; min-height:48px; margin:0; padding:4px 10px 8px 49px; color:var(--pe-txt-2); font-size:9.5px; font-weight:800; text-align:left; text-decoration:underline; text-underline-offset:2px; }
.pe-units-offer-results strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pe-units-offer-results span { flex:0 0 auto; margin:0 3px; }
.pe-units-offer-results:hover,.pe-units-offer-results:focus-visible { color:var(--pe-lime-soft); }
/* 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; }
.pe-units-more { width:calc(100% - 20px); min-height:var(--pe-tap); margin:10px; box-sizing:border-box; }
.pe-units-more.pe-quiet-link { width:calc(100% - 20px); margin:10px; }
/* 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 article { grid-template-columns:35px minmax(0,1fr) 82px; }
.pe-units-score-summary em { display:block; margin-top:3px; color:var(--pe-txt-3); font-size:7.5px; font-style:normal; }
.pe-weekly-explainer { padding:12px 20px; border-inline:1px solid var(--pe-line); background:var(--pe-panel-2); }
.pe-weekly-explainer strong,.pe-weekly-explainer span { display:block; }
.pe-weekly-explainer strong { font-size:10.5px; }
.pe-weekly-explainer span { margin-top:3px; color:var(--pe-txt-3); font-size:8.5px; line-height:1.45; }
.pe-units-week-score { text-align:right; }
.pe-units-week-score b { display:block; color:var(--pe-lime-soft); font:900 14px var(--pe-mono); }
.pe-units-week-score small { margin-top:2px; font-size:6.5px; white-space:normal; }
.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; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Bandeau de rejeu — maquette 1 (saison-en-boucle-qa-v1.html)

   A COLLER EN FIN DE premieressai.css, PAS DANS app.css. C'est la seule
   feuille que le mobile charge (voir l'en-tête de premieressai.css) ; une
   regle laissee dans app.css est invisible sur MAUI et c'est deja la cause
   de trois bogues dans ce depot.

   LA PUCE "REJEU"/"FINI" EST LA SEULE EXCEPTION AU LIME DOUX DE CE BANDEAU.
   Le lime plein reste reserve a l'action principale et a « toi » dans un
   classement (voir --pe-lime dans les jetons :root) — mais la maquette
   approuvee place explicitement cette puce en lime plein / encre foncee
   (comme .tag dans saison-en-boucle-qa-v1.html), au même titre que le
   remplissage de la barre de progression (.prog i). Ce sont deux usages du
   lime plein AU-DELA des deux rôles documentes dans le jeton — a signaler
   au proprietaire de la direction visuelle, pas a corriger ici sans
   validation : la maquette est deja approuvee par le client.

   Le reste du bandeau (fond, bordure) reprend les tons doux et les jetons
   translucides deja utilises ailleurs dans ce fichier pour --pe-gold
   (voir .pe-tag-warn, .pe-confirm-banner) : la pause de fin de saison
   bascule vers l'ambre, un etat d'attention, jamais une invitation a agir.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-replay-banner {
    display: flex;
    align-items: center;
    gap: var(--pe-s2);
    padding: 6px var(--pe-s3);
    background: var(--pe-lime-wash);
    border-bottom: 1px solid var(--pe-line);
}

.pe-replay-banner-gold {
    background: rgba(255, 197, 61, .10);
    border-bottom-color: rgba(255, 197, 61, .35);
}

/* Puce "Rejeu" / "Fini" : lime plein + encre, PAS lime-soft — voir l'en-tête
   de section. La maquette bascule le texte ET la couleur pendant la pause
   de fin de saison (Maquette 3, Variante A). */
.pe-replay-chip {
    flex: 0 0 auto;
    padding: 3px 6px;
    border-radius: 99px;
    color: var(--pe-ink);
    background: var(--pe-lime);
    font: 900 7px var(--pe-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pe-replay-chip-gold {
    background: var(--pe-gold);
}

/* Deux lignes : le libelle principal, puis un sous-titre plus discret
   (semaine sur mobile, mention QA sur web — voir ReplayBanner.razor.cs).
   Chacune tronque independamment : c'est le nom de saison qui doit ceder
   la place en premier, jamais l'horloge ni la puce. */
.pe-replay-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--pe-txt);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pe-replay-name small {
    display: block;
    overflow: hidden;
    margin-top: 1px;
    color: var(--pe-txt-3);
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pe-replay-clock {
    flex: 0 0 auto;
    color: var(--pe-lime-soft);
    font: 800 10px var(--pe-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pe-replay-banner-gold .pe-replay-clock {
    color: var(--pe-gold);
}

/* Fine barre de progression de la saison, EN DESSOUS du bandeau (pas
   superposee) : c'est un element frere, pas un pseudo-element du bandeau —
   fidele a la maquette, ou .prog est une div separee sous .rbar. Absente
   pendant la pause de fin de saison (voir ReplayBanner.razor). */
.pe-replay-progress {
    display: flex;
    height: 3px;
    background: var(--pe-panel-2);
}

.pe-replay-progress > i {
    display: block;
    height: 100%;
    background: var(--pe-lime);
}

/* ═══════════════════════════════════════════════════════════════════════
   Bilan de fin de saison — Jour de match, Maquette 3 · Variante B (retenue)

   A FUSIONNER DANS premieressai.css, JAMAIS DANS app.css : cette carte vit
   dans PremierEssai.SharedUi (MatchDayHomePage) et le mobile ne charge que
   premieressai.css. Toutes les valeurs viennent des jetons deja definis en
   tête de ce fichier (--pe-panel, --pe-line, --pe-lime, --pe-s2…) — aucune
   couleur en dur. Suit la même convention que css-fragment-myseasons.css et
   css-fragment-replay.css, deja fusionnes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Carte de bilan ----------
   Meme traitement que .pe-myseasons-card-current : un liseré lime, jamais une
   deuxieme couleur de fond concurrente. C'est le SEUL bloc de la carte qui
   porte du lime plein — l'action principale (le bouton "Rejoindre", plus bas)
   et "toi" restent les deux seuls autres rôles du jeton. */
.pe-wrapup-card {
    background: linear-gradient(140deg, var(--pe-lime-wash), var(--pe-panel));
    border: 1px solid rgba(200, 247, 81, .35);
    border-radius: 14px;
    padding: var(--pe-s4);
    margin-bottom: var(--pe-s3);
}

.pe-wrapup-label { color: var(--pe-lime); }

.pe-wrapup-rank {
    display: flex; align-items: baseline; gap: var(--pe-s2);
    margin-top: var(--pe-s2);
}
.pe-wrapup-rank-num { color: var(--pe-lime); }
.pe-wrapup-of { color: var(--pe-txt-2); font-size: 11.5px; }

.pe-wrapup-stats {
    display: flex; flex-wrap: wrap; gap: var(--pe-s2) var(--pe-s4);
    margin-top: var(--pe-s3);
}
.pe-wrapup-stat { color: var(--pe-txt-2); font-size: 12px; }

.pe-wrapup-card .pe-md-textlink { display: inline-block; margin-top: var(--pe-s3); }

/* ---------- "La suite" ----------
   Liseré lime discret : la carte annonce l'action principale de l'ecran,
   mais TANT QUE LE BOUTON EST DESACTIVE il reste neutre (voir .pe-btn:disabled
   dans premieressai.css) — le lime plein n'y va que quand l'action redevient
   possible. */
.pe-wrapup-next {
    background: var(--pe-panel);
    border: 1px solid rgba(200, 247, 81, .3);
    border-radius: 14px;
    padding: var(--pe-s4);
    margin-bottom: var(--pe-s3);
}
.pe-wrapup-next-copy { margin-top: var(--pe-s2); color: var(--pe-txt-2); font-size: 12.5px; }
.pe-wrapup-next-copy strong { color: var(--pe-txt); }

/* Meme ambre que .pe-replay-clock en etat "gold" (pause de fin de saison) :
   un compte a rebours vers un evenement qui n'est pas encore arrive est une
   attente, pas une invitation a agir — jamais le lime de l'action. */
.pe-wrapup-clock { color: var(--pe-gold); font: 800 13px var(--pe-mono); font-variant-numeric: tabular-nums; }

.pe-wrapup-next .pe-btn { width: 100%; box-sizing: border-box; margin-top: var(--pe-s3); }

.pe-wrapup-join-error { margin-top: var(--pe-s2); color: var(--pe-red); font-size: 11.5px; }

/* ---------- Podium public, en petit ----------
   Aucune couleur de rang (or/argent/bronze) : --pe-gold est deja pris par les
   etats d'attente ailleurs dans ce fichier (.pe-tag-warn, .pe-replay-chip-gold),
   et le lime reste reserve a l'action principale et a "toi" dans un classement
   — ces trois lignes ne sont ni l'un ni l'autre. */
.pe-wrapup-podium {
    background: var(--pe-panel);
    border: 1px solid var(--pe-line);
    border-radius: 14px;
    padding: var(--pe-s3) var(--pe-s4);
}
.pe-wrapup-podium-row {
    display: flex; justify-content: space-between; gap: var(--pe-s2);
    padding: 4px 0; color: var(--pe-txt-2); font-size: 11.5px;
}
.pe-wrapup-podium-row span:last-child { color: var(--pe-txt); font-weight: var(--pe-w-head); font-family: var(--pe-mono); }

/* ═══════════════════════════════════════════════════════════════════════
   Mes saisons — « Mon compte · Mes saisons » (Maquette 4)

   A FUSIONNER DANS premieressai.css, JAMAIS DANS app.css : cette page vit
   dans PremierEssai.SharedUi et le mobile ne charge que premieressai.css.
   Toutes les valeurs viennent des jetons deja definis en tête de ce fichier
   (--pe-panel, --pe-line, --pe-lime, --pe-s2…) — aucune couleur en dur.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-myseasons-hero {
    display: flex; flex-wrap: wrap; gap: var(--pe-s5);
    padding: var(--pe-s4); margin-bottom: var(--pe-s4);
    background: linear-gradient(150deg, var(--pe-elevated), var(--pe-panel));
    border: 1px solid var(--pe-line); border-radius: 14px;
}
.pe-myseasons-stat { flex: 1 1 96px; min-width: 88px; }
.pe-myseasons-stat-value {
    display: block; font: var(--pe-w-num) 26px var(--pe-mono);
    color: var(--pe-lime); letter-spacing: -.03em;
}
.pe-myseasons-stat-label {
    display: block; margin-top: 4px; color: var(--pe-txt-3);
    font-size: 10px; font-weight: var(--pe-w-head); letter-spacing: .1em; text-transform: uppercase;
}

.pe-myseasons-list { display: flex; flex-direction: column; gap: var(--pe-s2); margin-bottom: var(--pe-s3); }

.pe-myseasons-card {
    background: var(--pe-panel-2); border: 1px solid var(--pe-line-strong);
    border-radius: 12px; padding: var(--pe-s3);
}
/* La saison en cours se distingue comme partout ailleurs dans l'application :
   un liseré lime, jamais une deuxième couleur de fond concurrente. */
.pe-myseasons-card-current {
    border-color: rgba(200, 247, 81, .45);
    background: linear-gradient(140deg, var(--pe-lime-wash), var(--pe-panel));
    margin-bottom: var(--pe-s4);
}
/* Version repliee sous "Tout voir" : même carte, sans le detail des modules. */
.pe-myseasons-card-compact { padding: 10px var(--pe-s3); }

.pe-myseasons-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pe-s2);
    font-size: 13px; font-weight: var(--pe-w-head); letter-spacing: -.01em;
}

.pe-myseasons-modules { margin-top: var(--pe-s2); display: flex; flex-direction: column; gap: 4px; }
.pe-myseasons-module {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--pe-s2);
    font-size: 11.5px; color: var(--pe-txt-2);
}
.pe-myseasons-module span:last-child { color: var(--pe-txt); font-weight: var(--pe-w-head); }

.pe-myseasons-open { margin-top: var(--pe-s2); width: 100%; }
.pe-myseasons-more { width: 100%; margin-bottom: var(--pe-s4); }

/* Jamais un bouton mort : une phrase discrète explique la purge à la place. */
.pe-myseasons-purged {
    margin: var(--pe-s2) 0 0; color: var(--pe-txt-3); font-size: 11px; line-height: 1.5;
}

/* Neutre par defaut (comme .pe-md-columns / .pe-cards) : ne devient une
   grille deux colonnes que sur grand ecran cote web. La regle >=900px vit
   ici et pas dans app.css car aucune classe web-only n'existe pour cette
   page — a completer si app.css doit un jour reprendre la mise en page.

   L'ORDRE DU DOM RESTE "palmares, puis liste" (le mobile ne charge que ce
   fichier et affiche donc les enfants dans cet ordre, display:contents
   oblige). Sur grand ecran, on replace le palmares en colonne de DROITE par
   grid-column plutôt que de changer l'ordre du DOM — la maquette web montre
   la liste en premier (plus large) et le palmares a côte. */
.pe-myseasons-columns { display: contents; }

@media (min-width: 900px) {
    .pe-myseasons-columns {
        display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--pe-s4); align-items: start;
    }
    .pe-myseasons-columns > .pe-myseasons-hero { grid-column: 2; grid-row: 1; margin-bottom: 0; }
    .pe-myseasons-columns > .pe-myseasons-col-list { grid-column: 1; grid-row: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Classement de la LFMM — /classement-lfmm

   ICI ET PAS DANS app.css. Les règles .pe-div* de la page /ligue vivent
   dans app.css, que MAUI ne charge pas : c'est exactement pourquoi cet
   écran-là ne peut pas descendre dans la RCL tel quel. Tout ce qui suit
   sert aux deux plateformes.
   ═══════════════════════════════════════════════════════════════════════ */

.pe-stand-div {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; margin-bottom: var(--pe-s3); overflow: hidden;
}
.pe-stand-div[open] { border-color: var(--pe-line-strong); }
.pe-stand-div-head {
    display: flex; align-items: center; gap: var(--pe-s2);
    min-height: var(--pe-tap); padding: 0 var(--pe-s3);
    cursor: pointer; list-style: none;
}
.pe-stand-div-head::-webkit-details-marker { display: none; }
.pe-stand-div-head::after {
    content: '⌄'; margin-left: auto; color: var(--pe-txt-3);
    font-size: 15px; line-height: 1; transform: translateY(-3px);
    transition: transform .15s ease;
}
.pe-stand-div[open] > .pe-stand-div-head::after { transform: rotate(180deg); }
.pe-stand-div-head:hover { background: var(--pe-panel-2); }
.pe-stand-div-name { font-size: 13px; font-weight: var(--pe-w-head); letter-spacing: -.01em; }
.pe-stand-div-count { font-size: 12px; color: var(--pe-txt-3); margin-left: auto; }
.pe-stand-div-count::after { content: ' éq.'; font-size: 10px; }
.pe-stand-div-head::after { margin-left: var(--pe-s2); }

/* Un vrai <table> : voir StandingsTable.razor. */
.pe-stand { width: 100%; border-collapse: collapse; }
.pe-stand th {
    font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pe-txt-3); background: var(--pe-panel-2);
    padding: 7px 6px; text-align: right; border-top: 1px solid var(--pe-line);
    white-space: nowrap;
}
.pe-stand th abbr { text-decoration: none; }
.pe-stand th.pe-stand-th-rank { text-align: center; width: 30px; }
.pe-stand th.pe-stand-th-team { text-align: left; width: 100%; }
.pe-stand td {
    height: var(--pe-tap); padding: 0 6px; text-align: right;
    font-size: 13px; white-space: nowrap; border-top: 1px solid var(--pe-line);
}
.pe-stand-c-rank { text-align: center; color: var(--pe-txt-3); font-size: 12px; }
.pe-stand-c-team { text-align: left; }
.pe-stand-c-streak { width: 40px; text-align: right; }
.pe-stand-team { display: flex; align-items: center; gap: var(--pe-s2); min-width: 0; }
.pe-stand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-stand-rec { font-weight: var(--pe-w-num); }
.pe-stand-pct, .pe-stand-pf, .pe-stand-pa { color: var(--pe-txt-2); }

/* SÉQUENCE : uniquement les victoires consécutives, jamais les défaites.
   « D4 » serait un classement négatif — AGENTS.md, contrainte 3. */
.pe-stand-streak { color: var(--pe-lime-soft); font-weight: 800; font-size: 11px; }

/* « TOI » — le seul emploi du lime plein sur cet écran. */
.pe-stand-mine { background: var(--pe-lime-wash); box-shadow: inset 3px 0 0 var(--pe-lime); }
.pe-stand-mine .pe-stand-name { color: var(--pe-lime); font-weight: var(--pe-w-head); }
.pe-stand-you {
    font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pe-ink); background: var(--pe-lime);
    padding: 2px 6px; border-radius: 99px; flex: 0 0 auto;
}

.pe-stand-legend {
    font-size: 11px; color: var(--pe-txt-3); line-height: 1.5;
    margin: var(--pe-s3) 0 var(--pe-s6);
}

/* Carte de résumé « mes équipes ». */
.pe-stand-mine-card {
    background: linear-gradient(150deg, var(--pe-elevated), var(--pe-panel));
    border: 1px solid var(--pe-line); border-radius: 14px;
    padding: var(--pe-s3) var(--pe-s3) 0; margin-bottom: var(--pe-s4);
}
.pe-stand-mine-row {
    display: flex; align-items: center; gap: var(--pe-s3);
    min-height: var(--pe-row); border-top: 1px solid var(--pe-line);
    text-decoration: none; color: inherit;
}
.pe-stand-mine-card .pe-label + .pe-stand-mine-row { border-top: 0; }
.pe-stand-mine-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pe-stand-mine-copy strong { font-size: 14px; font-weight: var(--pe-w-head); }
.pe-stand-mine-copy small { font-size: 11px; color: var(--pe-txt-3); }
.pe-stand-mine-rec { font-size: 13px; color: var(--pe-txt-2); }
.pe-stand-mine-pos { font-size: 19px; font-weight: var(--pe-w-num); color: var(--pe-lime); }

/* Mini-classement inséré dans Jour de match. */
.pe-stand-mini-body {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; overflow: hidden;
}
.pe-stand-mini-body .pe-stand th { background: transparent; border-top: 0; }

.pe-stand-details { border-top: 1px solid var(--pe-line); }
.pe-stand-details > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--pe-s2); min-height: var(--pe-tap); padding: 0 var(--pe-s3);
    color: var(--pe-txt); font-size: 13px; font-weight: var(--pe-w-head);
    cursor: pointer; list-style: none;
}
.pe-stand-details > summary::-webkit-details-marker { display: none; }
.pe-stand-details > summary:hover { background: var(--pe-panel-2); }
.pe-stand-details > summary:focus-visible {
    outline: 2px solid var(--pe-lime); outline-offset: -3px;
}
.pe-stand-details[open] > summary .pe-icon { transform: rotate(90deg); }
.pe-stand-details-body { padding: 0 var(--pe-s3) var(--pe-s3); }
.pe-stand-details-note {
    margin: var(--pe-s2) 0 var(--pe-s3); color: var(--pe-txt-2);
    font-size: 12px; line-height: 1.5; max-width: 70ch;
}
.pe-stand-detail-team { padding: var(--pe-s4) 0; border-top: 1px solid var(--pe-line); }
.pe-stand-detail-team:last-child { padding-bottom: 0; }
.pe-stand-detail-team h3 {
    display: flex; align-items: center; gap: var(--pe-s2);
    margin: 0 0 var(--pe-s3); font-size: 14px; font-weight: var(--pe-w-head);
    overflow-wrap: anywhere;
}
.pe-stand-detail-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pe-s3) var(--pe-s4); margin: 0;
}
.pe-stand-detail-grid dt { font-size: 12px; font-weight: var(--pe-w-body); color: var(--pe-txt-2); }
.pe-stand-detail-grid dd { margin: var(--pe-s1) 0 0; font-size: 16px; font-weight: var(--pe-w-head); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
    .pe-stand-detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Aide contextuelle — règles des jeux et orientation dans l'application

   Un <details> natif garde l'aide facultative, fonctionne sans JavaScript sur
   le web comme dans MAUI et conserve les comportements clavier attendus.
   ═══════════════════════════════════════════════════════════════════════════ */
.pe-context-help {
    margin: 0 0 var(--pe-s4);
    background: var(--pe-panel);
    border: 1px solid var(--pe-line);
    border-radius: 14px;
    overflow: hidden;
}
.pe-context-help[open] { border-color: var(--pe-line-strong); }
.pe-context-help-trigger {
    display: flex; align-items: center; gap: var(--pe-s3);
    min-height: var(--pe-tap); padding: 8px var(--pe-s3);
    cursor: pointer; list-style: none; user-select: none;
}
.pe-context-help-trigger::-webkit-details-marker { display: none; }
.pe-context-help-trigger:hover { background: var(--pe-panel-2); }
.pe-context-help-trigger:focus-visible {
    outline: 2px solid var(--pe-lime); outline-offset: -3px;
}
.pe-context-help-mark {
    display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
    border: 1px solid rgba(200, 247, 81, .48); border-radius: 50%;
    color: var(--pe-lime); background: var(--pe-lime-wash);
    font: 900 16px/1 var(--pe-mono);
}
.pe-context-help-trigger-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pe-context-help-trigger-copy strong { color: var(--pe-txt); font-size: 12.5px; font-weight: var(--pe-w-head); }
.pe-context-help-trigger-copy small {
    color: var(--pe-txt-3); font-size: 10.5px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-context-help-chevron {
    margin-left: auto; color: var(--pe-txt-3); font-size: 17px;
    transform: translateY(-2px); transition: transform .15s ease;
}
.pe-context-help[open] > .pe-context-help-trigger .pe-context-help-chevron { transform: rotate(180deg) translateY(2px); }
.pe-context-help-panel {
    padding: var(--pe-s4); border-top: 1px solid var(--pe-line);
    background: linear-gradient(145deg, var(--pe-panel-2), var(--pe-panel));
}
.pe-context-help-panel h2 {
    margin: 5px 0 var(--pe-s3); color: var(--pe-txt);
    font-size: 20px; line-height: 1.12; letter-spacing: -.035em;
}
.pe-context-help-grid { display: grid; gap: var(--pe-s3); }
.pe-context-help-grid section {
    padding-left: var(--pe-s3); border-left: 2px solid var(--pe-line-strong);
}
.pe-context-help-grid h3 {
    margin: 0 0 4px; color: var(--pe-lime-soft);
    font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pe-context-help-grid p { margin: 0; color: var(--pe-txt-2); font-size: 12px; line-height: 1.55; }
.pe-context-help-link {
    display: inline-flex; align-items: center; gap: var(--pe-s2);
    min-height: var(--pe-tap); margin-top: var(--pe-s2);
    color: var(--pe-lime-soft); font-size: 12px; font-weight: var(--pe-w-head); text-decoration: none;
}
.pe-context-help-destinations { display: flex; flex-direction: column; }
.pe-context-help-destinations > a {
    display: flex; align-items: center; gap: var(--pe-s3); min-height: 62px;
    padding: var(--pe-s2) 0; color: inherit; text-decoration: none;
    border-top: 1px solid var(--pe-line);
}
.pe-context-help-destinations > a:first-child { border-top: 0; }
.pe-context-help-destination-mark {
    display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px;
    border-radius: 8px; background: var(--pe-elevated); color: var(--pe-lime-soft);
    font: 800 12px/1 var(--pe-mono);
}
.pe-context-help-destinations a > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.pe-context-help-destinations strong { font-size: 12.5px; }
.pe-context-help-destinations small { color: var(--pe-txt-3); font-size: 10.5px; line-height: 1.4; }
.pe-context-help-destinations b { color: var(--pe-txt-3); font-size: 15px; }

@media (min-width: 760px) {
    .pe-context-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pe-context-help-panel { padding: var(--pe-s5); }
    .pe-context-help-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--pe-s5); }
    .pe-context-help-destinations > a:nth-child(2) { border-top: 0; }
}

.pe-estrade-theme-dark { color-scheme:dark; }
.pe-estrade-theme-light {
    color-scheme:light;
    --pe-bg:#f3f5ef; --pe-panel:#ffffff; --pe-panel-2:#e8ede2;
    --pe-line:#cbd3c3; --pe-line-strong:#829078; --pe-elevated:#e8ede2;
    --pe-txt:#172018; --pe-txt-2:#40503d; --pe-txt-3:#576550;
    --pe-dim:var(--pe-txt-2); --pe-dimmer:var(--pe-txt-3);
    --pe-lime:#456600; --pe-lime-soft:#456600; --pe-lime-wash:rgba(105,145,25,.09);
    --pe-ink:#ffffff; --pe-red:#b52836; --pe-gold:#805900;
    background:var(--pe-bg); color:var(--pe-txt);
}
.pe-estrade-theme-light .pe-themes-hero {
    background:var(--pe-panel-2); color:var(--pe-txt);
}
.pe-estrade-theme-light .pe-themes-hero p,
.pe-estrade-theme-light .pe-themes-impact span { color:var(--pe-txt-2); }
.pe-estrade-theme-light .pe-themes-hero::after { border-color:rgba(105,145,25,.09); }
.pe-estrade-theme-light .pe-themes-impact { background:var(--pe-lime-wash); }
.pe-theme-estrade-light {
    --theme-primary:#456600; --theme-ink:#ffffff;
    background:#ffffff; color:#172018; border-color:#cbd3c3;
}
.pe-theme-estrade-light > span:nth-child(2) small { color:#576550; }
.pe-theme-estrade-light.is-active { background:#edf4df; }
.pe-theme-estrade-dark {
    --theme-primary:#c8f751; --theme-ink:#0a0d12;
    background:#151b25; color:#eaf0f7; border-color:#3e4a5c;
}
.pe-theme-estrade-dark > span:nth-child(2) small { color:#a7b4c4; }
.pe-theme-estrade-dark.is-active { background:#222e1d; }
.pe-theme-estrade-light .pe-theme-default { background:#c8f751; color:#172018; }
.pe-theme-estrade-dark .pe-theme-default { background:#0a0d12; color:#c8f751; }
.pe-estrade-theme-light .pe-colors-promo { background:var(--pe-panel-2); }
.pe-estrade-theme-light .pe-theme-status-comingsoon,
.pe-estrade-theme-light .pe-surv-alert,
.pe-estrade-theme-light .pe-surv-eliminated .pe-md-kicker,
.pe-estrade-theme-light .pe-surv-eliminated p a { color:var(--pe-gold); }
.pe-estrade-theme-light .pe-units-trend-down { color:var(--pe-red); }
.pe-estrade-theme-light .pe-btn:not(.pe-btn-ghost):not(:disabled),
.pe-estrade-theme-light .pe-theme-action-buy { background:#c8f751; color:#172018; }