/*!
 * GUW — Gestion des Urgences du Week-end (LFPL)
 * Système de design applicatif. Réécrit le 20/08/2026.
 *
 * Chargée APRÈS Bootstrap 5.1 et bootstrap-table : toutes les règles ci-dessous
 * les surchargent. C'est volontaire, et c'est fragile dans l'autre sens — ne
 * jamais réintroduire de <style> dans un gabarit : placé dans le corps du
 * document, il gagnerait la cascade et rendrait ce fichier inopérant.
 *
 * RÈGLE DE MAINTENANCE : aucune couleur en dur hors du bloc :root.
 * Toute couleur passe par une variable --guw-*. Le contrôle F1 de
 * _verif_migration.py refuse toute autre écriture.
 *
 * Sommaire
 *    1. Polices auto-hébergées      12. Tableaux
 *    2. Jetons                      13. Formulaires
 *    3. Base typographique          14. Dépôt de fichier
 *    4. Coquille et navigation      15. Progression et barre d'action
 *    5. Boutons                     16. Alertes
 *    6. Liens et texte              17. Reçu de déclaration
 *    7. Focus clavier               18. Écrans d'authentification
 *    8. Cartes                      19. Surcouche de chargement
 *    9. Tuiles de compteurs         20. Journal technique
 *   10. Étiquettes et minuteur      21. Cibles tactiles
 *   11. Cartes de match             22. Utilitaires, mouvement, impression
 */

/* ==========================================================================
   1. POLICES AUTO-HÉBERGÉES
   Barlow Condensed pour les titres et les heures, Barlow pour le texte.
   Hébergées dans public/fonts/ : une panne de Google Fonts ne doit pas
   changer l'allure du site. font-display:swap affiche le texte tout de suite.
   ========================================================================== */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlowcondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlowcondensed-700.woff2') format('woff2'); }

/* ==========================================================================
   2. JETONS — source unique de vérité
   ========================================================================== */

:root {
  /* --- Marque LFPL. Ratios de contraste vérifiés WCAG 2.1 sur blanc. --- */
  --guw-bleu:            #325491;  /* institutionnel   — 7,47:1 (AAA) */
  --guw-bleu-survol:     #416ea9;  /* survol           — 5,21:1 texte blanc (AA) */
  --guw-bleu-profond:    #22375f;  /* dégradés         */
  --guw-bleu-nuit:       #101c33;  /* rail, en-têtes   */
  --guw-bleu-voile:      #e9eefa;  /* fonds d'appui    */
  --guw-bleu-trait:      #c5d3ef;
  --guw-bleu-encre:      #24406f;  /* texte sur voile  — 8,3:1 */
  --guw-rouge:           #b3261e;  /* destructif       — 6,54:1 texte blanc */
  --guw-rouge-survol:    #8f1e17;
  --guw-rouge-voile:     #fdeceb;
  --guw-rouge-trait:     #f3cdca;
  --guw-rouge-encre:     #8f1e17;
  --guw-vert:            #0e8a6e;  /* changement de terrain, succès */
  --guw-vert-voile:      #e3f5f0;
  --guw-vert-trait:      #b8e2d7;
  --guw-vert-encre:      #0a6b55;  /* 5,1:1 sur blanc */
  --guw-ambre:           #8a5a00;  /* attention        — 5,4:1 sur blanc */
  --guw-ambre-voile:     #fdf3de;
  --guw-ambre-trait:     #e8d3a0;

  /* --- Pelouse des écrans de connexion --- */
  --guw-pelouse:         #15703a;
  --guw-pelouse-clair:   #17773e;
  --guw-pelouse-fonce:   #116031;

  /* --- Neutres --- */
  --guw-blanc:           #ffffff;
  --guw-encre:           #101828;  /* texte principal  — 16,4:1 */
  --guw-encre-2:         #4a5567;  /* texte secondaire — 7,9:1 */
  --guw-encre-3:         #6b7688;  /* texte tertiaire  — 4,9:1, seuil AA tenu */
  --guw-craie:           #f2f5f9;  /* fond de page     */
  --guw-craie-2:         #f7f9fd;  /* survol de ligne  */
  --guw-bordure:         #dde3ec;
  --guw-bordure-2:       #eceff5;
  --guw-noir-log:        #0e1626;  /* fond du journal technique */
  --guw-log-texte:       #c9d6ea;
  --guw-log-erreur:      #ffb3ae;
  --guw-log-avert:       #f2d69a;
  --guw-log-info:        #a9c1ec;
  --guw-rail-texte:      #c6d0e2;
  --guw-rail-titre:      #6f83a5;
  --guw-rail-second:     #8fa2c0;

  /* --- Métriques --- */
  --guw-touch-min:       44px;     /* cible tactile minimale (WCAG 2.5.5) */
  --guw-champ-min:       48px;     /* hauteur des champs au doigt */
  --guw-radius:          10px;
  --guw-radius-s:        8px;
  --guw-radius-carte:    18px;
  --guw-rail-large:      248px;

  /* --- Effets --- */
  --guw-ombre:           0 1px 2px rgba(16, 28, 51, .06), 0 6px 16px -8px rgba(16, 28, 51, .14);
  --guw-ombre-haute:     0 2px 4px rgba(16, 28, 51, .08), 0 14px 28px -12px rgba(16, 28, 51, .22);
  --guw-ombre-carte:     0 22px 55px rgba(0, 0, 0, .4);
  --guw-anneau:          rgba(50, 84, 145, .55);
  --guw-anneau-sombre:   rgba(255, 255, 255, .85);
  --guw-voile-rail:      rgba(255, 255, 255, .07);
  --guw-voile-rail-fort: rgba(255, 255, 255, .11);
  --guw-transition:      170ms cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   3. BASE TYPOGRAPHIQUE
   ========================================================================== */

body {
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--guw-encre);
  background-color: var(--guw-craie);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.guw-chiffre, .guw-heure {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--guw-encre);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

/* Chiffres alignés en colonne : dates, compteurs, numéros de match. */
.guw-tab, .guw-chiffre, .guw-heure, td .guw-tab { font-variant-numeric: tabular-nums; }

strong, b { font-weight: 600; }

/* ==========================================================================
   4. COQUILLE ET NAVIGATION
   ========================================================================== */

/* Lien d'évitement (WCAG 2.4.1) — visible uniquement au clavier. */
.guw-skip {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1100;
  background: var(--guw-blanc);
  color: var(--guw-bleu);
  padding: .5rem 1rem;
  border-radius: var(--guw-radius-s);
  font-weight: 600;
}

/* En-tête de marque. Le logo vivait en position:absolute et chevauchait le
   titre sur mobile : il est désormais dans le flux. */
.guw-header {
  background: linear-gradient(135deg, var(--guw-bleu), var(--guw-bleu-profond));
  position: relative;
  padding-bottom: 6px;
  color: var(--guw-blanc);
}

/* Listel blanc et rouge : rappel de la charte, commun à l'en-tête et à la
   carte de connexion. */
.guw-header::after,
.guw-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg,
              var(--guw-blanc) 0 16px, var(--guw-rouge) 16px 32px);
}

.guw-brand { height: 44px; width: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }

.guw-wordmark { color: var(--guw-blanc); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.guw-wordmark small { display: block; font-weight: 400; font-size: .78rem; opacity: .85; }

.guw-header .guw-blason,
.guw-rail .guw-blason {
  width: 42px; height: 42px; border-radius: var(--guw-radius-s);
  background: var(--guw-voile-rail-fort);
  display: grid; place-items: center; flex: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .78rem;
  color: var(--guw-blanc);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.guw-header .guw-rond {
  width: 44px; height: 44px; border-radius: var(--guw-radius-s);
  background: var(--guw-voile-rail-fort); border: 0; color: var(--guw-blanc);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--guw-transition);
}
.guw-header .guw-rond:hover { background: rgba(255, 255, 255, .2); }

/* --- Rail d'administration --------------------------------------------- */
.guw-shell { display: grid; grid-template-columns: var(--guw-rail-large) 1fr; min-height: 100vh; }

.guw-rail {
  background: var(--guw-bleu-nuit);
  color: var(--guw-rail-texte);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guw-rail-marque { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; color: var(--guw-blanc); }
.guw-rail-marque b { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; line-height: 1.1; }
.guw-rail-marque span span { font-size: .72rem; color: var(--guw-rail-second); }

.guw-rail-titre {
  font-size: .69rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--guw-rail-titre); padding: 14px 10px 6px;
}

.guw-rail-lien {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--guw-radius-s);
  color: var(--guw-rail-texte); text-decoration: none;
  font-size: .95rem; font-weight: 500; position: relative;
  min-height: var(--guw-touch-min);
  transition: background var(--guw-transition), color var(--guw-transition);
}
.guw-rail-lien:hover { background: var(--guw-voile-rail); color: var(--guw-blanc); }
.guw-rail-lien[aria-current="page"] { background: var(--guw-voile-rail-fort); color: var(--guw-blanc); font-weight: 600; }
.guw-rail-lien[aria-current="page"]::before {
  content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--guw-blanc);
}
.guw-rail-lien i, .guw-rail-lien svg { font-size: 1.05rem; opacity: .9; flex: none; }

.guw-rail-pied { margin-top: auto; border-top: 1px solid var(--guw-voile-rail-fort); padding-top: 12px; }
.guw-rail-pied .guw-qui { font-size: .8rem; color: var(--guw-rail-second); padding: 0 12px 8px; }
.guw-rail-pied .guw-qui b { display: block; color: var(--guw-blanc); font-size: .9rem; font-weight: 600; }

/* Barre supérieure de page */
.guw-topbar {
  background: var(--guw-blanc); border-bottom: 1px solid var(--guw-bordure);
  padding: 16px 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.guw-topbar h1 { margin: 0; font-size: 1.55rem; }
.guw-fil { font-size: .8rem; color: var(--guw-encre-3); margin: 0 0 1px; }

/* Sur petit écran le rail disparaît au profit d'une barre supérieure. */
@media (max-width: 991.98px) {
  .guw-shell { grid-template-columns: 1fr; }
  .guw-rail { display: none; }
  .guw-topbar { padding: 14px 16px; }
  .guw-topbar h1 { font-size: 1.3rem; }
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */

.btn {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  border-radius: var(--guw-radius-s);
  min-height: var(--guw-touch-min);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: background-color var(--guw-transition), border-color var(--guw-transition),
              color var(--guw-transition), transform var(--guw-transition),
              box-shadow var(--guw-transition);
}

.btn-primary { background-color: var(--guw-bleu); border-color: var(--guw-bleu); color: var(--guw-blanc); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--guw-bleu-survol); border-color: var(--guw-bleu-survol); color: var(--guw-blanc); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--guw-ombre); }

.btn-danger { background-color: var(--guw-rouge); border-color: var(--guw-rouge); color: var(--guw-blanc); }
.btn-danger:hover,
.btn-danger:focus { background-color: var(--guw-rouge-survol); border-color: var(--guw-rouge-survol); color: var(--guw-blanc); }

.btn-outline-secondary {
  background: var(--guw-blanc); color: var(--guw-encre);
  border-color: var(--guw-bordure);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus { background: var(--guw-blanc); border-color: var(--guw-bleu); color: var(--guw-bleu); }

.btn-secondary { background-color: var(--guw-encre-2); border-color: var(--guw-encre-2); color: var(--guw-blanc); }
.btn-success { background-color: var(--guw-vert); border-color: var(--guw-vert); color: var(--guw-blanc); }

/* État désactivé unifié : <button disabled> et <a class="disabled"> divergeaient,
   l'un plus sombre que l'état actif, l'autre plus clair. */
.btn:disabled,
.btn.disabled,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--guw-craie); border-color: var(--guw-bordure);
  color: var(--guw-encre-3); opacity: 1; transform: none; box-shadow: none;
}

/* Un <a class="btn disabled"> reste atteignable au clavier : le gabarit doit
   poser aria-disabled et tabindex="-1", cette règle rend l'état visible. */
a.btn.disabled { pointer-events: none; cursor: not-allowed; }

/* Bouton d'action pleine largeur des écrans club. */
.guw-btn-large {
  min-height: 64px; width: 100%; justify-content: flex-start;
  font-size: 1.05rem; padding-left: 1.1rem; padding-right: 1.1rem; text-align: left;
}
.guw-btn-large .guw-fleche { margin-left: auto; opacity: .7; }

/* ==========================================================================
   6. LIENS ET TEXTE
   ========================================================================== */

/* Le bleu d'origine (#5271ff) plafonnait à 4,07:1 sur blanc — échec AA. */
a, .link-primary { color: var(--guw-bleu); }
a:hover, .link-primary:hover { color: var(--guw-bleu-survol); }

.bleu-lfpl { color: var(--guw-bleu); }

/* .text-muted de Bootstrap tombait à 4,19:1 sur les lignes zébrées. */
.text-muted { color: var(--guw-encre-3) !important; }

.guw-secondaire { color: var(--guw-encre-2); font-size: .9rem; }

/* Astérisque des champs obligatoires */
.guw-required { color: var(--guw-rouge); font-weight: 700; margin-left: .15rem; }

/* ==========================================================================
   7. FOCUS CLAVIER
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--guw-anneau);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Sur fond bleu nuit, un anneau bleu serait invisible. */
.guw-header :focus-visible,
.guw-head :focus-visible,
.guw-rail :focus-visible,
.guw-pitch :focus-visible { outline-color: var(--guw-anneau-sombre); }

/* ==========================================================================
   8. CARTES
   ========================================================================== */

.guw-card,
.card {
  background: var(--guw-blanc);
  border: 1px solid var(--guw-bordure);
  border-radius: var(--guw-radius);
  box-shadow: var(--guw-ombre);
}

.card-header,
.guw-card-tete {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: 15px 20px;
  background: var(--guw-blanc);
  border-bottom: 1px solid var(--guw-bordure-2);
  color: var(--guw-encre);
}
.guw-card-tete h2, .guw-card-tete h3 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.guw-card-tete .guw-compte { font-size: .82rem; color: var(--guw-encre-3); font-weight: 500; }

.card-body, .guw-card-corps { padding: 18px 20px; }

/* Zone dangereuse : purge, suppression. */
.guw-card.guw-danger,
.card.guw-danger { border-color: var(--guw-rouge-trait); }
.guw-danger > .card-header,
.guw-danger > .guw-card-tete { background: var(--guw-rouge-voile); border-bottom-color: var(--guw-rouge-trait); }
.guw-danger > .card-header h2, .guw-danger > .guw-card-tete h2 { color: var(--guw-rouge-encre); }

/* ==========================================================================
   9. TUILES DE COMPTEURS
   ========================================================================== */

.guw-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }

.guw-tuile {
  background: var(--guw-blanc); border: 1px solid var(--guw-bordure);
  border-radius: var(--guw-radius); padding: 16px 18px; box-shadow: var(--guw-ombre);
  transition: transform var(--guw-transition), box-shadow var(--guw-transition);
}
.guw-tuile:hover { transform: translateY(-2px); box-shadow: var(--guw-ombre-haute); }
.guw-tuile-lib { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--guw-encre-3); }
.guw-tuile .guw-chiffre { font-size: 2.5rem; line-height: 1.05; margin: 6px 0 2px; }
.guw-tuile-note { font-size: .85rem; color: var(--guw-encre-2); }
.guw-tuile-bleu  { border-left: 3px solid var(--guw-bleu); }
.guw-tuile-vert  { border-left: 3px solid var(--guw-vert); }
.guw-tuile-rouge { border-left: 3px solid var(--guw-rouge); }

/* ==========================================================================
   10. ÉTIQUETTES DE STATUT ET MINUTEUR
   Palette validée pour le daltonisme (ΔE ≥ 10 en deutéranopie). Le texte porte
   une couleur d'encre lisible, jamais la couleur de série : c'est la pastille
   qui porte l'identité, et le libellé est toujours écrit.
   ========================================================================== */

.guw-etiq {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 6px; padding: 3px 9px 3px 7px;
  font-size: .82rem; font-weight: 600; border: 1px solid;
  white-space: nowrap;
}
.guw-etiq i, .guw-etiq .guw-pastille { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.guw-etiq-report  { background: var(--guw-bleu-voile);  border-color: var(--guw-bleu-trait);  color: var(--guw-bleu-encre); }
.guw-etiq-report  .guw-pastille { background: var(--guw-bleu); }
.guw-etiq-terrain { background: var(--guw-vert-voile);  border-color: var(--guw-vert-trait);  color: var(--guw-vert-encre); }
.guw-etiq-terrain .guw-pastille { background: var(--guw-vert); }
.guw-etiq-forfait { background: var(--guw-rouge-voile); border-color: var(--guw-rouge-trait); color: var(--guw-rouge-encre); }
.guw-etiq-forfait .guw-pastille { background: var(--guw-rouge); }
.guw-etiq-neutre  { background: var(--guw-craie);       border-color: var(--guw-bordure);     color: var(--guw-encre-2); }
.guw-etiq-neutre  .guw-pastille { background: var(--guw-encre-3); }

/* Temps restant avant le coup d'envoi. L'application s'appelle « urgences du
   week-end » : l'urgence doit se voir. */
.guw-minuteur {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; border: 1px solid;
}
.guw-minuteur i, .guw-minuteur svg { font-size: .75rem; flex: none; }
.guw-minuteur-loin   { background: var(--guw-craie);       border-color: var(--guw-bordure);     color: var(--guw-encre-2); }
.guw-minuteur-proche { background: var(--guw-ambre-voile); border-color: var(--guw-ambre-trait); color: var(--guw-ambre); }
.guw-minuteur-urgent { background: var(--guw-rouge-voile); border-color: var(--guw-rouge-trait); color: var(--guw-rouge-encre); }

/* ==========================================================================
   11. CARTES DE MATCH ET SÉLECTION
   L'action la plus risquée de l'application est de désigner le bon match.
   Elle se faisait sur une case native d'environ 13 px, au téléphone, au bord
   d'un terrain. La carte entière devient la cible.
   ========================================================================== */

.guw-match {
  border: 1px solid var(--guw-bordure); border-radius: var(--guw-radius);
  background: var(--guw-blanc); padding: 13px 14px; margin-bottom: 11px;
  box-shadow: var(--guw-ombre);
}

.guw-compet {
  font-size: .7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--guw-encre-3); margin-bottom: .3rem;
}
.guw-quand { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; flex-wrap: wrap; }
.guw-heure { font-size: 1.3rem; line-height: 1; }
.guw-date { font-size: .8rem; color: var(--guw-encre-2); }
.guw-equipes { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.guw-equipes .guw-liaison { color: var(--guw-encre-3); font-weight: 400; }
.guw-lieu { font-size: .85rem; color: var(--guw-encre-2); margin-top: .2rem; display: flex; align-items: flex-start; gap: .4rem; }
.guw-lieu i, .guw-lieu svg { color: var(--guw-encre-3); flex: none; margin-top: .15rem; }

/* Sélection : la case à cocher réelle est masquée visuellement mais reste
   dans le flux du clavier ; c'est le libellé qui devient la cible. */
.guw-choix {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 2px solid var(--guw-bordure); border-radius: var(--guw-radius);
  background: var(--guw-blanc); padding: 13px 14px; margin-bottom: 11px;
  cursor: pointer; min-height: 76px;
  transition: border-color var(--guw-transition), background-color var(--guw-transition);
}
.guw-choix:hover { border-color: var(--guw-bleu-trait); }
.guw-choix .form-check-input,
.guw-choix input[type="checkbox"] {
  width: 26px; height: 26px; margin: 2px 0 0; flex: none;
  border-radius: 7px; border: 2px solid var(--guw-bordure); cursor: pointer;
  touch-action: manipulation;
}
.guw-choix .form-check-input:checked,
.guw-choix input[type="checkbox"]:checked { background-color: var(--guw-bleu); border-color: var(--guw-bleu); }
.guw-choix:has(input:checked) { border-color: var(--guw-bleu); background: var(--guw-bleu-voile); }
.guw-choix-corps { flex: 1; min-width: 0; }

/* Terrain de repli : révélé seulement quand le match est sélectionné. */
.guw-repli { margin: .7rem 0 .1rem; padding: .7rem 0 0; border-top: 1px dashed var(--guw-bleu-trait); }
.guw-repli label { font-size: .85rem; font-weight: 600; color: var(--guw-encre-2); }

/* ==========================================================================
   12. TABLEAUX
   ========================================================================== */

.table thead,
.fixed-table-container thead,
.guw-table thead { background-color: var(--guw-bleu); color: var(--guw-blanc); }

.table th, .guw-table th { font-weight: 600; }

.table tbody tr, .guw-table tbody tr { transition: background-color var(--guw-transition); }
.table-hover tbody tr:hover, .guw-table tbody tr:hover { background-color: var(--guw-craie-2); }

/* Débordement horizontal maîtrisé sur mobile. bootstrap-table gère son propre
   défilement ; .table-responsive couvre les tableaux bruts. */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Indice visuel : un dégradé signale qu'il reste du contenu à droite. */
@media (max-width: 767.98px) {
  .table-responsive {
    background:
      linear-gradient(to right, var(--guw-blanc) 30%, rgba(255, 255, 255, 0)) left center,
      linear-gradient(to left,  var(--guw-blanc) 30%, rgba(255, 255, 255, 0)) right center,
      radial-gradient(farthest-side at 0    50%, rgba(0, 0, 0, .18), transparent) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), transparent) right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ==========================================================================
   13. FORMULAIRES
   ========================================================================== */

.form-label, label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }

.form-control, .form-select, textarea.form-control {
  min-height: var(--guw-champ-min);
  border-color: var(--guw-bordure);
  border-radius: var(--guw-radius-s);
  font-size: 1rem;                 /* 16px : en-dessous, iOS zoome à la saisie */
  color: var(--guw-encre);
}
.form-control:focus, .form-select:focus {
  border-color: var(--guw-bleu);
  box-shadow: 0 0 0 .2rem var(--guw-anneau);
}
.form-control::placeholder { color: var(--guw-encre-3); }
textarea.form-control { min-height: 88px; }

.guw-aide { font-size: .82rem; color: var(--guw-encre-2); margin: .15rem 0 .6rem; }

.invalid-feedback, .form-error, .guw-erreur-champ { color: var(--guw-rouge-encre); font-size: .85rem; font-weight: 500; }

/* Groupe de champ des écrans d'authentification */
.guw-card .input-group-text,
.input-group-text { background: var(--guw-bleu); color: var(--guw-blanc); border: none; }

/* Bascule afficher/masquer le mot de passe */
.guw-toggle-pwd {
  border: 1px solid var(--guw-bordure); border-left: none;
  background: var(--guw-blanc); color: var(--guw-bleu);
  min-width: var(--guw-touch-min);
}
.guw-toggle-pwd:hover, .guw-toggle-pwd:focus { background: var(--guw-craie); color: var(--guw-bleu-survol); }

/* Signature par voie électronique */
.guw-signature {
  display: flex; gap: .7rem; align-items: center;
  border: 1px solid var(--guw-bordure); border-radius: var(--guw-radius-s);
  padding: 12px; margin: .75rem 0;
}
.guw-signature .form-check-input { width: 26px; height: 26px; margin: 0; flex: none; }
.guw-signature label { margin: 0; font-weight: 500; font-size: .9rem; cursor: pointer; }

/* ==========================================================================
   14. DÉPÔT DE FICHIER
   Une photo d'arrêté prise au téléphone dépasse souvent post_max_size : les
   limites sont annoncées avant l'envoi, pas découvertes après.
   ========================================================================== */

.guw-depot {
  border: 2px dashed var(--guw-bleu-trait); border-radius: var(--guw-radius);
  background: var(--guw-craie-2); padding: 18px 14px; text-align: center; margin-bottom: .6rem;
}
.guw-depot-rond {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--guw-bleu-voile); color: var(--guw-bleu);
  display: grid; place-items: center; margin: 0 auto .6rem; font-size: 1.4rem;
}
.guw-depot b { display: block; font-size: 1rem; }
.guw-depot small { color: var(--guw-encre-2); font-size: .85rem; }
.guw-depot .form-control { margin-top: .7rem; }

.guw-fichier {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--guw-vert-trait); background: var(--guw-vert-voile);
  border-radius: var(--guw-radius-s); padding: 11px 12px; margin-bottom: .6rem;
}
.guw-fichier b { display: block; font-size: .9rem; }
.guw-fichier small { color: var(--guw-vert-encre); font-size: .8rem; }

/* ==========================================================================
   15. PROGRESSION ET BARRE D'ACTION
   ========================================================================== */

.guw-progression { display: flex; gap: 6px; }
.guw-pas { flex: 1; height: 4px; border-radius: 3px; background: var(--guw-bordure); }
.guw-pas-faite { background: var(--guw-vert); }
.guw-pas-ici { background: var(--guw-bleu); }
.guw-progression-txt {
  font-size: .75rem; font-weight: 600; color: var(--guw-encre-3);
  text-transform: uppercase; letter-spacing: .06em; padding-top: .45rem;
}

/* Barre d'action collée au bas de l'écran : au téléphone, le bouton d'envoi
   ne doit pas se trouver après un long défilement. */
.guw-barre {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--guw-blanc);
  border-top: 1px solid var(--guw-bordure);
  padding: 11px 14px; display: flex; gap: .55rem;
  margin: 1.25rem -14px 0;
}
.guw-barre .btn { flex: 1; min-height: 50px; }
.guw-barre .btn-outline-secondary { flex: 0 0 auto; }

@media (min-width: 768px) {
  .guw-barre { position: static; border-top: 0; background: transparent; padding: 0; margin: 1.25rem 0 0; }
  .guw-barre .btn { flex: 0 0 auto; min-width: 230px; }
}

/* ==========================================================================
   16. ALERTES
   ========================================================================== */

.alert { border-radius: var(--guw-radius-s); border-width: 1px; font-size: .95rem; }
.alert-success { background: var(--guw-vert-voile);  border-color: var(--guw-vert-trait);  color: var(--guw-vert-encre); }
.alert-danger  { background: var(--guw-rouge-voile); border-color: var(--guw-rouge-trait); color: var(--guw-rouge-encre); }
.alert-warning { background: var(--guw-ambre-voile); border-color: var(--guw-ambre-trait); color: var(--guw-ambre); }
.alert-info,
.alert-secondary,
.alert-light   { background: var(--guw-craie);       border-color: var(--guw-bordure);     color: var(--guw-encre-2); }

/* ==========================================================================
   17. REÇU DE DÉCLARATION
   L'écran de confirmation n'existait pas : après « Valider », la page revenait
   à l'accueil sans un mot.
   ========================================================================== */

.guw-recu { border: 1px solid var(--guw-bordure); border-radius: var(--guw-radius); overflow: hidden; margin-bottom: 1rem; }
.guw-recu-tete {
  background: var(--guw-craie); padding: 10px 14px;
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--guw-encre-3); border-bottom: 1px solid var(--guw-bordure-2);
}
.guw-recu-corps { padding: 13px 14px; }

.guw-sceau {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--guw-vert-voile); color: var(--guw-vert);
  display: grid; place-items: center; margin: 0 auto .9rem;
  border: 2px solid var(--guw-vert-trait); font-size: 2.2rem;
}

.guw-prevenu { display: flex; gap: .7rem; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--guw-bordure-2); }
.guw-prevenu:last-child { border-bottom: 0; }
.guw-prevenu-pic {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--guw-vert-voile); color: var(--guw-vert-encre);
  display: grid; place-items: center; flex: none; font-size: .85rem;
}
/* Échec d'une notification : sans cet état, le sceau vert de la confirmation
   mentirait au déclarant. */
.guw-prevenu-rate { background: var(--guw-ambre-voile); color: var(--guw-ambre); }

.guw-prevenu b { display: block; font-size: .92rem; }
.guw-prevenu small { color: var(--guw-encre-2); font-size: .8rem; }

/* ==========================================================================
   18. ÉCRANS D'AUTHENTIFICATION
   ========================================================================== */

.guw-pitch {
  background-color: var(--guw-pelouse);
  background-image: repeating-linear-gradient(90deg,
      var(--guw-pelouse-clair) 0 60px, var(--guw-pelouse-fonce) 60px 120px);
}

.guw-wrap {
  min-height: 85dvh;              /* dvh : évite le saut lié à la barre d'adresse */
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 0;
}

.guw-card-auth {
  background: var(--guw-blanc); border-radius: var(--guw-radius-carte);
  width: 100%; max-width: 440px; overflow: hidden; box-shadow: var(--guw-ombre-carte);
}

.guw-head {
  background: linear-gradient(135deg, var(--guw-bleu), var(--guw-bleu-profond));
  color: var(--guw-blanc); text-align: center; padding: 26px 20px 22px; position: relative;
}
.guw-head .guw-ecusson {
  width: 52px; height: 52px; border-radius: 13px; margin: 0 auto .6rem;
  background: var(--guw-voile-rail-fort); display: grid; place-items: center;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.guw-title { font-weight: 700; margin: .55rem 0 .1rem; font-size: 1.2rem; line-height: 1.25; color: var(--guw-blanc); }
.guw-sub { opacity: .85; font-size: .85rem; }
.guw-body { padding: 26px 28px 30px; }
.guw-badge {
  display: inline-block; background: var(--guw-rouge); color: var(--guw-blanc);
  font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 12px; border-radius: 999px; margin-top: .5rem;
}
.guw-links a { color: var(--guw-bleu); text-decoration: none; font-weight: 600; }
.guw-links a:hover, .guw-links a:focus { text-decoration: underline; }

/* ==========================================================================
   19. SURCOUCHE DE CHARGEMENT
   ========================================================================== */

#loadingPopup {
  position: fixed; inset: 0; z-index: 1000;
  background-color: rgba(0, 0, 0, .5);
  display: flex; justify-content: center; align-items: center;
}
.loadingContent {
  background-color: var(--guw-blanc); padding: 24px 28px;
  border-radius: var(--guw-radius); max-width: 22rem; text-align: center;
}

/* ==========================================================================
   20. JOURNAL TECHNIQUE
   ========================================================================== */

.guw-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.7;
  background: var(--guw-noir-log); color: var(--guw-log-texte);
  border-radius: var(--guw-radius-s); padding: 14px 16px;
  max-height: 55vh; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.guw-log > div { padding-left: 11px; border-left: 3px solid transparent; }
/* Le niveau est porté par le liseré ET par le mot-clé de la ligne : jamais par
   la couleur seule. */
.guw-log-erreur { border-color: var(--guw-rouge); color: var(--guw-log-erreur); }
.guw-log-avert  { border-color: var(--guw-ambre); color: var(--guw-log-avert); }
.guw-log-info   { border-color: var(--guw-bleu-survol); color: var(--guw-log-info); }

.guw-piste { display: flex; gap: .75rem; padding: 11px 0; border-bottom: 1px solid var(--guw-bordure-2); align-items: flex-start; }
.guw-piste:last-child { border-bottom: 0; }
.guw-piste time { font-size: .8rem; font-weight: 500; color: var(--guw-encre-3); white-space: nowrap; min-width: 112px; }

/* ==========================================================================
   21. CIBLES TACTILES
   ========================================================================== */

/* Cases à cocher des tableaux de sélection : natives, elles font ~13 px. */
.table input[type="checkbox"],
.table .form-check-input,
.guw-check-lg .form-check-input {
  width: 1.5rem; height: 1.5rem; margin: 0;
  cursor: pointer; vertical-align: middle; touch-action: manipulation;
}
.table .form-check-input:checked,
.guw-check-lg .form-check-input:checked { background-color: var(--guw-bleu); border-color: var(--guw-bleu); }

/* La cellule entière devient la zone de frappe : 24 px de case + 2 × 10 px. */
.table td:has(> input[type="checkbox"]),
.table td.guw-check-cell {
  padding: .625rem; min-width: var(--guw-touch-min);
  text-align: center; vertical-align: middle;
}

.table select.form-control,
.table select.form-select { min-height: var(--guw-touch-min); }

/* Boutons d'action des tableaux d'administration : .btn-sm fait ~31 px, et
   trois d'entre eux se touchent dans la même cellule, dont « supprimer ». */
.table .btn-sm {
  min-width: var(--guw-touch-min); min-height: var(--guw-touch-min);
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.table td .btn + .btn { margin-left: .35rem; }

.guw-check-lg { display: flex; align-items: center; gap: .75rem; min-height: var(--guw-touch-min); }
.guw-check-lg .form-check-label { cursor: pointer; margin: 0; }

/* --- Tuiles de compteurs ------------------------------------------------ */

/* Un chiffre seul n'est pas un graphique : pas d'axe, pas de légende, juste la
   valeur et ce qu'elle compte. Le liseré de gauche porte le type de déclaration
   et double la couleur, qui ne suffit jamais seule. */
.guw-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.guw-tuile {
  background: var(--guw-blanc);
  border: 1px solid var(--guw-bordure);
  border-left: 4px solid var(--guw-bordure);
  border-radius: var(--guw-radius);
  padding: .9rem 1.05rem;
  box-shadow: var(--guw-ombre);
}

.guw-tuile-valeur {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--guw-encre);
}

.guw-tuile-libelle {
  display: block;
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--guw-encre-2);
}

.guw-tuile-total   { border-left-color: var(--guw-encre-3); }
.guw-tuile-report  { border-left-color: var(--guw-bleu); }
.guw-tuile-terrain { border-left-color: var(--guw-vert); }
.guw-tuile-forfait { border-left-color: var(--guw-rouge); }

/* --- Panneaux défilants et surcouches d'administration ------------------ */

/* Listes des récapitulatifs d'import : longues, à parcourir sans quitter la page. */
.guw-panneau {
  max-height: 50vh; overflow: auto;
  border: 1px solid var(--guw-bordure); border-radius: var(--guw-radius-s);
  padding: .5rem .85rem;
}
.guw-panneau ul, .guw-panneau ol { margin-bottom: 0; font-size: .88rem; }

/* Surcouche plein écran des traitements longs : import, purge, nettoyage. */
.guw-overlay {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(255, 255, 255, .93);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.guw-overlay .spinner-border { width: 3.5rem; height: 3.5rem; }

/* Compteurs de récapitulatif d'import. Le chiffre porte la police condensée,
   le libellé reste en encre lisible. */
.guw-compteur {
  display: inline-flex; align-items: baseline; gap: .4rem;
  border: 1px solid; border-radius: 999px; padding: .3rem .9rem;
  font-size: .9rem; font-weight: 600;
}
.guw-compteur b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; line-height: 1; }
.guw-compteur-vert   { background: var(--guw-vert-voile);  border-color: var(--guw-vert-trait);  color: var(--guw-vert-encre); }
.guw-compteur-bleu   { background: var(--guw-bleu-voile);  border-color: var(--guw-bleu-trait);  color: var(--guw-bleu-encre); }
.guw-compteur-rouge  { background: var(--guw-rouge-voile); border-color: var(--guw-rouge-trait); color: var(--guw-rouge-encre); }
.guw-compteur-ambre  { background: var(--guw-ambre-voile); border-color: var(--guw-ambre-trait); color: var(--guw-ambre); }
.guw-compteur-neutre { background: var(--guw-craie);       border-color: var(--guw-bordure);     color: var(--guw-encre-2); }

/* --- Logos ------------------------------------------------------------- */
/* Les logos de club viennent d'une source fédérale : hauteur imposée, largeur
   libre, jamais de déformation. */
.guw-logo-club { max-height: 72px; width: auto; }
.guw-logo-page { max-height: 96px; width: auto; }
.guw-logo-auth { height: 72px; width: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }

/* ==========================================================================
   22. UTILITAIRES, MOUVEMENT, IMPRESSION
   ========================================================================== */

.guw-pile { display: flex; flex-direction: column; gap: .65rem; }
.min-width-0 { min-width: 0; }
.guw-lignes { display: flex; flex-wrap: wrap; gap: .4rem; }
.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .guw-rail, .guw-barre, .guw-skip, .btn, #loadingPopup { display: none !important; }
  .guw-shell { grid-template-columns: 1fr; }
  body { background: var(--guw-blanc); }
  .guw-card, .card { box-shadow: none; border-color: var(--guw-encre-3); }
}