/* 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;
    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-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 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.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; }

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

/* ---------- 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); }

/* ---------- 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); }