/* ==========================================================
   Accueil PHS 2026
   ========================================================== */

.accueil {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
        "entete  entete"
        "princ   cote";
    gap: 2rem 1.75rem;
}
.entete-ligue      { grid-area: entete; }
.accueil__principal { grid-area: princ; display: grid; gap: 2rem; align-content: start; }
.accueil__cote     { grid-area: cote; display: grid; gap: 1rem; align-content: start; }

/* ---------- En-tête de la ligue ---------- */
.entete-ligue {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--trait);
}
.entete-ligue h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    letter-spacing: -.01em;
}
.entete-ligue__statut {
    margin: .5rem 0 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    color: var(--texte-2);
}
.pastille {
    background: var(--surface-2);
    border: 1px solid var(--trait);
    color: var(--texte);
    border-radius: 999px;
    padding: .1rem .7rem;
    font-weight: 600;
    font-size: .9rem;
}
.pastille--series { border-color: var(--rouge); color: var(--rouge); }

/* Progression de la saison */
.saison { margin-top: 1.1rem; max-width: 520px; }
.saison__texte {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .95rem;
    color: var(--texte-2);
    margin-bottom: .45rem;
}
.saison__texte strong { color: var(--texte); }
.saison__barre {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--trait);
}
.saison__rempli {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--bleu);
    min-width: 8px;
}
.saison__repere {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 3px;
    margin-left: -1.5px;
    background: var(--ligne);
    border-radius: 2px;
}

/* Match à surveiller */
.vedette { text-align: center; }
.vedette__titre {
    margin: 0 0 .6rem;
    font-weight: 700;
    color: var(--texte-2);
}
.vedette__titre span {
    margin-left: .4rem;
    padding: .05rem .5rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}
.vedette__duel { display: flex; align-items: center; gap: 1.25rem; }
.vedette__equipe {
    display: grid;
    justify-items: center;
    gap: .15rem;
    color: var(--texte);
    min-width: 120px;
}
.vedette__equipe:hover { text-decoration: none; }
.vedette__equipe:hover strong { color: var(--bleu); }
.vedette__equipe strong { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.vedette__equipe span { color: var(--texte-2); font-variant-numeric: tabular-nums; }
.vedette__vs {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--rouge);
}

.champion {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: var(--texte);
    padding: .6rem 1rem .6rem .6rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--surface);
}
.champion { border-left: 4px solid var(--or); }
.champion:hover { text-decoration: none; border-color: var(--bleu); border-left-color: var(--or); }
.champion > span { display: grid; line-height: 1.2; }
.champion strong { font-family: var(--police-titre); font-size: 1.5rem; font-weight: 800; }
.champion__titre,
.champion__saison { color: var(--texte-2); font-size: .85rem; }

/* ---------- Meneurs de la ligue (style NHL.com) : 2 × 2 sous le classement ---------- */
/* Points et buts en haut, moyenne et % d'arrêts en bas (ordre de $categories dans index.php) */
.meneurs__grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
}


/* ---------- Classement ---------- */
.divisions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* ---------- Séries ---------- */
.series {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}
.series__ronde { display: grid; gap: .6rem; align-content: start; }
.series__ronde h3 { font-size: 1.15rem; }
.serie { padding: .4rem .6rem; }
.serie__equipe {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--texte-2);
}
.serie__equipe span { flex: 1; }
.serie__equipe strong { font-family: var(--police-titre); font-size: 1.35rem; }
.serie__equipe.est-gagnant { color: var(--texte); font-weight: 700; }

/* ---------- Blessures et suspensions (colonne de droite) ---------- */
.evenements__liste { list-style: none; margin: 0; padding: 0; }
.evenements__liste li {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: start;
    column-gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--trait);
    font-size: .9rem;
    line-height: 1.3;
}
.evenements__liste li:last-child { border-bottom: 0; }
.evenements__texte, .evenements__date { grid-column: 2; }
.evenements__date { color: var(--texte-2); font-size: .78rem; }
.evenements__vide { margin: 0; color: var(--texte-2); }

/* ---------- Power ranking ---------- */
.power { list-style: none; margin: 0; padding: 0; }
.power li {
    display: grid;
    grid-template-columns: 1.6rem 28px 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--trait);
}
.power li:last-child { border-bottom: 0; }
.power a { color: var(--texte); font-weight: 600; }
.power__rang {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 1.3rem;
    text-align: right;
}
.variation { color: var(--texte-2); font-size: .85rem; font-weight: 700; }
.variation--monte  { color: var(--monte); }
.variation--baisse { color: var(--baisse); }

/* ---------- Côté : listes ---------- */
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; align-items: center; gap: .6rem; }
.liste-simple li > span { display: grid; line-height: 1.25; }

.liste-liens { list-style: none; margin: 0; padding: 0; }
.liste-liens a {
    display: block;
    padding: .45rem 0;
    border-bottom: 1px solid var(--trait);
    color: var(--texte);
    font-weight: 600;
}
.liste-liens li:last-child a { border-bottom: 0; }
.liste-liens a:hover { color: var(--bleu); text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
}

@media (max-width: 960px) {
    .accueil {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "entete" "princ" "cote";
    }
}

@media (max-width: 1180px) {
    .entete-ligue { grid-template-columns: minmax(0, 1fr) auto; }
    .vedette { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}


@media (max-width: 640px) {
    .entete-ligue { grid-template-columns: minmax(0, 1fr); }
    .vedette { grid-row: auto; }
    .champion { justify-self: start; }
    .meneurs__grille { grid-template-columns: minmax(0, 1fr); }
    .divisions { grid-template-columns: minmax(0, 1fr); }
    .vedette__duel { justify-content: center; }
    .vedette__equipe { min-width: 0; }
}

@media (max-width: 420px) {
    .nom-long  { display: none; }
    .nom-court { display: inline; }
}

/* ---------- Annonce du commissaire (section ADMIN) ---------- */
.annonce {
    display: flex;
    align-items: baseline;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 5px solid var(--bleu);
    border-radius: var(--rayon);
}
.annonce--alerte { border-left-color: var(--orange-brule); }
.annonce__titre { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--bleu); }
.annonce--alerte .annonce__titre { color: var(--orange-brule); }
.annonce__texte { margin: 0; flex: 1; min-width: 14rem; font-weight: 600; }

/* ---------- « Pour toi » : le DG connecté (pour-toi.php, colonne de droite, ajouté après le chargement) ---------- */
.pour-toi { display: grid; gap: .7rem; border-top: 3px solid var(--bleu); }
.pour-toi .titre-bloc { margin: 0; }
.pour-toi__match { display: flex; align-items: center; gap: .65rem; color: var(--texte); }
.pour-toi__match:hover { text-decoration: none; }
.pour-toi__match:hover strong { color: var(--bleu); }
.pour-toi__match > span { display: grid; gap: .05rem; min-width: 0; }
.pour-toi__match strong { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.pour-toi__etiquette { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); }
.pour-toi__liste { list-style: none; margin: 0; padding: .6rem 0 0; display: grid; gap: .45rem; border-top: 1px solid var(--trait); }
.pour-toi__item a { display: flex; gap: .45rem; align-items: baseline; color: var(--texte); font-size: .9rem; font-weight: 600; line-height: 1.3; }
.pour-toi__item a:hover { color: var(--bleu); text-decoration: none; }
.pour-toi__item--alerte span { color: var(--baisse); }
.pour-toi__item--attention span { color: var(--or); }
.pour-toi__calme { margin: 0; padding-top: .6rem; border-top: 1px solid var(--trait); color: var(--texte-2); font-size: .88rem; }

/* ---------- Alerte « record en danger » (une ligne ; le détail est sur la page Records) ---------- */
.alerte-record { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--or); border-radius: var(--rayon); color: var(--texte); }
.alerte-record:hover { border-color: var(--bleu); text-decoration: none; }
.alerte-record__icone { font-size: 1.2rem; }
.alerte-record__lien { margin-left: auto; color: var(--bleu); font-weight: 700; font-size: .9rem; }