/* ============================================================================
   VBA Volley — Système de design (refonte 2026-07-17)
   Inspiré de la maquette « Refonte Mobile » : palette ivoire/indigo chaude,
   police Manrope, cartes arrondies, barre de navigation basse sur mobile.
   Invariants conservés : couleur unique par équipe, rayures « maillot »
   d'arbitrage, dégradé directionnel domicile/extérieur/arbitrage.
   Décliné intégralement en clair ET sombre.
   Tous les noms de classes historiques sont préservés.
   ============================================================================ */

/* ── Police Manrope (vendorisée → 100 % hors-ligne, aucun CDN) ─────────────── */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400; font-display:swap; src:url('../vendor/manrope/manrope-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url('../vendor/manrope/manrope-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url('../vendor/manrope/manrope-latin-600.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../vendor/manrope/manrope-latin-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../vendor/manrope/manrope-latin-800.woff2') format('woff2'); }

/* ── Jetons de couleur — thème CLAIR (ivoire chaud + indigo profond) ────────── */
:root {
  color-scheme: light;                       /* contrôles natifs (date, fichier, scrollbars) en clair */
  --accent: oklch(48% 0.13 262);
  --accent-2: oklch(55% 0.15 262);          /* variante vive pour dégradés/ombres */
  --accent-soft: oklch(94% 0.03 262);
  --accent-text: oklch(38% 0.12 262);
  --ok: oklch(56% 0.13 155);
  --ok-soft: oklch(94% 0.05 155);
  --ok-text: oklch(40% 0.1 155);
  --warn-soft: oklch(93% 0.06 75);          /* ambre = arbitrage */
  --warn-text: oklch(48% 0.13 75);
  --danger: oklch(58% 0.17 25);
  --danger-soft: oklch(94% 0.05 25);
  --danger-text: oklch(45% 0.15 25);

  --bg: oklch(96.5% 0.008 90);              /* ivoire chaud */
  --surface: oklch(99.5% 0.004 90);         /* blanc cassé */
  --surface-2: oklch(94% 0.01 90);
  --text: oklch(26% 0.02 90);
  --muted: oklch(50% 0.02 90);
  --faint: oklch(62% 0.015 90);
  --border: oklch(90% 0.012 90);
  --border-strong: oklch(84% 0.014 90);

  --radius: 12px;                            /* champs de saisie */
  --r-card: 16px;                            /* cartes */
  --r-lg: 20px;                              /* grands blocs */
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30,28,22,.05), 0 1px 3px rgba(30,28,22,.04);
  --shadow-md: 0 6px 20px -8px rgba(30,28,22,.18);
  --shadow-pop: 0 16px 40px -12px rgba(30,28,22,.28);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Jetons de couleur — thème SOMBRE (charbon chaud + indigo lumineux) ─────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent: oklch(72% 0.12 262);
    --accent-2: oklch(66% 0.14 262);
    --accent-soft: oklch(38% 0.07 262);
    --accent-text: oklch(84% 0.09 262);
    --ok: oklch(72% 0.13 155);
    --ok-soft: oklch(37% 0.06 155);
    --ok-text: oklch(84% 0.1 155);
    --warn-soft: oklch(40% 0.07 75);
    --warn-text: oklch(84% 0.11 75);
    --danger: oklch(70% 0.15 25);
    --danger-soft: oklch(38% 0.09 25);
    --danger-text: oklch(85% 0.11 25);

    --bg: oklch(21% 0.008 90);
    --surface: oklch(25% 0.008 90);
    --surface-2: oklch(29% 0.009 90);
    --text: oklch(95% 0.008 90);
    --muted: oklch(72% 0.015 90);
    --faint: oklch(58% 0.015 90);
    --border: oklch(33% 0.01 90);
    --border-strong: oklch(40% 0.012 90);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 8px 24px -10px rgba(0,0,0,.55);
    --shadow-pop: 0 18px 44px -12px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* ── Barre du haut ──────────────────────────────────────────────────────────
   Sur mobile : logo + menu Administration + déconnexion (le reste passe dans la
   barre basse). Sur desktop : navigation complète. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0.7rem 1.15rem;
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.7rem);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; }
.brand .dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 17px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent)); color: #fff;
}
.topnav { display: flex; align-items: center; gap: 0.35rem; }
.topnav-primary { display: flex; align-items: center; gap: 0.35rem; }
.topnav a, .topnav .link { color: var(--muted); text-decoration: none; font-size: 0.9rem; background: none; border: none; cursor: pointer; font-family: inherit; }
.topnav a:hover, .topnav .link:hover { color: var(--text); }
.inline { display: inline; margin: 0; }

.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.4rem 3rem; }
.container.narrow { max-width: 640px; }
/* Colonne « application » : pages utilitaires (formulaires, listes, réglages) —
   resserrée et centrée pour un rendu proche des écrans téléphone plutôt que
   d'un formulaire web pleine largeur. */
.container.app { max-width: 720px; }
.field input, .field select, .field textarea { max-width: 100%; }

h1 { font-weight: 800; font-size: 1.55rem; margin: 0 0 0.25rem; letter-spacing: -0.02em; }
h2 { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; }
.subtitle { color: var(--muted); font-size: 0.92rem; margin: 0 0 1rem; }

.progress { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 1.25rem; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 999px; }

/* ── Étapes de configuration (accueil guidé) ────────────────────────────────── */
.step {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.step.current { border: 1.5px solid var(--accent); }
.step.locked { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.step:not(.locked):hover { border-color: var(--border-strong); transform: translateY(-1px); }
.mark { width: 32px; height: 32px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.mark.done { background: var(--ok-soft); color: var(--ok-text); }
.mark.now { background: var(--accent-soft); color: var(--accent-text); }
.mark.todo { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.mark.lock { background: var(--surface-2); color: var(--faint); }
.step .ico { font-size: 20px; color: var(--muted); }
.step-txt { flex: 1; min-width: 0; }
.step-title { font-size: 15px; font-weight: 700; }
.step-sub { font-size: 13px; color: var(--muted); }
.step.locked .step-title, .step.locked .step-sub { color: var(--faint); }

.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pill.done { background: var(--ok-soft); color: var(--ok-text); }
.pill.now { background: var(--accent-soft); color: var(--accent-text); }
.pill.todo { border: 1px solid var(--border-strong); color: var(--muted); }
.pill.lock { color: var(--faint); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); }
.card.soft { background: var(--surface-2); border: none; box-shadow: none; }

.lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 9px; display: flex; align-items: center; gap: 6px; }
.bubbles { display: flex; flex-wrap: wrap; gap: 8px; }
.bub {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.bub:hover { border-color: var(--accent); }
.bub:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.bub.dashed { border-style: dashed; color: var(--muted); font-weight: 600; }
.cap { font-size: 12px; color: var(--faint); margin-top: 6px; }

input[type="date"], input[type="text"], select {
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .bub:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.section { border: 1px solid var(--border); border-radius: var(--r-card); padding: 4px 14px 12px; margin-top: 4px; background: var(--surface); }
.arb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--border); }
.arb-row:last-child { border-bottom: none; }
.arb-row .name { width: 130px; font-size: 14px; font-weight: 600; }

.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 999px; padding: 5px 13px 5px 5px; font-size: 13px; font-weight: 600; }

/* ── Boutons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  padding: 10px 17px; border-radius: var(--radius); cursor: pointer; font-size: 14px;
  font-weight: 700; font-family: inherit; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, transform .1s ease, box-shadow .12s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent-2); }
.btn.primary:hover { background: var(--accent-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ko { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.block { width: 100%; padding: 13px; font-size: 15px; }

.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: 13px; }
.hidden { display: none; }

/* ── Convocations (legacy) ──────────────────────────────────────────────────── */
.convocation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; margin-bottom: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.convocation.r-present { border-left-color: var(--ok); }
.convocation.r-absent { border-left-color: var(--danger); }
.conv-info { display: flex; flex-direction: column; gap: 0.15rem; }
.conv-titre { font-weight: 700; }
.conv-role, .conv-lieu { font-size: 0.85rem; color: var(--muted); }
.badge { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.8rem; font-weight: 700; }

.msg { padding: 11px 15px; border-radius: var(--radius); margin-bottom: 12px; font-size: 14px; font-weight: 600; background: var(--ok-soft); color: var(--ok-text); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); }
.empty { color: var(--muted); text-align: center; padding: 2.5rem 0; }

.login { max-width: 380px; margin: 2.5rem auto; }
.erreur { color: var(--danger-text); font-size: 0.9rem; margin-top: 4px; }

input[type="number"], input[type="email"], input[type="password"], input[type="tel"], textarea {
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-head h1 { display: flex; align-items: center; gap: 9px; }
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; }
select[multiple] { min-height: 150px; }
.liste-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 13px 15px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.liste-item a { color: var(--accent-text); text-decoration: none; font-size: 13px; font-weight: 700; }
.liste-item a:hover { text-decoration: underline; }

/* Liste « application » (config) : lignes-cartes cliquables avec icône + chevron. */
.app-liste { display: flex; flex-direction: column; gap: 8px; }
.app-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
  transition: border-color .12s ease, transform .12s ease;
}
.app-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.app-row-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--accent-soft); color: var(--accent-text); }
.app-row-txt { flex: 1; min-width: 0; font-weight: 600; }
.app-row-chev { color: var(--faint); font-size: 18px; }
ul.errorlist { color: var(--danger-text); font-size: 0.9rem; list-style: none; padding-left: 0; margin: 0 0 8px; }

/* ── Menus déroulants (barre du haut) ───────────────────────────────────────── */
.navlink { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 7px 11px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; }
.navlink:hover { color: var(--text); background: var(--surface-2); }
.navlink.on { color: var(--accent-text); background: var(--accent-soft); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; padding: 7px 11px; border-radius: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary, .menu > summary:hover { color: var(--text); background: var(--surface-2); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 234px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 6px; box-shadow: var(--shadow-pop); z-index: 60; display: flex; flex-direction: column; gap: 1px; }
.menu-panel a, .menu-sub > summary { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 0.88rem; font-weight: 600; cursor: pointer; list-style: none; }
.menu-panel a:hover, .menu-sub > summary:hover { background: var(--surface-2); }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub > summary { color: var(--muted); justify-content: space-between; }
.menu-sub[open] > summary { color: var(--text); }
.menu-sub[open] > summary .chev { transform: rotate(90deg); }
.menu-sub-panel { display: flex; flex-direction: column; gap: 1px; padding-left: 6px; margin-top: 1px; }
.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.menu-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; padding: 7px 11px 3px; }

/* ── Barre de navigation BASSE (mobile) ─────────────────────────────────────── */
.botnav { display: none; }
@media (max-width: 719px) {
  .topnav-primary { display: none; }               /* déplacé dans la barre basse */
  .topbar { padding-left: .95rem; padding-right: .95rem; gap: .35rem; }
  .topnav { gap: .1rem; }
  .nav-txt { display: none; }                       /* Administration / Déconnexion en icônes seules */
  .menu > summary, .navlink { padding: 8px 10px; font-size: 1.05rem; }
  .botnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 6px calc(var(--safe-bottom) + 6px);
  }
  .botnav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; text-decoration: none; color: var(--muted); font-size: 10.5px; font-weight: 700;
    border-radius: 12px;
  }
  .botnav a i { font-size: 21px; }
  .botnav a.on { color: var(--accent); }
  .botnav a.create i {
    background: linear-gradient(150deg, var(--accent-2), var(--accent)); color: #fff;
    width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px -8px var(--accent-2); margin-top: -2px;
  }
  .botnav a.create.on i { filter: brightness(1.05); }
  /* espace pour ne pas masquer le contenu sous la barre basse */
  body.has-botnav .container { padding-bottom: calc(76px + var(--safe-bottom)); }
}

/* ── Calendrier : filtre équipes, contenu d'événement, panneau latéral ──────── */
.cal-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.cal-filtre .bub { padding: 6px 13px; font-size: 13px; }
.cal-filtre .bub .dot-eq { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.fc-ev { display: flex; align-items: center; gap: 5px; padding: 1px 2px; font-size: 12px; font-weight: 600; overflow: hidden; width: 100%; }
.fc-ev .ev-h { font-weight: 800; }
.fc-ev .ev-de { font-weight: 800; opacity: .92; }
.fc-ev .ev-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arb-sq { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 5px; font-size: 10px; font-weight: 800; color: #fff; border: 1px solid rgba(255,255,255,.6); }

.drawer-overlay { position: fixed; inset: 0; background: rgba(20,18,14,.42); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 99; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(430px, 92vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); z-index: 100; display: flex; flex-direction: column; overflow: hidden; }
.drawer.open { transform: translateX(0); }
/* En-tête figé + corps qui défile seul (scroll fiable au wheel comme au tactile). */
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-shrink: 0; padding: 1.2rem 1.3rem .5rem; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .3rem 1.3rem 2rem; }
.drawer-head h2 { margin: 0; font-size: 1.2rem; }
.drawer-close { background: var(--surface-2); border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.drawer-close:hover { background: var(--border); color: var(--text); }
.dinfo { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.dinfo:last-child { border-bottom: none; }
.dinfo i { color: var(--accent); font-size: 17px; margin-top: 1px; }
.dinfo .k { color: var(--muted); font-size: 12px; }
.dinfo .v { font-weight: 600; }

/* Sur mobile, le panneau latéral devient une « bottom sheet » (feuille du bas). */
@media (max-width: 719px) {
  .drawer {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 82vh;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%);
  }
  .drawer.open { transform: translateY(0); }
  .drawer-body { padding-bottom: calc(var(--safe-bottom) + 1.5rem); }
  .drawer::before { content: ""; display: block; flex-shrink: 0; width: 40px; height: 4px; border-radius: 99px; background: var(--border-strong); margin: 8px auto 2px; }
}

/* ── Tableau de bord ────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; box-shadow: var(--shadow-sm); }
.stat .s-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--accent-soft); color: var(--accent-text); }
.stat .s-num { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat .s-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-next a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text); overflow: hidden; }
.dash-next a:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dash-next .n-date { text-align: center; min-width: 46px; flex-shrink: 0; }
.dash-next .n-jour { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.dash-next .n-mois { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.dash-next .n-titre { font-weight: 700; }
.dash-next .n-sub { font-size: 12px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Feuille de présence ────────────────────────────────────────────────────── */
.link.back { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.link.back:hover { color: var(--text); }
.page-head h1 { margin: 4px 0 0; }
.pres-titre { font-size: 1.1rem; font-weight: 700; }
.pres-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; color: var(--muted); font-size: 14px; }
.pres-sous i { margin-right: 3px; }

.pres-compte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .pres-compte { grid-template-columns: repeat(2, 1fr); } }
.pres-stat { border: 1px solid var(--border); border-radius: var(--r-card); padding: 15px 16px; background: var(--surface); border-top: 3px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.pres-stat .n { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.pres-stat .l { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.pres-stat.s-present { border-top-color: var(--ok); }
.pres-stat.s-present .n { color: var(--ok-text); }
.pres-stat.s-absent { border-top-color: var(--danger); }
.pres-stat.s-absent .n { color: var(--danger-text); }
.pres-stat.s-attente { border-top-color: var(--warn-text); }
.pres-stat.s-total { border-top-color: var(--accent); }
.pres-stat.s-total .n { color: var(--accent-text); }

.pres-liste { list-style: none; padding: 0; margin: 8px 0 1.5rem; }
.pres-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.pres-row.r-present { border-left-color: var(--ok); }
.pres-row.r-absent { border-left-color: var(--danger); }
.pres-row.r-attente { border-left-color: var(--border-strong); }
.pres-row .avatar { flex-shrink: 0; }
.pres-who { flex: 1; min-width: 0; }
.pres-nom { font-weight: 700; }
.pres-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pres-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pres-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.pres-btn:hover { background: var(--surface-2); }
.pres-btn.ok.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.pres-btn.ko.on { background: var(--danger); border-color: var(--danger); color: #fff; }
.pres-btn.wait.on { background: var(--warn-soft); border-color: var(--warn-text); color: var(--warn-text); }
.pres-btn.wait span { display: none; }
@media (max-width: 560px) { .pres-btn span { display: none; } .pres-btn { padding: 9px 11px; } }
.pres-aide { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* Résumé de présence dans le panneau latéral du calendrier. */
.d-pres { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; margin-right: 12px; }
.d-pres.ok { color: var(--ok-text); }
.d-pres.ko { color: var(--danger-text); }
.d-pres.wait { color: var(--warn-text); }
.d-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* ── Agenda joueur (Mon agenda) ─────────────────────────────────────────────── */
.ag-filtres { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; }
.ag-filtre-groupe { display: flex; flex-wrap: wrap; gap: 8px; }

.ag-liste { list-style: none; padding: 0; margin: 0; }
.ag-card[hidden] { display: none; }
.ag-card {
  --fade-col: var(--surface-2);
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 15px 17px; margin-bottom: 11px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  /* Dégradé directionnel : couleur (statut) → surface. Direction = geste (présent à
     droite / absent à gauche) une fois répondu, sinon domicile/extérieur (attente). */
  background: linear-gradient(var(--fade-dir, to right), var(--fade-col), var(--surface) 72%);
  touch-action: pan-y;            /* scroll vertical libre, glissement horizontal capté par le JS */
  cursor: grab;
}
.ag-card.ag-dragging { cursor: grabbing; user-select: none; box-shadow: var(--shadow-md); }

/* Repères révélés pendant le glissement (opacité pilotée par le JS). */
.ag-swipe-hint {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px;
  color: #fff; opacity: 0; pointer-events: none;
}
.ag-swipe-hint.hint-pre { right: 14px; background: var(--ok); }
.ag-swipe-hint.hint-abs { left: 14px; background: var(--danger); }
.ag-card.r-present { --fade-col: var(--ok-soft); }
.ag-card.r-absent  { --fade-col: var(--danger-soft); }
.ag-card.r-attente { --fade-col: var(--surface-2); }

/* Convocation d'arbitrage : rayures verticales « maillot d'arbitre » sur toute la
   vignette, estompées de 0 % (haut) à 100 % (bas) via un masque ; le dégradé de
   présence (rouge/vert/neutre) se pose PAR-DESSUS. Le contenu reste au premier plan. */
.ag-card.ag-arb { background: var(--surface); }
.ag-card.ag-arb::before {          /* couche rayée, opacité fondue verticalement */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(90deg,
    rgba(20, 20, 20, 0.85) 0 17px, rgba(238, 238, 238, 0.9) 17px 34px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 100%);
}
.ag-card.ag-arb::after {           /* dégradé de présence, par-dessus les rayures */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--fade-dir), var(--fade-col), transparent 72%);
}
/* Passe le CONTENU au-dessus des rayures/dégradé, mais SANS toucher aux repères de
   glissement (qui doivent rester en position absolute, sinon ils occupent du flux et
   gonflent la hauteur de la vignette d'arbitrage). */
.ag-card.ag-arb > *:not(.ag-swipe-hint) { position: relative; z-index: 2; }
.ag-card.ag-arb .ag-body { text-shadow: 0 0 3px var(--surface), 0 0 2px var(--surface); }

.ag-sec { margin-bottom: 1.7rem; }
.ag-sec[hidden] { display: none; }
.ag-sec-titre { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.ag-sec-titre.accent { color: var(--accent-text); }

.ag-body { flex: 1; min-width: 0; }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ag-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ag-date { font-size: 15px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.ag-de { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ag-de.de-d { background: var(--accent-soft); color: var(--accent-text); }
.ag-de.de-e { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border-strong); }
.ag-cat { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; }
.ag-cat.arb { color: var(--text); font-weight: 700; }
.ag-titre { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 1.05rem; font-weight: 700; flex-wrap: wrap; letter-spacing: -0.01em; }
.ag-vs { font-size: 11px; color: var(--muted); font-weight: 700; }
.ag-eq.moi { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ag-detail { display: none; }

/* Boutons icône compacts (Modifier ma réponse / Détails du match) : cercle autour de
   l'icône, poussés à droite de la vignette. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.ag-detail-btn { color: var(--accent-text); }

.ag-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ag-actions .pres-btn { flex: 0 1 auto; }
.ag-actions .pres-btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.ag-actions .pres-btn.ko { background: var(--danger); border-color: var(--danger); color: #fff; }
.ag-etat { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; margin-right: 2px; }
.ag-etat.r-present { color: var(--ok-text); }
.ag-etat.r-absent { color: var(--danger-text); }

/* Convoqués (fiche détails) rangés en 3 sous-colonnes : présents / absents / non renseigné.
   Noms courts (prénom + initiale) fournis par le serveur pour éviter le débordement. */
.convoq-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.convoq-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.convoq-col > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-h { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; }
.convoq-col.ok .cc-h { color: var(--ok-text); }
.convoq-col.ko .cc-h { color: var(--danger-text); }
.convoq-col.wait .cc-h { color: var(--warn-text); }
.cc-vide { color: var(--faint); }

@media (max-width: 560px) {
  .ag-card { flex-direction: column; align-items: stretch; }
  .ag-actions .pres-btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) { .convoq-cols { grid-template-columns: 1fr; gap: 8px; } }

/* ── Grille d'import en masse (CSV / PDF / collage) ─────────────────────────── */
.grille-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
table.grille { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.grille thead th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: var(--surface-2); padding: 10px 10px;
  border-bottom: 1px solid var(--border);
}
table.grille tbody td { padding: 4px 6px; }
table.grille tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--surface-2) 45%, transparent); }
table.grille tbody input { border: 1px solid var(--border); border-radius: 8px; padding: 8px 9px; background: var(--surface); }
table.grille tbody input:focus-visible { border-color: var(--accent); }

/* ── Boutons complémentaires ─────────────────────────────────────────────────── */
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.danger { color: var(--danger-text); border-color: var(--danger-soft); }
.btn.danger:hover { background: var(--danger-soft); }

/* ── Page Paramétrer (hub de configuration) ─────────────────────────────────── */
.param-seg { margin-bottom: 1.7rem; }
.param-seg-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; }
.param-seg.danger-zone { border: 1px solid var(--danger-soft); border-radius: var(--r-card); padding: 14px 15px 4px; background: color-mix(in oklab, var(--danger-soft) 30%, transparent); }
.param-seg.danger-zone .param-seg-h { color: var(--danger-text); }
.app-row .btn.small, .app-row form.inline { flex-shrink: 0; }
/* Sur PC, les compartiments se répartissent en colonnes plutôt qu'un long fil vertical. */
.param-grid { columns: 2 340px; column-gap: 22px; }
.param-grid .param-seg { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 719px) { .param-grid { columns: 1; } }

/* Fiche détail du tableau de bord : label au-dessus de la valeur (contenu en <span>). */
#dash-d-corps .dinfo > span { display: block; min-width: 0; }
#dash-d-corps .dinfo > span > .k, #dash-d-corps .dinfo > span > .v { display: block; }

/* ── Tableau de bord : prochains matchs (bouton ouvrant le détail) ───────────── */
.dash-next .dash-row {
  display: flex; align-items: center; gap: 12px; width: 100%; position: relative;
  padding: 12px 14px; margin-bottom: 9px; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm); color: var(--text);
  cursor: pointer; font-family: inherit; text-align: left; overflow: hidden;
}
.dash-next .dash-row:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dash-detail { display: none; }

/* ── Barre d'outils custom du calendrier ────────────────────────────────────── */
.cal-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 0 0 12px; }
.cal-toolbar .ct-left { justify-self: start; }
.cal-toolbar .ct-right { justify-self: end; }
.cal-toolbar .ct-center { display: flex; align-items: center; gap: 10px; }
.cal-title { font-weight: 800; font-size: 1.05rem; text-transform: capitalize; min-width: 8ch; text-align: center; }
.cal-views { display: flex; gap: 6px; }
.cal-views .btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Sur mobile, le calendrier n'affiche QUE le nom de l'équipe (l'heure/détails via le clic ;
   la couleur donne l'équipe, le dégradé donne domicile/extérieur). */
@media (max-width: 560px) {
  #cal .fc-daygrid-event .ev-h,
  #cal .fc-daygrid-event .ev-de,
  #cal .fc-daygrid-event .arb-sq { display: none; }
  #cal .fc-daygrid-event .fc-ev { justify-content: flex-start !important; }
}

/* ── Fonds illustrés par type d'événement (filigrane discret, 100 % local) ───── */
/* Filigrane teinté par la couleur du texte (donc lisible en clair ET sombre), posé
   sous le contenu. Réservé aux matchs et entraînements ; l'arbitrage garde ses rayures. */
body.fonds-on .ag-card.nat-match > *:not(.ag-swipe-hint),
body.fonds-on .ag-card.nat-entrainement > *:not(.ag-swipe-hint),
body.fonds-on .dash-row.nat-match > *,
body.fonds-on .dash-row.nat-entrainement > * { position: relative; z-index: 1; }
body.fonds-on .ag-card.nat-match::after,
body.fonds-on .ag-card.nat-entrainement::after,
body.fonds-on .dash-row.nat-match::after,
body.fonds-on .dash-row.nat-entrainement::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 0; right: 6px; bottom: 0; width: 132px;
  background: var(--text); opacity: .07;
  -webkit-mask: var(--wm) no-repeat right center; -webkit-mask-size: contain;
          mask: var(--wm) no-repeat right center; mask-size: contain;
}
body.fonds-on .nat-match {
  --wm: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,24,24'%3E%3Cpath%20fill='black'%20d='M5,4h14v3a5,5,0,0,1,-4,4.9V15h3v2H6v-2h3v-3.1A5,5,0,0,1,5,7V4zM5,6H3v1a3,3,0,0,0,2,2.8V6zM19,6v3.8A3,3,0,0,0,21,7V6h-2z'/%3E%3C/svg%3E");
}
body.fonds-on .nat-entrainement {
  --wm: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0,0,24,24'%3E%3Cpath%20fill='black'%20d='M2,9h2v6H2zM4,7h2v10H4zM6,11h12v2H6zM18,7h2v10h-2zM20,9h2v6h-2z'/%3E%3C/svg%3E");
}

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

/* ══ Retours visuels : chargement, attente, succès, erreur ═══════════════════
   Ajouté le 2026-07-19 (corrections audit UX). États explicites pour les
   actions asynchrones et les cas de réseau lent / coupé. */

/* Messages serveur distingués par type (succès vert / erreur rouge / info) —
   corrige le fait que tout se ressemblait. Base neutre, puis variante par tag. */
.msg { display: flex; align-items: flex-start; gap: 9px;
  background: var(--surface-2); color: var(--text);
  border-color: var(--border-strong); }
.msg .ti { font-size: 18px; flex-shrink: 0; }
.msg.msg-success { background: var(--ok-soft); color: var(--ok-text); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.msg.msg-error, .msg.msg-danger { background: var(--danger-soft); color: var(--danger-text); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }
.msg.msg-warning { background: var(--warn-soft); color: var(--warn-text); border-color: color-mix(in oklab, var(--warn-text) 30%, transparent); }
.msg.msg-info { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in oklab, var(--accent) 30%, transparent); }

/* Barre de progression de navigation (haut de l'écran) */
#nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--accent); z-index: 200; opacity: 0;
  transition: width .2s ease, opacity .3s ease; }
#nav-progress.on { opacity: 1; }

/* Notifications discrètes (toasts) */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 74px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 12px; z-index: 210; pointer-events: none; }
@media (min-width: 720px) { #toasts { bottom: calc(var(--safe-bottom) + 18px); right: 18px; left: auto; align-items: flex-end; } }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  max-width: 440px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-left: 4px solid var(--muted);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  padding: 12px 14px; font-size: 14px; font-weight: 600; animation: toast-in .18s ease; }
.toast .ti { font-size: 20px; flex-shrink: 0; }
.toast-txt { min-width: 0; }
.toast-sub { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px; }
.toast-close { margin-left: 4px; background: none; border: none; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast.pending { border-left-color: var(--accent); } .toast.pending .ti { color: var(--accent-text); }
.toast.success { border-left-color: var(--ok); } .toast.success .ti { color: var(--ok-text); }
.toast.error   { border-left-color: var(--danger); } .toast.error .ti { color: var(--danger-text); }
.toast.info    { border-left-color: var(--accent); } .toast.info .ti { color: var(--accent-text); }
.toast.hide { animation: toast-out .18s ease forwards; }
@keyframes toast-in  { from { transform: translateY(12px); opacity: 0; } }
@keyframes toast-out { to   { transform: translateY(12px); opacity: 0; } }

/* Petit spinner (attente sur un bouton / un toast) */
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite;
  vertical-align: -3px; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bouton en cours de traitement (retour immédiat au tap, anti-double-envoi) */
.htmx-request.pres-btn, .htmx-request .pres-btn,
.htmx-request.btn, .htmx-request.ag-card { opacity: .55; pointer-events: none; }
[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Squelette de chargement (contenu en cours de construction) */
.skeleton { position: relative; overflow: hidden; background: var(--border); border-radius: var(--radius); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--surface) 55%, transparent), transparent);
  animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
#cal-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
#cal-skeleton .sk-row { height: 44px; }
#cal-skeleton .sk-row:first-child { height: 26px; width: 55%; }

/* Choix « en bulles » accessibles au clavier : le bouton radio/case est rendu
   invisible MAIS reste focusable (avant, `hidden` le retirait de la tabulation).
   Le contour de focus est porté par la bulle visible. */
.bub input[type="radio"][hidden], .bub input[type="checkbox"][hidden] {
  display: inline-block; position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.bub:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }