/* Direction visuelle « Estrade » v2 — web.

   Les jetons (:root) vivent dans PremierEssai.SharedUi/wwwroot/premieressai.css,
   chargé juste avant ce fichier et partagé avec le MAUI. Ne pas les redéfinir
   ici : ça ferait diverger le mobile et le web sans qu'on s'en aperçoive.

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

/* La base (html, body, reset, focus) vit dans premieressai.css : elle doit être
   identique sur les deux plateformes. C'est sa présence ICI SEULEMENT qui faisait
   s'afficher l'application mobile sur fond blanc. */

/* ---------- Coquille publique ---------- */
.pe-public { min-height: 100vh; display: flex; flex-direction: column; }

.pe-topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 18px 24px; border-bottom: 1px solid var(--pe-line);
}
.pe-logo, .pe-auth-brand {
    font-size: 19px; font-weight: 800; letter-spacing: -.02em; text-decoration: none;
}
.pe-topbar-link {
    font-size: 13px; font-weight: 700; color: var(--pe-dim); text-decoration: none;
}
.pe-topbar-link:hover { color: var(--pe-lime); }
.pe-topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pe-topbar-actions .pe-topbar-link { display: inline-flex; align-items: center; min-height: 48px; }
.pe-language-switch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; min-height: 48px; padding: 0 10px;
    border: 1px solid var(--pe-line); border-radius: 8px;
    color: var(--pe-txt); font-size: 13px; font-weight: 800; text-decoration: none;
}
.pe-language-switch:hover { color: var(--pe-lime); border-color: var(--pe-lime); }
.pe-language-switch:focus-visible { outline: 2px solid var(--pe-lime); outline-offset: 3px; }

.pe-public-main { flex: 1; max-width: 940px; margin: 0 auto; padding: 0 24px 64px; width: 100%; }

/* ---------- Accueil ---------- */
.pe-hero-lp { padding: 72px 0 56px; }
.pe-eyebrow {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    font-weight: var(--pe-w-head); color: var(--pe-lime);
}
.pe-h1 {
    font-size: clamp(34px, 6vw, 56px); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.05; margin: 16px 0 18px;
}
.pe-lead { font-size: 17px; color: var(--pe-dim); max-width: 54ch; margin: 0; }

.pe-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Le vocabulaire partage (boutons, cartes, classements, rangees d'equipes,
   etiquettes, titres de page et de section) a ete DEPLACE dans
   PremierEssai.SharedUi/wwwroot/premieressai.css : le mobile ne charge que
   cette feuille-la. Ne pas le redefinir ici. */

/* ---------- Modules ---------- */
.pe-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pe-mod {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; padding: 22px;
}
.pe-mod-num {
    font-size: 12px; font-weight: var(--pe-w-head);
    color: var(--pe-lime-soft); letter-spacing: .1em;
}
.pe-h2 { font-size: 20px; font-weight: var(--pe-w-head); letter-spacing: -.015em; margin: 8px 0 10px; }
.pe-mod p { font-size: 14.5px; color: var(--pe-dim); margin: 0 0 10px; }
.pe-mod-note {
    font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--pe-dimmer) !important; margin: 0 !important;
}

/* ---------- Engagements ---------- */
.pe-promise {
    margin-top: 40px; background: linear-gradient(150deg, var(--pe-elevated), var(--pe-panel));
    border: 1px solid var(--pe-line); border-radius: 16px; padding: 28px;
}
.pe-promise-list { margin: 12px 0 0; padding-left: 20px; }
.pe-promise-list li { font-size: 14.5px; color: var(--pe-dim); margin-bottom: 12px; }
.pe-promise-list strong { color: var(--pe-txt); font-weight: 700; }

.pe-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--pe-line); }
.pe-foot p { font-size: 12.5px; color: var(--pe-dimmer); max-width: 70ch; }

/* ---------- Authentification ----------
   Les champs, étiquettes et messages d'erreur vivent dans premieressai.css :
   MobileLogin les utilise et ne charge que cette feuille-là. */
.pe-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.pe-auth { width: 100%; max-width: 380px; }


.pe-auth-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--pe-dim); margin: 18px 0 22px;
}

/* ---------- Coquille authentifiee ---------- */
.pe-shell { min-height: 100vh; display: flex; flex-direction: column; }
.pe-appbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--pe-line);
}
.pe-brand { display:flex; align-items:center; gap:10px; color:var(--pe-txt); font-size: 17px; font-weight: 800; letter-spacing: -.02em; text-decoration:none; }
.pe-main { flex: 1; max-width: 620px; margin: 0 auto; padding: 20px 16px 48px; width: 100%; }
.pe-logout { background: none; border: 0; color: var(--pe-txt-3); font-size: 12.5px;
             font-weight: var(--pe-w-head); cursor: pointer; padding: 0 var(--pe-s2);
             min-height: 44px; }
.pe-logout:hover { color: var(--pe-red); }

/* ---------- Pilotage de la simulation ---------- */
/* La page admin a besoin de plus de largeur que les pages de jeu. */
.pe-main:has(.pe-admin-table) { max-width: 860px; }
.pe-main:has(.pe-surv-web),
.pe-main:has(.pe-units-web),
.pe-main:has(.pe-games-web) { max-width: 1040px; }

/* ---------- Largeur de bureau ----------
   620 px etait la largeur de TOUTES les pages sans variante « -web » : Jour de
   match, Horaire, Mes franchises, Classements, Amis. Sur un ecran de 1500 px,
   les deux tiers restaient vides pendant que les listes s'entassaient dans une
   colonne de telephone.

   Trois modules avaient deja leur largeur (1040 px) parce qu'ils ont une page
   d'enveloppe cote web. Les pages PARTAGEES avec MAUI n'en ont pas, et ne
   peuvent pas en avoir sans dedoubler leurs routes — c'est la coquille qui doit
   donc s'elargir.

   Le palier est a 1000 px et non au point de rupture mobile : entre 760 et
   1000 px, une colonne unique reste le bon choix. */
@media (min-width: 1000px) {
    .pe-main { max-width: 960px; }

    /* « A venir » et « Derniers resultats » se lisent en parallele plutôt que
       l'un sous l'autre : les deux repondent a la même question — qu'est-ce qui
       s'est passe, qu'est-ce qui s'en vient. */
    .pe-md-columns {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px; align-items: start;
    }
    .pe-md-columns > .pe-md-section { margin-top: 0; }

    /* Les cartes de ligue tiennent deux par rangee : a 960 px, une carte de
       80 px de haut sur toute la largeur ne dit rien de plus qu'a 620. */
    .pe-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    /* La marge verticale des cartes ferait doublon avec le « gap » et
       desalignerait les deux colonnes. */
    .pe-cards > .pe-card { margin-top: 0; }
}

.pe-admin-row { margin: 18px 0; }

/* ---------- Découverte · Montre tes couleurs (web, pilotée par config) ---------- */
.pe-colors-promo {
    position:relative; isolation:isolate; overflow:hidden;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.55fr);
    gap:22px; align-items:center; margin:18px 0 22px; padding:22px 24px;
    border:1px solid color-mix(in srgb,var(--pe-lime) 28%,var(--pe-line));
    border-radius:15px; background:linear-gradient(118deg,#17201b 0%,var(--pe-panel) 58%,#161823 100%);
}
.pe-colors-promo::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 84% 20%,rgba(200,247,81,.1),transparent 36%); }
.pe-club-theme-light .pe-colors-promo { background:var(--pe-panel-2); color:var(--pe-txt); }
.pe-colors-promo-kicker { color:var(--pe-lime); font-size:9px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.pe-colors-promo h2 { margin:5px 0 7px; font-size:clamp(21px,3vw,30px); line-height:1.02; letter-spacing:-.035em; }
.pe-colors-promo p { max-width:53ch; margin:0; color:var(--pe-txt-2); font-size:12.5px; line-height:1.55; }
.pe-colors-promo p strong { color:var(--pe-txt); }
.pe-colors-promo-action { display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:14px; color:var(--pe-lime); font-size:12px; font-weight:800; text-decoration:none; }
.pe-colors-promo-action span { transition:transform .16s ease; }
.pe-colors-promo-action:hover span { transform:translateX(3px); }
.pe-colors-promo-action:focus-visible { outline:2px solid var(--pe-lime); outline-offset:4px; border-radius:3px; }
.pe-colors-promo-flags { display:grid; gap:7px; transform:rotate(-4deg); }
.pe-colors-promo-flags span { min-height:43px; display:flex; align-items:center; padding:0 15px; border-radius:5px; font:900 12px var(--pe-mono); letter-spacing:.16em; box-shadow:0 7px 18px rgba(0,0,0,.2); }
.pe-colors-promo-flags .is-barons { justify-content:flex-end; background:#19365e; color:#fff8f1; }
.pe-colors-promo-flags .is-pirates { background:#831435; color:#ffcd02; }
@media (max-width:620px) {
    .pe-colors-promo { grid-template-columns:1fr; padding:20px; }
    .pe-colors-promo-flags { grid-template-columns:1fr 1fr; transform:none; }
    .pe-colors-promo-flags span { justify-content:center; min-height:35px; padding:0 8px; font-size:9px; }
}

.pe-admin-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: linear-gradient(150deg, var(--pe-elevated), var(--pe-panel));
    border: 1px solid var(--pe-line); border-radius: 14px; padding: 18px; margin: 18px 0;
}

.pe-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.pe-admin-actions .pe-btn { border: 0; cursor: pointer; font-family: inherit; }
.pe-admin-actions .pe-btn-ghost { border: 1px solid var(--pe-line); }
.pe-admin-actions .pe-btn:disabled { opacity: .4; cursor: not-allowed; }

.pe-admin-warn, .pe-admin-ok {
    border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin: 14px 0;
}
.pe-admin-warn {
    background: rgba(255, 197, 61, .1); border: 1px solid rgba(255, 197, 61, .35); color: var(--pe-gold);
}
.pe-admin-ok {
    background: rgba(200, 247, 81, .1); border: 1px solid rgba(200, 247, 81, .35); color: var(--pe-lime);
}

.pe-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 24px; }
.pe-admin-table th {
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pe-txt-3);
    font-weight: var(--pe-w-head); text-align: left; padding: 0 8px 8px 0;
}
.pe-admin-table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--pe-line); color: var(--pe-dim); }
.pe-admin-table tr.pe-admin-current td { color: var(--pe-lime); }


/* ---------- Navigation authentifiee ---------- */
.pe-nav {
    display: flex; gap: 4px; padding: 0 16px;
    border-bottom: 1px solid var(--pe-line); overflow-x: auto;
}
.pe-nav-link {
    font-size: 13px; font-weight: var(--pe-w-head); color: var(--pe-txt-2);
    text-decoration: none; padding: 0 var(--pe-s3); white-space: nowrap;
    min-height: var(--pe-tap); display: inline-flex; align-items: center;
    border-bottom: 2px solid transparent;
}
.pe-nav-link:hover { color: var(--pe-txt); }
.pe-nav-link.active { color: var(--pe-lime); border-bottom-color: var(--pe-lime); }


.pe-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pe-tile.pe-tile-survivor { background: linear-gradient(135deg, var(--pe-elevated), var(--pe-panel)); }
.pe-tile-survivor .pe-tile-num { color: var(--pe-lime); }

@media (min-width: 760px) {
    .pe-surv-web { padding-top: 8px; }
    .pe-surv-web .pe-surv-head .pe-page-title { font-size: clamp(28px, 4vw, 42px); }
    .pe-surv-web .pe-surv-head { align-items: center; }
    .pe-surv-web .pe-surv-shields { font-size: 22px; gap: 8px; }
    .pe-surv-web .pe-surv-views { width: 420px; margin-bottom: 26px; }
    .pe-surv-web .pe-surv-status { padding: 16px 18px; }
    .pe-surv-web .pe-surv-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pe-surv-web .pe-surv-game { padding: 14px; }
    .pe-surv-web .pe-surv-team { min-height: 70px; }
    .pe-surv-web .pe-surv-confirm { margin-inline: 0; padding-inline: 18px; border: 1px solid rgba(200,247,81,.22); border-radius: 14px 14px 0 0; }
    .pe-surv-web .pe-surv-onboard { max-width: 680px; margin-inline: auto; padding: 48px 54px; }
    .pe-surv-web .pe-surv-sealed { max-width: 680px; margin-inline: auto; padding: 42px; }
    .pe-surv-web .pe-surv-reveal-hero { padding: 32px 34px; }
    /* Deux colonnes de largeur egale, quel que soit leur contenu. La version
       precedente s'appuyait sur « :has(.pe-surv-standing) » et sur des blocs
       inline — la mise en page se defaisait des que le classement changeait de
       forme (peu de joueurs, aucun ami). Une grille ne peut pas tomber. */
    .pe-surv-web .pe-surv-reveal-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px; align-items: start;
    }
    /* Les sections portent deja leur marge haute; dans la grille elle
       decalerait les deux colonnes l'une par rapport a l'autre. */
    .pe-surv-web .pe-surv-reveal-grid > .pe-surv-section { margin-top: 0; }
}
.pe-tile {
    display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; padding: 18px;
}
.pe-tile:hover { border-color: var(--pe-lime); }
.pe-tile-num {
    font-size: 11px; font-weight: var(--pe-w-head);
    color: var(--pe-lime-soft); letter-spacing: .1em;
}
.pe-tile-name { font-size: 16px; font-weight: var(--pe-w-head); letter-spacing: -.015em; }
.pe-tile-note { font-size: 12px; color: var(--pe-dim); }


/* ---------- Barre de saison ---------- */
.pe-seasonbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 16px; border-bottom: 1px solid var(--pe-line);
    background: var(--pe-panel);
}
.pe-seasonbar-label {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: var(--pe-w-head); color: var(--pe-txt-3);
}
.pe-seasonbar-select {
    background: var(--pe-panel-2); border: 1px solid var(--pe-line);
    color: var(--pe-txt); border-radius: 8px; padding: 6px 9px;
    font-size: 12.5px; font-weight: 600;
}
/* Le chemin de retour quand la boucle a change de saison sous les pieds de
   l'usager. Discret : c'est une sortie de secours, pas une action de l'ecran —
   le lime plein reste reserve a l'action principale et a « toi ». */
.pe-seasonbar-reset {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--pe-line-strong);
    border-radius: 99px;
    background: transparent;
    color: var(--pe-txt-2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.pe-seasonbar-reset:hover { color: var(--pe-txt); border-color: var(--pe-txt-3); }

.pe-seasonbar-badge {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255,197,61,.15); color: var(--pe-gold);
    padding: 4px 8px; border-radius: 5px;
}

/* FocusOnNavigate place le focus sur le h1 a chaque navigation, ce qui dessine
   un cadre autour du titre. On ne retire l'anneau QUE pour ce cas — le focus
   reste parfaitement visible sur les liens, champs et boutons, ou il sert
   reellement a la navigation au clavier. */
h1:focus, h1:focus-visible { outline: none; }

.pe-admin-block {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 14px; padding: 18px; margin-bottom: 20px;
}
.pe-admin-block code {
    font-family: var(--pe-mono); font-size: 11.5px;
    background: var(--pe-panel-2); padding: 2px 5px; border-radius: 4px;
}

/* ---------- Rapports de vente des thèmes (web admin seulement) ---------- */
.pe-sales-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:22px; }
.pe-sales-head h1 { margin:4px 0 6px; }
.pe-sales-head p { margin:0; color:var(--pe-dim); font-size:13px; }
.pe-sales-period { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.pe-sales-period label { display:grid; gap:5px; color:var(--pe-dim); font-size:11px; font-weight:700; }
.pe-sales-period input, .pe-sales-email { min-height:42px; box-sizing:border-box; background:var(--pe-panel-2); color:var(--pe-txt); border:1px solid var(--pe-line); border-radius:8px; padding:0 10px; font:inherit; }
.pe-sales-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.pe-sales-kpis article { min-height:112px; padding:17px; box-sizing:border-box; background:var(--pe-panel); border:1px solid var(--pe-line); border-radius:12px; display:grid; align-content:center; }
.pe-sales-kpis article.is-club { border-color:color-mix(in srgb,var(--pe-lime) 45%,var(--pe-line)); }
.pe-sales-kpis span, .pe-sales-detail-total span { color:var(--pe-dim); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.pe-sales-kpis strong { font-size:25px; letter-spacing:-.03em; margin:5px 0 2px; }
.pe-sales-kpis small { color:var(--pe-dimmer); font-size:11px; }
.pe-sales-toolbar, .pe-sales-confirm { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; margin-bottom:14px; background:var(--pe-panel-2); border:1px solid var(--pe-line); border-radius:12px; }
.pe-sales-toolbar div, .pe-sales-confirm > div:first-child { display:grid; gap:3px; }
.pe-sales-toolbar strong, .pe-sales-confirm strong { font-size:13px; }
.pe-sales-toolbar span, .pe-sales-confirm span { color:var(--pe-dim); font-size:11.5px; }
.pe-sales-confirm { border-color:color-mix(in srgb,var(--pe-gold) 55%,var(--pe-line)); }
.pe-sales-confirm > div:last-child { display:flex; gap:8px; }
.pe-sales-notice { margin-bottom:14px; padding:12px 14px; color:var(--pe-lime); background:color-mix(in srgb,var(--pe-lime) 8%,var(--pe-panel)); border-left:3px solid var(--pe-lime); font-size:12.5px; }
.pe-sales-notice.is-error { color:var(--pe-danger,#ff8378); border-color:var(--pe-danger,#ff8378); }
.pe-sales-table-block { padding:0; overflow:hidden; }
.pe-sales-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:18px; border-bottom:1px solid var(--pe-line); }
.pe-sales-section-title h2 { font-size:18px; margin:3px 0 0; }
.pe-sales-section-title > span { color:var(--pe-dim); font-size:12px; }
.pe-sales-section-title > span strong { color:var(--pe-txt); }
.pe-sales-table-scroll { overflow-x:auto; }
.pe-sales-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.pe-sales-table th { padding:10px 12px; color:var(--pe-dimmer); font-size:10px; text-transform:uppercase; letter-spacing:.08em; text-align:left; white-space:nowrap; }
.pe-sales-table td { padding:11px 12px; border-top:1px solid var(--pe-line); vertical-align:middle; white-space:nowrap; }
.pe-sales-table tr.is-selected td { background:color-mix(in srgb,var(--pe-lime) 5%,var(--pe-panel)); }
.pe-sales-club-link { display:flex; align-items:center; gap:9px; min-height:40px; border:0; background:transparent; color:var(--pe-txt); cursor:pointer; font:inherit; text-align:left; }
.pe-sales-club-link b { display:grid; place-items:center; width:40px; height:30px; border:1px solid var(--pe-line-strong); border-radius:6px; color:var(--pe-lime); font-size:10px; letter-spacing:.06em; }
.pe-sales-club-link span { font-weight:700; }
.pe-sales-due { color:var(--pe-lime); font-weight:800; }
.pe-sales-email { width:230px; min-height:38px; }
.pe-sales-row-actions { display:flex; gap:6px; }
.pe-sales-detail { padding:0; }
.pe-sales-detail-total { display:grid; justify-items:end; gap:3px; }
.pe-sales-detail-total strong { color:var(--pe-lime); font-size:23px; }
.pe-sales-mini-kpis { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--pe-line); }
.pe-sales-mini-kpis span { padding:7px 10px; background:var(--pe-panel-2); border-radius:6px; color:var(--pe-dim); font-size:11.5px; }
.pe-sales-mini-kpis b { color:var(--pe-txt); }
.pe-sales-ledger code { white-space:nowrap; }
.pe-sales-empty { padding:22px 18px; color:var(--pe-dim); font-size:13px; }
@media (max-width:900px) {
    .pe-sales-head { align-items:flex-start; flex-direction:column; }
    .pe-sales-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
    .pe-sales-period { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .pe-sales-period .pe-btn { grid-column:1 / -1; }
    .pe-sales-period input { width:100%; }
    .pe-sales-kpis { grid-template-columns:1fr; }
    .pe-sales-toolbar, .pe-sales-confirm { align-items:stretch; flex-direction:column; }
    .pe-sales-toolbar .pe-btn, .pe-sales-confirm .pe-btn { width:100%; }
    .pe-sales-confirm > div:last-child { flex-direction:column; }
    .pe-sales-section-title { align-items:flex-start; flex-direction:column; }
}

/* La composition de franchise est partagee avec MAUI; ses styles vivent dans
   PremierEssai.SharedUi/wwwroot/premieressai.css. */

/* ---------- Barre d'application ---------- */
.pe-appbar-right { display: flex; align-items: center; gap: 14px; }
.pe-appbar-link { font-size: 12.5px; font-weight: 700; color: var(--pe-dim); text-decoration: none; }
.pe-appbar-link:hover { color: var(--pe-lime); }
.pe-club-themed .pe-appbar { background:color-mix(in srgb,var(--pe-club-primary) 42%,#121720); border-color:color-mix(in srgb,var(--pe-club-primary) 48%,var(--pe-line)); }
.pe-club-themed .pe-main { background:linear-gradient(180deg,color-mix(in srgb,var(--pe-club-primary) 7%,var(--pe-bg)),var(--pe-bg) 290px); }
.pe-club-theme-barons .pe-appbar { background:var(--pe-club-primary); color:var(--pe-club-ink); border-color:color-mix(in srgb,var(--pe-club-ink) 24%,transparent); }
.pe-club-theme-barons .pe-brand { color:var(--pe-club-ink); }
.pe-club-theme-barons .pe-appbar-link { color:color-mix(in srgb,var(--pe-club-ink) 78%,transparent); }
.pe-club-theme-pirates .pe-appbar { background:var(--pe-club-primary); color:var(--pe-club-ink); border-color:color-mix(in srgb,var(--pe-club-ink) 28%,transparent); }
.pe-club-theme-pirates .pe-brand { color:var(--pe-club-ink); }
.pe-club-theme-pirates .pe-brand-accent { color:#e86590; }
.pe-club-theme-pirates .pe-appbar-link { color:color-mix(in srgb,var(--pe-club-ink) 80%,#f4f0e7); }
.pe-club-theme-grizzlis .pe-appbar { background:var(--pe-club-primary); color:var(--pe-club-ink); border-color:color-mix(in srgb,#b7def3 28%,transparent); }
.pe-club-theme-grizzlis .pe-brand { color:var(--pe-club-ink); }
.pe-club-theme-grizzlis .pe-brand-accent { color:#b7def3; }
.pe-club-theme-grizzlis .pe-appbar-link { color:#c7d9e6; }

/* ---------- Avertissement du profil ---------- */
.pe-warn-block {
    background: rgba(255, 197, 61, .08); border: 1px solid rgba(255, 197, 61, .35);
    border-radius: 12px; padding: 16px; margin-bottom: 22px;
}
.pe-warn-title { font-size: 14px; font-weight: var(--pe-w-head); color: var(--pe-gold); margin-bottom: 8px; }
.pe-warn-block p { font-size: 13px; color: var(--pe-dim); margin: 0 0 8px; line-height: 1.6; }
.pe-warn-block strong { color: var(--pe-txt); }

/* Indice contextuel : signale sans bloquer */
.pe-nudge {
    margin-top: 10px; font-size: 12.5px; color: var(--pe-gold);
    background: rgba(255, 197, 61, .1); border-left: 2px solid var(--pe-gold);
    border-radius: 0; padding: 10px 12px;
}
.pe-nudge-note { display: block; color: var(--pe-dimmer); font-size: 11.5px; margin-top: 4px; }

/* ---------- Classement ---------- */


/* ---------- Divisions depliables ---------- */
.pe-div {
    background: var(--pe-panel); border: 1px solid var(--pe-line);
    border-radius: 12px; margin-bottom: 8px; overflow: hidden;
}
.pe-div[open] { border-color: var(--pe-line-strong); }

.pe-div-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none;
}
.pe-div-head::-webkit-details-marker { display: none; }
.pe-div-head::after {
    content: "▾"; color: var(--pe-dimmer); font-size: 11px;
    transition: transform .15s ease;
}
.pe-div[open] .pe-div-head::after { transform: rotate(180deg); }
.pe-div-head:hover { background: var(--pe-panel-2); }

.pe-div-count {
    font-size: 12px; font-weight: var(--pe-w-head);
    color: var(--pe-txt-2); margin-left: auto;
}

.pe-div-body { padding: 2px 13px 12px; border-top: 1px solid var(--pe-line); }