/* Interface de l'appli (après connexion) et écrans d'entrée. Couleur du club : --accent. */
:root {
  --surface: #ffffff;
  --bord: #deddd6;
  --survol: #efeee8;
  --succes: #0f6e56;
  --rayon: 10px;
  --menu-largeur: 15rem;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #1f1f1d; --bord: #383834; --survol: #2a2a27; --succes: #5dcaa5; }
}

.appli-corps { min-height: 100dvh; }
[hidden] { display: none !important; }
h1 { font-size: 1.6rem; color: var(--texte); }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
a { color: var(--accent); }

/* ── Boutons et champs ── */
button, .bouton {
  font: inherit; cursor: pointer; border-radius: 8px; padding: .55rem 1rem;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
button:disabled { opacity: .55; cursor: default; }
.principal { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.secondaire { background: transparent; }
.danger { background: transparent; border-color: var(--alerte); color: var(--alerte); }
.lien { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, tr:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.champ { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; min-width: 0; }
.champ span { font-size: .9rem; color: var(--discret); }
input, select {
  font: inherit; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bord); border-radius: 8px; padding: .55rem .7rem; width: 100%;
}
input:disabled, select:disabled { background: var(--survol); }
.deux, .trois { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .deux { grid-template-columns: 1fr 1fr; } .trois { grid-template-columns: 2fr 1fr 1fr; } }
.cases { border: 1px solid var(--bord); border-radius: var(--rayon); padding: .75rem 1rem; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.cases legend { color: var(--discret); font-size: .9rem; padding: 0 .3rem; }
.case { display: inline-flex; align-items: center; gap: .4rem; }
.case input { width: auto; }
.actions-form { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ── Écrans d'entrée ── */
.porte { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.carte { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--bord); border-radius: 14px; padding: 2rem 1.5rem; }
.carte h1 { margin: .25rem 0 1rem; }
.carte .principal { width: 100%; margin-top: .5rem; }
.marque { margin: 0; color: var(--accent); font-weight: 700; font-size: 1.25rem; }
.avis { background: var(--survol); border-left: 3px solid var(--accent); padding: .6rem .8rem; border-radius: 6px; }
.liens { display: flex; flex-direction: column; gap: .5rem; margin: 1.25rem 0 0; align-items: flex-start; }
.choix { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.choix-club { width: 100%; justify-content: space-between; text-align: left; }
.etapes { padding-left: 1.2rem; }
.etapes li { margin-bottom: .75rem; }
.secret { display: block; font-size: 1.05rem; letter-spacing: .05em; background: var(--survol); padding: .5rem .7rem; border-radius: 6px; margin: .4rem 0; word-break: break-all; }

/* ── Structure de l'appli ── */
.appli { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100dvh; }
.entete {
  display: flex; align-items: center; gap: .75rem; padding: .6rem 16px;
  border-bottom: 1px solid var(--bord); background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.entete-club { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; }
.club-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-actions { display: flex; align-items: center; gap: .5rem; }
.entete-actions select { width: auto; padding: .35rem .5rem; }
.entete-actions button { padding: .35rem .7rem; }
.badge { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: var(--survol); color: var(--discret); white-space: nowrap; }
.badge[data-statut="lecture_seule"] { color: var(--alerte); }
.menu-bouton { padding: .4rem; border: none; background: none; }
.burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: var(--texte); position: relative; content: ""; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.menu { border-right: 1px solid var(--bord); background: var(--surface); padding: 1rem .5rem; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: .55rem .8rem; border-radius: 8px; color: var(--texte); text-decoration: none; }
.menu a:hover { background: var(--survol); }
.menu a.actif { background: var(--survol); color: var(--accent); font-weight: 600; }
.menu-titre { font-size: .8rem; color: var(--discret); text-transform: uppercase; letter-spacing: .06em; margin: 1.5rem .8rem .4rem; }
.fermes li { padding: .45rem .8rem; color: var(--discret); opacity: .75; display: flex; flex-direction: column; }
.fermes small { font-size: .75rem; }
.ecran { padding: 1.25rem 16px 5rem; max-width: 64rem; width: 100%; outline: none; }

.appli > * { min-width: 0; }
@media (max-width: 47.99rem) {
  /* Téléphone : la langue et la déconnexion passent dans le menu déroulant. */
  .entete-actions { display: none; }
  .menu-ouvert .entete { flex-wrap: wrap; }
  .menu-ouvert .entete-actions { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-end; padding-top: .4rem; }
  .menu { position: fixed; inset: 3.2rem 0 0 0; z-index: 4; display: none; overflow-y: auto; }
  .menu-ouvert .menu { display: block; top: 6rem; }
  .ecran { padding-top: 1rem; }
}
@media (min-width: 48rem) {
  .appli { grid-template-columns: var(--menu-largeur) 1fr; grid-template-rows: auto 1fr; }
  .entete { grid-column: 1 / -1; }
  .menu-bouton { display: none; }
  .ecran { padding: 1.75rem 2rem 4rem; }
}

/* ── Contenu des écrans ── */
.titre-ecran { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.titre-ecran h1 { margin: 0; }
.actions { display: flex; gap: .5rem; }
.sous-titre { font-size: 1.1rem; margin: 0 0 1rem; }
.barre { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.barre .recherche { flex: 1 1 14rem; }
.barre select { flex: 0 1 14rem; width: auto; }
.tableau-defile { overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--bord); }
.tableau th { font-size: .85rem; color: var(--discret); font-weight: 500; }
.tableau tr:last-child td { border-bottom: none; }
.cliquable { cursor: pointer; }
.cliquable:hover { background: var(--survol); }
.compte { font-size: .85rem; }
.vide { padding: 1.5rem; border: 1px dashed var(--bord); border-radius: var(--rayon); color: var(--discret); text-align: center; }
.note { background: var(--survol); padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; }
.formulaire { max-width: 40rem; }
.cartes { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.carte-equipe {
  display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border: 1px solid var(--bord);
  border-radius: var(--rayon); background: var(--surface); color: var(--texte); text-decoration: none;
}
.carte-equipe:hover { border-color: var(--accent); }
.carte-equipe .badge { align-self: flex-start; color: var(--accent); }
.liste-simple { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.liste-simple li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--bord); }
.liste-simple li:last-child { border-bottom: none; }
.zone-danger { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bord); display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.zone-danger p { flex-basis: 100%; margin: 0; font-size: .85rem; }

/* ── Bandeau et état du réseau ── */
.bandeau {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 32px); padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--texte); color: var(--fond); box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.bandeau[data-genre="erreur"] { background: var(--alerte); color: #fff; }
.file-etat {
  position: fixed; right: 16px; bottom: 4.5rem; z-index: 15; display: flex; flex-direction: column; gap: .3rem;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .9rem; font-size: .88rem; max-width: 22rem;
}
.file-etat .hors-reseau { color: var(--alerte); font-weight: 600; }
.file-etat .echec { color: var(--alerte); }

/* ── Inscription et assistant ── */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.carte h2.section { font-size: 1rem; margin: 1.5rem 0 .75rem; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; }
.porte .carte { max-width: 32rem; }
.engagements { border: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.engagement { align-items: flex-start; }
.engagement input { margin-top: .3rem; }
.petit { font-size: .85rem; }
.fil { list-style: none; padding: 0; margin: 1.25rem 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: etape; }
.fil li { counter-increment: etape; }
.fil a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--bord); color: var(--discret); text-decoration: none; font-size: .9rem; }
.fil a::before { content: counter(etape) ". "; }
.fil .faite a { color: var(--texte); }
.fil .actuelle a { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pied-assistant { margin-top: 2rem; }
.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.categorie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); }
.categorie input { width: 4rem; padding: .3rem .4rem; }
.couleur input { width: 4rem; height: 2.4rem; padding: .15rem; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.puces li { background: var(--survol); padding: .2rem .6rem; border-radius: 999px; font-size: .9rem; }
.note.ok { border-left: 3px solid var(--succes); }
.erreurs { color: var(--alerte); font-size: .9rem; max-height: 16rem; overflow-y: auto; }
section + section { margin-top: 1rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }

/* ── Lot 7 : entraînements, matchs, indisponibilités, pilotage ── */
.badge.alerte { color: var(--alerte); }
.avis.alerte { border-left-color: var(--alerte); margin: 1rem 0; }
.avis.alerte ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.carte-seance, .carte-match {
  display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .8rem 1rem; color: inherit; text-decoration: none;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.carte-seance:hover, .carte-match:hover { border-color: var(--accent); }
.carte-seance .badge, .carte-match .badge { align-self: flex-start; }
.carte-match.resultat-v { border-left: 4px solid var(--accent); }
.carte-match.resultat-d { border-left: 4px solid var(--alerte); }
.carte-match.resultat-n { border-left: 4px solid var(--discret); }
.score { font-variant-numeric: tabular-nums; font-weight: 600; }
.score.grand { font-size: 1.6rem; }

.appel { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.ligne-appel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .55rem .9rem; border-bottom: 1px solid var(--bord); }
.ligne-appel:last-child { border-bottom: none; }
.nom-appel .badge { margin-left: .4rem; }
.choix-statut { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.choix-statut select { width: auto; padding: .35rem .5rem; font-size: .85rem; }
button.statut { padding: .35rem .6rem; font-size: .85rem; border-radius: 999px; background: transparent; border: 1px solid var(--bord); color: var(--texte); cursor: pointer; }
button.statut[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--fond); }
button.statut-absent[aria-pressed="true"] { background: var(--alerte); border-color: var(--alerte); }
button.statut-excuse[aria-pressed="true"], button.statut-retard[aria-pressed="true"] { background: var(--discret); border-color: var(--discret); }
.actions-form.collant { position: sticky; bottom: 0; padding: .75rem 0; background: var(--fond); }

.tableau th[scope="row"] { color: var(--texte); font-size: inherit; font-weight: 400; }
.feuille th[scope="row"] { min-width: 11rem; }
.feuille th[scope="row"] .badge { margin-left: .3rem; }
.feuille td { padding: .4rem .3rem; }
.feuille select { width: auto; }
input.nombre { width: 4.2rem; }
.score-saisie { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); align-items: end; gap: .75rem; }
.score-saisie .champ { margin: 0; }
.score-saisie select { flex: none; width: 100%; }
.score-saisie input.nombre { width: 100%; }

.indispo .actions-ligne { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.indispo .actions-ligne input { width: auto; }

.chiffres { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); margin: 1rem 0; }
.chiffre { display: flex; flex-direction: column; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.chiffre strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.chiffre span { color: var(--discret); font-size: .85rem; }
.bloc { margin: 1.5rem 0; }
.barres { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.barres li { display: grid; grid-template-columns: minmax(5rem, 9rem) 1fr 3.5rem; gap: .6rem; align-items: center; }
.barres .etiquette { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barres .valeur { text-align: right; font-variant-numeric: tabular-nums; color: var(--discret); }
.barre-fond { display: block; height: .7rem; background: var(--survol); border-radius: 999px; overflow: hidden; }
.barre-remplie { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cellule-barre { min-width: 6rem; }