/* Plateforme UFOLEP Tir — feuille de style unique, sans étape de compilation. */

:root {
    --fond: #f5f6f8;
    --surface: #ffffff;
    --texte: #1d2433;
    --texte-doux: #5b6475;
    --bordure: #dde1e8;
    --primaire: #0b4f9c;
    --primaire-fonce: #083b74;
    --primaire-clair: #e8f0fa;
    --succes: #1f7a3d;
    --succes-clair: #e6f4ea;
    --alerte: #9a5b00;
    --alerte-clair: #fff4e0;
    --danger: #b3261e;
    --danger-clair: #fdecea;
    --rayon: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--texte);
    background: var(--fond);
}

a { color: var(--primaire); }
a:hover { color: var(--primaire-fonce); }

/* --- En-tête et navigation ------------------------------------------- */
.entete {
    background: var(--primaire);
    color: #fff;
}
.entete__interieur {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    min-height: 60px;
}
.entete__titre {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    margin-right: auto;
}
.entete__titre:hover { color: #fff; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nav a, .nav button {
    color: #fff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 15px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.nav a:hover, .nav button:hover, .nav a.actif { background: rgba(255, 255, 255, .16); }
.nav form { margin: 0; }

/* --- Contenu ---------------------------------------------------------- */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
h1 { font-size: 26px; margin: 0 0 16px; }
h2 { font-size: 20px; margin: 24px 0 12px; }
.sous-titre { color: var(--texte-doux); margin: -8px 0 20px; }

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 20px;
    margin-bottom: 20px;
}
.carte > h1:first-child, .carte > h2:first-child { margin-top: 0; }
.carte--etroite { max-width: 460px; margin-left: auto; margin-right: auto; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.chiffre { font-size: 32px; font-weight: 700; color: var(--primaire); }
.barre-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.barre-actions h1 { margin: 0; }

/* --- Messages ---------------------------------------------------------- */
.message { padding: 12px 16px; border-radius: var(--rayon); margin-bottom: 16px; border: 1px solid; }
.message--succes { background: var(--succes-clair); border-color: #b7dfc3; color: var(--succes); }
.message--alerte { background: var(--alerte-clair); border-color: #f1d39b; color: var(--alerte); }
.message--erreur { background: var(--danger-clair); border-color: #f3c0bc; color: var(--danger); }
.message ul { margin: 4px 0 0; padding-left: 20px; }

/* --- Formulaires ------------------------------------------------------- */
.champ { margin-bottom: 16px; }
.champ label, .champ .etiquette { display: block; font-weight: 600; margin-bottom: 4px; }
.champ .aide { color: var(--texte-doux); font-size: 14px; margin-top: 4px; }
.champ .erreur { color: var(--danger); font-size: 14px; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select {
    width: 100%;
    max-width: 480px;
    padding: 9px 11px;
    border: 1px solid #b9c0cc;
    border-radius: 6px;
    font: inherit;
    background: #fff;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
    outline: 3px solid #8db6e8;
    outline-offset: 1px;
}
.case { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: 400; }
.case input { margin-top: 4px; }
fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 6px; }

.bouton {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--primaire);
    background: var(--primaire);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.bouton:hover { background: var(--primaire-fonce); color: #fff; }
.bouton--secondaire { background: #fff; color: var(--primaire); }
.bouton--secondaire:hover { background: var(--primaire-clair); color: var(--primaire-fonce); }
.bouton--danger { background: var(--danger); border-color: var(--danger); }
.bouton--danger:hover { background: #8c1d17; }
.bouton--petit { padding: 4px 10px; font-size: 14px; }
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.en-ligne { display: inline; margin: 0; }

.filtres { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; }
.filtres .champ { flex: 1 1 200px; margin-bottom: 12px; }
.filtres .bouton { margin-bottom: 12px; }
td input[type=text], td select { min-width: 140px; }
details summary { cursor: pointer; color: var(--primaire); margin: 4px 0; }
details form { margin-top: 8px; display: grid; gap: 6px; }

/* --- Tableaux ---------------------------------------------------------- */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { font-size: 14px; color: var(--texte-doux); font-weight: 600; background: #fafbfc; }
tr.inactif td { color: var(--texte-doux); }
.numerique { text-align: right; font-variant-numeric: tabular-nums; }

.pastille { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #eef0f3; color: var(--texte-doux); white-space: nowrap; }
.pastille--ouverte, .pastille--actif { background: var(--succes-clair); color: var(--succes); }
.pastille--preparation { background: var(--alerte-clair); color: var(--alerte); }
.pastille--validee { background: var(--succes-clair); color: var(--succes); }
.pastille--en_attente { background: var(--alerte-clair); color: var(--alerte); }
.pastille--refusee { background: var(--danger-clair); color: var(--danger); }
.pastille--admin { background: var(--primaire-clair); color: var(--primaire); }

.details-json { font-family: ui-monospace, monospace; font-size: 13px; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* --- Double authentification ------------------------------------------ */
.qr { background: #fff; display: inline-block; padding: 12px; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.codes { font-family: ui-monospace, monospace; columns: 2; padding-left: 20px; }

/* --- Pagination -------------------------------------------------------- */
.pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 16px 0; flex-wrap: wrap; }
.pagination a, .pagination span { display: block; padding: 6px 12px; border: 1px solid var(--bordure); border-radius: 6px; text-decoration: none; background: #fff; }
.pagination .courante span { background: var(--primaire); color: #fff; border-color: var(--primaire); }
.pagination .desactive span { color: #aab0bb; }

.pied { text-align: center; color: var(--texte-doux); font-size: 14px; padding: 24px 16px; }

@media (max-width: 640px) {
    h1 { font-size: 22px; }
    .carte { padding: 16px; }
}

/* --- Suppression ------------------------------------------------------- */
.suppression summary { color: var(--danger); }
.suppression .case { max-width: 340px; font-size: 14px; }

/* --- Calendrier interclub ---------------------------------------------- */
.grille--journees { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.journee { padding: 14px 16px; margin-bottom: 0; }
.journee__titre { margin-bottom: 8px; }
table.rencontres { background: none; }
table.rencontres td { padding: 4px 6px; border-bottom: 1px solid var(--bordure); }
table.rencontres tr:last-child td { border-bottom: 0; }
td.contre { color: var(--texte-doux); width: 1%; }
.division { display: block; font-size: 12px; color: var(--texte-doux); }
h3 { font-size: 17px; margin: 20px 0 10px; }
td.actions-rencontre { white-space: nowrap; text-align: right; }
.journee details form + form { margin-top: 4px; }

/* --- Feuille de match -------------------------------------------------- */
.grille--deux { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); align-items: start; }
.grille--deux .carte { margin-bottom: 0; }
table.equipes { margin-bottom: 12px; background: none; }
table.equipes th, table.equipes td { padding: 6px 8px; }
table.scores td, table.scores th { padding: 6px 8px; }
tr.equipe-a td:first-child { box-shadow: inset 4px 0 0 var(--succes); }
tr.equipe-b td:first-child { box-shadow: inset 4px 0 0 var(--alerte); }
.pastille--a_jouer { background: #eef0f3; color: var(--texte-doux); }
.pastille--importee { background: var(--alerte-clair); color: var(--alerte); }
.pastille--victoire { background: var(--succes-clair); color: var(--succes); }
.pastille--nul { background: var(--primaire-clair); color: var(--primaire); }
.pastille--defaite { background: #eef0f3; color: var(--texte-doux); }
.pastille--forfait { background: var(--danger-clair); color: var(--danger); }
ol.etapes { padding-left: 20px; margin: 0; }
ol.etapes li { margin-bottom: 12px; }
ol.etapes .bouton { margin-top: 6px; }
.formulaire-import { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.formulaire-import .etiquette { width: 100%; font-weight: 600; }
table.saisie-scores input[type=text] { width: 3.2em; min-width: 0; padding: 4px; text-align: center; }
table.saisie-scores td:nth-child(2) input[type=text] { width: 4.5em; }
table.saisie-scores td { padding: 4px 6px; }
.signalement { border-left: 3px solid var(--alerte); padding: 4px 12px; margin-bottom: 12px; }
.signalement p { margin: 4px 0 0; white-space: pre-line; }
.espace-haut { margin-top: 16px; }
textarea { width: 100%; max-width: 640px; padding: 9px 11px; border: 1px solid #b9c0cc; border-radius: 6px; font: inherit; }
@media (max-width: 640px) { .grille--deux { grid-template-columns: 1fr; } }
table.scores { font-size: 14px; }
table.scores td, table.scores th { padding: 5px 5px; }
table.scores td:nth-child(2) { min-width: 9em; }
details form > button.bouton, details form > .bouton { justify-self: start; }

/* --- Résultats dans le calendrier ------------------------------------- */
table.rencontres tr.score-rencontre td { padding-top: 0; padding-bottom: 2px; font-size: 14px; border-bottom: 0; color: var(--texte-doux); }
table.rencontres tr:has(+ tr.score-rencontre) td { border-bottom: 0; }
table.rencontres tr.score-rencontre:not(:has(+ tr.score-rencontre)) td { border-bottom: 1px solid var(--bordure); padding-bottom: 6px; }
table.rencontres tr.score-rencontre td.gagnant { color: var(--succes); }
.score-equipe__lettre { display: inline-block; min-width: 2.6em; font-size: 12px; color: var(--texte-doux); }
.score-equipe__mot { font-size: 12px; }

/* --- Classements ------------------------------------------------------- */
.barre-outils { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.onglets a { padding: 6px 12px; border-radius: 6px; text-decoration: none; border: 1px solid var(--bordure); background: var(--surface); }
.onglets a.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.choix-saison { display: flex; gap: 8px; align-items: center; margin: 0; }
.choix-saison label { font-weight: 600; }
.choix-saison select { width: auto; }
.classement h3 { margin-top: 0; }
.classement table td, .classement table th { padding: 6px 8px; }
table.individuel { font-size: 14px; }
table.individuel td.historique, table.individuel th.historique { color: var(--texte-doux); background: #fafbfc; }
tr.podium td:first-child { font-weight: 700; color: var(--primaire); }
.podium-liste { list-style: none; padding: 0; margin: 0; }
.podium-liste li { margin: 6px 0; }
.medaille { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #eef0f3; }
.medaille--1 { background: #f5d76e; } .medaille--2 { background: #d7dbe0; } .medaille--3 { background: #e5b98a; }
.liste-simple { padding-left: 18px; margin: 0; }
.impression-seulement { display: none; }

@media print {
    .entete, .pied, .sans-impression, .barre-outils, .message { display: none !important; }
    .impression-seulement { display: inline; }
    body { background: #fff; font-size: 11px; }
    main { max-width: none; padding: 0; }
    .carte { border: 0; padding: 0; margin-bottom: 12px; break-inside: avoid; }
    .tableau-conteneur { overflow: visible; }
    table.individuel, .classement table { font-size: 10px; }
    .classement td, .classement th { padding: 2px 4px; font-size: 10px; }
    h1 { font-size: 18px; } h2 { font-size: 15px; } h3 { font-size: 13px; }
    .saut-page { break-before: page; }
    .grille--deux { grid-template-columns: 1fr 1fr; }
    a { color: inherit; text-decoration: none; }
}
.message .etiquette { display: block; margin-top: 8px; font-weight: 600; }
.message textarea { display: block; margin-top: 4px; }