/* ==========================================================
   Règlements de la ligue (Reglements.php)
   ========================================================== */

.reglements {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.5rem 2.5rem;
    align-items: start;
}
.reglements__entete { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.reglements__entete .titre-section { margin-bottom: 0; }
.reglements__entete p { margin: 0; }

/* Sommaire (collant sur grand écran) */
.reglements__sommaire { position: sticky; top: 1rem; }
.reglements__sommaire ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.reglements__sommaire a { color: var(--texte); }

/* Texte */
.reglements__texte { max-width: 50rem; display: grid; gap: 2.5rem; min-width: 0; }
.reglements__texte section { scroll-margin-top: 1rem; }
.reglements__texte h2 {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 .9rem;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--ligne);
    font-family: var(--police-titre);
    font-size: 1.75rem;
}
.reglements__texte h2 span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--texte);
    font-size: 1.1rem;
}
.reglements__texte h3 { margin: 1.4rem 0 .5rem; font-size: 1.1rem; }
.reglements__texte h4 { margin: 0 0 .4rem; font-size: 1rem; }
.reglements__texte p, .reglements__texte li, .reglements__texte dd { color: var(--texte-2); line-height: 1.6; }
.reglements__texte strong { color: var(--texte); }
.reglements__texte p { margin: 0 0 .75rem; }
.reglements__texte ul, .reglements__texte ol { margin: 0 0 .75rem; padding-left: 1.3rem; display: grid; gap: .4rem; }

/* Chiffres clés */
.chiffres {
    list-style: none;
    padding: 0 !important;
    margin: 1.25rem 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem !important;
}
.chiffres li {
    display: grid;
    gap: .15rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-top: 3px solid var(--ligne);
    border-radius: var(--rayon);
}
.chiffres strong { font-family: var(--police-titre); font-size: 1.9rem; line-height: 1; }
.chiffres span { font-size: .85rem; color: var(--texte-2); }

/* Encadrés */
.avis {
    padding: .8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--bleu);
    border-radius: var(--rayon);
}
.avis p:last-child { margin-bottom: 0; }
.avis--important { border-left-color: var(--orange-brule); }
.avis--sanction { border-left-color: var(--baisse); }
.exemple {
    padding: .7rem 1rem;
    background: var(--surface-2);
    border-radius: var(--rayon);
}
.exemple > span:first-child {
    display: inline-block;
    margin-right: .5rem;
    color: var(--texte);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Étapes numérotées */
.etapes { counter-reset: etape; list-style: none; padding-left: 0 !important; }
.etapes > li { counter-increment: etape; position: relative; padding-left: 2.4rem; }
.etapes > li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: .05rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--accent-fond);
    color: var(--accent-texte);
    font-weight: 800;
    font-size: .9rem;
}

/* Deux cas côte à côte (repêchage, RFA / UFA) */
.cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.cas__bloc {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-top: 3px solid var(--bleu);
    border-radius: var(--rayon);
}
.cas__bloc p:last-child { margin-bottom: 0; }
.cas__bloc--sanction { border-top-color: var(--baisse); }
.cas__bloc--rfa { border-top-color: var(--bleu); }
.cas__bloc--ufa { border-top-color: var(--ufa); }
.cas__bloc dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; }
.cas__bloc dt { color: var(--texte); font-weight: 700; }
.cas__bloc dd { margin: 0; }

/* Avertissements (tanking) */
.avertissements { list-style: none; padding-left: 0 !important; gap: .75rem !important; }
.avertissements > li {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--orange-brule);
    border-radius: var(--rayon);
}
.avertissements > li:last-child { border-left-color: var(--baisse); }
.avertissements > li p:last-child, .avertissements > li ul:last-child { margin-bottom: 0; }

/* Tableaux */
.reglements__tableau { margin-bottom: .75rem; }
.reglements__tableau th, .reglements__tableau td { text-align: left; white-space: normal; }
.reglements__tableau .gagnant td { background: var(--surface-2); }

/* Bonis de saison */
.bonis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.bonis__case {
    display: grid;
    gap: .1rem;
    padding: .75rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    text-align: center;
}
.bonis__case span { font-size: .85rem; color: var(--texte-2); }
.bonis__case strong { font-family: var(--police-titre); font-size: 1.5rem; }

@media (max-width: 860px) {
    .reglements { grid-template-columns: 1fr; }
    .reglements__sommaire { position: static; }
    .bonis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chiffres strong { font-size: 1.5rem; }
    .cas { grid-template-columns: 1fr; }
}

/* Nouveau : tout se fait sur le site (bandeau du haut) */
.nouveau-site { padding: 1.1rem 1.2rem; border-radius: var(--rayon); border: 1px solid var(--trait); border-top: 4px solid var(--bleu);
    background: color-mix(in srgb, var(--bleu) 10%, var(--surface)); }
.reglements__texte .nouveau-site__titre { margin: 0 0 .6rem; font-size: 1.35rem; border: 0; padding: 0; }
.nouveau-site__liste { list-style: none; padding-left: 0 !important; gap: .35rem !important; }
.nouveau-site__liste li { padding-left: 1.3rem; position: relative; }
.nouveau-site__liste li::before { content: "✓"; position: absolute; left: 0; color: var(--monte); font-weight: 800; }
.nouveau-site__liste span { color: var(--texte-2); }

/* Encadré « Sur le site » : la démarche, étape par étape */
.sur-le-site { margin: .4rem 0 1.1rem; padding: .9rem 1rem 1rem; border-radius: var(--rayon); border: 1px solid var(--trait); border-left: 4px solid var(--bleu); background: var(--surface); }
.sur-le-site__titre { margin: 0 0 .55rem !important; font-weight: 800; color: var(--texte) !important; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.sur-le-site .etapes { margin-bottom: .5rem; }
.sur-le-site__bouton { display: inline-block; margin-top: .2rem; padding: .45rem .9rem; border-radius: 8px; background: var(--accent-fond); color: var(--accent-texte); font-weight: 700; text-decoration: none; }
.sur-le-site__bouton:hover { filter: brightness(1.1); text-decoration: none; color: var(--accent-texte); }

/* Captures d'écran du site */
.capture { margin: .4rem 0 1.2rem; }
.capture img { display: block; width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--trait); box-shadow: 0 6px 20px rgb(0 0 0 / .25); }
.capture figcaption { margin-top: .45rem; font-size: .85rem; color: var(--texte-2); }

/* Frise de l'entre-saison */
.frise { list-style: none; padding-left: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem !important; margin-bottom: 1.2rem !important; }
.frise li { position: relative; display: grid; gap: .25rem; align-content: start; padding: .9rem .9rem .8rem; border-radius: var(--rayon); border: 1px solid var(--trait); border-top: 4px solid var(--or); background: var(--surface); }
.frise li:not(:last-child)::after { content: "→"; position: absolute; right: -.55rem; top: 1.1rem; z-index: 1; color: var(--or); font-weight: 800; }
.frise__no { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--or); color: var(--fond); font-weight: 800; }
.frise strong { font-size: 1.02rem; }
.frise span:not(.frise__no) { font-size: .85rem; color: var(--texte-2); line-height: 1.35; }
.frise a { font-size: .85rem; font-weight: 700; }
@media (max-width: 640px) {
    .frise { grid-template-columns: minmax(0, 1fr); }
    .frise li:not(:last-child)::after { content: "↓"; right: auto; left: 1.2rem; top: auto; bottom: -.9rem; }
}
.reglements__texte h4 { margin-top: 1.2rem; }

/* L'essentiel en 1 minute : des cartes, une idée chacune */
.reglements__texte .essentiel__titre { margin: 0 0 .7rem; font-size: 1.35rem; border: 0; padding: 0; }
.essentiel { list-style: none; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: .6rem !important; }
.essentiel li { display: grid; gap: .15rem; align-content: start; padding: .8rem .85rem; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--surface); }
.essentiel li > span:first-child { font-size: 1.5rem; line-height: 1.2; }
.essentiel strong { font-family: var(--police-titre); font-size: 1.25rem; line-height: 1.15; color: var(--texte); }
.essentiel li > span:last-child { font-size: .85rem; color: var(--texte-2); line-height: 1.35; }

/* Détails repliés et lien vers le Guide du DG */
.en-savoir { margin: 0 0 .9rem; border: 1px solid var(--trait); border-radius: var(--rayon); padding: .55rem .85rem; background: var(--surface); }
.en-savoir summary { cursor: pointer; font-weight: 700; color: var(--texte); }
.en-savoir[open] summary { margin-bottom: .6rem; }
.en-savoir p:last-child { margin-bottom: 0; }
.vers-guide { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; }
.vers-guide--grand { padding: .55rem 1rem; border-radius: 8px; background: var(--accent-fond); color: var(--accent-texte); }
.vers-guide--grand:hover { filter: brightness(1.1); text-decoration: none; color: var(--accent-texte); }
.reglements__texte section > .vers-guide { margin-top: .2rem; }