/* /admin du tournoi : planche 12 « Site du tournoi, administration, ceinture » (hajime-da/png/
   12-Web-ceinture-admin-tournoi.png), thème coach, Simple premium (SIMPLE-PREMIUM.md), marque
   ceinture (CEINTURE-MOUVEMENT.md, B5 et E7 : la marque seule, aucune ceinture décorative).
   Aucun filet, cartes douces, l'ocre pour Figer seulement ; sombre et clair jumeaux.
   Polices : sous-ensembles latins de l'app, SIL Open Font License 1.1 (voir LICENCES.txt). */

@font-face { font-family: "Fira Sans"; font-weight: 400; font-display: swap; src: url("polices/fira-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-display: swap; src: url("polices/fira-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-display: swap; src: url("polices/fira-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 600; font-display: swap; src: url("polices/archivo-narrow-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 700; font-display: swap; src: url("polices/archivo-narrow-700.woff2") format("woff2"); }
@font-face { font-family: "Shippori Mincho"; font-weight: 500 600; font-display: swap; src: url("polices/shippori-mincho-500.woff2") format("woff2"); }

:root {
  --fond: #F4F1EB;          /* bg_light */
  --carte: #FAF8F4;         /* raised_light */
  --champ: #ECE8E0;         /* surface_light */
  --champ-carte: #ECE8E0;
  --fort: #1B1C1F;          /* text_strong_light */
  --doux: #5B5955;          /* text_soft_light */
  --estompe: #8C8880;       /* estompe_clair */
  --accent: #965F00;        /* ocre : Figer seulement */
  --sur-accent: #FFFFFF;
  --plein: #1B1C1F;         /* pilule pleine (action), rond du compte */
  --sur-plein: #F4F1EB;
  --alerte: #C12A1C;
  --ceinture: #121417;      /* ceinture noire sur fond clair (B1) */
  --ombre-carte: 0 1px 2px #E3DED4, 0 24px 64px -16px #CFCAC0;
  --ombre-bouton: 0 8px 24px -8px #CFCAC0;
  --ombre-collee: 0 8px 32px -8px #BDB7AC;
  /* 30/09 (Eric : « on ne distingue pas le rectangle de l'onglet avec le restant de la page ») : surfaces flottantes
     (menu du compte, rangée collée) plus hautes que les cartes, jamais de leur couleur : blanche sur fond cassé en clair,
     une marche plus claire que la carte en sombre, filet d'un pixel, ombre plus marquée en sombre. */
  --flottant: #FFFFFF; --bord-flottant: #CFCAC0; --ombre-flottant: 0 1px 2px #E3DED4, 0 16px 40px -8px #BDB7AC;
  --court: 160ms; --moyen: 240ms;
  --entree: cubic-bezier(0.2, 0, 0, 1);
  --standard: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121417; --carte: #1C1F24; --champ: #1C1F24; --champ-carte: #121417;
    --fort: #F2EFE9; --doux: #A8A49D; --estompe: #6E6A64;
    --accent: #C27B00; --sur-accent: #121417; --plein: #F2EFE9; --sur-plein: #121417;
    --ceinture: #F2EFE9; --ombre-carte: none; --ombre-bouton: none; --ombre-collee: 0 8px 32px -8px #000000;
    --flottant: #2A2E35; --bord-flottant: #3A3F47; --ombre-flottant: 0 2px 6px #000000, 0 24px 56px -12px #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #121417; --carte: #1C1F24; --champ: #1C1F24; --champ-carte: #121417;
  --fort: #F2EFE9; --doux: #A8A49D; --estompe: #6E6A64;
  --accent: #C27B00; --sur-accent: #121417; --plein: #F2EFE9; --sur-plein: #121417;
  --ceinture: #F2EFE9; --ombre-carte: none; --ombre-bouton: none; --ombre-collee: 0 8px 32px -8px #000000;
  --flottant: #2A2E35; --bord-flottant: #3A3F47; --ombre-flottant: 0 2px 6px #000000, 0 24px 56px -12px #000000;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--fort);
  font-family: "Fira Sans", system-ui, sans-serif; font-size: 18px; line-height: 28px;
  overflow-x: hidden;
}
a { color: var(--fort); text-decoration: none; transition: color 120ms var(--standard); }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js-seulement { display: none; }
.js .js-seulement { display: flex; }
.js .sans-js { display: none; }

.cadre { max-width: 1440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* Barre */
.barre { height: 72px; padding: 0 36px 0 48px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.marque { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.marque:hover { color: var(--fort); }
.ceinture { width: 32px; height: 32px; display: block; flex: 0 0 32px; pointer-events: none; fill: var(--ceinture); }
.mot { font-family: "Shippori Mincho", serif; font-weight: 600; font-size: 24px; line-height: 32px; white-space: nowrap; }
.nom-tournoi { margin-left: 32px; font-size: 18px; line-height: 28px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.espace { flex: 1; }
.rond { width: 48px; height: 48px; flex: 0 0 48px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--court) var(--standard); }
.rond svg { width: 24px; height: 24px; stroke: var(--doux); }
.compte { position: relative; margin-left: 8px; }
.compte > summary { list-style: none; }
.compte > summary::-webkit-details-marker { display: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--plein); color: var(--sur-plein);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; cursor: pointer; }
/* 30/09 : Était : z-index: 5 ; background: var(--carte) ; box-shadow: var(--ombre-carte) ; padding: 20px 24px. Le menu
   avait la couleur des cartes (sombre : même fond, aucune ombre) et passait sous le héros (z 7) et sous la carte survolée
   (z 8) : jeton flottant, filet, et au-dessus de tout sauf la bulle (i). */
.menu { position: absolute; right: 0; top: 52px; z-index: 20; background: var(--flottant); border: 1px solid var(--bord-flottant);
  box-shadow: var(--ombre-flottant); border-radius: 24px; padding: 19px 23px; display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.menu .courriel, .formulaire .courriel { color: var(--doux); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }

/* Onglets : point neutre de 6 px sous l'actif (Simple premium, écart § 1) */
.onglets { height: 56px; padding: 0 48px; display: flex; gap: 48px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
/* Responsive 29/09 (G2) : bords en fondu quand la barre défile, défilement aimanté, l'onglet actif amené en vue (admin.js). */
.onglets { scroll-snap-type: x proximity; scroll-padding-inline: 24px; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.onglets a { scroll-snap-align: center; }
.onglets a { height: 56px; padding-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; color: var(--doux); }
.onglets a span { white-space: nowrap; }
.onglets a i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.onglets a[aria-current="page"] { color: var(--fort); font-weight: 600; }
.onglets a[aria-current="page"] i { background: var(--fort); }
.onglets a:hover { color: var(--accent); }
/* 30/09 : l'onglet de la page ouverte garde sa couleur sous la souris (il passait à l'orange juste après le clic). */
.onglets a[aria-current="page"]:hover { color: var(--fort); }

/* Messages */
.messages { padding: 16px 48px 0; display: flex; flex-direction: column; gap: 8px; }
.message { margin: 0; color: var(--doux); }
.message.error { color: var(--alerte); }

/* Page : héros à gauche, carte à droite */
.page { flex: 1; padding: 32px 48px; }
.deux { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "cote carte"; column-gap: 32px; align-items: start; }
/* Colonne du héros : collée en haut, Figer en bas de la vue, même quand la liste est longue (planche). */
.cote { grid-area: cote; position: sticky; top: 32px; min-height: min(calc(100vh - 224px), 700px); display: flex; flex-direction: column; }
.heros { grid-area: heros; padding-top: 8px; }
.actions { grid-area: actions; margin-top: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 32px; }
.zone { grid-area: carte; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.chiffre { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 176px; line-height: 136px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-left: -6px; overflow-wrap: anywhere; }
.chiffre.code { font-size: 96px; line-height: 88px; letter-spacing: 0.02em; margin-left: -3px; }
.chiffre.mot-heros { font-size: 72px; line-height: 72px; letter-spacing: -0.01em; margin-left: -3px; }
.chiffre.mot-heros.etroit { font-size: 56px; line-height: 56px; }
.actions > a.pilule { align-self: flex-start; }
.sous { margin-top: 16px; color: var(--doux); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.etiquette { display: inline-flex; align-items: center; gap: 8px; color: var(--doux); }
.etiquette svg { width: 20px; height: 20px; stroke: var(--doux); }

.carte { background: var(--carte); border-radius: 32px; box-shadow: var(--ombre-carte); padding: 32px 24px 32px 32px;
  animation: entree var(--moyen) var(--entree) both; }
.carte + .carte { animation-delay: 40ms; }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.titre-carte { margin: 0 0 16px 16px; font-size: 18px; line-height: 28px; font-weight: 600; }

/* Pilules, champs, listes déroulantes */
.pilule { height: 48px; flex-shrink: 0; border: 0; border-radius: 24px; padding: 0 20px; background: var(--champ-carte);
  display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--fort);
  white-space: nowrap; cursor: pointer; transition: transform var(--court) var(--standard), color 120ms var(--standard); }
.pilule:active, .rond:active { transform: scale(0.97); }
.pilule.pleine { background: var(--plein); color: var(--sur-plein); box-shadow: var(--ombre-bouton); }
.pilule.ocre { background: var(--accent); color: var(--sur-accent); box-shadow: var(--ombre-bouton); }
.pilule.ocre svg, .pilule.pleine svg { stroke: currentColor; }
.pilule svg { width: 20px; height: 20px; stroke: var(--fort); flex: 0 0 20px; }
.pilule.petite { height: 40px; padding: 0 16px; font-size: 16px; line-height: 24px; }
.pilule[disabled] { color: var(--estompe); cursor: default; }
.carte .pilule:not(.pleine):not(.ocre) { background: var(--champ-carte); }
.aside-pilule { background: var(--champ); }
.rangee-boutons { display: flex; gap: 12px; flex-wrap: wrap; }
.rangee-boutons.centre { align-items: center; }
.boutons-apercu { margin: 16px 0 0 16px; }
.tableau.premier { margin-top: 0; }
.vide.premier { margin-top: 0; }

.filtres { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.pilules { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.recherche { height: 48px; flex: 1 1 160px; min-width: 120px; border-radius: 24px; background: var(--champ-carte); padding: 0 20px;
  align-items: center; gap: 12px; cursor: text; }
.recherche svg { width: 20px; height: 20px; stroke: var(--doux); flex: 0 0 20px; }
.recherche input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none; font-size: 18px; }
.choix { height: 48px; border: 0; border-radius: 24px; padding: 0 44px 0 20px; background: var(--champ-carte); font-size: 18px; line-height: 28px;
  -webkit-appearance: none; appearance: none; cursor: pointer; max-width: 240px; text-overflow: ellipsis; flex-shrink: 0;
  field-sizing: content;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B5955' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; transition: transform var(--court) var(--standard); }
.choix.pose { font-weight: 600; }
.tri-mobile, .mobile-seulement { display: none; }
.champ-texte { width: 100%; border: 0; border-radius: 24px; background: var(--champ-carte); padding: 12px 20px; font-size: 18px; line-height: 28px; resize: vertical; min-height: 104px; }
.recherche.champ-ligne { display: flex; flex: none; max-width: 480px; }
.champ-ligne input { color: var(--fort); }
.champ-ligne input::placeholder { color: var(--estompe); }

/* Bulle (i) au survol. 05/10 (Eric : « la plupart des boutons "d'information" sont illisibles ») : icône de 24 px
   partout, en-têtes de tableau compris (était : 18 px au trait de 1,1 px sous .tableau th svg), trait de 2 px et point
   de 3 px (_icone.html) ; bulle de 320 px au plus (était : 280 px). */
.info { position: relative; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.info svg, .tableau th .info svg { width: 24px; height: 24px; flex: 0 0 24px; stroke: var(--doux); }
.info::after { content: attr(data-bulle); position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 12px 16px; border-radius: 16px; background: var(--plein); color: var(--sur-plein);
  font-size: 16px; line-height: 24px; font-weight: 400; text-align: left; opacity: 0; pointer-events: none; transition: opacity var(--court) var(--standard); }
.info:hover::after, .info:focus-visible::after { opacity: 1; }
/* Avec le script, une seule bulle enfant de <body>, fixe, au-dessus de tout (admin.js) : jamais cachée par la carte
   voisine (Eric, 28/09). Sans script, la bulle CSS ci-dessus reste : la colonne du héros et la carte survolée passent
   devant leurs voisines. */
.js .info::after { content: none; }
.bulle { position: fixed; z-index: 1000; left: 0; top: 0; width: max-content; max-width: 320px; padding: 12px 16px; border-radius: 16px;
  background: var(--plein); color: var(--sur-plein); font-size: 16px; line-height: 24px; font-weight: 400; text-align: left;
  pointer-events: none; overflow-wrap: anywhere; box-shadow: var(--ombre-bouton); }
.bulle[hidden] { display: none; }
.cote, .heros { z-index: 7; }
.heros { position: relative; }
.carte { position: relative; }
.carte:hover, .carte:focus-within { z-index: 8; }
.avec-bulle { display: inline-flex; align-items: center; gap: 4px; }
.definitions dd > .info, .titre-carte .info, th .info { margin: -10px 0 -10px 4px; vertical-align: middle; }

/* Tableaux : aucun filet, rangées de 48 px */
.tableau { width: 100%; border-collapse: collapse; table-layout: auto; margin-top: 24px; }
.tableau th { height: 32px; padding: 0 0 8px 16px; text-align: left; font-weight: 600; color: var(--doux); white-space: nowrap; }
.tableau th a { color: var(--doux); display: inline-flex; align-items: center; gap: 6px; }
.tableau th a[aria-sort] { color: var(--fort); }
.tableau th svg { width: 18px; height: 18px; stroke: currentColor; }
.tableau td { height: 48px; padding: 0 12px 0 16px; white-space: nowrap; }
.tableau td.nom { font-weight: 600; }
.tableau td.doux, .tableau .doux { color: var(--doux); }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; padding-right: 16px; }
.tableau td.long { white-space: normal; }
.tableau tr[hidden] { display: none; }
.alerte-texte { color: var(--alerte); font-size: 16px; line-height: 24px; font-weight: 400; display: block; }
.vide { margin: 24px 16px 0; color: var(--doux); }

.definitions { margin: 0; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); row-gap: 0; }
.definitions dt { padding: 10px 0 10px 16px; color: var(--doux); }
.definitions dd { margin: 0; padding: 10px 16px; font-weight: 600; }

.bilan { display: flex; gap: 32px; flex-wrap: wrap; margin: 0 0 8px 16px; }
.bilan div { display: flex; flex-direction: column; }
.bilan b { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 48px; line-height: 48px; font-variant-numeric: tabular-nums; }
.bilan span { color: var(--doux); font-size: 16px; line-height: 24px; }

/* Confirmation sur place, sans fenêtre (planche : « Figer les inscriptions ? ») */
.confirmer > summary { list-style: none; display: inline-flex; }
.confirmer > summary::-webkit-details-marker { display: none; }
.confirmer[open] > summary { display: none; }
.question { display: flex; flex-direction: column; gap: 16px; }
.question .ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.question .ligne span { font-weight: 600; }
.annonce { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0 12px 16px; }
.annonce p { margin: 0; }
.annonce small { display: block; color: var(--doux); font-size: 16px; line-height: 24px; }
.formulaire { display: flex; flex-direction: column; gap: 16px; }

/* Récapitulatif (E9) : poids en sous-rangées sous leur catégorie, rangée Total ; tableau par club qui défile. */
.tableau tr.sous-rangee td { height: 36px; font-size: 16px; line-height: 24px; }
.tableau tr.sous-rangee td.nom { padding-left: 40px; font-weight: 400; color: var(--doux); }
.tableau tr.total td { font-weight: 600; }
.defile { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; }
/* Récapitulatif par catégorie (Eric, 30/09) : U15 et plus repliées à l'arrivée, dépliées au clic sur le détail poids par
   poids (details/summary) ; mêmes rangées de 48 px sans filet que les tableaux ; titres des nombres lus au lecteur
   d'écran, montrés sur téléphone (rangées empilées). */
.recap { --colonnes: 2; }
.recap.jour-j { --colonnes: 4; }
.recap-ligne { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--colonnes), minmax(72px, auto)); align-items: center;
  column-gap: 0; min-height: 48px; }
.recap-ligne > span { padding: 0 16px; }
.recap-ligne .nom { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.recap-ligne .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.recap-ligne .doux { color: var(--doux); }
.recap-entete { min-height: 32px; padding-bottom: 8px; color: var(--doux); font-weight: 600; align-items: end; }
.recap-entete .nom { color: var(--doux); }
.recap-entete .avec-bulle { justify-content: flex-end; }
.recap-entete .info { margin: -10px -12px -10px 0; }
.titre-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recap-pli > summary { list-style: none; cursor: pointer; border-radius: 16px; transition: background-color var(--court) var(--standard); }
.recap-pli > summary::-webkit-details-marker { display: none; }
.recap-pli > summary:hover { background: var(--champ-carte); }
.recap-pli > summary .chevron { width: 20px; height: 20px; stroke: var(--doux); flex: 0 0 20px; transition: transform var(--court) var(--standard); }
.recap-pli[open] > summary .chevron { transform: rotate(180deg); }
.recap-ligne.recap-sous { min-height: 36px; font-size: 16px; line-height: 24px; }
.recap-ligne.recap-sous .nom { padding-left: 40px; font-weight: 400; color: var(--doux); }
.recap-ligne.total { font-weight: 600; }
.recap-ligne.total .doux { color: var(--fort); }

/* Annonces (E13) : à droite du formulaire, ce que voient parents et coachs dans l'app et sur le site du tournoi
   (segment Annonces de Tournoi.tsx : titre en capitales espacées, textes, rien d'autre ; largeur d'un téléphone). */
.annonces-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 32px; align-items: start; }
.annonces-gauche { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.apercu .titre-carte { display: flex; align-items: center; }
.ecran { background: var(--fond); border-radius: 28px; padding: 24px 0 28px; }
.ecran-nom { margin: 0 28px; font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 24px; line-height: 32px; }
.ecran-segments { margin: 24px 28px 0; display: flex; gap: 24px; color: var(--doux); font-size: 16px; line-height: 24px; }
.ecran-segments span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ecran-segments i { width: 6px; height: 6px; border-radius: 50%; }
.ecran-segments .actif { color: var(--fort); font-weight: 600; }
.ecran-segments .actif i { background: var(--fort); }
.ecran-carte { margin: 26px 16px 0; background: var(--carte); border-radius: 28px; box-shadow: var(--ombre-carte); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 24px; }
.ecran-titre { font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.18em; text-transform: uppercase; }
.ecran-carte p { margin: 0; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.ecran-vide { margin: 26px 28px 0; color: var(--doux); font-size: 16px; line-height: 24px; }
/* Communication (Eric, 30/09) : liens à partager, une ligne par lien, libellé puis adresse lisible et sélectionnable
   d'un clic (user-select: all), boutons à droite ; « Copier » n'existe qu'avec le script (admin.js). Puis les annonces. */
.liens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lien-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "libelle boutons" "adresse boutons";
  align-items: center; column-gap: 16px; padding: 8px 0 8px 16px; }
.lien-libelle { grid-area: libelle; font-weight: 600; }
.lien-adresse { grid-area: adresse; color: var(--doux); font-size: 16px; line-height: 24px; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all; cursor: text; }
.lien-boutons { grid-area: boutons; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.copier { display: none; min-width: 104px; justify-content: center; }
.js .copier { display: inline-flex; }
.copier[data-copie] { color: var(--doux); }
/* QR de la page du tournoi : PNG et SVG en une pilule double, un seul bloc qui ne se coupe jamais (était : deux
   pilules, « SVG » seule à la ligne à 375 px). Un filet sépare les deux moitiés. */
.duo { display: inline-flex; align-items: center; flex-shrink: 0; border-radius: 999px; background: var(--champ-carte); }
.duo > .pilule { border-radius: 0; background: transparent; }
.carte .duo > .pilule:not(.pleine):not(.ocre) { background: transparent; }
.duo > .pilule:first-child { border-radius: 999px 0 0 999px; padding-right: 12px; }
.duo > .pilule:last-child { border-radius: 0 999px 999px 0; padding-left: 12px; position: relative; }
.duo > .pilule:last-child::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--estompe); }
.duo > .pilule:focus-visible { position: relative; z-index: 1; }
.titre-partie { margin: 16px 0 -16px 16px; font-size: 18px; line-height: 28px; font-weight: 600; }
@media (max-width: 1180px) {
  .annonces-zone { grid-template-columns: minmax(0, 1fr); }
  .apercu { max-width: 390px; width: 100%; }
}

/* Libre-service (/connexion, /organiser, /admin en brouillon) : le formulaire reprend la carte de définitions du
   tableau de bord (libellé à gauche, champ à droite), les champs en pilule, sans filet ; cases à cocher et pastille
   de couleur à la taille des pilules (48 px). */
.definitions.saisie dt { padding-top: 20px; display: flex; align-items: flex-start; gap: 4px; }
.definitions.saisie dt .info { margin-top: -8px; }
.definitions.saisie dd { font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.definitions.saisie .champ-ligne { width: 100%; }
.definitions.saisie .champ-ligne.court { max-width: 200px; }
.definitions.saisie .choix { max-width: 100%; }
.definitions.saisie .champ-texte { max-width: 480px; min-height: 96px; }
.ligne-champ { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 480px; }
.ligne-champ .champ-ligne { flex: 1 1 auto; min-width: 0; }
.suffixe { color: var(--doux); white-space: nowrap; }
.case { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.case input { width: 24px; height: 24px; margin: 0; flex: 0 0 24px; accent-color: var(--plein); cursor: pointer; }
.pastille { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.pastille::-webkit-color-swatch-wrapper { padding: 0; }
.pastille::-webkit-color-swatch { border: 0; border-radius: 50%; }
.pastille::-moz-color-swatch { border: 0; border-radius: 50%; }
.lien { text-decoration: underline; text-underline-offset: 3px; }
.erreur-formulaire { margin: 0 0 8px 16px; }
.texte-long p { margin: 0 16px 16px; }
.texte-long .titre-carte { margin-top: 24px; }
.question .case { font-weight: 400; }
/* Catégories (29/09 : U7 à U21+, huit par sexe) : une rangée G, une rangée F, qui passent à la ligne sur un écran étroit. */
.cases-categories .ligne-champ { flex-wrap: wrap; max-width: 760px; column-gap: 20px; row-gap: 0; }
/* Grille de pesée (29/09) : une rangée par catégorie, deux plages côte à côte (la veille, le jour même), heures en
   pilules courtes. */
.grille-plages th { padding-left: 16px; }
.grille-plages td { padding-top: 4px; padding-bottom: 4px; }
.grille-plages td.plage { padding-right: 16px; }
.ligne-plage { display: inline-flex; align-items: center; gap: 8px; }
/* Responsive 29/09 (B1) : une grille plus large que sa carte (formulaire « Modifier », tablette) défile en elle-même. */
.grille-pesee { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; }
.definitions.saisie .champ-ligne.heure { width: 128px; min-width: 0; flex: 0 0 128px; padding: 0 12px 0 16px; }
/* Case « Pesée la veille » (29/09) : un interrupteur au-dessus de chaque grille ; décochée, la colonne « La veille »
   disparaît (sans script grâce à :has ; creation.js pose .sans-veille pour les autres navigateurs). */
.interrupteur input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px;
  flex: 0 0 40px; border-radius: 12px; background: var(--champ); box-shadow: inset 0 0 0 1px var(--estompe);
  transition: background var(--court) var(--standard), box-shadow var(--court) var(--standard); }
.interrupteur input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--doux); transition: transform var(--court) var(--standard), background var(--court) var(--standard); }
.interrupteur input:checked { background: var(--plein); box-shadow: none; }
.interrupteur input:checked::after { transform: translateX(16px); background: var(--sur-plein); }
.interrupteur input:focus-visible { outline: 2px solid var(--fort); outline-offset: 3px; }
.grille-pesee:has(input[data-veille]:not(:checked)) [data-moment="veille"],
.grille-pesee.sans-veille [data-moment="veille"] { display: none; }

/* Responsive 29/09 (B1, G1, G8) : jusqu'à 1 024 px inclus, pile héros / actions / carte (plus de colonne de 280 px ni de
   carte coupée à droite) ; en-tête et onglets restent ceux de l'ordinateur au-dessus de 760 px. Les boutons des
   formulaires longs restent collés en bas de l'écran. */
@media (max-width: 1024px) {
  .deux { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heros" "actions" "carte"; column-gap: 0; }
  .cote { display: contents; }
  .heros { padding-top: 0; }
  .actions { margin-top: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .actions > .confirmer[open] { flex-basis: 100%; }
  .zone { margin-top: 32px; }
  .chiffre { font-size: 144px; line-height: 112px; }
  .filtres { flex-wrap: wrap; }
  .pilules { flex-wrap: wrap; }
  .tableau td { white-space: normal; }
  .tableau td.nombre { white-space: nowrap; }
  .definitions.saisie { grid-template-columns: minmax(0, 1fr); }
  .definitions.saisie dt { padding: 16px 16px 0; }
  .definitions.saisie dd { padding: 4px 16px 8px; }
  .rangee-boutons.collee { position: sticky; bottom: 16px; z-index: 3; margin: 16px 0 0 4px; padding: 8px; align-self: flex-start;
    border-radius: 32px; background: var(--flottant); border: 1px solid var(--bord-flottant); box-shadow: var(--ombre-flottant); }
  .question .ligne { flex-wrap: wrap; }
  .question .ligne input, .question .ligne textarea { min-width: 0; max-width: 100%; }
}
/* Contre-vérification 29/09 : sur tablette, seules les colonnes longues (club, détail) passent à la ligne ; un nom de
   personne, la catégorie des inscrits (3e colonne, « U15 G -46 kg »), un état (« Pré-inscrit ») ou un nombre restent d'un bloc. Sans cela, le
   tableau coupait « Bruno / Q. » et « Pré- / inscrit » alors que la place ne manquait pas. */
@media (min-width: 761px) and (max-width: 1024px) {
  .tableau td { padding-top: 4px; padding-bottom: 4px; }
  .tableau td.nom, .tableau td.coin, .tableau tr[data-nom] > td:nth-child(3) { white-space: nowrap; }
  .tableau td.nom .alerte-texte { white-space: normal; }
}
/* Contre-vérification 29/09 : dans le formulaire « Modifier » du tableau de bord, catégories et grille de pesée passent
   sous leur libellé à toutes les largeurs, alignées sur Adresse, Plafond… À 1 280 px, la grille (702 px) ne tenait pas
   dans la colonne de 524 px à droite du libellé : « Le jour même, à » était caché hors de la carte. */
.question .definitions.saisie { grid-template-columns: minmax(0, 1fr); }
.question .definitions.saisie dt { padding: 16px 0 0; }
.question .definitions.saisie dd { padding: 4px 0 8px; }
/* G8 : montage, la date prend la place, l'heure garde 128 px et passe à la ligne s'il le faut. */
.ligne-champ.montage { flex-wrap: wrap; }
.definitions.saisie .ligne-champ.montage .champ-ligne { flex: 1 1 180px; }
.definitions.saisie .ligne-champ.montage .champ-ligne.heure { width: 128px; flex: 0 0 128px; max-width: none; }
/* Nombre de tatamis par journée (lot L4) : un champ court par journée ; le titre « Journée n » seulement à deux journées. */
.cases-tatamis { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tatamis-journee { max-width: 320px; }
.tatamis-journee[hidden], .cases-tatamis.une-journee .titre-journee { display: none; }
.tatamis-journee .titre-journee { flex: 0 0 96px; }
.definitions.saisie .tatamis-journee .champ-ligne.court { flex: 0 0 120px; max-width: 120px; }

/* Téléphone : même liste, cartes empilées (planche, colonne « Téléphone ») */
@media (max-width: 760px) {
  body { font-size: 16px; line-height: 24px; }
  .barre { height: 48px; margin: 32px 16px 0 16px; padding: 0; gap: 4px; }
  .marque { margin-left: 0; }
  .marque { width: 48px; height: 48px; justify-content: center; }
  .mot, .nom-tournoi { display: none; }
  .avatar { width: 32px; height: 32px; font-size: 16px; }
  .compte { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-left: 0; }
  .onglets { margin: 18px 0 0; padding: 0 24px; gap: 32px; height: auto; }
  .onglets a { min-height: 48px; min-width: 44px; height: auto; padding-top: 6px; }
  .messages { padding: 16px 24px 0; }
  .page { padding: 24px 24px 32px; }
  .zone { margin-top: 24px; gap: 16px; }
  .actions { padding-top: 24px; }
  .chiffre { font-size: 160px; line-height: 124px; }
  .chiffre.code { font-size: 64px; line-height: 64px; }
  .chiffre.mot-heros { font-size: 56px; line-height: 56px; }
  .sous { margin-top: 12px; }
  .carte { border-radius: 28px; padding: 16px 24px; }
  .zone.liste-mobile > .carte.filtres-carte { background: transparent; box-shadow: none; padding: 0; border-radius: 0; animation: none; }
  .filtres { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .pilules { overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; flex-shrink: 1; min-width: 0; }
  .pilules::-webkit-scrollbar { display: none; }
  .recherche { flex: 0 0 48px; min-width: 0; }
  .filtres-carte .recherche, .filtres-carte .choix { background-color: var(--champ); }
  .tri-mobile { display: block; order: -1; }
  .mobile-seulement { display: inline; }
  .filtres-carte .tableau { margin: 16px -8px 0; width: auto; background: var(--carte); border-radius: 28px; box-shadow: var(--ombre-carte); padding: 16px 24px;
    animation: entree var(--moyen) var(--entree) both; }
  .filtres-carte .vide { margin: 16px 0 0; }
  .filtres.pile { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
  .choix { height: 48px; font-size: 16px; flex-shrink: 0; }
  .pilule { font-size: 16px; line-height: 24px; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; }
  .tableau { margin-top: 0; }
  .tableau thead { display: none; }
  .tableau tr { padding: 8px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .tableau td { height: auto; padding: 0; white-space: normal; color: var(--doux); grid-column: 1; }
  .tableau td.nom { color: var(--fort); }
  .tableau td.coin { grid-column: 2; grid-row: 1; text-align: right; }
  .tableau td.cache-mobile { display: none; }
  .tableau td.nombre { text-align: left; padding: 0; }
  .tableau td.nombre::before, .tableau td.avec-titre::before { content: attr(data-titre) " "; color: var(--doux); }
  .definitions { grid-template-columns: minmax(0, 1fr) auto; }
  .definitions dt { padding: 8px 0; }
  .definitions dd { padding: 8px 0; text-align: right; }
  /* 05/10 (bulles illisibles) : une ligne qui porte un (i) fait 44 px, comme sur ordinateur, pour que les zones
     tactiles de deux (i) qui se suivent ne se chevauchent plus (était : 40 px, 3 px de chevauchement). */
  .definitions dt:has(+ dd > .info), .definitions dd:has(> .info) { padding-top: 10px; padding-bottom: 10px; }
  .bilan { margin-left: 0; gap: 24px; }
  .bilan b { font-size: 40px; line-height: 40px; }
  .titre-carte { margin-left: 0; }
  .boutons-apercu { margin-left: 0; }
  .annonce { padding-left: 0; }
  .tableau tr.sous-rangee td { height: auto; }
  .tableau tr.sous-rangee td.nom { padding-left: 16px; }
  .recap-entete { display: none; }
  .titre-tri { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .titre-tri .mobile-seulement { display: inline-flex; font-weight: 600; }
  .recap-ligne { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; min-height: 0; row-gap: 0; }
  .recap-ligne > span { padding: 0; grid-column: 1; color: var(--doux); }
  .recap-ligne > .nom { color: var(--fort); }
  .recap-ligne > .coin { grid-column: 2; grid-row: 1; color: var(--fort); }
  .recap-ligne .nombre { text-align: left; }
  .recap-ligne .titre-nombre { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .recap-pli > summary { margin: 0 -12px; padding: 8px 12px; }
  .recap-ligne.recap-sous { min-height: 0; }
  .recap-ligne.recap-sous .nom { padding-left: 16px; }
  .info::after { left: auto; right: 0; transform: none; }
  .definitions.saisie { grid-template-columns: minmax(0, 1fr); }
  .definitions.saisie dt { padding: 12px 0 0; }
  .definitions.saisie dd { padding: 4px 0 8px; text-align: left; }
  .definitions.saisie .champ-ligne, .definitions.saisie .champ-texte { background-color: var(--champ-carte); }
  .erreur-formulaire { margin-left: 0; }
  .grille-plages tr { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 0; }
  .grille-plages td.plage { padding: 0; }
  .grille-plages td.plage::before { content: attr(data-titre); display: block; color: var(--doux); padding: 0 0 4px; }
  .definitions.saisie .champ-ligne.heure { width: auto; flex: 1 1 0; max-width: 144px; }
  .ligne-plage { display: flex; width: 100%; }
  .texte-long p { margin: 0 0 16px; }
  /* Responsive 29/09 : actions sous le chiffre, à portée de pouce (G1) ; rangée collée pleine largeur. */
  .actions { padding-top: 20px; gap: 12px; }
  .rangee-boutons.collee { margin: 16px 0 0 -8px; bottom: 12px; }
  .defile { overflow-x: visible; }
  /* G10 : recherche et filtres restent en haut pendant qu'on parcourt la liste ; fondu à droite des pilules. */
  .liste-mobile .filtres { position: sticky; top: 0; z-index: 4; background: var(--fond); padding: 12px 0; margin-top: -12px; }
  .pilules { flex-wrap: nowrap; }
  .pilules .rond { order: -2; }
  .pilules { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  /* 05/10 (bulles illisibles) : avec le script, le fondu seulement quand une pilule dépasse vraiment le bord (admin.js,
     .deborde) ; était : toujours, le (i) « État » posé au bout en était à moitié effacé (3,1:1 puis 1,9:1). */
  .js .pilules:has(.info):not(.deborde) { -webkit-mask-image: none; mask-image: none; }
  /* G9 : pack, une option par ligne, (i) au bout. */
  .definitions.saisie .ligne-champ[role="radiogroup"] { flex-wrap: wrap; column-gap: 4px; row-gap: 0; }
  .ligne-champ[role="radiogroup"] .case { flex: 1 1 calc(100% - 56px); min-width: 0; }
  /* Cibles tactiles de 44 px au moins (finitions) */
  .pilule.petite { height: 44px; }
  .avatar { position: relative; }
  .avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  .tableau td a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .question .ligne input, .question .ligne textarea { min-height: 44px; }
  /* F5 : libellés de définitions sur deux lignes au plus. */
  .definitions { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 12px; }
  /* F5 : la carte qui ne porte que « Modifier » s'efface tant que le formulaire est fermé. */
  .carte.carte-bouton:has(> .confirmer:not([open])) { background: transparent; box-shadow: none; padding: 0; }
  .definitions dd { overflow-wrap: anywhere; }
  /* F7 : « Retirer » discret dans la liste des coachs, confirmation inchangée. */
  .tableau .confirmer > summary.pilule.petite { background: transparent; color: var(--doux); font-weight: 400; padding: 0; }
  .tableau .confirmer > summary.pilule.petite:hover { color: var(--accent); }
  /* Communication : libellé, adresse, puis les boutons sous l'adresse, à gauche, à portée de pouce. */
  .lien-ligne { grid-template-columns: minmax(0, 1fr); grid-template-areas: "libelle" "adresse" "boutons"; row-gap: 8px; padding: 12px 0; }
  .lien-boutons { justify-content: flex-start; }
  /* QR : sans l'icône, la pilule double tient à côté de « Copier » (ou « Sélectionné ») à 375 px. */
  .duo svg { display: none; }
  .titre-partie { margin: 16px 0 -8px 0; }
  /* F6 : aperçu des annonces moins lourd. */
  .ecran-nom { font-size: 20px; line-height: 28px; margin: 0 20px; }
  .ecran-segments { margin: 16px 20px 0; gap: 16px; overflow: hidden; }
  .ecran-carte { margin: 20px 8px 0; padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}