:root {
  --vert: #1f7a3d;
  --vert-clair: #e6f4ea;
  --rouge: #b3261e;
  --rouge-clair: #fce8e6;
  --orange: #8a5a00;
  --orange-clair: #fff4e0;
  --gris: #5f6368;
  --bord: #dadce0;
  --texte: #202124;
}

* { box-sizing: border-box; }

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

/* Regroupe le bandeau formation (optionnel) + le bandeau habituel : ensemble
   sticky en haut d'écran, pour que les deux restent visibles au défilement
   sans se chevaucher (au lieu de rendre chacun sticky séparément). */
.bandeau-groupe {
  position: sticky;
  top: 0;
  z-index: 100;            /* reste au-dessus du contenu lors du défilement */
}

.bandeau {
  background: #4a148c;
  padding: 12px 16px;
}
.bandeau-titre {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

/* Menu bénévole (fragment partagé bandeau / dashboard admin) */
.menu-benevole { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.menu-benevole a { color: #1a73e8; text-decoration: none; font-weight: 600; }
.menu-benevole a:hover { text-decoration: underline; }
/* Sur le bandeau violet, les liens passent en blanc. */
.bandeau .menu-benevole { margin-top: 8px; }
.bandeau .menu-benevole a { color: #fff; opacity: 0.95; }

/* Menu du bandeau : replié par défaut (mobile-first — le menu à plat prenait
   jusqu'à 3 lignes au-dessus du contenu sur petit écran, ex. iPhone 13 mini).
   Repose sur <details>/<summary> natifs (aucun JS). DEUX rendus séparés du
   même contenu (base.html inclut le fragment de liens deux fois) plutôt
   qu'un unique <details> qu'on tenterait de "forcer ouvert" en CSS sur grand
   écran : cette dernière approche s'est révélée peu fiable (menu resté
   invisible sur ordinateur — certains moteurs de rendu appliquent un
   `content-visibility` interne aux <details> fermés que l'auteur ne peut pas
   surcharger simplement via `display`). Ici, bascule pure entre deux blocs
   distincts via `display:none/block` — comportement standard, sans piège. */
.menu-bandeau { border: none; }
.menu-bandeau > summary {
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  margin-top: 8px;
  list-style: revert;
}
.menu-bandeau > summary::marker { color: #fff; }
.menu-bandeau-large { display: none; }
@media (min-width: 640px) {
  .menu-bandeau { display: none; }
  .menu-bandeau-large { display: block; }
}

.contenu {
  max-width: 540px;
  margin: 0 auto;
  padding: 16px;
}

/* Pages riches en tableau (grille du planning) : conteneur élargi sur grand
   écran pour éviter le défilement horizontal, tout en restant fluide sur mobile. */
.contenu-large { max-width: min(1180px, 96vw); }

.carte {
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

h1 { font-size: 1.5rem; margin: 0 0 12px; }

/* États */
.etat {
  display: inline-block;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 8px;
}
.etat-dispo { background: var(--vert-clair); color: var(--vert); }
.etat-sorti { background: var(--rouge-clair); color: var(--rouge); }
.dispo-titre { color: var(--gris); margin-top: 0; }

/* Caractéristiques */
.caracteristiques {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 16px 0;
}
.caracteristiques dt { color: var(--gris); }
.caracteristiques dd { margin: 0; font-weight: 600; }
.descriptif { color: #3c4043; }

/* Boutons d'action (grandes cibles tactiles) */
.bouton {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 20px;
  margin: 12px 0;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
.bouton-sous {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 4px;
}
.bouton-principal { background: var(--vert); }
.bouton-secondaire { background: #fff; color: var(--gris); border: 2px solid var(--bord); }
/* Bouton désactivé (générique, tout usage) : avant cette règle, chaque écran
   qui en avait besoin réinventait son propre gris en style inline
   (voir admin_fonctionnalites.html) faute de composant partagé. */
.bouton:disabled { opacity: .5; cursor: not-allowed; filter: none; }

/* --- Accessibilité & micro-interactions (tout le site) --- */

/* Lien d'évitement (E1, docs/audit-ux-2026-07-18.md) : premier élément du
   document, hors écran par défaut, ramené visible au focus clavier — motif
   standard, pour ne pas obliger à traverser le bandeau (menu + jusqu'à deux
   bandeaux formation/rangement) à chaque page. */
.saut-contenu {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 1000;
  background: #fff;
  color: var(--texte);
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid #7e57c2;
  text-decoration: none;
  font-weight: 600;
}
.saut-contenu:focus {
  top: 8px;
}

/* Focus clavier visible et homogène (sans gêner le clic souris). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #7e57c2;
  outline-offset: 2px;
  border-radius: 6px;
}
/* Champs de saisie : liseré violet au focus (souris comme clavier). */
.champ input:focus,
.champ select:focus,
.champ textarea:focus { border-color: #7e57c2; }

/* Retour visuel à l'appui sur les boutons et puces. */
.bouton, .bouton-filtrer, .chip-filtre { transition: filter .12s ease, transform .06s ease; }
.bouton:hover, .bouton-filtrer:hover { filter: brightness(.96); }
.bouton:active, .bouton-filtrer:active, .chip-filtre:active { transform: translateY(1px); }

/* Ouverture animée des panneaux <details class="recherche"> (léger). */
@keyframes recherche-ouverture {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.recherche[open] > *:not(summary),
.aide-inline[open] > *:not(summary) {
  animation: recherche-ouverture .18s ease-out;
}
.recherche > summary { transition: color .12s ease; }

/* Aide contextuelle repliée (S4, docs/idees-ux.md) : même langage visuel que
   .recherche (bordure, résumé cliquable, <details> natif, sans JS), teinte de
   fond différente pour ne jamais être confondue avec un panneau de filtre. Un
   <details class="aide-inline"><summary>❓ …</summary>…</details> par écran
   dense, 2-3 phrases + lien vers la page d'aide complète quand elle existe. */
.aide-inline {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0;
  background: #f8f6fb;
}
.aide-inline > summary {
  cursor: pointer;
  font-weight: 600;
  color: #4a148c;
  transition: color .12s ease;
}
.aide-inline p:last-child { margin-bottom: 0; }

/* Respect des préférences système : on coupe tout mouvement. */
@media (prefers-reduced-motion: reduce) {
  .jeu, .bouton, .bouton-filtrer, .chip-filtre { transition: none; }
  .jeu:hover, .bouton:active, .bouton-filtrer:active, .chip-filtre:active { transform: none; }
  .recherche[open] > *:not(summary),
  .aide-inline[open] > *:not(summary) { animation: none; }
}

/* Page d'accueil */
.accueil { text-align: center; }
.accueil-dispo { font-size: 1.2rem; margin: 8px 0 20px; }
.accueil-dispo strong { font-size: 1.6rem; color: var(--vert); }
.accueil-dispo-total { color: var(--gris); font-size: 0.95rem; }
.accueil-outils { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil-outils .bouton { flex: 1 1 200px; margin: 0; }

/* Résultat d'action */
.resultat {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.resultat-ok { background: var(--vert-clair); border: 2px solid var(--vert); }
.resultat-info { background: #e8f0fe; border: 2px solid #1a73e8; }
.resultat-attention { background: var(--orange-clair); border: 2px solid var(--orange); color: var(--orange); }
.resultat-libelle { margin: 0; font-size: 1.1rem; color: var(--vert); }
.pochette-num {
  margin: 4px 0;
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--vert);
}
/* Retour d'un jeu : même gabarit que le prêt, numéro en BLEU pour distinguer
   d'un coup d'œil « je récupère » (retour) de « je dépose » (prêt, vert). */
.pochette-num--retour { color: #1a73e8; }
.resultat-consigne { margin: 0; font-weight: 600; }

/* Code personnel (fiche D4, docs/audit-ux-2026-07-18.md) : code de
   désinscription tournoi, code de modification planning — même besoin
   (perdre le code = perdre la main sur son inscription/sa réponse), même
   classe. Remplace deux traitements sans rapport : côté tournoi, .pochette-num
   était DÉTOURNÉE (elle désigne officiellement le numéro de pochette depuis
   D3, docs/vocabulaire.md — un détournement trompeur pour qui modifierait un
   jour le style des numéros de pochette) ; côté planning, .pl-code (préfixe
   propre au module planning) faisait déjà l'essentiel du travail (chasse
   fixe : lève l'ambiguïté 0/O et 1/l, utile pour un code recopié à la main)
   mais était trop petite pour porter seule l'attention sur un écran de
   confirmation. Promue et agrandie plutôt que dupliquée. */
.code-personnel {
  font-family: ui-monospace, monospace;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 4px 0;
}

.lien { color: #1a73e8; }
.lien-fiche { margin: 16px 0 0; text-align: center; }

/* Catalogue */
.logo-catalogue { display: block; max-width: 180px; height: auto; margin: 0 auto 12px; }

/* Catalogue — recherche / filtres */
.recherche {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.recherche > summary {
  cursor: pointer;
  font-weight: 600;
  color: #4a148c;
}
.recherche-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { color: var(--gris); font-size: 0.9rem; }
.champ input, .champ select {
  padding: 10px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
}
.recherche-actions { display: flex; align-items: center; gap: 16px; }
.bouton-filtrer {
  background: #4a148c;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
/* M7 (docs/idees-ux.md) : bouton flottant qui ramène au panneau de recherche
   du catalogue (600 titres, un seul long défilement) -- pur CSS (position
   fixed + ancre #haut), aucun JS, aucune pagination. Réutilise l'habillage
   de .bouton-filtrer (couleur, transitions déjà mutualisées plus bas). */
.bouton-haut {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 20;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.catalogue-compte { color: var(--gris); margin: 12px 0 0; }
.derniers-achats { margin: 8px 0 0; padding-left: 20px; }
.derniers-achats li { margin: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
.achat-date { color: var(--gris); font-size: 0.85rem; white-space: nowrap; }

.catalogue-liste { list-style: none; margin: 0; padding: 0; }
.jeu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.jeu-lien { text-decoration: none; color: var(--texte); flex: 1; }
.jeu-nom { display: block; font-weight: 600; }
.jeu-categorie { display: block; font-size: 0.85rem; color: var(--gris); }
.badge {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-dispo { background: var(--vert-clair); color: var(--vert); }
.badge-sorti { background: var(--rouge-clair); color: var(--rouge); }
/* Réutilisées pour l'état des bases en supervision (tableau admin) : une
   pastille compacte se lit mieux dans une cellule qu'une bannière .resultat
   pleine largeur (padding 20px, prévue pour les écrans de prêt/retour). */
.badge-ok { background: var(--vert-clair); color: var(--vert); }
.badge-attention { background: var(--orange-clair); color: var(--orange); }

/* Survol des cartes de jeu (léger relief) */
.jeu {
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.jeu:hover {
  box-shadow: 0 3px 12px rgba(74, 20, 140, .12);
  border-color: #c9b8e8;
  transform: translateY(-1px);
}

/* Puces de filtres actifs (chacune retire son filtre au clic) */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.filtres-actifs .fa-label { color: var(--gris); font-size: .9rem; }
.chip-filtre {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ede7f6; color: #4a148c;
  border-radius: 999px; padding: 4px 12px;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background .15s ease;
}
.chip-filtre:hover { background: #d9ccf0; }
.chip-filtre .croix { font-weight: 700; opacity: .7; }

/* Statistiques */
.stats-chiffres { display: flex; flex-wrap: wrap; gap: 16px; }
.chiffre { flex: 1; min-width: 120px; text-align: center; background: #f8f6fb; border-radius: 10px; padding: 14px; }
.chiffre-val { display: block; font-size: 1.8rem; font-weight: 800; color: #4a148c; }
.chiffre-lib { color: var(--gris); font-size: 0.85rem; }
.stats-bascule { color: var(--gris); }
.palmares { margin: 8px 0 20px; padding-left: 24px; }
.palmares li { margin: 4px 0; }
.palmares-nom { font-weight: 600; }
.palmares-val { color: var(--gris); }
.palmares-val small { color: #6b7075; }
.histo { list-style: none; margin: 0; padding: 0; }
.histo-ligne { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.histo-label { flex-shrink: 0; width: 84px; font-size: 0.85rem; color: var(--gris); }
.histo-barre { height: 16px; background: #7e57c2; border-radius: 4px; min-width: 2px; }
.histo-val { font-size: 0.85rem; font-weight: 600; }
.stats-note { color: #6b7075; font-size: 0.8rem; }
.stats-export { font-weight: 600; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.case input { width: auto; }
/* Tableau de données dense (lecture) : .detail (stats/tournois) et
   .admin-table (admin) sont le même composant, apparu à deux moments du
   projet sous deux noms (voir docs/ui-composants.md §9). Règles fusionnées :
   .detail hérite au passage du correctif anti-débordement mobile
   (vertical-align/word-break) qui n'existait jusqu'ici que pour .admin-table
   (retour terrain iPhone 13 mini). */
.detail, .admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.detail th, .detail td,
.admin-table th, .admin-table td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--bord);
  vertical-align: top; word-break: break-word;
}
.detail th, .admin-table th { color: var(--gris); }

.admin-menu { list-style: none; margin: 0; padding: 0; }
.admin-menu li { margin: 10px 0; font-size: 1.1rem; }
.admin-menu li a { display: flex; align-items: center; }

/* Icône des liens du menu "Gérer" : agrandie pour rester repérable au premier
   coup d'œil même quand le libellé texte est raccourci (voir .admin-menu li a
   title="..." pour le détail complet, affiché au survol sur bureau). */
.admin-icone { font-size: 1.25em; margin-right: 8px; line-height: 1; }

/* Rangement (admin, /admin/rangement) : plusieurs petits formulaires par
   ligne de tableau (renommer / monter / descendre / archiver / supprimer).
   Un <form>/<button> est en bloc par défaut -> les rend inline pour qu'ils
   se posent côte à côte dans une cellule au lieu de s'empiler. */
.rangement-form-inline { display: inline-flex; align-items: center; gap: 6px; margin: 2px 6px 2px 0; }
.rangement-form-inline input[type="text"] {
  padding: 4px 8px; border: 1px solid var(--bord); border-radius: 6px;
  font-size: 0.85rem; width: 140px;
}
.rangement-ordre, .rangement-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Mode rangement au scanner (bandeau d'état persistant, /scanner) : même
   teinte bleue que .resultat-info / .pochette-num--retour (identité visuelle
   "rangement" cohérente, y compris avec le futur bloc "où ranger" au retour).
   Plus compact que .resultat (pas son padding 20px) : pensé pour rester
   affiché en permanence au-dessus de la caméra, pas pour un message ponctuel. */
.rangement-bandeau {
  background: #e8f0fe; border: 2px solid #1a73e8; color: #1a73e8;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-weight: 600;
}
.rangement-bandeau form, .rangement-bandeau details { display: inline; margin: 0; }
.rangement-bandeau summary { cursor: pointer; text-decoration: underline; }

/* Bloc "🗄️ Où ranger le jeu" au retour (pret.html, résultats rendu/
   rendu_tournoi) : même esprit que .pochette-num (libellé + valeur en gros),
   mais dimensionné pour un texte parfois long (nom d'étagère, description
   libre) plutôt qu'un numéro à 1-3 chiffres — 5rem déborderait/serait
   illisible. Même teinte bleue que .resultat-info / le bandeau du mode
   rangement au scanner (identité "rangement" cohérente sur tout le site). */
.rangement-valeur {
  margin: 4px 0; font-size: 1.8rem; font-weight: 800; line-height: 1.25;
  color: #1a73e8;
}

/* Édition à l'unité du rangement sur la fiche admin (admin_fiche.html, §4.c) :
   les deux formulaires (événement / local) empilés sous chaque étiquette. */
.rangement-edition { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rangement-edition label { font-size: 0.85rem; color: var(--gris); }
.rangement-edition select {
  padding: 4px 8px; border: 1px solid var(--bord); border-radius: 6px; font-size: 0.85rem;
}

/* Sous-groupes du menu "Gérer" (Jeux & étiquettes / Données & accès / Événement /
   Configuration). Le titre de groupe est masqué par défaut (mobile = référence
   inchangée : les items s'enchaînent comme une seule liste, .admin-menu n'ayant
   pas de marge de ul propre) et n'apparaît qu'à partir du breakpoint bureau,
   où les groupes passent en grille 2 colonnes (voir media query) — la marge
   verticale entre groupes est donc gérée par la bordure de la 2e rangée, pas
   par la marge du titre (mise à 0 pour éviter tout cumul). */
.admin-groupe-titre {
  display: none;
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
}

/* Tableau de bord admin : une seule colonne (comportement de référence, cartes
   empilées via leur marge habituelle .carte) sous le breakpoint bureau ; deux
   colonnes (menu + supervision en direct) au-delà — voir la media query. */
.admin-dashboard-col-supervision { display: none; }

@media (min-width: 900px) {
  .admin-dashboard-grille {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: 16px;
  }
  .admin-dashboard-col-supervision { display: block; }

  /* Sur le tableau de bord, la supervision est déjà visible dans la colonne de
     droite : le lien vers la page dédiée dans le menu "Gérer" devient redondant. */
  .admin-menu-lien-supervision { display: none; }

  /* Cartes du tableau de bord un peu plus compactes qu'ailleurs (padding et
     espacement resserrés) pour limiter la hauteur totale de la page. Scopé à
     .admin-dashboard-grille pour ne pas toucher .carte sur les autres écrans
     larges (stats, planning, tournois...). */
  .admin-dashboard-grille .carte { padding: 16px 20px; margin-bottom: 12px; }
  .admin-dashboard-grille h1 { font-size: 1.3rem; margin: 0 0 8px; }
  .admin-dashboard-grille h2 { font-size: 1.1rem; margin: 0 0 6px; }
  /* Sous-titres de la colonne supervision (Bases de données, Espace disque...) :
     même resserrage. Scopé à la colonne supervision (pas .admin-dashboard-grille
     h3) pour ne jamais entrer en conflit de spécificité avec .admin-groupe-titre. */
  .admin-dashboard-col-supervision h3 { font-size: 0.95rem; margin: 12px 0 4px; }
  .admin-dashboard-col-supervision p { margin: 4px 0; }

  /* Sous-groupes du menu "Gérer" sur 2 colonnes (au lieu d'empiler 4 groupes) :
     divise la hauteur du menu par ~2. La 2e rangée (3e/4e groupe) reçoit une
     bordure haute pour marquer la séparation entre rangées. */
  .admin-groupes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .admin-groupe-titre { display: block; }
  .admin-groupe:nth-of-type(n+3) { border-top: 1px solid var(--bord); padding-top: 8px; margin-top: 6px; }

  .admin-menu li { margin: 4px 0; font-size: 1rem; }
  .admin-menu li a { padding: 5px 8px; margin: 0 -8px; border-radius: 8px; }
  .admin-menu li a:hover { background: var(--vert-clair); text-decoration: none; }
  .admin-icone { font-size: 1.4em; }
}

/* Légende des états de fonctionnalités */
.fonct-legende { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 20px; }
.fonct-legende dt { font-weight: 700; white-space: nowrap; }
.fonct-legende dd { margin: 0; color: var(--gris); font-size: 0.92rem; }
.etiquette-bloc { padding: 12px 16px; }
.etiquette-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.etiquette-apercu { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--bord); border-radius: 6px; }
.champ textarea { padding: 10px; border: 1px solid var(--bord); border-radius: 8px; font-size: 1rem; font-family: inherit; }
.copie-ok { color: var(--vert); font-weight: 600; margin-left: 8px; }

/* Partage du lien d'activation : pastilles colorées par canal */
.partage-titre { font-weight: 600; margin-bottom: 6px; }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 999px;
  padding: 8px 14px; font-size: 0.95rem; font-weight: 600;
  color: #fff; text-decoration: none; cursor: pointer;
}
.chip-wa { background: #25d366; }       /* WhatsApp */
.chip-mail { background: #5f6368; }     /* E-mail */
.chip-sms { background: #1a73e8; }      /* SMS */
.chip-discord { background: #5865f2; }  /* Discord (couleur Blurple) */

/* Impression d'étiquettes en lot */
.grille-params { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.grille-params label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; color: var(--gris); }
.grille-params input { padding: 6px 8px; border: 1px solid var(--bord); border-radius: 6px; }
.compteur { font-weight: 700; color: #4a148c; margin: 10px 0; }
.filtre-cat { margin-bottom: 12px; }
.select-actions { display: flex; gap: 12px; margin-bottom: 8px; }
.lien-bouton { background: none; border: none; color: #1a73e8; font-weight: 600; cursor: pointer; padding: 0; }
.liste-jeux { list-style: none; margin: 0 0 16px; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 8px; }
.liste-jeux li { padding: 6px 12px; border-bottom: 1px solid #eee; }
.liste-jeux .case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.jeu-nb { margin-left: auto; color: var(--gris); font-size: 0.85rem; white-space: nowrap; }

/* Scanner */
.scanner-cadre { background: #000; border-radius: 12px; overflow: hidden; }
.scanner-video { display: block; width: 100%; height: auto; }
.scanner-statut { font-weight: 600; }
.scanner-aide { color: var(--gris); font-size: 0.9rem; }
.saisie-manuelle { display: grid; gap: 12px; margin-top: 8px; }
.saisie-manuelle .bouton-filtrer { width: 100%; }

.pied {
  max-width: 540px;
  margin: 8px auto 24px;
  padding: 0 16px;
  text-align: center;
  color: var(--gris);
  font-size: 0.85rem;
}

/* --- Module tournois --- */
a.bouton { text-align: center; text-decoration: none; box-sizing: border-box; }
/* Bouton d'action discret rendu comme un lien (ex. « Retirer » un participant). */
button.lien {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Planning des tournois (page d'accueil, façon agenda) --- */
:root { --slot-h: 1.8rem; --gutter-w: 3rem; }   /* hauteur d'un créneau 30 min ; largeur gouttière heures */
.planning-jour-titre { margin: 20px 0 8px; font-size: 1.05rem; }

/* Grand écran : frise calendrier (gouttière d'heures + couloirs en colonnes). */
.planning-grille {
  display: grid;
  position: relative;
  isolation: isolate;      /* confine le z-index interne des blocs (pas de débordement sur le bandeau) */
  column-gap: 6px;
  row-gap: 0;
  margin-bottom: 8px;
}
/* Filets horizontaux à chaque heure (fond), sur toute la largeur. */
.planning-ligne {
  grid-column: 1 / -1;
  border-top: 1px solid var(--bord);
  z-index: 0;
}
/* Étiquette d'heure, alignée sur le filet. */
.planning-heure {
  grid-column: 1;
  font-size: 0.72rem;
  color: var(--gris);
  white-space: nowrap;
  transform: translateY(-0.55rem);
  z-index: 1;
}
/* Carte d'un tournoi. */
.planning-bloc {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--texte);
  background: #eef3fe;
  border-left: 4px solid #1a73e8;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  padding: 3px 8px;
  margin: 1px 0;
  font-size: 0.78rem;
  line-height: 1.15;
  /* Hauteur mini = ~2 lignes (heure + titre) pour les tournois courts (≤ 30 min) ;
     la hauteur reste proportionnelle pour les tournois plus longs. */
  min-height: 2.2rem;
}
.planning-bloc:hover { box-shadow: 0 2px 6px rgba(0,0,0,.16); }
.planning-bloc--lance   { background: var(--orange-clair); border-left-color: var(--orange); }
.planning-bloc--termine { background: #f1f3f4; border-left-color: #6b7075; color: var(--gris); }
.planning-bloc-heure { font-weight: 700; font-size: 0.72rem; color: var(--gris); }
.planning-bloc-nom { font-weight: 700; }
.planning-bloc-meta { color: var(--gris); font-size: 0.72rem; }

/* Mobile : agenda empilé (cartes chronologiques pleine largeur). */
@media (max-width: 640px) {
  .planning-grille { display: flex; flex-direction: column; gap: 8px; }
  .planning-ligne, .planning-heure { display: none; }
  .planning-bloc {
    grid-column: auto !important;
    grid-row: auto !important;
    font-size: 0.92rem;
    padding: 8px 12px;
  }
  .planning-bloc-heure, .planning-bloc-meta { font-size: 0.82rem; }
}

/* ===================================================================
   Module PLANNING BÉNÉVOLE (classes préfixées pl-* pour éviter toute
   collision avec la frise « planning des tournois » de l'accueil).
   =================================================================== */
.pl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.pl-grille { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.pl-grille th, .pl-grille td {
  border: 1px solid var(--bord); padding: 5px 7px; vertical-align: top; text-align: left;
}
.pl-grille thead th { background: var(--vert-clair); color: var(--vert); white-space: nowrap; }
.pl-horaire { white-space: nowrap; background: #fafafa; color: var(--gris); font-weight: 700; }
.pl-grise { background: repeating-linear-gradient(45deg,#eee,#eee 6px,#e3e3e3 6px,#e3e3e3 12px); }
.pl-nom {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--vert-clair); color: var(--vert);
  border-radius: 6px; padding: 1px 6px; margin: 1px; font-size: 0.8rem; white-space: nowrap;
}
.pl-verrou { background: var(--orange-clair); color: var(--orange); }
.pl-compte { display: inline-block; color: var(--gris); font-size: 0.72rem; margin-left: 2px; }
.pl-add { display: inline-flex; gap: 2px; margin-top: 3px; }
.pl-add select { font-size: 0.75rem; max-width: 110px; }

/* Petits boutons inline (ajouter, retirer, verrou). */
.pl-inline-form { display: inline; margin: 0; }
.pl-mini, .pl-x {
  border: none; background: transparent; cursor: pointer; font-size: 0.8rem;
  padding: 0 2px; line-height: 1;
}
.pl-x { color: var(--rouge); }

/* Listes de trame (postes / créneaux) et formulaires d'ajout. */
.pl-inline-liste { list-style: none; padding: 0; margin: 6px 0; }
.pl-inline-liste li {
  display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--bord);
}
.pl-recherche { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; }
.pl-recherche input[type="text"], .pl-recherche input[type="number"] {
  padding: 8px; border: 1px solid var(--bord); border-radius: 8px; font-size: 0.95rem;
}
.pl-check { display: inline-flex; align-items: center; gap: 4px; color: var(--gris); font-size: 0.9rem; }
.pl-besoin { width: 3rem; text-align: center; padding: 4px; border: 1px solid var(--bord); border-radius: 6px; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pl-actions form { margin: 0; }

/* Tag d'état + code de modification + cases de disponibilité. */
.pl-tag {
  display: inline-block; background: #eef; color: #334; border-radius: 10px;
  padding: 1px 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .03em;
}
.pl-cases { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pl-case-dispo {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bord);
  border-radius: 8px; padding: 6px 10px; font-size: 0.9rem; cursor: pointer;
}
.pl-prefs { border-collapse: collapse; margin: 6px 0 14px; }
.pl-prefs th, .pl-prefs td { border: 1px solid var(--bord); padding: 5px 9px; text-align: center; }
.pl-prefs tbody th { text-align: left; }
.pl-liste-ev, .pl-mon-liste { list-style: none; padding: 0; }
.pl-liste-ev li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.pl-mon-liste li { padding: 6px 0; border-bottom: 1px solid var(--bord); }

/* Planning — couleurs par ÉTAT de case (grille de gestion) + cases cliquables. */
.pl-etat-grise     { background: repeating-linear-gradient(45deg,#eee,#eee 6px,#e3e3e3 6px,#e3e3e3 12px); }
.pl-etat-trou      { background: var(--rouge-clair); }
.pl-etat-partiel   { background: var(--orange-clair); }
.pl-etat-complet   { background: var(--vert-clair); }
.pl-etat-surcharge { background: #e8eefc; }            /* trop de monde : bleu doux */

.pl-case-lien {
  display: block; text-decoration: none; color: inherit; min-height: 1.6rem;
  padding: 2px; border-radius: 6px;
}
.pl-case-lien:hover { outline: 2px solid var(--vert); outline-offset: -2px; }
.pl-horaire-lien { text-decoration: none; color: var(--gris); white-space: nowrap; }
.pl-horaire-lien:hover { color: var(--vert); }

/* --- Round robin : tableau des confrontations --- */
.rr-scroll { overflow-x: auto; }                 /* défilement horizontal si beaucoup de joueurs */
.rr-table { min-width: max-content; }
.rr-table th, .rr-table td { text-align: center; white-space: nowrap; }
.rr-table .rr-nom { text-align: left; font-weight: 600; }
.rr-table td { font-weight: 700; }
.rr-v { background: var(--vert-clair); color: var(--vert); }
.rr-d { background: var(--rouge-clair); color: var(--rouge); }
.rr-n { background: #e8f0fe; color: #1a73e8; }
.rr-vide { color: #6b7075; }
.rr-self { background: #f1f3f4; }

/* ---------------------------------------------------------------------
   MODE FORMATION (voir app/config.py + docs/mode-formation.md)
   Bandeau fixe très visible + filigrane diagonal en fond, uniquement quand
   MODE_FORMATION=1. Couleur volontairement différente du bandeau habituel
   (#4a148c) pour ne jamais confondre les deux instances au premier coup d'œil.
   ------------------------------------------------------------------- */
.formation-bandeau {
  background: #e65100;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
  letter-spacing: 0.02em;
}

/* Bandeau GLOBAL du mode rangement (fiche B1) — même traitement que le
   bandeau de formation ci-dessus (bande pleine largeur dans .bandeau-groupe,
   donc sticky avec lui). Reprend le BLEU de l'identité « rangement » du site
   (cf. .rangement-valeur / .rangement-bandeau), distinct du violet du bandeau
   habituel et de l'orange de formation : les trois coexistent sans se
   confondre. Contrairement au bandeau de formation, celui-ci porte une
   action (quitter), d'où la mise en ligne flex.
   ⚠️ Nom volontairement distinct de `.rangement-bandeau` (ligne ~415), qui
   est le PANNEAU détaillé de /scanner — deux composants différents. */
.rangement-bandeau-global {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #1a73e8;      /* bleu = identité "rangement" du site */
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
}
.rangement-bandeau-global form { margin: 0; }
.rangement-quitter {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.rangement-quitter:hover { background: rgba(255, 255, 255, 0.15); }

/* Filigrane : texte « FORMATION » répété en diagonale, en surimpression très
   légère sur tout le contenu (pointer-events: none -> n'intercepte aucun clic).
   Pur CSS (image de fond SVG encodée en donnée), aucun JavaScript. */
body.mode-formation::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='140'%3E%3Ctext x='140' y='80' font-size='24' font-family='sans-serif' font-weight='bold' fill='%23e65100' fill-opacity='0.12' text-anchor='middle' transform='rotate(-30 140 80)'%3EFORMATION%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Ne jamais imprimer le bandeau ni le filigrane (gaspillage d'encre, gêne la
   lecture d'une page imprimée depuis une instance de formation). */
@media print {
  .formation-bandeau { display: none; }
  .rangement-bandeau-global { display: none; }
  body.mode-formation::after { display: none; }
  .bouton-haut { display: none; }
  .saut-contenu { display: none; }
}