/* ── VARIABLES ───────────────────────────────────────────────────────────── */
:root {
    --bleu:  #415BC5;
    --dore:  #DEBF83;
    --rouge: #D71921;
}

/* ── POLICE ──────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Kurale';
    src: url('Fonts/Kurale-Regular.woff2') format('woff2'),
         url('Fonts/Kurale-Regular.woff')  format('woff'),
         url('Fonts/Kurale-Regular.ttf')   format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background: url('Images/Fond_Body.png') repeat top center;
    background-size: 1000px;
    color: var(--bleu);
    font-family: 'Kurale';
}

img {
    vertical-align: sub;
    margin-right: 5px;
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
header {
    color: white;
    background: url('Images/Fond_Corps_02.jpg');
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

header h1.Gauche {
    margin-left: 10px;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5),
                 -1px  1px 0 rgba(0,0,0,0.5), 1px  1px 0 rgba(0,0,0,0.5),
                 1px 2px 6px rgba(0,0,0,0.8);
}

header h1.Gauche img {
    vertical-align: middle;
}

header h1.Droite {
    margin-right: 10px;
    text-align: right;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5),
                 -1px  1px 0 rgba(0,0,0,0.5), 1px  1px 0 rgba(0,0,0,0.5),
                 1px 2px 6px rgba(0,0,0,0.8);
}

header table {
    border-spacing: 8px 0;
    text-align: center;
}

header td.Vide {
    border: none;
}

header td.LibelleMatch {
    border: none;
    color: white;
    font-size: 1.7em;
    padding-top: 0;
    white-space: nowrap;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5),
                 -1px  1px 0 rgba(0,0,0,0.5), 1px  1px 0 rgba(0,0,0,0.5),
                 1px 2px 6px rgba(0,0,0,0.8);
}

header td.Nombre {
    padding: 0;
    font-size: 1.5em;
    width: 45px;
    background-color: rgba(255,255,255,0.85);
    color: var(--bleu);
}

header td.LibelleNombre {
    border: none;
    padding: 0;
    font-size: 0.7em;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.7);
}

header a {
    text-decoration: none;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.8);
    color: white;
}

header a:link,
header a:visited {
    color: white;
}

header img {
    filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.7));
}

header h1.Droite img {
    filter: brightness(0) invert(1) drop-shadow(1px 1px 4px rgba(0,0,0,0.7));
}

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */
nav {
    border: 2px solid black;
    background-color: rgba(255,255,255,0.88);
    margin: 10px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('Images/Fond_Corps_02.jpg');
    opacity: 0.12;
    z-index: -1;
}

nav ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    padding-left: 0;
}

nav a {
    font-size: clamp(0.9em, 1.4vw, 1.2em);
    padding: clamp(8px, 1.2vw, 15px);
    text-decoration: none;
    white-space: nowrap;
}

nav a svg {
    vertical-align: -3px;
}

nav a:link, nav a:visited {
    color: var(--bleu);
}

nav a:hover, nav a.OngletActif {
    background-color: var(--dore);
    color: black;
}

/* ── CORPS ───────────────────────────────────────────────────────────────── */
section {
    border: 2px solid black;
    background: url('Images/Fond_Corps_02.jpg');
    height: 100%;
    overflow: auto;
    text-align: center;
}

section.Connexion > div {
    background: rgba(255,255,255,0.88);
    border-radius: 8px;
    padding: 25px 35px;
    margin: 30px auto;
    display: inline-block;
}

section select, section input {
    font-size: 1.2em;
    font-family: inherit;
}

p.MatchNavRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

p.MatchNavRow select {
    flex: 1 1 0%;
    min-width: 0;
}

p.MatchNavRow input[type="submit"] {
    flex: 0 0 100%;
    order: 1;
}

p.MatchNavRow button[type="button"] {
    flex: none;
    width: 2.2em;
    border-radius: 10px;
    background-color: var(--bleu);
    color: white;
    border: 1px solid white;
    cursor: pointer;
    font-size: 1.2em;
}

p.MatchNavRow button[type="button"]:disabled {
    background-color: var(--gris, #999);
    cursor: default;
}

section textarea {
    font-size: 1em;
}

section span.Egalite {
    color: var(--bleu);
    padding: 5px;
    border: 1px solid black;
}

section select {
    border: 1px solid white;
    color: var(--bleu);
    cursor: pointer;
}

section input[type=submit] {
    border-radius: 10px;
    background-color: var(--bleu);
    color: white;
    border: 1px solid white;
    cursor: pointer;
}

section div.FlexColonne {
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
}

section div.ColonneGroupes {
    order: -1;
}
section div.ColonneGroupes summary {
    display: block;
    padding: 2px;
    border-style: solid;
    border-color: var(--dore);
    background-color: var(--rouge);
    color: white;
    list-style: none;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
    cursor: pointer;
}
section div.ColonneGroupes summary::before { content: '▶ '; font-size: 0.75em; }
section div.ColonneGroupes details[open] summary::before { content: '▼ '; font-size: 0.75em; }
section div.ColonneGroupes summary::-webkit-details-marker { display: none; }

section h2 {
    padding: 2px;
    border-style: solid;
    border-color: var(--dore);
    background-color: var(--rouge);
    color: white;
}

.DetailsPoules > summary {
    list-style: none;
    cursor: pointer;
}
.DetailsPoules > summary::-webkit-details-marker { display: none; }
.DetailsPoules > summary h2::before { content: '▶ '; font-size: 0.75em; }
.DetailsPoules[open] > summary h2::before { content: '▼ '; font-size: 0.75em; }

section p.RappelRegle {
    padding: 5px;
    border-style: solid;
    border-color: var(--rouge);
    background-color: var(--bleu);
    color: white;
}

section p.Erreur {
    color: red;
}

section p.Succes {
    color: green;
}

section a.LienSecondaire {
    font-size: 0.7em;
}

section table {
    border-collapse: collapse;
    background-color: white;
    margin: auto;
}

section table.Groupe th {
    width: 50px;
}

section th {
    background-color: var(--bleu);
    color: white;
    font-weight: normal;
}

section th.Transparent {
    border: none;
    background-color: transparent;
}

section th, section td {
    border: 1px solid black;
    padding: 5px;
    white-space: nowrap;
}

section td.LibelleEquipe {
    text-align: left;
}

section table.PhaseFinale {
    background-color: transparent;
}

section table.PhaseFinale td {
    background-color: white;
}

section table.PhaseFinale td.Transparent {
    border: none;
    background-color: transparent;
}

section table td.FondDoree, table.PhaseFinale td.FondDoree {
    background-color: var(--dore);
    color: black;
}

td.FondGris {
    background-color: lightgrey;
    color: black;
}

td.FondJaune {
    background-color: yellow;
    color: black;
}

section input[type=number] {
    width: 40px;
    text-align: center;
}

section a {
    text-decoration: none;
}

section a:link, section a:visited {
    color: var(--bleu);
}

td.ScoreTrue {
    color: green;
}

td.ScoreTrueClassement {
    background-color: Chartreuse;
    color: black;
}

td.ScoreFalseClassement {
    background-color: red;
    color: black;
}

td.ScoreFalse {
    color: red;
}

/* Phase finale : équipe pronostiquée fausse, empilée au-dessus du score */
.PronoEquipeFausse {
    font-size: 11px;
    line-height: 1.2;
}

.PronoEquipeFausse .EqBarree {
    text-decoration: line-through;
    color: #777;
}

.PronoEquipeFausse .CroixFausse {
    color: red;
    font-weight: bold;
}

tr.UserSelect td {
    background-color: var(--dore);
    color: black;
}

tr.UserSelect td.ScoreTrueClassement, tr.FondBlanc td.ScoreTrueClassement {
    background-color: Chartreuse;
    color: black;
}

tr.UserSelect td.ScoreFalseClassement, tr.FondBlanc td.ScoreFalseClassement {
    background-color: red;
    color: black;
}

tr.UserSelect td.FondJaune, tr.FondBlanc td.FondJaune {
    background-color: yellow;
    color: black;
}

tr.FondBlanc td {
    background-color: white;
}

#bloc_ClassementUser {
    width: 2000px;
    overflow: auto;
    margin: 10px;
}

#bloc_ClassementUser table {
    background-color: transparent;
    /* separate (et non collapse) : position:sticky sur les cellules ne se combine pas
       proprement avec les bordures fusionnées (artefacts visuels au scroll) */
    border-collapse: separate;
    border-spacing: 0;
}

/* Avec separate, deux cellules adjacentes affichent chacune leur propre bordure
   (1px + 1px = 2px) là où collapse les fusionnait en une seule ligne de 1px.
   border-width sub-pixel (0.5px) est arrondi différemment selon les navigateurs,
   donc on ne garde qu'une bordure par jonction (droite + bas), et on restaure
   gauche/haut uniquement sur les bords extérieurs du tableau. */
#bloc_ClassementUser th,
#bloc_ClassementUser td {
    border-width: 0 1px 1px 0;
}
#bloc_ClassementUser tr:first-child > th,
#bloc_ClassementUser tr:nth-child(2) > th,
#bloc_ClassementUser tr:nth-child(2) > td {
    border-top-width: 1px;
}
#bloc_ClassementUser tr:first-child > th:first-child,
#bloc_ClassementUser tr.UserSelect td:first-child,
#bloc_ClassementUser tr.FondBlanc td:first-child {
    border-left-width: 1px;
}
/* Chaque section (phase, groupe, bonus...) commence juste après un séparateur
   transparent : elle doit récupérer sa bordure gauche pour marquer le début */
#bloc_ClassementUser th.Transparent + th,
#bloc_ClassementUser th.Transparent + td {
    border-left-width: 1px;
}

.ClassementJumpBtns {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px;
    flex-wrap: wrap;
}
.ClassementJumpBtn {
    padding: 7px 14px;
    background: white;
    border: 1px solid var(--bleu);
    color: var(--bleu);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 16px;
}
.ClassementJumpBtn:hover { background: #eef0fb; }

.StickyCol {
    position: sticky;
    z-index: 2;
}

.StickyGap {
    position: sticky;
    z-index: 2;
}
/* Fond opaque nécessaire au scroll (sinon le contenu défilé se voit à travers),
   mais on rejoue la texture de fond de la section pour garder l'effet "transparent" */
section th.Transparent.StickyGap {
    background: url('Images/Fond_Corps_02.jpg') fixed;
}

/* ── GRAPHIQUE ÉVOLUTION ─────────────────────────────────────────────────── */
.GraphEvolution {
    max-width: 900px;
    margin: 20px auto;
    background: white;
    border: 1px solid black;
    padding: 15px;
}

.GraphEvolution h2 {
    text-align: center;
}

.GraphModeBtns {
    display: flex;
    justify-content: center;
    gap: 2px;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 3px;
    background: #eef0fb;
    border-radius: 20px;
}
.GraphModeBtn {
    padding: 7px 18px;
    background: transparent;
    border: none;
    color: var(--bleu);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 17px;
    transition: background-color 0.15s, color 0.15s;
}
.GraphModeBtn:hover:not(.active) { background: rgba(65, 91, 197, 0.12); }
.GraphModeBtn.active {
    background: var(--bleu);
    color: white;
}

.GraphLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 0.85em;
    justify-content: center;
}
.GraphLegendItem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.GraphLegendItem.dim { opacity: 0.35; }
.GraphLegendItem.active { background: #eef0fb; }
.GraphLegendItem .Trait {
    display: inline-block;
    width: 16px;
    height: 0;
    border-top: 3px solid;
}

/* ── ACCUEIL ─────────────────────────────────────────────────────────────── */
.AccueilBloc {
    background: white;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 15px 20px;
    margin: 10px;
    min-width: 280px;
}

.AccueilBloc h3 {
    color: var(--bleu);
    border-bottom: 2px solid var(--dore);
    padding-bottom: 6px;
    margin: 0 0 12px 0;
    font-size: 1em;
    font-weight: normal;
}

/* Encart des records historiques (Classement.php, Historique.php) */
.RecordsBloc {
    max-width: 640px;
    margin: 10px auto;
}

.RecordsGrille {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 10px;
    text-align: center;
}

.RecordItem {
    flex: 1;
    min-width: 0;
}

.RecordItem + .RecordItem {
    border-left: 1px solid rgba(0,0,0,0.1);
}

.RecordValeur {
    font-size: 2.1em;
    font-weight: bold;
    line-height: 1.1;
    color: var(--bleu);
}

.RecordLibelle {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(65,91,197,0.65);
    margin-bottom: 8px;
}

.RecordDetenteur {
    font-weight: bold;
    line-height: 1.25;
}

.RecordEdition {
    font-size: 0.8em;
    opacity: 0.6;
}

/* ── HISTORIQUE DES COUPES ───────────────────────────────────────────────── */

/* Message quand aucune coupe n'est archivée (carte .AccueilBloc centrée) */
.HistoVide {
    max-width: 480px;
    margin: 10px auto;
    text-align: center;
}

/* Une carte dépliable par édition archivée */
.HistoCoupe {
    background: rgba(255,255,255,0.95);
    border: 2px solid var(--dore);
    border-radius: 10px;
    padding: 0.7em 1em;
    max-width: 640px;
    margin: 14px auto;
}

.HistoCoupe summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--rouge);
    padding: 2px 0;
}

.HistoCoupe > summary::-webkit-details-marker { display: none; }
.HistoCoupe > summary::before { content: '▶'; font-size: 0.7em; }
.HistoCoupe[open] > summary::before { content: '▼'; font-size: 0.7em; }
.HistoCoupe summary > span:first-of-type { flex: 1; text-align: left; }

.HistoVainqueur {
    color: var(--bleu);
    font-weight: normal;
    font-size: 0.85em;
    white-space: nowrap;
}

/* Podium : 2e à gauche, 1er au centre (plus haut), 3e à droite */
.HistoPodium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    margin: 16px 0 4px;
}

.HistoPodiumStep {
    flex: 1;
    max-width: 150px;
    text-align: center;
}

.HistoPodiumNom {
    margin-bottom: 6px;
    line-height: 1.25;
}

.HistoPodiumBloc {
    border-radius: 6px 6px 0 0;
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.HistoPodiumBloc1 { height: 64px; background: linear-gradient(180deg, #E8C34E, #C9A227); }
.HistoPodiumBloc2 { height: 46px; background: linear-gradient(180deg, #C7CDD6, #9AA3AF); }
.HistoPodiumBloc3 { height: 32px; background: linear-gradient(180deg, #D89058, #B36A32); }

.HistoCoupe table {
    margin: 12px auto 6px;
}

.AccueilBlocLien {
    color: inherit;
    text-decoration: none;
}

.AccueilBlocLien::after {
    content: ' →';
    opacity: 0;
    transition: opacity 0.2s, margin-left 0.2s;
    margin-left: 0;
}

.AccueilBlocLien:hover::after {
    opacity: 1;
    margin-left: 4px;
}

.AccueilBlocLien:hover {
    color: var(--bleu);
}

.AccueilTable {
    background-color: transparent !important;
    width: 100%;
}

.AccueilTable td {
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 5px 8px;
}

.VoirPlusDetails summary {
    list-style: none;
    cursor: pointer;
    color: var(--bleu);
    font-size: 0.9em;
    margin-top: 8px;
    text-align: center;
}
.VoirPlusDetails summary::-webkit-details-marker { display: none; }
.VoirPlusDetails summary::before { content: '▶ '; font-size: 0.75em; }
.VoirPlusDetails[open] summary::before { content: '▼ '; font-size: 0.75em; }

.AccueilSep {
    text-align: center;
    font-size: 0.85em;
    padding: 2px !important;
}

/* Barres de progression */
.ProgressLigne {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
    font-size: 0.9em;
}

.ProgressStatus {
    font-size: 1em;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ProgressLabel {
    width: 150px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ProgressBar {
    flex: 1;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    min-width: 60px;
}

.ProgressBarFill {
    height: 100%;
    background: linear-gradient(to right, var(--bleu), var(--dore));
    border-radius: 5px;
    transition: width 0.5s ease;
}

.ProgressCount {
    width: 45px;
    text-align: right;
    flex-shrink: 0;
    color: #666;
    font-size: 0.85em;
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
footer {
    color: white;
    background: url('Images/Fond_Corps_02.jpg');
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.65);
    pointer-events: none;
}

.footer-markings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.footer-markings svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

footer p {
    position: relative;
    z-index: 1;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.8);
    font-size: 0.8em;
}

/* ── ADMINISTRATION ─────────────────────────────────────────────────────── */
section.AdminPage {
    padding: 1em;
    text-align: left;
}

/* Onglets */
.AdminTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 3px solid var(--dore);
    margin-bottom: 1em;
}
.AdminTab {
    padding: 9px 20px;
    cursor: pointer;
    background: rgba(255,255,255,0.75);
    border: 2px solid var(--dore);
    border-bottom: none;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: bold;
    color: var(--bleu);
    border-radius: 4px 4px 0 0;
}
.AdminTab:hover { background: rgba(255,255,255,0.95); }
.AdminTab.active {
    background: var(--bleu);
    color: white;
    border-color: var(--bleu);
    position: relative;
    bottom: -3px;
    padding-bottom: 12px;
}
.AdminPane { display: none; }
.AdminPane.active { display: block; }

/* Sous-onglets (dans l'onglet Rencontres) */
.SubTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    border-bottom: 2px solid var(--dore);
    margin-bottom: 0.8em;
}
.SubTab {
    padding: 6px 14px;
    cursor: pointer;
    background: rgba(255,255,255,0.65);
    border: 1px solid var(--dore);
    border-bottom: none;
    font-family: inherit;
    font-size: 0.88em;
    font-weight: bold;
    color: var(--rouge);
    border-radius: 3px 3px 0 0;
}
.SubTab:hover { background: rgba(255,255,255,0.9); }
.SubTab.active {
    background: var(--rouge);
    color: white;
    border-color: var(--rouge);
    position: relative;
    bottom: -2px;
    padding-bottom: 9px;
}
.SubPane { display: none; }
.SubPane.active { display: block; }

/* Layout onglet Paramétrage : 2 colonnes sur PC */
.AdminSetupGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: start;
}
.AdminSetupCol {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Cartes collapsibles */
.AdminCard {
    border: 2px solid var(--dore);
    border-radius: 4px;
    padding: 0.7em 1em;
    background: rgba(255,255,255,0.92);
}
.AdminCard summary {
    font-weight: bold;
    color: var(--rouge);
    cursor: pointer;
    list-style: none;
    font-size: 1em;
    padding: 2px 0;
}
.AdminCard > summary::-webkit-details-marker { display: none; }
.AdminCard > summary::before { content: '▶ '; font-size: 0.75em; }
.AdminCard[open] > summary::before { content: '▼ '; font-size: 0.75em; }
.AdminCard[open] > summary { margin-bottom: 0.7em; }

/* Boutons, formulaires, table */
.AdminBtn {
    display: block;
    width: 100%;
    padding: 11px 8px;
    margin-top: 0.5em;
    background: var(--bleu);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
}
.AdminBtn:hover { opacity: 0.85; }
.AdminRow {
    display: flex;
    gap: 0.4em;
    flex-wrap: wrap;
    align-items: center;
}
.AdminTable {
    font-size: 0.8em;
    border-collapse: collapse;
    background: white;
    margin: 0;
}
.AdminTable th,
.AdminTable td {
    padding: 3px 5px;
    border: 1px solid #ccc;
}
.AdminTable th {
    background: var(--bleu);
    color: white;
    white-space: nowrap;
}
.ScoreInput { width: 48px; }

/* Mode scores : masque Jour, Heure, Phase pour la saisie mobile */
.ScoreMode th:nth-child(2), .ScoreMode td:nth-child(2),
.ScoreMode th:nth-child(3), .ScoreMode td:nth-child(3),
.ScoreMode th:nth-child(4), .ScoreMode td:nth-child(4) { display: none; }

.ScoreModeBtn {
    padding: 7px 14px;
    background: rgba(255,255,255,0.8);
    border: 2px solid var(--dore);
    color: var(--bleu);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 0.6em;
}
.ScoreModeBtn.active {
    background: var(--bleu);
    color: white;
    border-color: var(--bleu);
}

/* ── RESPONSIVE (mobile) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Header : empilement vertical */
    header {
        flex-direction: column;
        padding: 8px 0;
        gap: 6px;
    }

    header h1.Gauche,
    header h1.Droite {
        margin: 0;
        font-size: 1.1em;
        text-align: center;
    }

    header h1.Gauche img {
        width: 30px;
    }

    header td.LibelleMatch {
        font-size: 1em;
    }

    header td.Nombre {
        font-size: 1.1em;
        width: 36px;
    }

    header td.LibelleNombre {
        font-size: 0.65em;
    }

    /* Navigation : les liens passent à la ligne */
    nav {
        margin: 5px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        margin: 4px 0;
        gap: 2px;
    }

    nav a {
        padding: 8px 10px;
        font-size: 1em;
        display: block;
        white-space: nowrap;
    }

    /* Section : hauteur auto pour que la PAGE scrolle (et non la section elle-même),
       overflow-x pour les tables plus larges que le viewport */
    section {
        height: auto;
        overflow-x: auto;
    }

    section th,
    section td {
        padding: 4px 5px;
        font-size: 0.85em;
    }

    section h2 {
        font-size: 1em;
    }

    /* Formulaires : boutons */
    section input[type=submit] {
        padding: 5px 12px;
        font-size: 0.95em;
        width: auto;
    }

    section input[type=number] {
        width: 22px;
        padding: 1px;
    }

    section input[type=number]::-webkit-inner-spin-button,
    section input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    section input[type=number] {
        -moz-appearance: textfield;
    }

    /* Formulaire pronostics : compactage sur mobile */
    section form td.FondDoree {
        display: none;
    }

    section form th,
    section form td {
        padding: 2px 3px;
    }

    section form td.LibelleEquipe {
        white-space: normal;
        max-width: 82px;
    }

    section form td.LibelleEquipe img {
        vertical-align: top;
    }

    section td.LibelleEquipe img {
        width: 18px;
    }

    /* Accueil : Prochains matchs / Derniers résultats — éviter le défilement
       horizontal. Largeurs de colonnes fixes en px/calc (identiques sur tous
       les blocs et tables, repliés ou non) ; les noms d'équipe trop longs
       pour leur colonne sont réduits au cas par cas en JS — cf. script en
       bas de page — plutôt que de revenir à la ligne. */
    .AccueilTable td {
        font-size: 0.85em;
        padding: 4px 3px;
    }

    /* Largeurs fixes en px/calc, identiques sur tous les blocs et tables,
       repliés ou non — uniquement les tables Prochains matchs / Derniers
       résultats (pas le Classement, qui a sa propre structure de colonnes). */
    .AccueilMatchTable {
        table-layout: fixed;
    }

    .AccueilMatchTable td.FondDoree {
        white-space: normal;
        font-size: 0.7em;
        width: 70px;
    }

    .AccueilMatchTable td.LibelleEquipe {
        white-space: nowrap;
        width: calc((100% - 70px - 40px) / 2);
    }

    .AccueilMatchTable td.LibelleEquipe img {
        width: 14px;
    }

    /* Colonne centrale (VS / score) : contenu toujours court, ne doit
       jamais se couper ni être compressée par les noms d'équipe voisins */
    .AccueilMatchTable td:not(.FondDoree):not(.LibelleEquipe) {
        white-space: nowrap;
        text-align: center;
        width: 40px;
    }

    section form td.Transparent select {
        width: 85px;
        font-size: 0.8em;
    }

    /* Bloc classement : défilement interne */
    #bloc_ClassementUser {
        width: 100%;
        overflow-x: auto;
        margin: 5px 0;
    }

    /* Écran trop étroit pour verrouiller les 5 colonnes : on ne garde que
       Rang + Joueur, le reste défile normalement (repris en paysage ci-dessous) */
    #bloc_ClassementUser .StickyCol3,
    #bloc_ClassementUser .StickyCol4,
    #bloc_ClassementUser .StickyCol5,
    #bloc_ClassementUser .StickyGap {
        position: static;
    }

    /* Groupes : taille du bandeau réduite au niveau des autres titres */
    section div.ColonneGroupes summary { font-size: 1em; }

    /* Administration */
    .AdminTab { font-size: 0.85em; padding: 8px 12px; }
    .AdminTab.active { padding-bottom: 11px; }
    .SubTab { font-size: 0.82em; padding: 5px 10px; }
    .SubTab.active { padding-bottom: 8px; }
    .AdminSetupGrid { grid-template-columns: 1fr; }

    /* Footer : empilement vertical centré */
    footer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 8px;
        gap: 4px;
    }

    footer p {
        margin: 2px 0;
    }
}
/* ── RESPONSIVE (mobile paysage) ─────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

    /* Assez de largeur en paysage : on reverrouille les 5 colonnes */
    #bloc_ClassementUser .StickyCol3,
    #bloc_ClassementUser .StickyCol4,
    #bloc_ClassementUser .StickyCol5,
    #bloc_ClassementUser .StickyGap {
        position: sticky;
    }

    /* Header : retour en ligne */
    header {
        flex-direction: row;
        padding: 4px 0;
        gap: 0;
    }

    header h1.Gauche,
    header h1.Droite {
        font-size: 1em;
    }

    /* Footer : retour en ligne */
    footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        text-align: left;
        padding: 0 10px;
        gap: 0;
    }

    /* Dates visibles, paddings et inputs restaurés */
    section form td.FondDoree {
        display: table-cell;
    }

    section form th,
    section form td {
        padding: 4px 5px;
    }

    section form td.LibelleEquipe {
        white-space: nowrap;
        max-width: none;
    }

    section form td.LibelleEquipe img {
        vertical-align: middle;
    }

    section input[type=number] {
        width: 36px;
        padding: 0;
    }
}

/* Téléphone en paysage : largeur FIXE (pas max-width) sur les blocs match.
   926px couvre les plus grands téléphones actuels en paysage (iPhone Pro
   Max compris) tout en excluant les tablettes (iPad en paysage : 1024px et
   plus). Une largeur fixe est nécessaire ici : un simple max-width n'a pas
   d'effet réel si la largeur "naturelle" du bloc (déterminée par son
   contenu, table-layout:fixed + colonnes en % d'un parent dont la taille
   dépend elle-même du contenu) est déjà inférieure à la limite — d'où
   l'absence d'effet observée en passant de 360px à 460px en max-width.
   "(hover: none) and (pointer: coarse)" cible spécifiquement les écrans
   tactiles sans souris (vrais téléphones/tablettes) : sans cette condition,
   réduire simplement la largeur d'une fenêtre de bureau (Safari, Chrome...)
   déclenche aussi la règle dès qu'elle devient plus large que haute, alors
   qu'elle n'a jamais les styles de compactage mobile (réservés à <=768px) —
   d'où des débordements de texte hors du bloc à largeur intermédiaire. */
@media (orientation: landscape) and (max-width: 926px) and (hover: none) and (pointer: coarse) {
    .AccueilBloc {
        width: 380px;
    }
}
/* ── FIN RESPONSIVE ──────────────────────────────────────────────────────── */