/*!
 * 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
   Charte graphique LFPL, section 02 : Anton pour les titres et les grands
   chiffres, Heebo pour tout le reste. Les Barlow sont conservées comme repli
   local si une Anton/Heebo venait à manquer.
   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'); }

/* Anton et Heebo : les deux polices de la charte LFPL. Auto-hébergées comme les
   Barlow — le contrôle D3 refuse tout appel à Google Fonts. Heebo est une
   police variable : un seul fichier couvre les graisses 100 à 900. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/heebo-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/heebo-variable-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

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

:root {
  /* --- Charte graphique LFPL (document officiel, section 03). ---------------
     Les valeurs marquées « charte » sont reprises telles quelles. Les autres
     sont des déclinaisons (voiles, traits, survols) construites à partir
     d'elles. Ratios de contraste WCAG 2.1 vérifiés sur blanc. --- */
  --guw-bleu:            #325491;  /* charte — institutionnel  — 7,47:1 (AAA) */
  --guw-bleu-survol:     #416ea9;  /* charte — actions, liens  — 5,21:1 (AA)  */
  --guw-bleu-profond:    #2d427b;  /* charte — bleu foncé      — 9,65:1 (AAA) */
  --guw-bleu-nuit:       #2d427b;  /* charte — rail, en-têtes                 */
  --guw-bleu-vif:        #5271ff;  /* charte — GRAPHISME SEULEMENT : 4,07:1
                                      sur blanc, sous le seuil AA du texte.   */
  --guw-bleu-voile:      #e9eefa;  /* fonds d'appui    */
  --guw-bleu-trait:      #c5d3ef;
  --guw-bleu-encre:      #24406f;  /* texte sur voile  — 8,3:1 */
  --guw-rouge:           #d8171c;  /* charte — destructif      — 5,17:1 (AA)  */
  --guw-rouge-survol:    #b0141a;
  --guw-rouge-voile:     #fdf2f2;
  --guw-rouge-trait:     #f5cdce;
  --guw-rouge-encre:     #b0141a;
  --guw-dore:            #c19a2a;  /* charte — accent, contour de focus.
                                      2,65:1 sur blanc : jamais de petit
                                      texte doré sur fond clair.              */
  --guw-dore-voile:      #fbf3de;
  --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;

  /* --- Typographies de la charte (section 02) -------------------------------
     Anton pour les titres et les grands chiffres, Heebo pour tout le reste.
     Anton est une police d'affichage : la charte la réserve aux titres et
     sous-titres — jamais dans un tableau, un champ ou un paragraphe. --- */
  --guw-titre:  'Anton', 'Heebo', 'Arial Narrow', sans-serif;
  --guw-texte:  'Heebo', 'Segoe UI', Arial, sans-serif;

  /* --- Neutres --- */
  --guw-blanc:           #ffffff;  /* charte */
  --guw-encre:           #1f2a37;  /* texte principal  — 13,6:1 */
  --guw-encre-2:         #4a5567;  /* texte secondaire — 7,9:1 */
  --guw-encre-3:         #616c7a;  /* texte tertiaire  — 5,34:1 sur blanc,
                                      4,75:1 sur le fond de page #eef2f7 :
                                      AA tenu sur les deux surfaces.          */
  --guw-craie:           #eef2f7;  /* fond de page     */
  --guw-craie-2:         #f7f9fd;  /* survol de ligne  */
  --guw-bordure:         #e3e8ef;
  --guw-bordure-2:       #eceff5;
  --guw-bordure-forte:   #d3dae4;
  --guw-noir-log:        #0e1626;  /* fond du journal technique */
  --guw-log-texte:       #c9d6ea;
  --guw-log-erreur:      #ffb3ae;
  --guw-log-avert:       #f2d69a;
  --guw-log-info:        #a9c1ec;
  /* Le rail passe du presque-noir au bleu foncé de la charte (#2d427b) :
     les trois teintes ci-dessous ont été relevées pour rester lisibles
     dessus — l'ancienne #6f83a5 n'y tenait plus que 2,51:1. */
  --guw-rail-texte:      #cddcf1;  /* 6,94:1 sur le rail */
  --guw-rail-titre:      #a8bad8;  /* 4,91:1 */
  --guw-rail-second:     #b9c8e0;  /* 5,70:1 */

  /* --- 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:          #c19a2a;  /* charte — contour de focus clavier doré */
  --guw-halo:            rgba(65, 110, 169, .18);
  --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: var(--guw-texte);
  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: var(--guw-titre);
  font-weight: 400;
  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: var(--guw-titre); font-weight: 400; font-size: .82rem;
  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: var(--guw-titre); font-weight: 400; font-size: 1.18rem; line-height: 1.1; letter-spacing: .5px; }
.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: var(--guw-texte);
  font-weight: 700;
  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
   ========================================================================== */

/* Charte « Notes de frais » : fond bleu-gris, décor géométrique en filigrane,
   carte blanche centrée, titre Anton, texte Heebo. Tout est porté par .guw-auth,
   posé sur <body> : aucune de ces règles ne fuit vers le reste du site. */

.guw-auth {
  background: var(--guw-craie);
  color: var(--guw-encre);
  font-family: var(--guw-texte);
}

/* Décor : formes géométriques LFPL en filigrane, derrière la carte. */
.guw-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.guw-deco svg { width: 100%; height: 100%; display: block; }
.guw-deco .d-bleu   { fill: var(--guw-bleu-profond);   }
.guw-deco .d-action { fill: var(--guw-bleu-survol); }
.guw-deco .d-rouge  { fill: var(--guw-rouge);  }
.guw-deco .d-dore   { fill: var(--guw-dore);   }
.guw-deco .t-bleu   { fill: none; stroke: var(--guw-bleu-profond);   }
.guw-deco .t-action { fill: none; stroke: var(--guw-bleu-survol); }

.guw-wrap {
  min-height: 100dvh;             /* dvh : évite le saut lié à la barre d'adresse */
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; position: relative; z-index: 1;
}

.guw-card-auth {
  position: relative; z-index: 1;
  background: var(--guw-blanc);
  border: 1px solid var(--guw-bordure);
  border-radius: 14px;
  box-shadow: var(--guw-ombre);
  width: 100%; max-width: 420px;
  padding: 30px 34px 34px;
}

/* La carte occupe l'écran : le conteneur Bootstrap de base.html.twig ne doit
   ni le brider en largeur, ni ajouter sa gouttière verticale. */
.guw-auth main.container { max-width: none; padding: 0; }

.guw-auth .guw-head { text-align: center; margin-bottom: 22px; }
/* Le filet blanc/rouge appartient au bandeau de marque, pas à la carte :
   ici, c'est le trait bleu sous le titre qui joue ce rôle. */
.guw-auth .guw-head::after { content: none; }
.guw-auth .guw-logo-auth { max-height: 74px; max-width: 200px; object-fit: contain; margin-bottom: 14px; }

.guw-auth .guw-title {
  font-family: var(--guw-titre); font-weight: 400;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--guw-bleu-profond); font-size: 1.42rem; line-height: 1.15;
  margin: 0; padding-bottom: 10px;
  border-bottom: 2px solid var(--guw-bleu-survol);
}
.guw-auth .guw-title span { display: block; font-size: .78em; color: var(--guw-bleu-survol); }
.guw-auth .guw-sub {
  color: var(--guw-encre-3); font-size: .85rem; text-align: center;
  margin: 10px 0 24px;
}
.guw-auth .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: 4px 13px; border-radius: 999px; margin-top: 12px;
}
.guw-auth .guw-body { padding: 0; }

/* Champs : libellé au-dessus, champ pleine largeur, comme dans « Notes de frais ». */
.guw-auth .form-label {
  display: block; margin-bottom: 5px;
  font-weight: 700; font-size: .9rem; color: var(--guw-bleu-profond);
}
.guw-auth .form-control {
  width: 100%; box-sizing: border-box;
  min-height: var(--guw-champ-min);
  padding: 10px 12px; font-size: .95rem;
  color: var(--guw-encre); background: var(--guw-blanc);
  border: 1px solid var(--guw-bordure-forte); border-radius: 8px;
  transition: border-color var(--guw-transition), box-shadow var(--guw-transition);
}
.guw-auth .form-control::placeholder { color: var(--guw-encre-3); }
.guw-auth .form-control:focus {
  border-color: var(--guw-bleu-survol);
  box-shadow: 0 0 0 3px var(--guw-halo);
  outline: none;
}
.guw-auth .guw-champ { position: relative; margin-bottom: 16px; }
.guw-auth .guw-champ .form-control { padding-right: 48px; }
.guw-auth .guw-toggle-pwd {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px;
  color: var(--guw-bleu-survol); cursor: pointer;
}
.guw-auth .guw-toggle-pwd:hover { background: var(--guw-craie); }

.guw-auth .btn-primary {
  width: 100%; padding: 13px 16px; min-height: var(--guw-touch-min);
  background: var(--guw-bleu-survol); border: 0; color: var(--guw-blanc);
  border-radius: 10px; font-weight: 700; letter-spacing: .2px; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: filter var(--guw-transition), transform 50ms ease;
}
.guw-auth .btn-primary:hover { background: var(--guw-bleu-survol); filter: brightness(1.06); }
.guw-auth .btn-primary:active { transform: translateY(1px); }

.guw-auth .alert-danger {
  background: var(--guw-rouge-voile); color: var(--guw-rouge);
  border: 1px solid var(--guw-rouge); border-radius: 8px;
  font-size: .9rem; padding: 10px 12px; margin-bottom: 16px;
}
.guw-auth .alert-info {
  background: var(--guw-craie); color: var(--guw-bleu-profond);
  border: 1px solid var(--guw-bordure-forte); border-radius: 8px;
  font-size: .9rem; padding: 10px 12px; margin-bottom: 16px;
}

.guw-auth .guw-links { margin-top: 18px; font-size: .9rem; }
.guw-auth .guw-links a { color: var(--guw-bleu-survol); text-decoration: none; font-weight: 700; }
.guw-auth .guw-links a:hover, .guw-auth .guw-links a:focus { text-decoration: underline; }
.guw-auth .guw-links .guw-sep { color: var(--guw-bordure-forte); margin: 0 .5rem; }

/* Focus clavier doré : signature d'accessibilité de « Notes de frais ». */
.guw-auth a:focus-visible,
.guw-auth button:focus-visible,
.guw-auth .form-control:focus-visible {
  outline: 3px solid var(--guw-dore); outline-offset: 2px; border-radius: 8px;
}

/* ==========================================================================
   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: var(--guw-titre);
  font-size: 2.1rem;
  font-weight: 400;
  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: var(--guw-titre); font-weight: 400; font-size: 1.32rem; 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); }
}