/* ACBG, application du club. Thème « soir de match » : anthracite, rouge vif, typographie condensée.
   Codes réponse lisibles par les daltoniens rouge-vert (jamais rouge contre vert) :
   présent = bleu + coche, absent = orange + croix, peut-être = jaune + point d'interrogation.
   Le rouge est réservé à l'identité du club, jamais à un statut.
   Notes du coach : vert, bleu, rouge (choix explicite du club). */

:root {
  --club: #ff2d3d;
  --club-ink: #ffffff;
  --club-deep: color-mix(in srgb, var(--club) 62%, #12070a);
  --club-soft: color-mix(in srgb, var(--club) 16%, transparent);
  /* var(--club) (couleur de thème choisie par le club) n'offre aucune garantie de contraste comme texte sur
     fond sombre (défaut relevé par l'audit : VPC-D07) ; éclaircie pour rester lisible sans perdre la teinte */
  --club-text: color-mix(in srgb, var(--club) 70%, white);
  --bg: #1b1c20;
  --bg-2: #141518;
  --inset: #17181b;
  --surface: #25262b;
  --surface-2: #2d2e34;
  --surface-3: #37383f;
  --ink: #f5f5f7;
  --ink-2: #b7bac2;
  /* #8b8e97 sur #1b1c20 (fond) ne fait que 2,7 : 1, sous le seuil WCAG de 4,5 : 1 pour le texte courant —
     numéro de version, sous-lignes, pastilles « Terminé »... (défauts relevés par l'audit : VPC-D07, VM-D04) */
  --ink-3: #9ca0a8;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .05);
  --yes: #5b97ff;
  --yes-solid: #2f6fe8;
  --yes-bg: rgba(91, 151, 255, .15);
  --no: #ff9a4d;
  --no-solid: #f07a1f;
  --no-bg: rgba(255, 154, 77, .14);
  --maybe: #ffd54a;
  --maybe-solid: #f5c518;
  --maybe-bg: rgba(255, 213, 74, .13);
  --wait: #a4a8b1;
  --wait-bg: rgba(255, 255, 255, .07);
  --r-lg: 28px;
  --r: 20px;
  --r-sm: 14px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bebas Neue", "Barlow Condensed", "Arial Narrow", sans-serif;
  --tabbar-h: 70px;
  --card: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, #000) 100%);
  --card-edge: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .22);
  --glow: 0 10px 28px color-mix(in srgb, var(--club) 38%, transparent);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  background:
    radial-gradient(900px 420px at 50% -180px, color-mix(in srgb, var(--club) 13%, transparent), transparent 70%),
    var(--bg);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* mot orphelin en fin de ligne (titres, aides, libellés) : text-wrap hérite par défaut, sauf là où
   white-space:nowrap force volontairement une seule ligne (défauts relevés par l'audit : VPC-D06, VM-D12) */
body { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--club) 70%, transparent); text-underline-offset: 3px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--club); outline-offset: 2px; }

/* Bebas Neue n'a qu'une graisse : pas de faux gras */
.display, .page-head h1, .section-head h2, .event-title, .d-num, .poster-side strong, .poster-vs, .poster-score,
.poster-time, .kpi b, .menu-tile, .notif-title, .btn, .fold-head span, .empty-title, .auth h1, .auth-brand strong,
.topbar-title, .crest-name, .day-group, .answer-who, .avatar, .score, .scoreline, .grade-chip, .grade span,
.note-bar b, .trend, .avis-choice strong, .avis-dist-count, .carpool-stats b, dialog.sheet h2, .score-form input,
.score-sep, .stepper input, .board-group h3, .coach-note-label, .feed-score .comment-text, .team-card-head .row-title,
.hero-title, .gauge b, .form-section > h2, .table.stack-mobile td.cell-title, .stat-big {
  font-family: var(--display); font-weight: 400; font-synthesis: none; letter-spacing: .6px;
}

/* ------------------------------------------------------------------ structure */
.main { width: 100%; max-width: 940px; margin: 0 auto; padding: 14px 16px 40px; }
body.with-nav .main { padding-bottom: calc(var(--tabbar-h) + 44px + env(safe-area-inset-bottom)); }
/* bannière d'installation affichée : elle est plus haute que la barre d'onglets, sans cette marge en plus
   elle recouvre le bas de la page (boutons, dernières lignes d'une liste) */
body.with-nav.has-install-banner .main { padding-bottom: calc(var(--tabbar-h) + 44px + 210px + env(safe-area-inset-bottom)); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.topbar .crest-link { min-width: 0; }
.topbar-title { font-size: 26px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; }
.topbar .avatar { text-decoration: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--club); }

.crest-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.crest {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 40px;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
  background: var(--club); color: var(--club-ink);
  font-size: 14px; line-height: 1; padding-bottom: 8px; text-transform: uppercase;
  font-family: var(--display);
}
.crest-img { flex: none; width: 34px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45)); }

/* barre d'onglets flottante : icône et libellé visible, pour qu'on sache où mène chaque onglet */
.tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom)); width: min(var(--tab-max), calc(100% - 28px));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: var(--tabbar-h); padding: 8px;
  background: rgba(14, 15, 17, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 100%;
  color: var(--ink-3); text-decoration: none; border-radius: 999px; position: relative;
}
.tabbar a:hover { color: var(--ink); }
/* onglet Paperboard du coach : sur tablette seulement (le téléphone le trouve dans Club), la pilule s'élargit d'autant */
:root { --tab-max: 420px; }
.tabbar .tab-paper { display: none; }
@media (min-width: 600px) and (max-width: 1023.98px) {
  :root:has(.tabbar .tab-paper) { --tab-max: 500px; }
  .tabbar:has(.tab-paper) { grid-template-columns: repeat(6, 1fr); }
  .tabbar .tab-paper { display: flex; }
}
.tabbar svg { width: 44px; height: 28px; padding: 3px 11px; border-radius: 999px; flex: none; }
.tabbar a > span:not(.sr-only) { max-width: 100%; font: 600 11px/1.3 var(--font); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.tabbar a[aria-current] { color: var(--ink); }
.tabbar a[aria-current] svg {
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 60%, var(--club-deep));
  color: var(--club-ink); box-shadow: var(--glow);
}
/* pastille des messages non lus : collée au coin de l'icône */
.nav-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--club); color: var(--club-ink); font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums;
}
.tabbar .nav-count {
  position: absolute; top: 3px; left: 50%; margin-left: 8px; min-width: 18px; height: 18px; font-size: 11px;
  box-shadow: 0 0 0 3px #0e0f11; pointer-events: none;
}
.tabbar a[aria-current] .nav-count { background: #fff; color: var(--club-deep); }

.sidebar { display: none; }

@media (min-width: 1024px) {
  body.with-nav { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
  body.with-nav .main { padding: 34px 40px 64px; }
  .topbar, .tabbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 26px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 24px 16px; background: linear-gradient(180deg, #16171a, #131417); border-right: 1px solid var(--line-2);
  }
  .sidebar .crest-link { padding: 4px 8px; gap: 12px; }
  .sidebar .crest { width: 44px; height: 50px; font-size: 16px; }
  .sidebar .crest-img { width: 46px; height: 56px; }
  .crest-name { display: flex; flex-direction: column; font-size: 24px; line-height: .95; text-transform: uppercase; }
  .crest-name small { font: 500 13px/1.6 var(--font); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
  .side-nav { display: flex; flex-direction: column; gap: 4px; }
  .side-nav a, .side-me {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
    color: var(--ink-2); text-decoration: none; font-weight: 500;
  }
  .side-nav svg { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--surface); }
  .side-nav a:hover, .side-me:hover { background: var(--surface); color: var(--ink); }
  .side-nav a[aria-current] { background: var(--surface-2); color: #fff; font-weight: 600; }
  .side-nav a[aria-current] svg { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
  .side-nav .nav-count { margin-left: auto; min-width: 24px; height: 24px; border-radius: 12px; font-size: 13px; box-shadow: var(--glow); }
  .side-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; }
  .side-me { flex: 1; }
  .side-me .avatar { border-radius: 50%; }
  .side-me > span:last-child { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); }
  .side-me small { color: var(--ink-3); font-size: 12px; }
}

.app-version { margin: 36px 0 0; text-align: center; font-size: 11px; line-height: 1; letter-spacing: .08em; color: var(--ink-3); opacity: .6; user-select: none; }
.demo-banner {
  display: flex; width: fit-content; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px;
  background: var(--maybe-bg); color: var(--maybe); font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------------------------ titres */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 22px; }
/* clamp : un titre long en un seul mot (« Entraînement ») ne casse plus au milieu sur téléphone étroit */
.page-head h1 { margin: 0; font-size: clamp(30px, 10vw, 54px); line-height: .88; text-transform: uppercase; overflow-wrap: anywhere; }
.page-head .sub { margin: 8px 0 0; color: var(--ink-3); font-size: 15px; }
@media (min-width: 768px) { .page-head h1 { font-size: 72px; } }

.section { margin: 32px 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 30px; line-height: 1; text-transform: uppercase; padding-top: 3px; }
.section-head a { font-size: 14px; font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.section-head a:hover { color: var(--ink); }
.follow-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.follow-note svg { width: 15px; height: 15px; }
.follow-note a { margin-left: 4px; color: var(--ink-2); font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.back-link svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ surfaces */
.card { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px; box-shadow: var(--card-edge); }
.card + .card { margin-top: 10px; }
.card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.card-link { display: block; color: inherit; text-decoration: none; }
.card-link:hover { background: var(--surface-2); }
.stack > * + * { margin-top: 12px; }

.list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 68px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--card-edge);
}
.list > li > .row { width: 100%; }
a.row { color: inherit; text-decoration: none; }
a.row:hover, summary.row:hover { background: var(--surface-2); }
.row .row { background: transparent; padding: 0; min-height: 0; border: 0; box-shadow: none; }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-weight: 600; overflow-wrap: anywhere; color: var(--ink); text-decoration: none; }
a.row-title:hover { text-decoration: underline; }
.row-sub { display: block; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.row-end { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* options d'un joueur de l'effectif : le panneau s'ouvre vers le haut si app.js (mesure à l'ouverture) détecte
   qu'il n'y a pas la place en dessous, pour ne jamais finir coupé par le bas de l'écran ni caché sous la
   barre d'onglets fixe du téléphone, quelle que soit la position de la ligne dans la liste */
.member-menu { position: relative; }
.member-options { position: absolute; right: 16px; top: calc(100% + 6px); z-index: 5; min-width: 240px; }
.member-menu.opens-up .member-options { top: auto; bottom: calc(100% + 6px); }
.chev { width: 34px !important; height: 34px !important; padding: 9px; border-radius: 11px; background: var(--surface-3); color: var(--ink-2); flex: none; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.avatar {
  display: inline-grid; place-items: center; flex: none; position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a4b53, #2a2b30); color: var(--ink);
  font-size: 18px; line-height: 1; padding-top: 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.avatar svg { width: 20px; height: 20px; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--ink-2); vertical-align: middle; }
.tag-club { background: var(--club-soft); color: #ffb3b8; }
.badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--club); color: var(--club-ink); font-size: 13px; font-weight: 700; box-shadow: var(--glow); }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 3px 22px 0; border-radius: 999px;
  border: 0; background: var(--surface-3); color: var(--ink);
  font-size: 19px; line-height: 1; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn svg { width: 17px; height: 17px; margin-top: -3px; }
.btn:hover { background: #42434b; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--club) 88%, #fff), var(--club) 55%, color-mix(in srgb, var(--club) 85%, #000));
  color: var(--club-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--glow);
}
.btn-primary:hover { background: color-mix(in srgb, var(--club) 90%, #fff); }
.btn-danger { background: transparent; color: var(--no); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--no) 55%, transparent); }
.btn-danger:hover { background: var(--no-bg); }
.btn-ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-light { background: #fff; color: color-mix(in srgb, var(--club) 85%, #000); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.btn-light:hover { background: #f1f1f3; }
.event-hero.is-match .btn.btn-light, .hero-card .btn.btn-light:not(.btn-primary) { background: #fff; color: color-mix(in srgb, var(--club) 85%, #000); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
/* bouton discret : ni tuile ni blanc fixe, juste texte/icône dans la teinte de contraste du club (claire ou foncée selon sa couleur) */
.event-hero.is-match .btn.btn-light[data-share-poster], .hero-card .btn.btn-light[data-share-poster] {
  background: transparent; color: var(--club-ink); box-shadow: none;
}
.hero-share { justify-content: center; margin-top: 12px; }
.share-sheet { width: min(460px, calc(100vw - 24px)); text-align: center; }
.share-sheet img { display: block; width: 100%; max-width: 320px; margin: 14px auto; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.share-sheet .actions { justify-content: center; }
/* 44x44 px minimum (WCAG 2.5.5 / Apple HIG) : cibles tactiles trop petites sur la plupart des pages, y compris
   les réponses Présent / Absent les plus fréquentes (défauts relevés par l'audit : VPC-D05, VM-D10) */
.btn-sm { min-height: 44px; padding: 3px 16px 0; font-size: 17px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--surface-3); border-radius: 12px; cursor: pointer; color: var(--ink-2); text-decoration: none; flex: none; }
.icon-btn:hover { background: #42434b; color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.inline-form { display: inline; margin: 0; }

/* ------------------------------------------------------------------ messages flash */
.flashes { margin: 0 0 14px; }
.flashes.is-floating {
  position: fixed; z-index: 70; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(460px, calc(100% - 24px)); margin: 0; transition: opacity .4s, transform .4s;
}
.flashes.is-floating .flash { background-color: #25262b; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.flashes.is-floating .flash-success { background-image: linear-gradient(var(--yes-bg), var(--yes-bg)); }
.flashes.is-floating .flash-error { background-image: linear-gradient(var(--no-bg), var(--no-bg)); }
.flashes.is-leaving { opacity: 0; transform: translate(-50%, -10px); }
.flash { margin: 0 0 8px; padding: 13px 16px; border-radius: var(--r-sm); font-weight: 500; font-size: 15px; border: 1px solid var(--line-2); }
.flash-success { background: var(--yes-bg); color: #c7dbff; box-shadow: inset 3px 0 0 var(--yes-solid); }
.flash-error { background: var(--no-bg); color: #ffd2ad; box-shadow: inset 3px 0 0 var(--no-solid); }
.flash-info { background: var(--surface); color: var(--ink-2); box-shadow: inset 3px 0 0 var(--ink-3); }

/* Pagination "afficher plus" des listes très longues (VPC-D16) */
.page-more { display: block; margin: 16px auto 6px; }

/* Agenda : deux cartes par ligne sur écran large, une seule colonne étirée sur téléphone (VM-D21).
   auto-fit (pas auto-fill) : une seule carte dans la journée occupe toute la largeur au lieu de laisser
   une deuxième colonne vide à côté d'elle. */
.day-block { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.day-block .day-group { grid-column: 1 / -1; }

/* ------------------------------------------------------------------ événements : cartes façon classement */
.day-group { margin: 28px 0 10px; font-size: 22px; line-height: 1; text-transform: uppercase; color: var(--ink-3); }
.event { background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--card-edge); }
.event-main { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; color: inherit; text-decoration: none; }
.event-main:hover { background: rgba(255, 255, 255, .025); }
.date-block {
  flex: 0 0 60px; height: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 15px; line-height: 1; text-transform: uppercase; position: relative;
  background: radial-gradient(80% 60% at 50% 110%, rgba(0, 0, 0, .35), transparent 70%), var(--inset);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* 9-10 px, pénible sur écran de téléphone (défaut relevé par l'audit : VM-D11) : porté à 11 px */
.d-day { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 1px; font-family: var(--font); }
.d-num { font-size: 34px; margin: 3px 0 0; }
.d-month { font-size: 11px; font-weight: 700; color: var(--ink-2); letter-spacing: 1px; font-family: var(--font); }
.event-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.event-meta { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.event-title { font-size: 24px; line-height: .98; text-transform: uppercase; overflow-wrap: anywhere; padding-top: 2px; }
.event-when { font-size: 14px; color: var(--ink-2); }
.event.is-match { border-color: color-mix(in srgb, var(--club) 55%, transparent); box-shadow: var(--card-edge), 0 0 0 1px color-mix(in srgb, var(--club) 25%, transparent); }
.date-block.is-match {
  background:
    radial-gradient(80% 60% at 50% 110%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--club) 90%, #fff), var(--club) 50%, var(--club-deep));
  color: var(--club-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), var(--glow);
}
.date-block.is-match .d-day, .date-block.is-match .d-month { color: color-mix(in srgb, var(--club-ink) 82%, transparent); }
.date-block.is-training {
  background: radial-gradient(80% 60% at 50% 110%, rgba(0, 0, 0, .18), transparent 70%), #fff;
  color: #14161c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.date-block.is-training .d-day, .date-block.is-training .d-month { color: rgba(20, 22, 28, .6); }
.tournoi-badge {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--card);
}
.tournoi-badge svg { width: 13px; height: 13px; color: #14161c; }
.event.needs-answer { position: relative; padding-left: 8px; }
.event.is-cancelled { opacity: .7; }
.event.is-cancelled .event-title { text-decoration: line-through; color: var(--ink-3); }
.event.is-cancelled .date-block { background: var(--inset); color: var(--ink-3); box-shadow: none; }
.cancel-tag { color: var(--no); }
.score { font-size: 30px; line-height: 1; padding: 8px 12px 5px; background: var(--inset); color: #fff; border-radius: 12px; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.score i { font-style: normal; opacity: .45; margin: 0 4px; }
.event-answers { padding: 2px 12px 12px; display: grid; gap: 10px; }

.counts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px 84px; }
.card .counts, .counts.inline { padding: 0; }
.counts-caption { margin: 0 0 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-3); }
.c { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 64px; padding: 6px 10px 5px; border-radius: 12px; }
.c-top { display: inline-flex; align-items: center; gap: 5px; }
.c b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; padding-top: 2px; }
.c svg { width: 15px; height: 15px; }
.c small { font-size: 11px; font-weight: 600; line-height: 1.1; text-transform: uppercase; letter-spacing: .4px; opacity: .9; white-space: nowrap; }
.c-yes { background: var(--yes-bg); color: var(--yes); }
.c-no { background: var(--no-bg); color: var(--no); }
.c-maybe { background: var(--maybe-bg); color: var(--maybe); }
.c-wait { background: var(--wait-bg); color: var(--wait); }
.hero-counts { margin-top: 14px; text-align: center; }
.hero-counts .counts { padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 420px; margin: 0 auto; }
.hero-counts .c { min-width: 0; align-items: center; text-align: center; padding: 7px 4px 6px; }
.hero-counts .c small { white-space: normal; font-size: 11px; }
.hero-counts .counts-caption { color: rgba(255, 255, 255, .8); }
.hero-counts .c { background: rgba(0, 0, 0, .3); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hero-counts .c-yes svg { color: #9cc2ff; }
.hero-counts .c-no svg { color: #ffc08f; }
.hero-counts .c-maybe svg { color: var(--maybe); }
.hero-counts .c-wait svg { color: #d4d7dd; }

/* boutons de réponse */
.answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px; background: var(--inset); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.card .answer { background: var(--inset); }
/* largeur fixe (au lieu d'un min-width qui suit la longueur du prénom) : les trois boutons Présent / Absent /
   Peut-être gardent la même position et la même largeur d'une ligne à l'autre (défaut relevé par l'audit :
   VPC-D13), un prénom trop long est coupé plutôt que de repousser les boutons */
.answer-who { flex: 0 0 110px; font-size: 22px; line-height: 1; text-transform: uppercase; padding: 3px 4px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.answer-btns { flex: 1 1 250px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.answer-btns form { margin: 0; }
.ans {
  width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 6px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font: 600 14px/1.1 var(--font); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ans svg { width: 17px; height: 17px; }
.ans span { white-space: nowrap; }
.ans:hover { color: var(--ink); background: var(--surface-3); }
/* réponse choisie : couleur pleine, y compris sur l'affiche rouge du prochain match */
.answer .ans.ans-yes[aria-pressed="true"] { background: var(--yes-solid); color: #fff; box-shadow: 0 8px 20px rgba(47, 111, 232, .35); }
.answer .ans.ans-no[aria-pressed="true"] { background: var(--no-solid); color: #1b0d00; box-shadow: 0 8px 20px rgba(240, 122, 31, .3); }
.answer .ans.ans-maybe[aria-pressed="true"] { background: var(--maybe-solid); color: #1f1700; box-shadow: 0 8px 20px rgba(245, 197, 24, .25); }
.ans-change { display: none; }
/* réponse donnée : bandeau compact (prénom, pastille colorée, « Modifier ») qui libère de la place */
.js .answer.is-answered:not(.is-editing) { flex-wrap: nowrap; gap: 10px; padding: 5px 5px 5px 14px; border-radius: 999px; background: none; box-shadow: none; }
.event-main:has(+ .event-answers .answer.is-answered:not(.is-editing)) { padding-bottom: 2px; }
.js .answer.is-answered:not(.is-editing) .answer-who { font-size: 19px; min-width: 0; padding: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js .answer.is-answered:not(.is-editing) .answer-btns { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.js .answer.is-answered:not(.is-editing) .answer-btns form:not(.is-chosen) { display: none; }
.js .answer.is-answered:not(.is-editing) .answer-btns form.is-chosen { flex: 0 1 auto; min-width: 0; }
.js .answer.is-answered:not(.is-editing) .ans[aria-pressed="true"] { width: auto; gap: 8px; min-height: 40px; padding: 0 5px 0 14px; font-size: 14px; background: none; box-shadow: none; color: var(--ink); }
.js .answer.is-answered:not(.is-editing) .ans[aria-pressed="true"] svg { width: 16px; height: 16px; }
.js .answer.is-answered:not(.is-editing) .ans-change {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.js .answer.is-answered:not(.is-editing) .ans-change svg { width: 12px; height: 12px; }
.js .hero-card .answer.is-answered:not(.is-editing) { margin-top: 10px; }
.js .event-answers:has(.answer.is-answered:not(.is-editing)) { padding-top: 0; gap: 6px; }
.answer.is-editing { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ans:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js .answer.is-answered:not(.is-editing) .ans[aria-pressed="true"] { animation: ans-choice .24s cubic-bezier(.2, .8, .3, 1); }
  .answer.is-editing .answer-btns form { animation: ans-options .18s ease-out; }
}
@keyframes ans-choice { from { transform: scale(.94); opacity: .5; } to { transform: none; opacity: 1; } }

/* sujet clos : une tuile à laquelle on a répondu se replie en une ligne, pour que les demandes en attente sautent aux yeux */
.event.is-closed {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 0; border-radius: 18px;
  background: color-mix(in srgb, var(--card) 55%, transparent); border-color: var(--line-2); box-shadow: none;
}
.event.is-closed .event-main { flex: 1 1 auto; min-width: 0; gap: 10px; padding: 0 0 0 6px; }
.event.is-closed .event-main:hover { background: none; }
.event.is-closed .date-block { flex: 0 0 38px; height: 38px; border-radius: 11px; }
.event.is-closed .date-block:not(.is-match) { background: var(--inset); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.event.is-closed .date-block.is-match { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.event.is-closed .d-day, .event.is-closed .d-month, .event.is-closed .event-meta, .event.is-closed .event-when,
.event.is-closed .chev, .event.is-closed .score { display: none; }
.event.is-closed .d-num { font-size: 20px; margin: 3px 0 0; }
.event.is-closed .event-title { font-size: 17px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; }
.event.is-closed .event-answers { flex: 0 0 auto; padding: 0; }
.js .event.is-closed .answer.is-answered { gap: 8px; padding: 0; background: none; box-shadow: none; }
.event.is-closed .answer-who { font-size: 15px; color: var(--ink-3); }
.event.is-closed .ans[aria-pressed="true"] { min-height: 36px; padding: 0 4px 0 12px; font-size: 13px; box-shadow: none; animation: none; }
.event.is-closed .ans-change { padding: 5px 8px; }
@media (max-width: 599px) {
  .event.is-closed .ans-change { font-size: 0; gap: 0; }  /* le crayon suffit sur téléphone */
}
.notif.is-closed { padding: 8px 8px 8px 20px; border-radius: 18px; background: color-mix(in srgb, var(--card) 55%, transparent); box-shadow: none; }
.closed-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.closed-icon { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--fam) 16%, transparent); color: var(--fam); }
.closed-icon svg { width: 16px; height: 16px; }
.closed-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.closed-text strong { font: 400 17px/1.05 var(--display); letter-spacing: .6px; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; text-wrap: balance; overflow-wrap: anywhere; }
.closed-text small { font-size: 13px; line-height: 1.3; color: var(--ink-3); }
/* tuile repliée : seule la ligne de réponse s'affiche ; « Modifier » rouvre le contenu */
[data-collapsible].is-closed [data-when-open] { display: none; }
[data-collapsible]:not(.is-closed) [data-when-closed] { display: none; }

/* la tuile traitée quitte l'accueil en se refermant */
[data-home-tile].is-leaving, .section.is-leaving {
  overflow: hidden; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  border-top-width: 0 !important; border-bottom-width: 0 !important;
  transition: height .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, margin .32s ease, padding .32s ease;
}
@media (prefers-reduced-motion: reduce) { [data-home-tile].is-leaving, .section.is-leaving { transition: none; } }
.row-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--ink-2); }
.row-icon svg { width: 18px; height: 18px; }
.seen-btn {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font: 600 13px/1 var(--font); cursor: pointer;
}
.seen-btn:hover { background: var(--surface-3); color: var(--ink); }
.seen-btn svg { width: 14px; height: 14px; }
.seen-btn:disabled { opacity: .6; cursor: default; }
@keyframes ans-options { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ans[aria-busy="true"] { opacity: .55; }
@media (max-width: 400px) { .ans { gap: 4px; padding: 0 4px; font-size: 13px; } .ans svg { width: 15px; height: 15px; } }
@media (max-width: 340px) { .ans svg { display: none; } }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill svg { width: 14px; height: 14px; }
.st-yes { background: var(--yes-bg); color: var(--yes); }
.st-no { background: var(--no-bg); color: var(--no); }
.st-maybe { background: var(--maybe-bg); color: var(--maybe); }
.st-wait { background: var(--wait-bg); color: var(--wait); }

/* ------------------------------------------------------------------ affiche de match (billet rouge rayé) */
.event-hero, .hero-card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: 20px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge);
}
.event-hero:not(.is-match)::before {
  /* lignes de terrain en filigrane */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background:
    radial-gradient(circle at 100% 50%, transparent 78px, rgba(255, 255, 255, .06) 79px 80px, transparent 81px),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(255, 255, 255, .06) calc(100% - 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 46px, transparent 46px 92px);
}
.event-hero.is-match, .hero-card {
  border: 0; color: var(--club-ink);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .20), transparent 55%),
    radial-gradient(80% 60% at 50% 110%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--club) 92%, #fff) 0%, var(--club) 35%, color-mix(in srgb, var(--club) 80%, #000) 100%);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--club) 28%, transparent), 0 10px 24px rgba(0, 0, 0, .35);
}
.event-hero.is-match::before, .hero-card::before {
  /* bande de rayures verticales au centre, comme un maillot */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 30%; left: 50%; width: 176px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 16px, transparent 16px 32px);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent);
}
.event-hero .event-meta, .hero-card .event-meta { color: inherit; opacity: .85; text-align: center; }
.event-hero:not(.is-match) .event-meta { text-align: left; }
/* clamp : un titre d'un seul mot (« Entraînement ») cassait au milieu sur téléphone étroit, faute de
   taille adaptée à la largeur de l'écran */
.event-hero h1, .hero-card h2 { margin: 6px 0 14px; font-size: clamp(30px, 10vw, 52px); line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.event-hero.is-match .fact svg, .hero-card .fact svg { color: inherit; opacity: .8; }
.event-hero.is-match .btn, .hero-card .btn:not(.btn-primary) { background: rgba(0, 0, 0, .24); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.event-hero.is-match .btn:hover, .hero-card .btn:not(.btn-primary):hover { background: rgba(0, 0, 0, .36); }
.event-hero.is-match a { color: inherit; }
.ticket-split { position: relative; margin: 16px -20px 0; padding: 16px 20px 0; border-top: 2px dashed rgba(255, 255, 255, .22); }
.ticket-split::before, .ticket-split::after {
  content: ""; position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg);
}
.ticket-split::before { left: -15px; }
.ticket-split::after { right: -15px; }
.facts { display: grid; gap: 8px; margin: 0; }
.fact { display: flex; gap: 10px; align-items: flex-start; }
.fact svg { width: 20px; height: 20px; color: var(--ink-3); margin-top: 2px; }
.fact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fact dd { margin: 0; }
.fact.is-void dd, .fact.is-void dd strong { text-decoration: line-through; opacity: .65; }
.cancel-banner { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); color: #ffc79c; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.hero-card .answer { margin-top: 12px; background: none; box-shadow: none; }
.hero-card .answer-who { color: #fff; }
.hero-card .ans { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-card .ans:hover { background: rgba(255, 255, 255, .2); }
/* réponse déjà donnée sur l'affiche : reste discrète, sans tuile colorée, pour ne pas attirer l'œil */
.hero-card .ans.ans-yes[aria-pressed="true"], .hero-card .ans.ans-no[aria-pressed="true"], .hero-card .ans.ans-maybe[aria-pressed="true"] {
  background: transparent; box-shadow: none; color: #fff;
}
.hero-card-link { position: absolute; inset: 0; z-index: 1; }
.hero-card .answer, .hero-card .actions { position: relative; z-index: 2; }

.poster-link { display: block; color: inherit; text-decoration: none; }
/* Noms d'équipe (règle commune) : dans un face-à-face, le nom court sur 2 lignes au plus et les deux camps sur les mêmes
   lignes de grille (logo, nom, détail), pour qu'un nom long ne décale jamais le camp d'en face ; dans une liste, une ligne. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nom-eq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; text-wrap: balance; padding-top: .12em; margin-top: -.12em; }
.poster { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 8px; row-gap: 10px; margin: 14px 0 6px; }
.poster-side { display: contents; }
.poster-side > * { justify-self: center; min-width: 0; max-width: 100%; text-align: center; }
.poster-side:first-child > * { grid-column: 1; }
.poster-side:last-child > * { grid-column: 3; }
.poster-side > .poster-logo { grid-row: 1; align-self: center; }
.poster-side > strong { grid-row: 2; }
.poster-side > small { grid-row: 3; margin-top: -6px; }
.poster-mid { grid-column: 2; grid-row: 1; align-self: center; }
.poster-side strong { font-size: 24px; line-height: .95; text-transform: uppercase; }
.poster-side small { font-size: 11px; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .8px; }
.poster-logo {
  width: 86px; height: 86px; border-radius: 50%; object-fit: contain; background: #fff; padding: 10px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, .22), 0 0 0 10px rgba(255, 255, 255, .10), 0 14px 30px rgba(0, 0, 0, .35);
}
.poster-initials { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2c2d33, #111216); color: #fff; font-family: var(--display); font-size: 30px; padding: 4px 0 0; }
.poster-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.poster-vs { font-size: 62px; line-height: .85; text-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.poster-score { font-size: 64px; line-height: .85; white-space: nowrap; text-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.poster-score i { font-style: normal; opacity: .55; margin: 0 5px; }
.poster-time { font-size: 20px; line-height: 1; padding: 7px 12px 4px; border-radius: 999px; background: rgba(0, 0, 0, .28); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.poster-time.is-tbd { max-width: 6.5em; white-space: normal; text-align: center; text-wrap: balance; border-radius: 16px; }
.event-hero:not(.is-match) .poster-time { background: var(--surface-2); }
@media (min-width: 640px) { .poster-logo { width: 110px; height: 110px; } .poster-side strong { font-size: 30px; } .poster-vs, .poster-score { font-size: 84px; } }
.facts-center { justify-items: center; text-align: center; }
.facts-center .fact { justify-content: center; }
.facts-center .fact svg { display: none; }
.hero-badge { margin: 0 0 10px; text-align: center; }
.hero-card .pill { background: rgba(0, 0, 0, .3); color: #fff; }
.notif-line { margin: 8px 0 -2px; font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------------ accueil : l'événement de la semaine en premier */
/* sur téléphone et tablette, « Bonjour » passe dans la barre du haut pour laisser l'affiche en tête d'écran */
@media (max-width: 1023px) { .home-head { display: none; } }
.semaine { display: grid; gap: 10px; }
.semaine-alerte {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--no-bg); color: var(--ink); font-size: 14px; box-shadow: inset 3px 0 0 var(--no);
}
.semaine-alerte svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--no); }
.semaine-alerte strong { color: var(--no); }
.semaine-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.semaine-tabs::-webkit-scrollbar { display: none; }
.semaine-tab {
  flex: 1 0 0; min-width: 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 14px 8px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2);
}
.semaine-tab strong { font: 400 20px/1 var(--display); letter-spacing: .4px; text-transform: uppercase; padding-top: 2px; }
.semaine-tab small { font-size: 12px; line-height: 1.25; color: var(--ink-3); }
.semaine-tab:hover { background: var(--surface-2); color: var(--ink); }
.semaine-tab[aria-selected="true"] { background: var(--ink); color: #15161a; box-shadow: none; }
.semaine-tab[aria-selected="true"] small { color: #4a4d55; }
.semaine-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* un onglet qui attend une réponse le dit en toutes lettres, pas seulement par une couleur */
.semaine-tab.is-todo small::before { content: "●" / ""; margin-right: 5px; color: var(--club); }
.semaine-panel > .hero-card, .semaine-panel > .notif { margin: 0; }
.semaine-affiche .event-meta b { font-weight: 700; }
.semaine-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 1px; border-radius: 999px; background: rgba(0, 0, 0, .3); }
.semaine-live svg { width: 12px; height: 12px; }
.semaine-ligne, .semaine-ensuite {
  display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin: 10px 0 0; font-size: 14px; line-height: 1.35; text-align: center;
}
.semaine-ligne svg, .semaine-ensuite svg { flex: none; width: 16px; height: 16px; margin-top: 2px; opacity: .85; }
.semaine-ligne.is-left { justify-content: flex-start; text-align: left; }
.notif .semaine-ligne { color: var(--ink-2); }
.semaine-ensuite { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); opacity: .92; }
.semaine-note { margin: 8px 0 0; text-align: center; font-size: 13px; opacity: .85; }
.semaine-reponses { margin-top: 4px; }
.semaine-reponses .notif-line { text-align: center; margin-top: 12px; }
a.semaine-counts { display: block; color: inherit; text-decoration: none; border-radius: 16px; }
a.semaine-counts:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* score et avis gardent leur fond sombre, posés sur l'affiche */
.semaine-score, .semaine-avis {
  position: relative; z-index: 2; margin-top: 14px; padding: 14px; border-radius: 20px; text-align: left;
  background: var(--bg-2); color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.semaine-score .score-box { margin: 0; border: 0; box-shadow: none; }
.semaine-avis.is-closed { padding: 8px 8px 8px 16px; }
.semaine-avis .notif-title { --fam: color-mix(in srgb, var(--club) 78%, #fff); font-size: 22px; }
.semaine-score .btn:not(.btn-primary), .semaine-avis .btn:not(.btn-primary) { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.semaine-autres { margin: 0; text-align: center; }
/* tournoi : le ballon remplace le logo adverse et le mot « Tournoi » remplace le « VS » */
.poster-tournoi .poster-vs { font-size: 38px; }
.poster-trophy svg { width: 44px; height: 44px; color: #fff; }
@media (min-width: 640px) { .poster-tournoi .poster-vs { font-size: 52px; } .poster-trophy svg { width: 54px; height: 54px; } }
/* affiche plus compacte sur téléphone, pour voir les boutons de réponse sans défiler */
@media (max-width: 599px) {
  .semaine-affiche { padding: 16px 16px 18px; }
  .semaine-affiche .poster { margin-top: 10px; }
  .semaine-affiche .poster-logo { width: 72px; height: 72px; padding: 8px; }
  .semaine-affiche .poster-side strong { font-size: 21px; }
  .semaine-affiche .poster-vs { font-size: 52px; }
  .semaine-affiche.poster-tournoi .poster-vs, .semaine-affiche .poster-tournoi .poster-vs { font-size: 34px; }
  .semaine-affiche .ticket-split { margin: 12px -16px 0; padding: 12px 16px 0; }
}
/* « À faire » : une seule section, un espace régulier entre les tuiles */
.todo-home > .todo-group, .todo-home > .todo-item { margin-top: 10px; }
.todo-home > .section-head + .todo-group, .todo-home > .section-head + .all-done + .todo-group,
.todo-home > .section-head + .all-done + .todo-item { margin-top: 0; }
.todo-group { display: grid; gap: 10px; }
.todo-sub { margin: 4px 0 6px; font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .4px; }
.all-done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--yes-bg); color: var(--yes); font-weight: 600; }
.all-done svg { width: 17px; height: 17px; }

/* joueurs présents sur un terrain */
.pitch {
  position: relative; padding: 18px 12px; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 52px, rgba(255, 255, 255, .08) 53px 54px, transparent 55px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, .08) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 44px, transparent 44px 88px),
    linear-gradient(180deg, #2a2c31, #1c1d21);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.pitch-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 14px 6px; position: relative; }
.jersey { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.jersey-shirt { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #151619; box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.jersey-shirt svg { width: 26px; height: 26px; color: var(--club); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--club) 45%, transparent)); }
.jersey span { font-size: 12px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.jersey small { font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }

.board-group { margin-top: 18px; }
.board-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 20px; line-height: 1; text-transform: uppercase; }
.board-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* un commentaire sans espace (lien collé...) élargissait la pastille et la page entière (défaut relevé par
   l'audit : VM-D05) : max-width borne la pastille, overflow-wrap force la coupure du mot trop long */
.board-list li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface-2); border-radius: 999px; font-size: 14px; font-weight: 500; max-width: 100%; overflow-wrap: anywhere; }
.board-list li small { color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.comment { padding: 12px 0; border-top: 1px solid var(--line-2); }
.comment:first-child { border-top: 0; padding-top: 0; }
.comment-meta { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.comment-meta strong { color: var(--ink); font-weight: 600; }
.comment-text { margin: 4px 0 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ brassard : la bande de côté dit le type d'info
   Le même code pour tous les comptes : match (couleur du club), trajet, buvette, équipe, club (infos).
   Bande unie avec trois rayures en haut qui s'estompent ; en retard, rayée sur toute la hauteur et qui défile ;
   réglé, grise. L'urgence s'écrit dans un badge, jamais par une couleur. */
.notif, .task, .callout, .event.needs-answer { --fam: #9a9ea8; }
.fam-match, .event.needs-answer { --fam: color-mix(in srgb, var(--club) 78%, #fff); }
.fam-trajet { --fam: #4fd6cf; }
.fam-buvette { --fam: #f5c518; }
.fam-equipe { --fam: #f07a1f; }
.fam-club { --fam: #9a9ea8; }
.fam-fait, .notif.is-closed { --fam: #5c5f68; }
.notif::before, .task::before, .callout::before, .event.needs-answer::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  clip-path: inset(0 calc(100% - 8px) 0 0);  /* la bande épouse l'arrondi de la tuile sans la rogner */
  background-color: var(--fam);
  background-image:
    linear-gradient(180deg, transparent 18px, var(--fam) 42px),
    linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--fam) 45%, #0d0e10) 4px 7px, transparent 7px 11px, color-mix(in srgb, var(--fam) 45%, #0d0e10) 11px 14px);
  background-size: 100% 100%, 9.9px 9.9px;
  background-repeat: no-repeat, repeat;
}
.task-retard::before { background-image: none, linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--fam) 45%, #0d0e10) 4px 7px, transparent 7px 11px, color-mix(in srgb, var(--fam) 45%, #0d0e10) 11px 14px); animation: brassard-defile 1.1s linear infinite; }
@keyframes brassard-defile { to { background-position: 0 0, 0 9.9px; } }
@media (prefers-reduced-motion: reduce) { .task-retard::before { animation: none; } }

/* ------------------------------------------------------------------ tuiles de notification */
.notif { position: relative; background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; padding: 18px 18px 18px 26px; box-shadow: var(--card-edge); }
.notif-title { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 25px; line-height: 1; text-transform: uppercase; }
.notif-title svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--fam) 16%, transparent); color: var(--fam); margin-top: -3px; }
.notif .score-box { margin: 12px 0 8px; background: var(--inset); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); border: 0; }
.notif .buvette { margin-top: 12px; }
.event-extra { padding: 0 12px 12px 84px; }

/* covoiturage */
.carpool-complet { background: var(--yes-bg); color: var(--yes); }
.carpool-manque { background: var(--no-bg); color: var(--no); }
[data-carpool-badge] { max-width: 100%; white-space: normal; }
.carpool-attente { background: var(--wait-bg); color: var(--wait); }
.carpool-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .carpool-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carpool-stats > div { background: var(--inset); border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.carpool-stats b { display: block; font-size: 42px; line-height: .95; }
.carpool-stats span { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.carpool-stats .is-missing b { color: var(--no); }
.carpool-stats .is-ok b { color: var(--yes); }
dialog.sheet {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain;
  margin: auto; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #212227; color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.sheet h2 { margin: 0; font-size: 38px; line-height: .95; text-transform: uppercase; }
dialog.sheet p { margin: 0; color: var(--ink-2); }
.confirm-sheet { width: min(420px, calc(100vw - 32px)); text-align: center; padding: 26px 22px 22px; }
.confirm-icon { display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 55%, var(--club-deep));
  color: var(--club-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--club) 18%, transparent), var(--glow); }
.confirm-icon svg { width: 26px; height: 26px; }
.confirm-sheet h2 { font-size: 34px; }
.confirm-sheet p { margin-top: 8px !important; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.confirm-actions .btn { width: 100%; padding-left: 10px; padding-right: 10px; }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; max-width: 240px; }
.stepper input { text-align: center; font-size: 28px; }
.stepper .btn { font-size: 26px; padding: 0; }

/* buvette */
.buvette-slots { display: grid; gap: 8px; }
@media (min-width: 640px) { .buvette-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--inset); }
.slot > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.slot small { color: var(--ink-3); font-size: 12px; }
.slot.is-free { background: transparent; border: 1.5px dashed var(--line); }
.slot.is-free .avatar { background: transparent; border: 1.5px dashed var(--line); color: var(--ink-3); box-shadow: none; }
/* inscriptions pas encore ouvertes : ni le mot ni l'icône ne doivent laisser croire qu'on peut s'inscrire */
.slot.is-free.is-locked { opacity: .65; }
.slot.is-free.is-locked strong { color: var(--ink-3); font-weight: 600; }

/* note de match du coach (couleurs demandées : vert, bleu, rouge) */
:root { --note-fort: #1f9d55; --note-travailler: #2f6fe8; --note-faible: #e03131; }  /* vert, bleu, rouge : choix explicite du club ; le mot et le repère ▲ ● ▼ sont toujours écrits */
.coach-note-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.coach-note-label { margin: 0; font-size: 28px; line-height: 1; text-transform: uppercase; }
.coach-note-edit summary { display: inline-flex; cursor: pointer; }
.grade-chip { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font-size: 26px; line-height: 1; padding-top: 3px; color: #fff; background: var(--surface-3); flex: none; }
.grade-chip.is-big { width: 66px; height: 66px; border-radius: 18px; font-size: 48px; }
.grade-A, .grade-bg-A { background: #1f9d55; }
/* blanc sur vert lime ne fait que 2,4 : 1 (défaut relevé par l'audit : VPC-D07) : texte sombre, comme C */
.grade-B, .grade-bg-B { background: #74b816; color: #1f1700; }
.grade-C, .grade-bg-C { background: #f5c518; color: #1f1700; }
.grade-D, .grade-bg-D { background: #f07a1f; }
.grade-E, .grade-bg-E { background: #e03131; }
.kpi .grade-chip { width: 48px; height: 48px; font-size: 34px; }
.note-grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.grade { position: relative; cursor: pointer; }
.grade input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.grade span { display: grid; place-items: center; height: 62px; border-radius: 16px; background: var(--inset); color: var(--ink-2); font-size: 38px; padding-top: 4px; border: 2px solid transparent; }
label.grade { background: none; }
.grade:has(input:checked) span { color: #fff; border-color: rgba(255, 255, 255, .6); }
.grade-A:has(input:checked) span { background: #1f9d55; }
.grade-B:has(input:checked) span { background: #74b816; color: #1f1700; }
.grade-C:has(input:checked) span { background: #f5c518; color: #1f1700; }
.grade-D:has(input:checked) span { background: #f07a1f; }
.grade-E:has(input:checked) span { background: #e03131; }
.grade:has(input:focus-visible) span { outline: 2px solid var(--club); outline-offset: 2px; }
.note-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.note-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.note-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font: 500 14px/1 var(--font); cursor: pointer; user-select: none; }
.note-pill svg { width: 15px; height: 15px; }
.note-pill.is-legend { min-height: 30px; padding: 0 10px; font-size: 12px; cursor: default; }
.note-pill[data-state="fort"] { background: var(--note-fort); color: #fff; }
.note-pill[data-state="travailler"] { background: var(--note-travailler); color: #fff; }
/* le repère se lit aussi sans la couleur : ▲ point fort, ● à travailler, ▼ point faible */
.note-pill[data-state="fort"]::before { content: "▲"; font-size: 11px; }
.note-pill[data-state="travailler"]::before { content: "●"; font-size: 11px; }
.note-pill[data-state="faible"]::before { content: "▼"; font-size: 11px; }
.note-pill[data-state="faible"] { background: var(--note-faible); color: #fff; }
.note-row .note-pills { margin-top: 8px; }
.note-row .note-pill { min-height: 26px; padding: 0 9px; font-size: 12px; cursor: inherit; }
.note-chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 10px 2px 0; overflow-x: auto;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 38px); }
.note-bar { flex: 1 0 30px; max-width: 48px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.note-bar i { display: block; width: 12px; border-radius: 6px 6px 2px 2px; min-height: 8px; box-shadow: 0 0 16px rgba(255, 255, 255, .08); }
.note-bar b { font-size: 20px; line-height: 1; }
.note-bar small { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.note-highlights { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 700px) { .note-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.note-highlights .card { margin: 0; }
.note-highlights p { margin: 8px 0 0; }
.trend { font-size: 32px !important; line-height: 1.05; text-transform: uppercase; }
.trend-hausse { color: #3ecf73; }
.trend-baisse { color: #ff6b6b; }
.word-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.word-stats li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.word-name { font-weight: 600; font-size: 14px; }
.word-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--inset); }
.word-bar i { display: block; height: 100%; }
.seg-fort { background: var(--note-fort); }
.seg-travailler { background: var(--note-travailler); }
.seg-faible { background: var(--note-faible); }
.word-counts { grid-column: 2; font-size: 12px; color: var(--ink-3); }

/* avis des parents */
.avis-choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .avis-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avis-choice { position: relative; display: block; cursor: pointer; }
.avis-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.avis-choice span { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; border-radius: 18px; background: var(--inset); border: 1.5px solid transparent; }
.card .avis-choice span { background: var(--inset); }
.avis-choice strong { font-size: 24px; line-height: 1; text-transform: uppercase; padding-top: 2px; }
.avis-choice small { color: var(--ink-3); font-size: 13px; }
.avis-choice:has(input:checked) span { background: linear-gradient(180deg, var(--club), var(--club-deep)); border-color: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.avis-choice:has(input:checked) small { color: color-mix(in srgb, var(--club-ink) 85%, transparent); }
.avis-choice:has(input:focus-visible) span { outline: 2px solid var(--club); outline-offset: 2px; }
.avis-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avis-dist li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 14px; }
.avis-dist-bar { height: 10px; border-radius: 5px; background: var(--inset); overflow: hidden; }
.avis-dist-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--club-deep), var(--club)); border-radius: 5px; }
.avis-dist-count { font-size: 20px; line-height: 1; text-align: right; }
@media (max-width: 420px) { .avis-dist li { grid-template-columns: 1fr 28px; } .avis-dist-bar { grid-column: 1 / -1; grid-row: 2; } }

/* score et fil du match */
.score-box { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px; box-shadow: var(--card-edge); }
.score-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 10px 0 4px; font-size: 26px; line-height: 1; text-transform: uppercase; text-align: center; }
.scoreline.muted { display: block; }
.scoreline > span { min-width: 0; }
@media (max-width: 480px) { .scoreline { gap: 8px; font-size: 20px; } }
.scoreline b { font-weight: 400; font-size: 64px; min-width: 44px; }
.scoreline i { font-style: normal; opacity: .45; }
.score-box .actions { margin-top: 12px; justify-content: center; }
.score-edit { width: 100%; text-align: center; }
.score-edit summary { display: inline-flex; cursor: pointer; }
.score-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 12px; }
.score-form label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); max-width: 120px; text-align: center; }
.score-fields { align-items: flex-end; }
.score-fields .field label.nom-eq { display: -webkit-box; }
.score-form input { width: 90px; text-align: center; font-size: 38px; }
.score-sep { font-size: 38px; line-height: 52px; color: var(--ink-3); }
.feed { margin-top: 8px; }
.feed-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.feed-dot { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.feed-dot svg { width: 17px; height: 17px; }
.feed-score .feed-dot { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.feed-score .comment-text { font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.feed-confirmation .feed-dot { background: var(--yes-bg); color: var(--yes); }
.feed-body { flex: 1; min-width: 0; }
.feed-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.feed-photos a:only-child { grid-column: 1 / -1; }
.feed-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; background: var(--surface-2); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ------------------------------------------------------------------ formulaires */
.form { display: grid; gap: 14px; }
.form-section { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px; display: grid; gap: 14px; box-shadow: var(--card-edge); }
.form-section > h2 { margin: 0; font-size: 26px; line-height: 1; text-transform: uppercase; }
.field { min-width: 0; }
.field label:not(.check), .label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
/* var(--club), une couleur de thème choisie par le club, n'offre aucune garantie de contraste (3,7 : 1 avec
   le rouge par défaut) : couleur fixe déjà utilisée ailleurs pour attirer l'attention (défaut VPC-D07) */
.req { color: var(--no); }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="url"], input[type="search"], input[type="file"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  /* un contour à .06 (6 % de blanc) était quasi invisible sur la carte des scores (contraste 1,16 : 1) :
     porté à .22 pour délimiter clairement le champ de sa carte (défaut relevé par l'audit : VM-D08) */
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: var(--inset); color: var(--ink);
  font-size: 16px; line-height: 1.3; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}
input::placeholder, textarea::placeholder { color: #6d717b; }
input[type="color"] { width: 64px; height: 50px; padding: 4px; border: 0; border-radius: 14px; background: var(--inset); cursor: pointer; }
input[type="file"] { padding: 11px; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--club); outline: none; box-shadow: 0 0 0 4px var(--club-soft), inset 0 2px 6px rgba(0, 0, 0, .25); }
input:disabled { opacity: .45; }
input[readonly] { color: var(--ink-2); }
.grid-2, .grid-3 { display: grid; gap: 14px; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid-4 { display: grid; gap: 10px 14px; }
@media (min-width: 700px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-4 + .grid-4 { padding-top: 12px; border-top: 1px solid var(--line-2); }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--club); flex: none; }
.check small { display: block; color: var(--ink-3); font-size: 13px; font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .choices.cols-2 { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1.5px solid transparent; border-radius: 16px; background: var(--inset); cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--club); flex: none; }
.choice strong { display: block; font-weight: 600; }
.choice small { color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--club); background: color-mix(in srgb, var(--club) 12%, var(--inset)); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 16px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.chip:hover { color: var(--ink); background: var(--surface); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip[aria-current], .chip:has(input:checked) { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.chip:has(input:focus-visible) { outline: 2px solid var(--club); outline-offset: 2px; }
.form-section .chip { background: var(--inset); box-shadow: none; }
.form-section .chip[aria-current], .form-section .chip:has(input:checked) { background: var(--club); box-shadow: var(--glow); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-actions .btn-primary { min-width: 170px; }

.copy-box { display: grid; gap: 8px; }
.copy-box .copy-source { font-size: 14px; }

/* ------------------------------------------------------------------ tableaux */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--card-edge); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table th { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; }
.table a { font-weight: 600; text-decoration: none; }
.table input[type="text"], .table select, .table input[type="number"] { min-height: 42px; padding: 7px 9px; }
.table input.mini { width: 70px; text-align: center; }
@media (max-width: 700px) {
  .table.stack-mobile thead { display: none; }
  .table.stack-mobile, .table.stack-mobile tbody, .table.stack-mobile tr, .table.stack-mobile td { display: block; width: 100%; }
  .table.stack-mobile tr { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
  .table.stack-mobile tr:last-child { border-bottom: 0; }
  .table.stack-mobile td { border: 0; padding: 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; }
  .table.stack-mobile td::before { content: attr(data-label); color: var(--ink-3); font-size: 13px; text-align: left; }
  .table.stack-mobile td.cell-title { font-size: 22px; line-height: 1.05; text-transform: uppercase; text-align: left; }
  .table.stack-mobile td.cell-title::before { content: none; }
  .table.stack-mobile td .bar { width: 80px; }
}

/* ------------------------------------------------------------------ chiffres */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--card-edge); }
.kpi b { display: block; font-size: 52px; line-height: .9; white-space: nowrap; padding-top: 4px; }
.kpi > span { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.kpi b span { font-size: inherit; text-transform: none; letter-spacing: 0; }
.kpi-link { color: inherit; text-decoration: none; }
.kpi-link:hover { background: var(--surface-2); }
.kpi.is-todo { border-color: color-mix(in srgb, var(--maybe) 40%, transparent); }
.kpi.is-todo b { color: var(--maybe); }
.bar { height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; min-width: 60px; margin-top: 4px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yes-solid), var(--yes)); border-radius: 3px; }
.gauge { --value: 0; position: relative; display: grid; place-items: center; width: 150px; aspect-ratio: 1; margin: 4px auto 0; border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--club) calc(var(--value) * 1%), rgba(255, 255, 255, .07) 0);
  box-shadow: 0 0 40px color-mix(in srgb, var(--club) 20%, transparent); }
.gauge b { font-size: 50px; line-height: 1; padding-top: 6px; }
.gauge small { position: absolute; bottom: 40px; font-size: 10px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .8px; }
.stat-hero { display: grid; gap: 14px; align-items: center; }
@media (min-width: 640px) { .stat-hero { grid-template-columns: 190px minmax(0, 1fr); } }

/* ------------------------------------------------------------------ divers */
.empty { text-align: center; padding: 34px 18px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink-3); box-shadow: var(--card-edge); }
.empty-title { margin: 0 0 6px; font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.empty p { margin: 0 0 14px; }
.callout { position: relative; padding: 18px 18px 18px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
.callout h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.callout p { margin: 0 0 10px; }
.callout + .callout { margin-top: 10px; }

/* tuiles façon vitrine de trophées : pastille rouge ronde */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px;
  padding: 18px 12px 16px; min-height: 150px; background: var(--card); border: 1px solid var(--line-2); border-radius: 22px;
  color: var(--ink); text-decoration: none; font-size: 22px; line-height: 1; text-transform: uppercase; box-shadow: var(--card-edge);
}
.menu-tile:hover { background: var(--surface-2); }
.menu-tile svg {
  width: 58px; height: 58px; padding: 16px; border-radius: 50%; margin-bottom: 10px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 55%, var(--club-deep));
  color: var(--club-ink);
  box-shadow: 0 0 0 4px #1a1b1f, 0 0 0 6px color-mix(in srgb, var(--club) 45%, transparent), 0 10px 24px color-mix(in srgb, var(--club) 30%, transparent);
}
.menu-tile small { font: 400 12px/1.3 var(--font); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.message { background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; padding: 14px 16px; margin-bottom: 8px; box-shadow: var(--card-edge); }
.message.is-pinned { border-color: color-mix(in srgb, var(--club) 45%, transparent); }
.message-head { display: flex; align-items: center; gap: 10px; }
.message-author { font-weight: 600; }
.message-date { font-size: 13px; color: var(--ink-3); }
.message-text { margin: 8px 0 0; overflow-wrap: anywhere; }
.message-tools { margin-left: auto; display: flex; gap: 4px; }
.message-tools form { margin: 0; }
.message-tools .icon-btn { width: 38px; height: 38px; }

/* pages sans navigation (connexion, invitation) */
.auth { max-width: 460px; margin: 3vh auto 40px; }
.auth-brand {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 28px 20px 24px; border-radius: var(--r-lg); text-align: center; color: #fff;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .22), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--club) 92%, #fff) 0%, var(--club) 40%, color-mix(in srgb, var(--club) 72%, #000) 100%);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--club) 25%, transparent);
}
.auth-brand::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 176px; transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 16px, transparent 16px 32px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 90%); mask-image: linear-gradient(180deg, #000 30%, transparent 90%);
}
.auth-brand .crest { width: 64px; height: 72px; font-size: 22px; padding-bottom: 14px; background: #151619; }
.auth-brand .crest-img { width: 112px; height: 112px; padding: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(0, 0, 0, .22), 0 0 0 12px rgba(255, 255, 255, .1), 0 16px 34px rgba(0, 0, 0, .35); filter: none; }
.auth-brand strong { font-size: 40px; line-height: .9; text-transform: uppercase; text-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.auth .card { padding: 22px; border-radius: var(--r-lg); }
.auth h1 { margin: 0 0 8px; font-size: 48px; line-height: .9; text-transform: uppercase; }
.demo-accounts { margin-top: 14px; }
.demo-accounts .row { background: var(--inset); box-shadow: none; }
.demo-account { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.demo-account:hover { background: var(--surface-2); }
.demo-account[aria-busy="true"] { opacity: .6; }

/* ------------------------------------------------------------------ gestion */
.subnav {
  display: flex; gap: 6px; overflow-x: auto; margin: -8px 0 18px; padding: 2px 2px 6px; scrollbar-width: none;
  /* un bord qui s'estompe des deux côtés : signale qu'il y a d'autres onglets à faire défiler */
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.subnav a svg { width: 17px; height: 17px; }
.subnav a:hover { background: var(--surface); color: var(--ink); }
.subnav a[aria-current] { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }

/* ------------------------------------------------------------------ agenda : vue calendrier */
.round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.round:hover { background: var(--surface-2); }
.round svg { width: 17px; height: 17px; }
.cal { margin-top: 10px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--card-edge); padding: 16px 12px 18px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.cal-month { font-family: var(--display); font-size: 20px; letter-spacing: .6px; text-transform: uppercase; }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.days-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.day { position: relative; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 4px; border: 0; background: none; font: inherit; color: inherit; }
button.day { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.day.out { opacity: .35; }
.day .n { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 16px; padding-top: 2px; color: var(--ink-2); }
.day.today .n::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 12px; height: 3px; border-radius: 3px; background: var(--club); transform: translateX(-50%); box-shadow: 0 0 6px var(--club); }
.day .n.ma { color: var(--club-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--club) 90%, #fff), var(--club) 50%, var(--club-deep)); box-shadow: var(--glow); }
.day .n.to { color: #14161c; background: linear-gradient(180deg, color-mix(in srgb, var(--maybe) 90%, #fff), var(--maybe) 50%, var(--maybe-solid)); box-shadow: 0 10px 28px color-mix(in srgb, var(--maybe) 38%, transparent); }
.day .n.tr { color: #14161c; background: #fff; }
.day .n.ot { color: var(--ink-2); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.day .n .tb { position: absolute; top: -5px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.day .n .tb svg { width: 9px; height: 9px; color: #14161c; }
.day .more { display: flex; gap: 3px; height: 6px; }
.day .more i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.day .more i.ma { background: var(--club); }
.day .more i.to { background: var(--maybe); }
.day .more i.tr { background: #fff; }
.day .more i.ot { background: var(--ink-3); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.cal-legend .lg { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.cal-legend .lg.ma { background: var(--club); }
.cal-legend .lg.to { background: var(--maybe); }
.cal-legend .lg.tr { background: #fff; }
.cal-legend .lg.ot { background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.cal-legend .lg-today { width: 12px; height: 3px; border-radius: 3px; display: inline-block; flex: none; background: var(--club); box-shadow: 0 0 6px var(--club); }
.cal-legend .lg-multi { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink-3); }

/* ------------------------------------------------------------------ page équipe : en-tête, bilan, chronologie, composition */
/* bleu/orange (comme --yes/--no) plutôt que vert/rouge, illisibles pour un daltonisme rouge-vert
   (défauts relevés par l'audit : VM-D07, VPC-D18) */
:root { --win: var(--yes-solid); --loss: var(--no-solid); --draw: #8b8e97; }
/* le blason en filigrane (.eq-wm) déborde à droite de son conteneur : sans découpe, il élargit toute la page
   sur téléphone et décale la barre d'onglets fixe (défaut relevé par l'audit : VM-D02) */
.eq-head { position: relative; padding: 4px 0 6px; margin-bottom: 4px; isolation: isolate; overflow: hidden; }
.eq-stripes { position: absolute; z-index: -1; left: -16px; right: -16px; top: -90px; height: 320px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 22px, transparent 22px 44px);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 85%); mask-image: linear-gradient(180deg, #000 10%, transparent 85%); }
.eq-wm { position: absolute; z-index: -1; right: -60px; top: -18px; width: 240px; opacity: .1; filter: grayscale(1) brightness(1.6); pointer-events: none; }
.eq-eyebrow { margin: 0; font-family: var(--display); font-size: 15px; letter-spacing: 2px; color: var(--club-text); text-transform: uppercase; }
.eq-title { margin: 8px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(76px, 22vw, 112px); line-height: .8; letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; }
.eq-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.eq-sub span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); margin: 0 10px 2px 0; vertical-align: middle; }
.eq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.eq-dial { position: relative; overflow: hidden; margin-top: 18px; border-radius: 30px; background: var(--card); box-shadow: var(--card-edge); padding: 18px 14px 20px; }
.eq-dial::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px 200px at 50% 55%, color-mix(in srgb, var(--club) 22%, transparent), transparent 70%); }
.eq-dial-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.eq-dial-top h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .6px; text-transform: uppercase; }
.eq-dial-top span { font-size: 12px; color: var(--ink-3); }
.eq-dial-wrap { position: relative; width: 300px; max-width: 100%; height: 262px; margin: 4px auto 0; }
.eq-ring { position: absolute; left: 50%; top: 6px; width: 250px; height: 250px; transform: translateX(-50%); overflow: visible; }
.eq-ring-out { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.eq-ring-ticks { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 6; stroke-dasharray: 1 6.7; }
.eq-ring-core { stroke: rgba(255, 255, 255, .1); stroke-width: 1.5; }
.eq-seg { fill: none; stroke-width: 11; stroke-linecap: round; }
.eq-seg-w { stroke: var(--win); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--win) 70%, transparent)); }
.eq-seg-l { stroke: var(--loss); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--loss) 70%, transparent)); }
.eq-seg-n { stroke: var(--draw); }
.eq-seg-f { stroke: rgba(255, 255, 255, .1); }
.eq-seg-next { fill: var(--bg); stroke: var(--club); stroke-width: 3; }
.eq-dial-center { position: absolute; left: 0; right: 0; top: 92px; text-align: center; line-height: 1; }
.eq-dial-center b { display: block; font-family: var(--display); font-weight: 400; font-size: 76px; line-height: .8; }
.eq-dial-center span { display: block; margin-top: 6px; font-family: var(--display); font-size: 14px; letter-spacing: 2px; color: var(--ink-2); text-transform: uppercase; }
.eq-dial-num { position: absolute; text-align: center; line-height: 1; }
.eq-dial-num.tl { left: 0; top: 18px; } .eq-dial-num.tr { right: 0; top: 18px; }
.eq-dial-num.bl { left: 0; bottom: 6px; } .eq-dial-num.br { right: 0; bottom: 6px; }
.eq-dial-num b { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; }
.eq-dial-num b.is-loss { color: color-mix(in srgb, var(--loss) 65%, white); }
.eq-dial-num span { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.eq-forme { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 6px; }
.eq-f { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 14px; padding-top: 2px; }
.eq-f-w { background: color-mix(in srgb, var(--win) 22%, var(--bg-2)); color: color-mix(in srgb, var(--win) 65%, white); box-shadow: inset 0 0 0 1.5px var(--win); }
.eq-f-n { background: color-mix(in srgb, var(--draw) 18%, var(--bg-2)); color: #cfd2d9; box-shadow: inset 0 0 0 1.5px var(--draw); }
.eq-f-l { background: color-mix(in srgb, var(--loss) 22%, var(--bg-2)); color: color-mix(in srgb, var(--loss) 65%, white); box-shadow: inset 0 0 0 1.5px var(--loss); }
.eq-f-f { background: var(--bg-2); color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); }
.eq-tabs { margin-top: 20px; }

/* chronologie : une règle graduée, allumée sur les matchs joués, en pointillé ensuite */
.eq-tl { margin-top: 4px; }
.eq-tl-start { display: flex; justify-content: center; }
.eq-tl-start span { position: relative; z-index: 2; font-family: var(--display); font-size: 15px; letter-spacing: 1.4px; padding: 6px 14px 4px; border-radius: 999px; background: var(--club); color: var(--club-ink); box-shadow: var(--glow); text-transform: uppercase; }
.eq-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); align-items: center; min-height: 84px; color: inherit; text-decoration: none; }
.eq-row:hover .eq-nm { color: var(--ink); }
.eq-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 30px; transform: translateX(-50%); pointer-events: none; }
.eq-axis::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 9px, transparent 9px 21px, #000 21px); mask-image: linear-gradient(90deg, #000 0 9px, transparent 9px 21px, #000 21px); }
.eq-axis::after { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.eq-row.is-passe .eq-axis::after { background: var(--club); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--club) 70%, transparent), 0 0 24px 4px color-mix(in srgb, var(--club) 30%, transparent); }
.eq-row.is-futur .eq-axis::after { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 5px, transparent 5px 10px); }
.eq-row.is-prochain { min-height: 128px; }
.eq-row.is-prochain .eq-axis::after { background: linear-gradient(180deg, var(--club) 0 50%, rgba(255, 255, 255, .22) 50%); }
.eq-bump { position: absolute; left: 50%; top: 50%; width: 120px; height: 130px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse 34px 60px at 50% 50%, color-mix(in srgb, var(--club) 75%, transparent), transparent 70%); filter: blur(6px); }
.eq-side { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.eq-side.is-home { justify-content: flex-end; text-align: right; }
.eq-nm { min-width: 0; font-family: var(--display); font-size: 18px; line-height: .95; letter-spacing: .5px; color: var(--ink-2); text-transform: uppercase; overflow-wrap: anywhere; }
.eq-nm.is-us { color: var(--ink); }
.eq-row.is-futur .eq-side { opacity: .6; }
.eq-crest { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 12px; letter-spacing: .3px; color: var(--ink-2);
  background: radial-gradient(circle at 50% 32%, #34353c, #111216); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); overflow: hidden; }
.eq-crest.is-logo { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--club) 70%, transparent); }
.eq-crest.is-logo img { width: 78%; height: 78%; object-fit: contain; }
.eq-node { position: relative; z-index: 2; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eq-date { padding: 0 4px; background: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.eq-score { min-width: 58px; height: 30px; padding: 3px 10px 0; border-radius: 999px; display: grid; place-items: center; font-family: var(--display); font-size: 19px; letter-spacing: 1px; background: #121316; white-space: nowrap; }
.eq-score.eq-w { color: color-mix(in srgb, var(--win) 25%, white); box-shadow: inset 0 0 0 2px var(--win), 0 0 16px 1px color-mix(in srgb, var(--win) 55%, transparent); }
.eq-score.eq-l { color: color-mix(in srgb, var(--loss) 25%, white); box-shadow: inset 0 0 0 2px var(--loss), 0 0 16px 1px color-mix(in srgb, var(--loss) 55%, transparent); }
.eq-score.eq-n { color: #e7e8ec; box-shadow: inset 0 0 0 2px var(--draw), 0 0 12px 1px rgba(139, 142, 151, .4); }
.eq-score.eq-none { color: var(--ink-3); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.eq-trophy { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--club-ink);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 55%, var(--club-deep)); box-shadow: 0 0 0 3px var(--bg), var(--glow); }
.eq-trophy svg { width: 19px; height: 19px; }
.eq-trophy.is-futur { width: 30px; height: 30px; background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.eq-trophy.is-futur svg { width: 15px; height: 15px; }
.eq-ring-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.eq-knob { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 22px; padding-top: 3px; color: var(--ink);
  background: radial-gradient(circle at 50% 30%, #3a3b42, #101114 72%); box-shadow: 0 0 0 3px var(--club), 0 0 0 7px color-mix(in srgb, var(--club) 22%, transparent), 0 10px 30px rgba(0, 0, 0, .6); }
.eq-knob svg { width: 24px; height: 24px; }
.eq-now { position: relative; z-index: 2; text-align: center; margin: -2px 0 14px; }
.eq-jj { margin: 0; font-family: var(--display); font-size: 64px; line-height: .85; color: var(--club); text-shadow: 0 0 28px color-mix(in srgb, var(--club) 65%, transparent); text-transform: uppercase; }
.eq-jj small { margin-left: 8px; font-size: 24px; color: var(--ink); text-shadow: none; }
.eq-now-where { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.eq-tl-foot { margin: 16px 0 0; text-align: center; font-size: 14px; }

/* composition : terrain sombre, un maillot par poste, les joueurs dessous */
.eq-pitch { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 18px; min-height: 600px; padding: 26px 8px 76px; border-radius: 30px; overflow: hidden;
  background: radial-gradient(260px 220px at 50% 50%, color-mix(in srgb, var(--club) 12%, transparent), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .018) 0 58px, transparent 58px 116px), linear-gradient(180deg, #17181c, #0f1013);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .4); }
.eq-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.5; pointer-events: none; }
.eq-lines .dot { fill: rgba(255, 255, 255, .15); }
.eq-line { position: relative; display: flex; justify-content: space-around; align-items: flex-start; gap: 6px; }
.eq-slot { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1 1 0; max-width: 130px; }
.eq-shirt { position: relative; width: 48px; height: 48px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.eq-shirt svg { width: 100%; height: 100%; fill: var(--club); stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; stroke-linejoin: round; }
.eq-shirt b { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .4px; color: var(--club-ink); }
.eq-shirt.is-mine { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--club) 80%, transparent)) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.eq-shirt.is-mine svg { fill: #fff; }
.eq-shirt.is-mine b { color: var(--club); }
.eq-names { display: flex; flex-direction: column; align-items: center; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); text-align: center; }
.eq-names .is-me { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; }
.eq-names .is-me::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--club); box-shadow: 0 0 8px var(--club); }
.eq-pill { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); margin: 0;
  padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(20, 21, 24, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px rgba(0, 0, 0, .5);
  font-family: var(--display); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-pill-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--club); color: var(--club-ink); }
.eq-pill-ico svg { width: 16px; height: 16px; }
.eq-counts { display: flex; justify-content: space-around; margin-top: 14px; }
.eq-counts div { text-align: center; }
.eq-counts b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.eq-counts span { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3); text-transform: uppercase; }
.eq-noposte { margin-top: 14px; }

/* ------------------------------------------------------------------ administrateurs : niveau et secteur */
.adm-intro { display: grid; gap: 6px; margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.adm-intro p { margin: 0; }
.adm-intro strong { color: var(--ink); }
.adm-tag-principal { background: var(--club-soft); color: #ffb3b8; }
.adm-tag-secteur { background: var(--yes-bg); color: var(--yes); }
.adm-edit { margin: -2px 0 8px 58px; }
.adm-edit > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); list-style: none; padding: 4px 0; }
.adm-edit > summary::-webkit-details-marker { display: none; }
.adm-edit > summary svg { width: 15px; height: 15px; }
.adm-edit[open] > summary { color: var(--ink); }
.adm-edit .form { margin-top: 8px; padding: 14px; border-radius: var(--r); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line-2); }
.adm-level { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.adm-level legend { padding: 0; margin-bottom: 4px; }
.adm-sector { display: grid; gap: 8px; }
.adm-sector p { margin: 4px 0 0; }
.adm-level:has(input[name="niveau"][value="principal"]:checked) .adm-sector { display: none; }
.fold { gap: 0; padding: 0; }
.fold > .form, .fold > p, .fold > .stack { padding: 0 18px 18px; }
.fold-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 12px; cursor: pointer; border-radius: var(--r); }
.fold-head span { display: inline-flex; align-items: center; gap: 12px; font-size: 25px; line-height: 1; text-transform: uppercase; padding-top: 3px; }
.fold-head span svg { width: 42px; height: 42px; padding: 11px; border-radius: 13px; background: var(--surface-3); color: var(--ink); margin-top: -3px; }
.fold[open] > .fold-head span svg { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.fold-head .chev { transition: transform .2s; }
.fold[open] > .fold-head .chev { transform: rotate(90deg); }
.fold-head:hover { background: rgba(255, 255, 255, .025); }
.sub-fold > summary { cursor: pointer; }
.access-summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.access-summary svg { width: 34px; height: 34px; padding: 9px; border-radius: 11px; background: var(--club-soft); color: var(--club); }
.match-row { border-color: color-mix(in srgb, var(--team, var(--club)) 30%, transparent); }
.match-row .date-block { flex-basis: 56px; height: 62px; }
.match-row .row-main { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.match-row .row-title { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; letter-spacing: .5px; padding-top: 2px; }
.match-row .row-main:hover .row-title { text-decoration: underline; text-decoration-color: var(--club); }
.match-row.is-cancelled .row-title { text-decoration: line-through; color: var(--ink-3); }
/* « À compléter : horaire, domicile ou extérieur » sortait de la carte et élargissait la page à 360 px
   (défaut relevé par l'audit : VM-D13), comme la pastille de planning déjà corrigée plus bas */
.match-row .pill { white-space: normal; max-width: 100%; }
.mini-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: #fff; padding: 4px; flex: none; vertical-align: middle; box-shadow: 0 0 0 3px rgba(0, 0, 0, .3); }
.family-row { align-items: flex-start; }
.family-row .avatar { margin-top: 2px; }
.parents { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.parent { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.kid-picker { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; padding: 2px; margin-top: 8px; }
@media (min-width: 700px) { .kid-picker { grid-template-columns: 1fr 1fr; } }
.kid-picker .choice { padding: 10px 12px; }
.kid-picker .choice small { display: block; font-size: 13px; }
.search-in-list { width: 100%; }
.team-card { display: grid; gap: 14px; }
.team-card-head { display: flex; align-items: center; gap: 12px; }
.team-card-head .row-title { text-decoration: none; font-size: 32px; line-height: .95; text-transform: uppercase; padding-top: 3px; }
.team-card-stat { display: grid; gap: 4px; }
.staff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.staff-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-list a { font-weight: 600; text-decoration: none; }
.filters { display: grid; gap: 8px; margin-bottom: 12px; }
.filters .chip { text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .ans, .chip, .choice, .row, .event-main, .menu-tile, .tabbar svg { transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .15s; }
  .ans:active, .btn:active, .menu-tile:active { transform: scale(.97); }
}
@media print {
  .sidebar, .topbar, .tabbar, .actions, .form-actions, .demo-banner, .ia { display: none !important; }
  /* papier blanc : les gris du thème sombre deviennent illisibles, et sans la barre latérale le contenu
     retombait dans sa colonne de 264 px dès que la page imprimée dépasse 1024 px (A4 paysage) */
  :root { --bg: #fff; --surface: #fff; --ink: #000; --ink-2: #333; --ink-3: #555; --card: #fff; --line-2: #ddd; }
  body.with-nav { display: block; }
  body.with-nav .main { max-width: none; padding: 0; }
}

/* composer les équipes : colonnes et cartes à glisser */
.category-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 10px; }
.category-head .day-group { margin: 0; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.board-col { background: var(--card); border: 1px solid var(--line-2); border-radius: 22px; padding: 12px; box-shadow: var(--card-edge), inset 0 3px 0 var(--team); transition: border-color .15s, box-shadow .15s; }
.board-col.is-target { border-color: var(--club); box-shadow: 0 0 0 3px var(--club-soft), var(--glow); }
.board-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.board-col-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; padding-top: 3px; }
.board-staff { margin: 2px 4px 10px; font-size: 13px; color: var(--ink-2); }
.board-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 64px; }
.drag-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 4px; border-radius: 16px; background: var(--inset); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.drag-card .avatar { width: 36px; height: 36px; font-size: 15px; }
.drag-card .row-title { font-size: 15px; }
.drag-handle { display: grid; place-items: center; width: 34px; height: 44px; border-radius: 10px; color: var(--ink-3); cursor: grab; touch-action: none; flex: none; }
.drag-handle:hover { color: var(--ink); background: var(--surface-2); }
.drag-handle svg { width: 20px; height: 20px; }
.move-form { margin: 4px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.move-form .btn { min-height: 34px; padding: 2px 12px 0; font-size: 15px; }
.move-form select { min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; border-radius: 10px; width: auto; max-width: 100%; }
.drag-card.is-placeholder { opacity: .35; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; width: 240px; transform: rotate(-2deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 0 2px var(--club); }
.drag-card.is-saving { opacity: .6; }
.board-empty { display: grid; place-items: center; min-height: 60px; border: 1.5px dashed var(--line); border-radius: 16px; color: var(--ink-3); font-size: 13px; }
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* bandeau « ajouter à l'écran d'accueil » */
.install-banner {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  bottom: calc(14px + env(safe-area-inset-bottom)); width: min(440px, calc(100% - 24px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 14px; border-radius: 22px; background: #232429; border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4); transition: opacity .25s, transform .25s;
}
body.with-nav .install-banner { bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom)); }
.install-banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.install-banner img { width: 48px; height: 48px; border-radius: 12px; }
.install-banner strong { display: block; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1; text-transform: uppercase; letter-spacing: .5px; padding-top: 3px; }
.install-banner p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.install-banner p svg { width: 17px; height: 17px; margin: -3px 2px 0; color: var(--yes); }
.install-banner .actions { margin-top: 10px; }
.install-banner .icon-btn { width: 44px; height: 44px; background: transparent; }
.install-banner::after {
  /* flèche vers la barre du navigateur, sous le bandeau (iPhone) */
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; transform: rotate(45deg);
  background: #232429; border-right: 1px solid rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .09); display: none;
}
.install-banner.points-down::after { display: block; }
body.with-nav .install-banner.points-down::after { display: none; }

/* suggestions de clubs pendant la saisie */
.combo-list { position: absolute; left: 0; right: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto;
  background: #26272d; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.combo-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--surface-3); }
.combo-list img, .combo-initials { width: 34px; height: 34px; border-radius: 50%; object-fit: contain; background: #fff; padding: 3px; flex: none; }
.combo-initials { display: grid; place-items: center; background: var(--inset); color: var(--ink); font-family: var(--display); font-size: 15px; padding-top: 2px; }
.combo-list strong { display: block; font-weight: 600; font-size: 15px; }
.combo-list small { display: block; color: var(--ink-3); font-size: 12px; }

/* page Équipes : une catégorie qui se déplie sur ses équipes */
.category-group > summary { cursor: pointer; }
.category-row .category-title { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .6px; text-transform: uppercase; padding-top: 3px; }
.category-row .chev { transition: transform .2s; }
.category-group[open] > .category-row .chev { transform: rotate(90deg); }
.category-group[open] > .category-row { border-color: color-mix(in srgb, var(--team) 45%, transparent); }
.category-teams { margin: 8px 0 4px 26px; padding-left: 14px; border-left: 2px solid var(--line); }
.team-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--team); box-shadow: 0 0 0 4px color-mix(in srgb, var(--team) 25%, transparent); flex: none; margin: 0 6px 0 4px; }
@media (max-width: 480px) { .category-teams { margin-left: 8px; padding-left: 10px; } }

/* fiche équipe : équipe affichée à gauche, autres équipes de la catégorie à droite */
.board.is-split { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: visible; }
.board.is-split .board-col.is-current { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: var(--card-edge), inset 0 3px 0 var(--team), 0 0 0 2px color-mix(in srgb, var(--team) 40%, transparent); }
body.with-nav .board.is-split .board-col.is-current { top: 72px; max-height: calc(100vh - 170px); }
@media (min-width: 1024px) { body.with-nav .board.is-split .board-col.is-current { top: 16px; max-height: calc(100vh - 32px); } }
.board-others { display: grid; gap: 10px; align-content: start; }
@media (max-width: 640px) {
  .board.is-split { gap: 8px; }
  .board.is-split .board-col { padding: 8px; border-radius: 18px; }
  .board.is-split .board-col-head h3 { font-size: 22px; }
  .board.is-split .drag-card { padding: 6px 6px 6px 2px; gap: 4px; }
  .board.is-split .drag-card .avatar { display: none; }
  .board.is-split .drag-card .row-title { font-size: 13px; }
  .board.is-split .move-form select { width: 100%; font-size: 12px; }
  .board.is-split .board-staff { font-size: 11px; }
}

/* ------------------------------------------------------------------ tactique : terrain du staff */
.tt-match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 16px; }
.tt-match label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .6px; }
.tt-match label svg { width: 16px; height: 16px; }
.tt-match select { flex: 1 1 220px; max-width: 420px; min-height: 42px; }
.tt-tabbar { display: flex; gap: 8px; align-items: stretch; }
/* position: relative sert de repère à offsetLeft des onglets (tactics.js) : sans lui, offsetLeft remonte au
   premier ancêtre positionné plus haut dans la page, décalant tout le calcul de défilement (défaut U65) */
.tt-tabs { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; min-width: 0; }
.tt-tabs::-webkit-scrollbar { display: none; }
.tt-tab {
  flex: none; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: 8px 16px;
  border: 0; border-radius: 16px; background: var(--surface); color: var(--ink-2); font: 600 14px/1.15 var(--font); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-2); max-width: 160px;
}
/* un nom de stratégie long élargissait l'onglet sans limite, poussant le terrain sous le panneau
   des outils : tronqué avec des points de suspension plutôt (défaut U86) */
.tt-tab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-tab small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tt-tab[aria-selected="true"] { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.tt-tab[aria-selected="true"] small { color: var(--club-ink); }
.tt-tab.is-broken { box-shadow: inset 0 0 0 2px var(--no); }
.tt-add { flex-direction: row; align-items: center; gap: 6px; margin-bottom: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.tt-add svg { width: 16px; height: 16px; }
.tt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 6px 0 10px; }
.tt-rename { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.tt-rename input {
  width: 100%; min-width: 0; padding: 2px 30px 0 0; border: 0; border-bottom: 1.5px dashed var(--line); border-radius: 0; background: transparent;
  color: var(--ink); font: 400 32px/1.1 var(--display); letter-spacing: .6px; text-transform: uppercase;
}
.tt-rename input:focus { outline: none; border-bottom-color: var(--club); }
.tt-rename svg { position: absolute; right: 4px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.tt-head-actions { display: flex; gap: 6px; }
.tt-head-actions .btn { min-height: 40px; padding: 3px 14px 0; font-size: 16px; }
.tt-head-actions .btn:disabled { opacity: .4; cursor: default; }
.tt-systems { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-systems .chip { flex: none; min-height: 42px; padding: 4px 14px; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-systems .chip[aria-checked="true"] { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.tt-summary { margin: 8px 0 14px; font-size: 14px; color: var(--ink-2); }
.tt-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 14px; }
.tt-summary-row .tt-summary { margin: 0; }
.tt-summary-row .btn { flex: none; }
.tt-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .tt-layout { grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
  .tt-pitch-col { position: sticky; top: 16px; width: min(460px, calc((100vh - 110px) / 1.4)); }
}
/* consigne « choisis la place » : posée au-dessus du terrain ou de la barre d'onglets, sans décaler la page */
.tt-pitch-col { position: relative; }
.tt-pick {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--club) 22%, #25262b); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--club) 60%, transparent), 0 14px 32px rgba(0, 0, 0, .5);
  font-size: 14px; line-height: 1.3;
}
@media (min-width: 1024px) { .tt-pick { position: absolute; top: 10px; left: 10px; right: 10px; bottom: auto; z-index: 5; } }
.tt-pick svg { flex: none; width: 20px; height: 20px; color: var(--club); }
.tt-pick span { flex: 1; }
.tt-link { border: 0; background: none; padding: 0; color: var(--ink); font: 600 14px var(--font); text-decoration: underline; text-decoration-color: var(--club); text-underline-offset: 3px; cursor: pointer; }
/* Terrain « Nuit de match », le même dans toute l'app (tactique, paperboard, direct, fiche, schémas d'exercices) :
   gazon profond tondu en bandes douces, grain très fin, centre éclairé comme sous des projecteurs, bords assombris ;
   lignes blanches nettes avec un léger halo. La feuille imprimée garde son terrain clair, le thème Extérieur le sien. */
:root {
  --gazon-1: #143f2b; --gazon-2: #113524;
  --gazon-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --gazon-lumiere: radial-gradient(ellipse 72% 58% at 50% 48%, rgba(205, 255, 222, .11), rgba(205, 255, 222, .035) 48%, rgba(205, 255, 222, 0) 76%);
  --gazon-ombre: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, .42) 100%);
  --gazon-v: var(--gazon-grain), var(--gazon-lumiere), var(--gazon-ombre), repeating-linear-gradient(180deg, var(--gazon-1) 0 10%, var(--gazon-2) 10% 20%);
  --gazon-h: var(--gazon-grain), var(--gazon-lumiere), var(--gazon-ombre), repeating-linear-gradient(90deg, var(--gazon-1) 0 10%, var(--gazon-2) 10% 20%);
}
.tt-pitch {
  position: relative; width: 100%; aspect-ratio: 100 / 140; border-radius: 22px;
  background: var(--gazon-v); background-color: var(--gazon-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 22px 50px rgba(0, 0, 0, .45);
}
.tt-lines { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .18)); }
.tt-lines rect, .tt-lines line, .tt-lines circle { fill: none; stroke: rgba(255, 255, 255, .58); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tt-lines .dot { fill: rgba(255, 255, 255, .75); stroke: none; }
/* repères de jeu : 5 couloirs (bords des surfaces) et 3 tiers, en pointillés, affichés d'un bouton */
.tt-lines .tt-reperes { display: none; }
.tt-pitch.has-reperes .tt-lines .tt-reperes { display: inline; }
.tt-lines .tt-reperes line { stroke: rgba(255, 255, 255, .26); stroke-width: 1.2; stroke-dasharray: 7 7; }
.tt-attack { position: absolute; top: 8px; right: 12px; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.tt-attack svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.tt-slot { position: absolute; z-index: 1; width: 86px; margin-left: -43px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.tt-token, .tt-empty {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: grab;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tt-token {
  border: 2px solid rgba(255, 255, 255, .92); color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 58%, var(--club-deep));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
.tt-slot.is-gk .tt-token { background: radial-gradient(circle at 50% 30%, #ffe27a, var(--maybe-solid) 60%, #b98f00); color: #1f1700; }
.tt-initials { font: 400 21px/1 var(--display); letter-spacing: .5px; padding-top: 3px; }
.tt-code {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 6px 1px; border-radius: 999px;
  background: #0d0e10; color: #e8e9ec; font: 700 10px/1.1 var(--font); letter-spacing: .4px; white-space: nowrap;
}
.tt-code.is-off { color: var(--no); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--no) 70%, transparent); }
.tt-empty {
  border: 2px dashed rgba(255, 255, 255, .5); background: rgba(0, 0, 0, .18); color: rgba(255, 255, 255, .85);
  font: 700 13px/1 var(--font); cursor: pointer;
}
.tt-empty:hover { background: rgba(0, 0, 0, .32); border-color: #fff; }
.tt-name {
  max-width: 86px; margin-top: 12px; padding: 1px 7px; border-radius: 999px; background: rgba(8, 9, 11, .62);
  color: #fff; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* le nom du poste libre (« Attaquant de pointe »...) était coupé par « ... » même quand la place existait :
   passe à deux lignes plutôt que de rester tronqué (défaut relevé par l'audit : VPC-D14) */
.tt-slot.is-empty .tt-name { margin-top: 5px; background: none; color: rgba(255, 255, 255, .62); font-size: 10.5px; font-weight: 500; white-space: normal; text-overflow: clip; text-align: center; }
.tt-slot.is-absent .tt-token { filter: saturate(.35); opacity: .85; }
.tt-dispo {
  display: inline-grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface-3); color: #fff; box-shadow: 0 0 0 2px #0f1012;
}
.tt-dispo svg { width: 11px; height: 11px; }
.tt-token .tt-dispo { position: absolute; top: -5px; right: -5px; }
.tt-dispo.is-yes { background: var(--yes-solid); }
.tt-dispo.is-no { background: var(--no-solid); color: #1b0d00; }
.tt-dispo.is-maybe { background: var(--maybe-solid); color: #1f1700; }
.tt-dispo.is-wait { background: #5d616b; }
.tt-dispo.is-off { background: #3a3c43; color: #d4d7dd; }
.tt-token.is-armed, .tt-chip.is-armed { transform: scale(1.1); box-shadow: 0 0 0 3px #fff, 0 12px 26px rgba(0, 0, 0, .5); }
.tt-token.is-selected, .tt-chip.is-selected { box-shadow: 0 0 0 3px #fff, 0 0 0 7px color-mix(in srgb, var(--club) 55%, transparent), 0 10px 22px rgba(0, 0, 0, .45); }
.tt-slot.is-target .tt-token, .tt-slot.is-target .tt-empty { transform: scale(1.12); box-shadow: 0 0 0 4px #fff, 0 0 0 9px color-mix(in srgb, var(--club) 50%, transparent); }
.is-picking .tt-empty { border-color: #fff; background: rgba(255, 255, 255, .12); }
@media (prefers-reduced-motion: no-preference) {
  .tt-token, .tt-empty, .tt-chip { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  .is-picking .tt-empty { animation: tt-pulse 1.4s ease-in-out infinite; }
}
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); } }
.is-dragged { opacity: .35; }
.tt-ghost {
  position: fixed; z-index: 200; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border-radius: 999px; background: var(--surface-2); color: var(--ink); font-weight: 600; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 0 18px 36px rgba(0, 0, 0, .55), 0 0 0 2px var(--club);
}
.tt-ghost .tt-initials { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--club); color: var(--club-ink); font-size: 17px; }
.tt-count { margin: 10px 2px 0; font-size: 14px; color: var(--ink-2); }
.tt-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tt-warn { color: var(--no); font-weight: 600; }
.tt-side { display: grid; gap: 12px; }
.tt-zone { padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
.tt-zone h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 22px; line-height: 1; text-transform: uppercase; }
.tt-zone h3 svg { width: 20px; height: 20px; color: var(--ink-3); }
.tt-zone h3 .badge { min-width: 22px; height: 22px; font: 700 12px var(--font); box-shadow: none; background: var(--surface-3); color: var(--ink); }
.tt-zone-btn { margin-left: auto; min-height: 40px; padding: 3px 14px 0; font-size: 16px; }
.tt-zone.is-target { border-color: var(--club); box-shadow: 0 0 0 3px var(--club-soft), var(--glow); }
.is-picking .tt-zone { border-style: dashed; border-color: rgba(255, 255, 255, .25); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 5px 10px 5px 5px; border: 0; border-radius: 999px;
  background: var(--inset); color: var(--ink); text-align: left; cursor: grab; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.tt-chip:hover { background: var(--surface-2); }
.tt-chip.is-absent { opacity: .62; }
.tt-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); font: 400 16px/1 var(--display); padding-top: 2px; }
.tt-chip-text { display: flex; flex-direction: column; min-width: 0; }
.tt-chip-text strong { font-size: 14px; font-weight: 600; line-height: 1.15; }
.tt-chip-text small { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.tt-hint { margin: 0; font-size: 13px; color: var(--ink-3); }
.tt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-3); }
.tt-status svg { width: 15px; height: 15px; }
.tt-status.is-saved { color: var(--yes); }
.tt-status.is-error { color: var(--no); }
.tt-status.is-info { color: var(--ink-2); }
.tt-help { margin: 0; }
.tt-picker-list { display: grid; gap: 8px; margin: 14px 0 4px; }
.tt-picker-list .tt-chip { width: 100%; cursor: pointer; touch-action: manipulation; }
.tt-picker-list .tt-chip .tt-dispo { margin-left: auto; }
@media (max-width: 640px) {  /* téléphone : le terrain arrive vite à l'écran */
  .tt-page-head { display: none; }
  .tt-match { margin: 0 0 10px; }
  .tt-match label { display: none; }
  .tt-head { margin: 2px 0 8px; }
  .tt-rename input { font-size: 25px; }
  .tt-systems { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tt-systems::-webkit-scrollbar { display: none; }
  .tt-summary { margin: 6px 0 10px; font-size: 13px; }
}
@media (max-width: 420px) {
  .tt-slot { width: 74px; margin-left: -37px; }
  .tt-token, .tt-empty { width: 46px; height: 46px; }
  .tt-initials { font-size: 18px; }
  .tt-name { max-width: 74px; font-size: 11px; }
  .tt-slot.is-empty .tt-name { display: none; }
}
.tt-pitch.is-11 .tt-token, .tt-pitch.is-11 .tt-empty { width: 40px; height: 40px; }
.tt-pitch.is-11 .tt-initials { font-size: 16px; }
.tt-pitch.is-11 .tt-slot.is-empty .tt-name { display: none; }

/* ------------------------------------------------------------------ buvette par créneau */
.slot-row.is-missing { border-color: color-mix(in srgb, var(--no) 35%, transparent); }
.slot-count { flex: 0 0 60px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 15px; background: var(--no-bg); color: var(--no); line-height: 1; }
.slot-count b { font: 400 32px/1 var(--display); padding-top: 4px; }
.slot-count small { font-size: 12px; font-weight: 600; }
.slot-count.is-full { background: var(--yes-bg); color: var(--yes); }
.slot-count.is-off { background: var(--inset); color: var(--ink-3); }

/* ------------------------------------------------------------------ planning de l'administrateur */
.week-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.week-nav strong { flex: 1; text-align: center; font: 400 22px/1 var(--display); letter-spacing: .6px; text-transform: uppercase; padding-top: 3px; }
.week-nav .icon-btn:last-child svg { transform: none; }
.plan-day { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); }
.plan-day.is-weekend { margin-top: 22px; padding: 14px 12px 12px; border: 1px solid color-mix(in srgb, var(--club) 22%, transparent); border-radius: 22px; background: color-mix(in srgb, var(--club) 5%, transparent); }
.plan-day.is-today .plan-day-head h2 { color: var(--club); }
.plan-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.plan-day-head h2 { margin: 0; font: 400 24px/1 var(--display); letter-spacing: .6px; text-transform: uppercase; padding-top: 3px; color: var(--ink-2); }
.plan-day.is-weekend .plan-day-head h2 { color: var(--ink); }
.plan-day-tools { display: flex; gap: 6px; align-items: center; }
.plan-day-tools form { margin: 0; }
a.seen-btn { text-decoration: none; }
.plan-row { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 8px; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--card-edge), inset 3px 0 0 var(--team, var(--club)); }
.plan-row.is-todo { border-color: color-mix(in srgb, var(--maybe) 35%, transparent); }
.plan-row.is-cancelled .plan-title { text-decoration: line-through; color: var(--ink-3); }
.plan-time { flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 13px; background: var(--inset); color: var(--ink); text-decoration: none; line-height: 1; }
.plan-time b { font: 400 22px/1 var(--display); letter-spacing: .4px; padding-top: 3px; }
.plan-time small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.plan-time.is-match { background: linear-gradient(180deg, color-mix(in srgb, var(--club) 90%, #fff), var(--club) 50%, var(--club-deep)); color: var(--club-ink); }
.plan-time.is-match small { color: color-mix(in srgb, var(--club-ink) 80%, transparent); }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; padding: 2px 0; }
.plan-title { font: 400 21px/1.02 var(--display); letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; padding-top: 2px; }
.plan-sub { font-size: 13px; color: var(--ink-3); }
.plan-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.plan-badges .pill { font-size: 12px; padding: 3px 9px 3px 7px; }
.plan-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.plan-lines a, .plan-trainings { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.plan-trainings { margin: 8px 0 0; }
.plan-trainings a { color: var(--ink); text-decoration: none; font-weight: 500; }
.plan-trainings a.is-cancelled { text-decoration: line-through; color: var(--ink-3); }
.plan-lines svg, .plan-trainings svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.plan-empty { margin: 0; font-size: 14px; color: var(--ink-3); }
.row-menu { position: relative; align-self: center; }
.row-menu > summary { cursor: pointer; }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 220px; padding: 6px; display: grid; gap: 2px;
  background: #26272d; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.row-menu-pop a, .row-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font: 500 15px/1.2 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.row-menu-pop a:hover, .row-menu-pop button:hover { background: var(--surface-3); }
.row-menu-pop svg { width: 17px; height: 17px; color: var(--ink-3); }
.row-menu-pop form { margin: 0; }
.row-menu-pop .is-danger, .row-menu-pop .is-danger svg { color: var(--no); }
.hub-grid .menu-tile { position: relative; }
.hub-count { position: absolute; top: 12px; right: 12px; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px;
  background: var(--club); color: var(--club-ink); font: 700 13px/1 var(--font); box-shadow: var(--glow); }
.hub-count.is-soft { background: var(--surface-3); color: var(--ink); box-shadow: none; }

/* navigation de l'administrateur : bouton « Créer » au centre */
.tabbar .tab-create svg { width: 40px; height: 40px; padding: 11px; border-radius: 50%; color: var(--club-ink);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--club) 85%, #fff), var(--club) 60%, var(--club-deep));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--club) 20%, transparent), var(--glow); }
/* chez l'administrateur le rouge est réservé à « Créer » : l'onglet actif est une pastille claire */
.tabbar.is-admin a[aria-current]:not(.tab-create) svg { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--club); }
.tabbar .tab-create { gap: 2px; }
@media (min-width: 1024px) {
  .side-create { width: 100%; }
  .side-group { display: grid; gap: 2px; margin: 2px 0 0 58px; }
  .side-group a { padding: 7px 10px; font-size: 14px; border-radius: 10px; }
  .side-group a[aria-current] { background: var(--surface-2); color: #fff; }
}

/* ------------------------------------------------------------------ accueil de l'administrateur */
.admin-head { margin-bottom: 8px; }
.admin-phrase { display: block; margin: 0 0 6px; font-size: 16px; line-height: 1.4; color: var(--ink-2); text-decoration: none; text-wrap: pretty; }
.admin-phrase:hover { color: var(--ink); }
.live-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.live-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--inset); box-shadow: inset 3px 0 0 var(--team); }
.live-main { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.live-team { font: 400 19px/1.05 var(--display); letter-spacing: .5px; text-transform: uppercase; padding-top: 2px; }
.live-state { font-size: 12px; color: var(--ink-3); }
.live-score { font: 400 30px/1 var(--display); white-space: nowrap; padding-top: 4px; }
.live-score i { font-style: normal; opacity: .5; margin: 0 4px; }
.live-row form { margin: 0; }
.task-list { gap: 6px; }
.task { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "level level" "main actions"; gap: 2px 10px;
  padding: 10px 8px 10px 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
/* l'urgence s'écrit dans un badge, sans couleur à elle : la couleur du brassard dit le type */
.task-level { grid-area: level; justify-self: start; display: inline-flex; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.task-urgent .task-level, .task-retard .task-level { margin: 1px 0 3px; padding: 3px 8px 2px; border-radius: 6px; }
.task-urgent .task-level { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.task-retard .task-level { color: var(--bg-2); background: var(--ink); }
.task-retard .task-level::before { content: "!\00a0"; }
.task-main { grid-area: main; min-width: 0; color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.task-title { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.task-sub { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.task-actions { grid-area: actions; display: flex; align-items: center; gap: 4px; }
.task-actions form { margin: 0; }
.task-actions .icon-btn { width: 38px; height: 38px; background: transparent; }
.task-more { margin: 8px 2px 0; text-align: right; }
.task-more a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.task-more svg { width: 14px; height: 14px; }
.all-clear { display: grid; justify-items: center; gap: 8px; padding: 22px 16px; text-align: center; border-radius: var(--r); background: var(--card); border: 1px dashed color-mix(in srgb, var(--yes) 45%, transparent); }
.all-clear.is-quiet { border-color: var(--line); }
.all-clear p { margin: 0; color: var(--ink-2); }
.all-clear-stamp { display: inline-block; padding: 8px 18px 4px; border: 3px solid var(--yes); border-radius: 12px; color: var(--yes); font: 400 32px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; transform: rotate(-3deg); }
.news-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.news-head form { margin: 0; }
.news-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.news-list.is-scrollable { max-height: 260px; overflow-y: auto; }
.news-list a { color: inherit; text-decoration: none; }
.news-list small { color: var(--ink-3); white-space: nowrap; }
.cat-grid { display: grid; gap: 8px; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-card { position: relative; overflow: hidden; display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); color: inherit; text-decoration: none; }
.cat-card:hover { background: var(--surface-2); }
.cat-urgent { border-color: color-mix(in srgb, var(--no) 45%, transparent); }
.cat-todo { border-color: color-mix(in srgb, var(--maybe) 30%, transparent); }
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-head strong { font: 400 30px/1 var(--display); letter-spacing: .6px; text-transform: uppercase; padding-top: 3px; }
.cat-state { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--wait-bg); color: var(--ink-2); }
.cat-urgent .cat-state { background: var(--no-bg); color: var(--no); }
.cat-todo .cat-state { background: var(--maybe-bg); color: var(--maybe); }
.cat-ready .cat-state { background: var(--yes-bg); color: var(--yes); }
.cat-crans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.cran { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: 10px; background: var(--inset); color: var(--ink-3); text-align: center; }
.cran svg { width: 15px; height: 15px; }
.cran small { font-size: 10px; font-weight: 600; line-height: 1; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.cran-fait { background: var(--yes-bg); color: var(--yes); }
.cran-a_faire { background: transparent; color: var(--maybe); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--maybe) 60%, transparent); }
.cran-na { opacity: .45; }
.cran-na svg { opacity: .5; }
.cat-lines { display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.cat-line b { color: var(--ink); font-weight: 600; }
.cat-line.is-idle { color: var(--ink-3); }
.cat-stamp { position: absolute; right: 12px; bottom: 10px; padding: 4px 10px 1px; border: 2px solid var(--yes); border-radius: 8px; color: var(--yes); font: 400 22px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; transform: rotate(-8deg); opacity: .85; pointer-events: none; }
.cat-fold { margin-top: 10px; }
.cat-fold > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--line-2); cursor: pointer; font-size: 14px; color: var(--ink-2); }
.cat-fold > summary svg:first-child { width: 16px; height: 16px; color: var(--yes); }
.cat-fold > summary .chev { margin-left: auto; transition: transform .2s; }
.cat-fold[open] > summary .chev { transform: rotate(90deg); }
.cat-fold .cat-grid { margin-top: 8px; }
.season-row { gap: 14px; }
.season-ring { --value: 0; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, var(--surface) 0 60%, transparent 61%), conic-gradient(var(--club) calc(var(--value) * 1%), rgba(255, 255, 255, .08) 0); }
.season-ring b { font: 400 22px/1 var(--display); padding-top: 3px; }
.season-ring small { display: none; }
.season-counters { display: grid; gap: 8px; }
@media (min-width: 700px) { .season-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.season-counters .kpi b { font-size: 40px; }
.admin-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 28px 0 0; font-size: 13px; color: var(--ink-3); }
.admin-foot a { color: var(--ink-2); }

.slot-admin-row { flex-wrap: wrap; }
.slot-admin-row .row-main { min-width: 140px; }
.slot-admin-row .row-end { margin-left: auto; }

/* ------------------------------------------------------------------ périmètre de l'administrateur */
.scope-grid { display: grid; gap: 8px; }
@media (min-width: 640px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
.scope-cat { display: grid; gap: 8px; align-content: start; }
.chip[aria-disabled="true"] { opacity: .6; cursor: default; }  /* équipe dont on est joueur : pas coach en même temps */
.scope-teams { padding-left: 42px; }
.scope-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-3); }
.scope-bar svg { width: 15px; height: 15px; flex: none; }
.scope-bar strong { color: var(--ink); font-weight: 600; }
.scope-bar a { margin-left: auto; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.scope-bar.is-all { border-color: color-mix(in srgb, var(--maybe) 45%, transparent); }

/* ------------------------------------------------------------------ la saison d'un enfant (famille) */
.kid-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .kid-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kid-tile { display: grid; gap: 2px; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
.kid-tile svg { width: 18px; height: 18px; color: var(--club); margin-bottom: 4px; }
.kid-tile b { font: 400 34px/1 var(--display); padding-top: 3px; }
.kid-tile span { font-size: 13px; color: var(--ink-3); }
.kid-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; }
.kid-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ------------------------------------------------------------------ bascule de vue (admin, coach, parent) */
.view-switch { display: flex; align-items: center; gap: 10px; margin: 0; }
.view-switch-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.view-switch-options { display: flex; flex: 1; gap: 4px; padding: 4px; border-radius: 999px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line-2); }
.view-switch button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--font); cursor: pointer; white-space: nowrap; }
.view-switch button svg { width: 16px; height: 16px; flex: none; }
.view-switch button:hover { color: var(--ink); }
.view-switch button[aria-pressed="true"] { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); cursor: default; }
.view-switch button:focus-visible { outline: 2px solid var(--club); outline-offset: 2px; }
.view-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--maybe); color: #111; font-size: 11px; font-weight: 700; line-height: 1; }
.view-switch.is-side { flex-direction: column; align-items: stretch; gap: 6px; }
.view-switch.is-side .view-switch-label { padding-left: 6px; }
.view-switch.is-page { margin: -4px 0 16px; }
.view-switch.is-pop { flex-direction: column; align-items: stretch; gap: 8px; }
.view-switch.is-pop .view-switch-options { flex-direction: column; border-radius: 16px; }
.view-switch.is-pop button { justify-content: flex-start; border-radius: 12px; min-height: 44px; }
.view-pop { position: relative; margin-left: auto; }
.view-pill { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: var(--inset); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.view-pill::-webkit-details-marker { display: none; }
.view-pill svg { width: 15px; height: 15px; color: var(--club); }
.view-pill .view-dot { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
/* vue affichée : sa pastille reste (même chiffre que son « À faire »), en blanc sur le rouge comme les onglets actifs */
.view-switch button[aria-pressed="true"] .view-dot { background: #fff; color: var(--club-deep); }
.view-pop-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(240px, calc(100vw - 32px)); padding: 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.view-notice { display: grid; gap: 6px; justify-items: start; margin-bottom: 14px; }
.view-notice .btn { margin-top: 4px; }

/* ------------------------------------------------------------------ fenêtre des nouveautés */
dialog.news-sheet { width: min(560px, calc(100vw - 24px)); padding: 22px 22px 0; }
.news-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--club) !important; }
.news-kicker svg { width: 15px; height: 15px; }
.news-intro { margin: 8px 0 4px !important; }
.news-group { margin-top: 18px; }
.news-group h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.news-list-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.news-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--inset); }
.news-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--club) 16%, transparent); color: var(--club); }
.news-icon svg { width: 17px; height: 17px; }
.news-text { display: grid; gap: 3px; min-width: 0; }
.news-text strong { font-weight: 600; color: var(--ink); }
.news-text small { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.news-actions { position: sticky; bottom: 0; margin: 18px -22px 0; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(33, 34, 39, 0), #212227 28%); }
/* trois vues : les boutons passent en colonne dans le menu latéral, et vont à la ligne dans une page étroite */
.view-switch button { min-width: 0; }
/* le libellé du bouton (« Coach »...) doit pouvoir se réduire lui aussi, sinon il chevauche la pastille de
   rappel au lieu de la respecter (défaut relevé par l'audit : VM-D06) */
.view-switch button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* barre latérale : les vues l'une sous l'autre, même à deux, pour que chaque pastille ait sa place (côte à côte,
   « Coach » et son chiffre ne tenaient pas dans la moitié de la barre) */
.view-switch.is-side .view-switch-options { flex-direction: column; border-radius: 16px; }
.view-switch.is-side button { justify-content: flex-start; border-radius: 12px; }
.view-switch.is-page .view-switch-options { flex-wrap: wrap; border-radius: 22px; }
.view-switch.is-page button { flex: 1 1 auto; }
/* barre du haut d'un téléphone : le libellé de la vue reste écrit (« Coach », « Admin »...), l'icône seule
   (sifflet, engrenage...) devient illisible à 15 px et peut se lire comme un cadenas ; le titre du club, à
   largeur flexible, cède la place en priorité si besoin */
@media (max-width: 420px) {
  .view-pill { padding: 4px 10px; }
  /* le titre cède la place en priorité (choix ci-dessus), mais partait d'une police si grande qu'il ne
     restait souvent que « AC BASSE-GOUL… » : réduite pour un compte à plusieurs vues (défaut VM-D06) */
  .topbar:has(.view-pop) .topbar-title { font-size: 20px; }
}

/* une longue pastille (« À compléter : rendez-vous, heure de fin... ») va à la ligne au lieu d'élargir la page */
.plan-badges .pill { white-space: normal; max-width: 100%; }
.list > li { min-width: 0; }

/* ------------------------------------------------------------------ tournois à domicile */
.to-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: contain; background: #fff; padding: 3px; }
.to-logo.is-sm { width: 24px; height: 24px; padding: 2px; }
.to-logo.is-lg { width: 54px; height: 54px; padding: 6px; box-shadow: 0 0 0 4px rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .3); }
.to-initials { display: grid; place-items: center; background: var(--surface-3); color: var(--ink); font: 400 15px/1 var(--display); padding: 2px 0 0; letter-spacing: .5px; }
.to-initials.is-sm { font-size: 11px; }
.to-initials.is-lg { font-size: 22px; }
.to-camp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.to-camp-name { min-width: 0; font-weight: 600; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.to-camp .to-forfait { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--no); }
.to-camp.is-unknown .to-camp-name { color: var(--ink-3); font-weight: 500; }
.to-camp.is-winner .to-camp-name { color: var(--ink); font-weight: 700; }
.to-camp.is-followed .to-logo, .is-mine > .to-logo, .to-versus-team.is-mine .to-logo { box-shadow: 0 0 0 3px var(--club); }

.to-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--wait-bg); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.to-state.is-en_cours { background: var(--club-soft); color: var(--ink); }
.to-state.is-a_venir { background: var(--yes-bg); color: var(--yes); }
.to-state.is-brouillon { background: var(--maybe-bg); color: var(--maybe); }
.to-state.is-termine { background: var(--surface-3); color: var(--ink-3); }
.to-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--club); box-shadow: 0 0 0 0 color-mix(in srgb, var(--club) 60%, transparent); animation: to-pulse 1.6s ease-out infinite; flex: none; }
@keyframes to-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .to-pulse { animation: none; } }
.to-warn { color: var(--no); font-weight: 700; }
.to-live-word { color: var(--ink); }
.to-head { align-items: center; }
.to-format { margin: -4px 0 10px; }
.to-publish { margin-bottom: 18px; }
.to-late-box { margin-bottom: 14px; }
.to-overdue-box { margin-bottom: 14px; }
.to-overdue-list { list-style: none; display: grid; gap: 6px; margin: 10px 0 0; padding: 0; }
.to-overdue-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.to-overdue-list a { color: var(--ink); }
.to-overdue-list span { font-size: 13px; font-weight: 700; color: var(--maybe); }
.to-field.is-overdue { border-color: var(--maybe); box-shadow: inset 0 0 0 1px var(--maybe), var(--card-edge); }
.to-overdue { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--maybe-bg);
  color: var(--ink); font-size: 14px; font-weight: 600; }
.to-overdue svg { flex: none; width: 18px; height: 18px; color: var(--maybe); }
.to-overdue [data-overdue-text] { color: var(--maybe); font-weight: 700; }
.to-list-row .to-state { margin-left: auto; }
.to-day { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }

/* une rencontre */
.to-matches { display: grid; gap: 6px; }
.to-match { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px 9px 10px;
  border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); color: inherit; text-decoration: none; }
a.to-match:hover { background: var(--surface-2); }
.to-match.is-mine { border-color: color-mix(in srgb, var(--club) 60%, transparent); background: color-mix(in srgb, var(--club) 9%, var(--surface)); }
.to-match.is-en_cours { border-color: var(--club); }
.to-match.is-termine .to-match-when strong { color: var(--ink-3); }
.to-match-when { display: grid; gap: 1px; text-align: center; }
.to-match-when strong { font: 400 22px/1 var(--display); padding-top: 2px; letter-spacing: .3px; }
.to-match-when small { font-size: 11px; line-height: 1.15; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-match-body { display: grid; gap: 4px; min-width: 0; }
.to-match-tour { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.to-match-teams { display: grid; gap: 5px; min-width: 0; }
.to-score { font: 400 26px/1 var(--display); white-space: nowrap; text-align: right; padding-top: 3px; }
.to-score i { font-style: normal; opacity: .5; margin: 0 3px; }
.to-score small { display: block; font: 600 11px/1.2 var(--font); color: var(--ink-3); text-align: right; }
.to-score.is-live { color: var(--ink); text-shadow: 0 0 18px color-mix(in srgb, var(--club) 70%, transparent); }
.to-score.is-time { font-size: 19px; color: var(--ink-2); }
.to-score.is-forfait { font: 700 11px/1 var(--font); letter-spacing: .6px; text-transform: uppercase; color: var(--no); }
@media (max-width: 400px) { .to-match { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px 8px 6px; } }

/* bilan du programme */
.to-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.to-kpis .kpi b { font-size: 44px; }
@media (max-width: 480px) { .to-kpis .kpi > span:first-child { display: block; min-height: 2.4em; line-height: 1.2; } }  /* libellé sur 2 lignes réservées : les chiffres voisins restent alignés */
.to-kpis .kpi small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.to-kpis .kpi.is-over { border-color: color-mix(in srgb, var(--no) 55%, transparent); }
.to-kpis .kpi.is-over b { color: var(--no); }
.to-kpis .to-before { color: var(--ink-2); }
.to-kpis + .flash { margin-top: 10px; }
.to-pistes { margin: 4px 0 12px; padding-left: 18px; }
.to-pistes li + li { margin-top: 4px; }
.to-preview-list summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* classements */
.to-standings { display: grid; gap: 12px; }
@media (min-width: 760px) { .to-standings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.to-table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--card-edge); }
.to-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.to-table caption { text-align: left; padding: 12px 14px 4px; font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.to-table caption small { margin-left: 8px; font: 600 11px/1 var(--font); letter-spacing: .6px; color: var(--ink-3); }
.to-table th, .to-table td { padding: 8px 8px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.to-table th { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); }
.to-table tr:last-child td { border-bottom: 0; }
.to-table .num { text-align: right; white-space: nowrap; }
.to-table .rank { width: 30px; color: var(--ink-3); font-weight: 600; }
.to-table .pts { font-weight: 700; color: var(--ink); }
.to-table td.team { width: 100%; }
.to-table tr.is-mine td { background: color-mix(in srgb, var(--club) 14%, transparent); }
.to-table tr.is-unknown td { color: var(--ink-3); font-style: normal; }
.to-note { margin: 0; padding: 0 14px 12px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 420px) { .to-table .hide-xs { display: none; } }

/* tableau à élimination directe */
/* même indice de défilement que .subnav : un bord qui s'estompe signale qu'il y a plus à voir (défaut
   relevé par l'audit : VPC-D11, le tableau de la phase finale rogné sans le dire) */
.to-bracket-wrap {
  overflow-x: auto; padding-bottom: 6px;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.to-bracket { display: flex; gap: 12px; min-width: min-content; }
.to-round { display: flex; flex-direction: column; gap: 10px; width: 230px; flex: none; }
.to-round-games { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }  /* titres des tours alignés en haut */
.to-round-name { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); }
.to-duel { display: grid; gap: 5px; padding: 9px 11px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); color: inherit; text-decoration: none; }
a.to-duel:hover { background: var(--surface-2); }
.to-duel.is-mine { border-color: color-mix(in srgb, var(--club) 60%, transparent); }
.to-duel.is-en_cours { border-color: var(--club); }
.to-duel-meta { font-size: 11px; color: var(--ink-3); }
.to-duel-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.to-duel-team .to-camp-name { flex: 1; font-weight: 500; font-size: 14px; }
.to-duel-team b { font: 400 20px/1 var(--display); padding-top: 2px; }
.to-duel-team b small { font: 600 11px/1 var(--font); color: var(--ink-3); margin-left: 3px; }
.to-duel-team.is-winner .to-camp-name { font-weight: 700; }
.to-duel-team.is-unknown .to-camp-name { color: var(--ink-3); }

/* direct : un terrain */
.to-fields { display: grid; gap: 12px; }
@media (min-width: 760px) { .to-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.to-fields.is-public { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.to-field { padding: 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
.to-field.is-live { border-color: var(--club); }
.to-field.is-closed { opacity: .6; }
.to-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.to-field-head h2, .to-field-head h3 { margin: 0; font: 400 26px/1 var(--display); text-transform: uppercase; padding-top: 3px; }
.to-field-tour { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.to-live { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 10px; row-gap: 8px; }
.to-live-team { display: contents; }
.to-live-team > * { justify-self: center; min-width: 0; max-width: 100%; text-align: center; }
.to-live-team:first-child > * { grid-column: 1; }
.to-live-team:last-child > * { grid-column: 2; }
.to-live-team > .to-logo { grid-row: 1; }
.to-live-team > strong { grid-row: 2; }
.to-live-team > .to-stepper { grid-row: 3; }
.to-live-team strong { min-height: 2.4em; font-size: 15px; font-weight: 600; line-height: 1.2; }  /* 2 lignes réservées : les cartes de terrain voisines restent alignées */
.to-stepper { display: flex; align-items: center; gap: 10px; }
.to-stepper form { margin: 0; }
.to-stepper .icon-btn { font-size: 24px; font-weight: 700; width: 46px; height: 46px; }
.to-stepper .icon-btn.is-plus { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.to-live-score { min-width: 48px; font: 400 58px/.9 var(--display); padding-top: 4px; }
/* deux colonnes de score sur une carte de terrain : à moins de 360px, les boutons +/- fixes débordent sinon */
@media (max-width: 359px) {
  .to-stepper { gap: 6px; }
  .to-stepper .icon-btn { width: 34px; height: 34px; font-size: 19px; }
  .to-live-score { min-width: 34px; font-size: 44px; }
}
.to-finish { margin-top: 14px; }
.to-tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; margin-bottom: 10px; }
.to-tab label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.to-field-more { margin: 10px 0 0; text-align: center; font-size: 13px; }
.to-field-more a { color: var(--ink-3); }
.to-next { margin-top: 12px; }
.to-field.is-live .to-next { padding-top: 12px; border-top: 1px solid var(--line-2); }
.to-next .actions { margin-top: 10px; }

/* un match en grand */
.to-match-card { text-align: center; }
.to-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 10px; row-gap: 8px; margin: 12px 0; }
.to-versus-team { display: contents; }
.to-versus-team > * { justify-self: center; min-width: 0; max-width: 100%; text-align: center; }
.to-versus-team:first-child > * { grid-column: 1; }
.to-versus-team:last-child > * { grid-column: 3; }
.to-versus-team > .to-logo { grid-row: 1; align-self: center; }
.to-versus-team > strong { grid-row: 2; }
.to-versus-team strong { font: 400 21px/1 var(--display); text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.to-versus > .to-score { grid-column: 2; grid-row: 1; align-self: center; font-size: 48px; text-align: center; }
.to-big-score { font: 400 64px/.85 var(--display); white-space: nowrap; padding-top: 6px; }
.to-big-score i { font-style: normal; opacity: .5; margin: 0 4px; }
.to-big-score.is-vs { font-size: 40px; color: var(--ink-3); }
.to-big-score.is-time { font-size: 26px; color: var(--ink-2); }

/* ajuster, équipes */
.to-adjust-grid { display: grid; gap: 12px; margin-top: 14px; }
@media (min-width: 760px) { .to-adjust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.to-adjust-grid h2 { display: flex; align-items: center; gap: 10px; }
.to-adjust-grid h2 svg { width: 22px; height: 22px; color: var(--ink-2); margin-top: -3px; }
.to-adjust-grid .chips .chip { cursor: pointer; border: 0; font: inherit; }
.to-history { margin-top: 4px; }
.to-history-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.to-history-list li { display: grid; gap: 2px; }
.to-history-list small { color: var(--ink-3); font-size: 13px; }
.to-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--inset); }
.to-field-row span { display: grid; }
.to-field-row small { color: var(--ink-3); font-size: 12px; }
.to-field-row form { margin: 0; }
.to-team-list { gap: 6px; }
.to-team-row { display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); }
.to-team-main { display: flex; align-items: center; gap: 10px; }
.to-team-main input[type="text"] { flex: 1; min-width: 0; }
.to-team-row select { width: auto; flex: none; }
.to-team-row.is-forfait { opacity: .7; }
.to-team-num { width: 20px; flex: none; text-align: right; font-size: 12px; color: var(--ink-3); }
.to-team-screen { display: flex; align-items: center; gap: 8px; padding-left: 30px; font-size: 12px; color: var(--ink-3); }
.to-team-screen > span { flex: none; }
.to-team-screen input[type="text"] { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.to-team-screen .to-court { flex: 1; min-width: 0; max-width: 220px; }
.to-team-screen .to-code { width: 84px; flex: none; text-transform: uppercase; font-family: var(--display); font-size: 16px; letter-spacing: .04em; }
@media (max-width: 480px) { .to-team-main { flex-wrap: wrap; } .to-team-main input[type="text"] { flex-basis: calc(100% - 80px); } .to-team-screen { padding-left: 0; } }

/* page du tournoi (admin et équipe) : bilan, parcours, podium */
.to-pub-foot { margin: 26px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.to-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.to-stat { display: grid; align-content: start; gap: 2px; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); }
.to-stat b { font: 400 34px/1 var(--display); padding-top: 3px; white-space: nowrap; }
.to-stat b small { font-size: 18px; color: var(--ink-3); }
.to-stat b sup { font: 600 13px/1 var(--font); color: var(--ink-3); margin-left: 1px; }
.to-block .to-match.is-mine { background: var(--card); border-color: var(--line-2); }  /* « Ses matchs » : tous les siens */
.to-block .to-match.is-mine.is-en_cours { border-color: var(--club); }
.to-stat span { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); }
.to-block { margin-top: 18px; }
.to-block > h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.to-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.to-path li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); }
.to-path-if { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--yes); }
.to-path-then { font-weight: 600; }
.to-path-then small { display: block; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.to-podium-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.to-podium-list li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); text-align: center; }
.to-podium-list li b { font: 400 34px/1 var(--display); }
.to-podium-list li.is-1 b { color: var(--maybe); }
.to-podium-list li.is-3 b { color: var(--no); }
.to-podium-list li.is-mine { border-color: var(--club); }
.to-podium-list strong { font-weight: 600; line-height: 1.2; overflow-wrap: break-word; text-wrap: balance; }
/* planning : bandeau des tournois à venir */
.to-strip { display: grid; gap: 6px; margin: 0 0 14px; }
@media (min-width: 700px) { .to-strip { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.to-strip-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 22px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); color: inherit; text-decoration: none; --fam: color-mix(in srgb, var(--club) 78%, #fff); }
.to-strip-item::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; clip-path: inset(0 calc(100% - 8px) 0 0); background: var(--fam); }
.to-strip-item:hover { background: var(--surface-2); }
.to-strip-item > svg:first-child { width: 20px; height: 20px; color: var(--fam); flex: none; }
.to-strip-item span { flex: 1; min-width: 0; display: grid; }
.to-strip-item strong { font-weight: 600; overflow-wrap: anywhere; }
.to-strip-item small { font-size: 13px; color: var(--ink-3); }
.callout h3 svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--fam); }

/* ------------------------------------------------------------------ tournoi : écran de stade (spectateurs)
   Téléphone : onglets en bas, terrains à faire défiler du doigt. Grand écran (télé du club-house) :
   tout sur une page, terrains côte à côte. Dans l'application (page du tournoi), onglets en haut. */
.sp-body { min-height: 100vh; margin: 0; color: var(--ink); padding-bottom: calc(96px + env(safe-area-inset-bottom));
  background: radial-gradient(1200px 420px at 50% -140px, color-mix(in srgb, var(--club) 30%, transparent), transparent 70%), #0b0c0f; }
.sp-root { --sp-bg: #0b0c0f; --sp-panel: #15161a; }
.sp-root.is-interne { --sp-bg: var(--bg); --sp-panel: var(--surface); }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1760px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px 6px; }
.sp-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-head .crest-img.sp-crest { width: 38px; height: 46px; }
.sp-head .crest.sp-crest { width: 40px; height: 40px; }
.sp-head small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.sp-head h1 { margin: 2px 0 0; font: 400 30px/.92 var(--display); letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.sp-clock { flex: none; padding: 6px 10px 2px; border-radius: 10px; background: #040506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  font: 400 30px/1 var(--display); letter-spacing: 1.5px; text-shadow: 0 0 14px rgba(255, 255, 255, .35); }
.sp-main { max-width: 1760px; margin: 0 auto; padding: 0 16px; }
.sp-foot { margin: 22px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }
.sp-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }

.sp-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.sp-status-txt { font-size: 13px; color: var(--ink-2); }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  color: var(--ink-2); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.sp-pill.is-strong { background: #fff; color: #111; }
.sp-livepill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--club) 32%, #000);
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.sp-livepill.on-red { background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--club); box-shadow: 0 0 10px var(--club); animation: sp-blink 1.2s infinite; }
.sp-livepill.on-red .sp-dot, .sp-team-card .sp-dot { background: #fff; box-shadow: 0 0 10px #fff; }
@keyframes sp-blink { 50% { opacity: .25; } }

/* logos */
.sp-logo { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; object-fit: contain; padding: 3px; }
.sp-logo.is-xs { width: 18px; height: 18px; padding: 1.5px; }
.sp-logo.is-md { width: 46px; height: 46px; box-shadow: 0 0 0 3px #ffd54a; }
.sp-logo.is-lg { width: 58px; height: 58px; padding: 6px; }
.sp-ini { display: grid; place-items: center; background: #2a2b31; color: #fff; font: 400 14px/1 var(--display); padding: 2px 0 0; }
.sp-ini.is-xs { font-size: 8px; }
.sp-ini.is-lg { font-size: 22px; }
.sp-tbd { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }

/* votre équipe, en bref */
.sp-follow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 10px 10px 12px; border-radius: 18px;
  background: linear-gradient(90deg, color-mix(in srgb, #ffd54a 15%, #15161a), #15161a 75%); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffd54a 40%, transparent); }
.sp-follow.is-live { background: linear-gradient(90deg, color-mix(in srgb, var(--club) 30%, #15161a), #15161a 75%); }
.sp-follow-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sp-follow-txt small { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #ffd54a; }
.sp-follow-txt strong { font: 400 24px/1 var(--display); text-transform: uppercase; padding-top: 2px; overflow-wrap: anywhere; }
.sp-follow-txt span { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.sp-follow-txt b { color: #fff; }
.sp-countdown { display: grid; justify-items: center; min-width: 56px; padding: 7px 8px 4px; border-radius: 12px; background: #040506; }
.sp-countdown b { font: 400 32px/1 var(--display); color: #ffd54a; text-shadow: 0 0 12px rgba(255, 213, 74, .5); }
.sp-countdown small { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-3); }
.sp-change { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--ink-2); flex: none; }
.sp-change svg { width: 18px; height: 18px; }

/* onglets */
.sp-tabs { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: space-around; gap: 2px;
  max-width: 560px; margin: 0 auto; padding: 7px; border-radius: 22px; background: rgba(10, 11, 14, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .5); }
.sp-tabs a { flex: 1; display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 6px 4px 5px; border-radius: 14px; color: var(--ink-3); text-decoration: none; font-size: 10px; font-weight: 700; }
.sp-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tabs a svg { width: 20px; height: 20px; }
.sp-tabs a.is-on { color: #fff; background: color-mix(in srgb, var(--club) 34%, transparent); }
.sp-tabs.is-inline { position: static; max-width: none; margin: 0 0 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.js .sp-panel.is-off { display: none; }
.sp-panel + .sp-panel { margin-top: 26px; }
.js .sp-panel + .sp-panel { margin-top: 0; }
.sp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.sp-sec-head h2 { margin: 0; font: 400 30px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; }
.sp-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sp-panel); }
.sp-seg button { border: 0; padding: 6px 11px; border-radius: 999px; background: transparent; color: var(--ink-3); font: 700 12px/1 var(--font); cursor: pointer; }
.sp-seg button.is-on { background: #2c2d33; color: #fff; }
.sp-days { margin: 0 0 10px; }
.sp-wait { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; }
.sp-note { margin: 12px 0; padding: 14px; border-radius: 16px; background: var(--sp-panel); color: var(--ink-2); text-align: center; }

/* terrains : affiche du match en cours ou prochain match */
.sp-boards { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px -30px; padding: 4px 16px 42px; scrollbar-width: none; }
.sp-card.hero-card { box-shadow: 0 12px 26px color-mix(in srgb, var(--club) 26%, transparent), 0 6px 14px rgba(0, 0, 0, .3); }
.sp-boards::-webkit-scrollbar { display: none; }
.sp-card { position: relative; flex: 0 0 min(88%, 420px); scroll-snap-align: center; display: flex; flex-direction: column; padding: 14px 16px; border-radius: 26px; }
/* logos sur une rangée, noms dessous : un nom sur deux lignes ne décale plus rien */
.sp-card > .sp-time, .sp-card > .poster + .sp-wait { margin-top: auto; padding-top: 10px; }
.sp-next i { font-style: normal; opacity: .7; }
.sp-root[data-onglet="equipe"] .sp-follow { display: none; }
.sp-boards > .sp-card:only-child { flex-basis: 100%; }
.sp-card.is-idle { color: var(--ink); background: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #16171b, #0a0b0e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 34px rgba(0, 0, 0, .4); }
.sp-card.is-idle .poster-time { background: rgba(255, 255, 255, .08); }
.sp-card.is-idle .event-meta { color: var(--ink-3); opacity: 1; }
.sp-card.is-closed { opacity: .6; }
.sp-card.is-mine { outline: 2px solid #ffd54a; outline-offset: 3px; }
.sp-card-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; }
.sp-card-top .sp-livepill, .sp-card-top .sp-pill { margin-left: auto; }
@media (max-width: 420px) { .sp-card-top .sp-mine-tag + .sp-livepill { justify-content: center; width: 24px; height: 24px; padding: 0; gap: 0; font-size: 0; } }  /* petit téléphone : le point « en direct » seul, le nom du terrain reste entier */
.sp-field { font: 400 24px/1 var(--display); letter-spacing: 1.2px; text-transform: uppercase; padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-mine-tag { flex: none; padding: 3px 8px 2px; border-radius: 999px; background: #ffd54a; color: #1a1400; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.sp-card .event-meta { position: relative; z-index: 2; margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.sp-card .poster { position: relative; margin: 12px 0 4px; }
.sp-card .poster-logo { width: 76px; height: 76px; padding: 8px; }
.sp-card .poster-side strong { font-size: 20px; }
.sp-card .poster-score { font-size: 64px; }
.sp-card .poster-vs { font-size: 52px; }
.sp-card .poster-time { font-size: 17px; }
.sp-time { position: relative; margin-top: 10px; }
.sp-bar { display: block; height: 6px; border-radius: 99px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.sp-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); transition: width .6s ease; }
.sp-goal { position: relative; z-index: 3; width: fit-content; margin: 12px auto 0; padding: 5px 12px 2px; border-radius: 8px; background: #ffd54a; color: #1a1400;
  font: 400 20px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 0 24px rgba(255, 213, 74, .5); animation: sp-pop 1.1s ease-in-out infinite; }
@keyframes sp-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.sp-card.is-scored .poster-score { animation: sp-goal 1.1s ease-in-out infinite; }
@keyframes sp-goal { 0%, 100% { color: #fff; } 50% { color: #ffd54a; text-shadow: 0 0 26px rgba(255, 213, 74, .95), 0 6px 20px rgba(0, 0, 0, .35); } }
.hero-card[data-clash]:not(.clash-done).is-scored .poster-score, .clash-shine { animation: none; }
.sp-next { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, .28); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.sp-next span { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.sp-dots { position: relative; display: flex; justify-content: center; gap: 6px; margin: 0 0 4px; }
.sp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: width .2s; }
.sp-dots i.is-on { width: 18px; border-radius: 3px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .sp-dot, .sp-goal, .sp-card.is-scored .poster-score { animation: none; } }

/* palmarès en tête du direct, une fois le tournoi fini */
.sp-podium { margin: 0 0 16px; padding: 16px; border-radius: 24px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 213, 74, .18), transparent 60%), var(--sp-panel); }
.sp-podium ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; }
.sp-podium li { display: grid; justify-items: center; align-content: start; gap: 6px; }
.sp-podium li b { font: 400 30px/1 var(--display); }
.sp-podium li.is-1 b { color: #ffd54a; }
.sp-podium li strong { font: 400 18px/1 var(--display); text-transform: uppercase; }
.sp-podium li.is-mine strong { color: #ffd54a; }

/* bandeau des résultats */
.sp-ticker { display: flex; align-items: stretch; margin: 4px 0 6px; border-radius: 12px; overflow: hidden; background: #040506; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sp-ticker-label { display: grid; place-items: center; padding: 3px 12px 0; background: var(--club); color: var(--club-ink); font: 400 16px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; }
.sp-ticker-view { flex: 1; overflow: hidden; }
.sp-ticker-track { display: inline-flex; gap: 26px; padding: 9px 0 8px 14px; white-space: nowrap; animation: sp-scroll 50s linear infinite; }
.sp-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.sp-tick b { color: var(--ink); font-weight: 700; }
.sp-tick em { font: normal 400 19px/1 var(--display); color: #fff; padding-top: 2px; }
@keyframes sp-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-ticker-track { animation: none; } .sp-ticker-view { overflow-x: auto; } }

/* programme façon programme télé */
.sp-grid-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; }
.sp-grid { position: relative; display: grid; grid-template-columns: 48px repeat(var(--cols), minmax(104px, 1fr)); gap: 4px; }
.sp-g-corner, .sp-g-time { position: sticky; left: 0; z-index: 3; background: var(--sp-bg); }
.sp-g-head { display: grid; place-items: center; min-height: 34px; padding: 3px 6px 0; border-radius: 10px; background: var(--sp-panel);
  font: 400 15px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.sp-g-time { padding-top: 7px; font: 400 16px/1 var(--display); color: var(--ink-3); }
.sp-g-slot { display: grid; gap: 4px; min-width: 0; }
.sp-cell { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 5px 7px; border-radius: 10px; background: var(--sp-panel); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: opacity .2s; }
.sp-cell small { overflow: hidden; font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.sp-c-team { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12px; font-weight: 700; }
.sp-c-team > span:not(.sp-logo) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-c-team .sp-tbd + span { color: var(--ink-3); font-weight: 600; }
.sp-c-team b { font: 400 17px/1 var(--display); padding-top: 2px; }
.sp-c-team.is-winner > span:not(.sp-logo) { color: #fff; }
.sp-cell.is-termine { opacity: .55; }
.sp-cell.is-en_cours { background: color-mix(in srgb, var(--club) 22%, var(--sp-panel)); box-shadow: inset 0 0 0 1px var(--club), 0 0 18px color-mix(in srgb, var(--club) 30%, transparent); }
.sp-cell.is-mine { box-shadow: inset 0 0 0 2px #ffd54a; opacity: 1; }
.sp-grid.is-mine-only .sp-cell[data-mine="0"] { opacity: .14; }
.sp-now { position: absolute; left: 0; right: 0; z-index: 4; height: 2px; background: var(--club); box-shadow: 0 0 12px var(--club); pointer-events: none; }
.sp-now span { position: absolute; left: 0; top: -9px; padding: 3px 5px 1px; border-radius: 5px; background: var(--club); color: var(--club-ink); font: 400 13px/1 var(--display); }

/* classements */
.sp-phase-title { margin: 14px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.sp-table { width: 100%; margin: 0 0 12px; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.sp-table caption { padding: 0 0 2px; text-align: left; font: 400 20px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
.sp-table caption small { margin-left: 8px; font: 700 10px/1 var(--font); letter-spacing: .6px; color: var(--ink-3); }
.sp-table th { padding: 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-align: left; text-transform: uppercase; color: var(--ink-3); }
.sp-table td { padding: 6px; background: var(--sp-panel); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-table td:first-child { border-radius: 10px 0 0 10px; }
.sp-table td:last-child { border-radius: 0 10px 10px 0; text-align: right; }
.sp-rk { width: 26px; text-align: center; font: 400 19px/1 var(--display); }
.sp-rk sup { font: 700 10px/1 var(--font); color: var(--ink-3); }
.sp-tm { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sp-tm .sp-logo { display: inline-block; vertical-align: -4px; margin-right: 6px; }
/* .sp-ini a besoin de rester un conteneur grid pour centrer ses initiales (place-items), perdu en display:
   inline-block ci-dessus : inline-grid garde ce centrage tout en acceptant vertical-align comme le logo,
   au lieu de retomber 8 px plus bas, sans le centrage, comme une image (défaut relevé par l'audit : VPC-D09) */
.sp-tm .sp-ini { display: inline-grid; }
.sp-pts { font: 400 21px/1 var(--display); }
.sp-zone { padding: 3px 7px 2px; border-radius: 6px; font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.sp-table tr.is-q .sp-zone { background: var(--yes-bg); color: var(--yes); }
.sp-table tr.is-c .sp-zone { background: rgba(255, 255, 255, .06); color: var(--ink-3); }
.sp-table tr.is-mine td { background: color-mix(in srgb, #ffd54a 13%, var(--sp-panel)); }
.sp-table tr.is-unknown td { color: var(--ink-3); }
@media (max-width: 480px) { .sp-table .sp-hide-xs { display: none; } }

/* tableau et palmarès */
.sp-panel-tableau .to-bracket-wrap { margin-bottom: 18px; }
.sp-podium-big { margin-bottom: 18px; }

/* l'équipe suivie */
.sp-team-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.sp-team-head h2 { margin: 0; font: 400 32px/.95 var(--display); text-transform: uppercase; overflow-wrap: break-word; text-wrap: balance; }
.sp-team-head .btn { margin-left: auto; }
.sp-team-card { margin: 0 0 14px; padding: 16px; border-radius: 26px; }
.sp-team-card.is-next { color: var(--ink); background: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(180deg, #16171b, #0a0b0e);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffd54a 40%, transparent), 0 16px 34px rgba(0, 0, 0, .4); }
.sp-team-card.is-next::before { display: none; }
.sp-team-card .event-meta { position: relative; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.sp-team-card .poster-logo { width: 80px; height: 80px; }
.sp-team-card.is-next .poster-time { background: rgba(255, 255, 255, .08); }
.sp-team-card-foot { position: relative; margin: 6px 0 0; text-align: center; font-size: 13px; opacity: .85; }
.sp-stats { margin-bottom: 4px; }

/* première visite : qui supportez-vous ? */
.sp-picker { padding: 10px 0 20px; text-align: center; }
.sp-picker h2 { margin: 6px 0 6px; font: 400 44px/.92 var(--display); text-transform: uppercase; }
.sp-picker-sub { max-width: 440px; margin: 0 auto 14px; font-size: 14px; color: var(--ink-2); text-wrap: balance; }
.sp-search { width: 100%; max-width: 440px; margin: 0 auto 14px; display: block; }
.sp-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; text-align: center; }
.sp-pick { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px; border-radius: 18px; background: #15161a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.2; overflow-wrap: break-word; text-wrap: balance; }
.sp-pick:hover, .sp-pick.is-current { box-shadow: inset 0 0 0 2px #ffd54a; }
.sp-skip { display: inline-block; margin-top: 18px; color: var(--ink-2); font-size: 14px; }

/* direct sur téléphone et dans l'application : la suite et les derniers résultats en liste */
.sp-list-block { margin: 18px 0 0; }
.sp-list-title { margin: 0 0 8px; font: 400 24px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; }
.sp-list-time { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; font: 400 20px/1 var(--display); color: var(--ink-2); }
.sp-list-title + .sp-list-time { margin-top: 0; }
.sp-list-time span { font: 800 10px/1 var(--font); letter-spacing: .8px; text-transform: uppercase; color: #ffd54a; }
.sp-lines { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.sp-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--sp-panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.sp-line.is-mine { box-shadow: inset 0 0 0 2px #ffd54a; }
.sp-line.is-en_cours { background: color-mix(in srgb, var(--club) 22%, var(--sp-panel)); box-shadow: inset 0 0 0 1px var(--club); }
.sp-line-meta { display: grid; gap: 2px; min-width: 0; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); }
.sp-line-meta small { overflow: hidden; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.sp-line-live { color: #fff; }
.sp-line-teams { display: grid; gap: 4px; min-width: 0; }
.sp-line-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sp-line-team > span:not(.sp-logo) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-line-team.is-winner { color: #fff; font-weight: 700; }
.sp-line-team.is-unknown { color: var(--ink-3); }
.sp-line-team b { font: 400 22px/1 var(--display); padding-top: 2px; color: #fff; }
.sp-line-team b small { margin-left: 3px; font-size: 14px; color: var(--ink-3); }
.sp-logo.is-sm { width: 24px; height: 24px; padding: 2px; }
.sp-ini.is-sm { font-size: 10px; }
.sp-list-more { display: block; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.sp-ticker, .sp-tv-only { display: none; }
.sp-countdown.is-soon b { font-size: 17px; padding-top: 6px; }
.sp-countdown.is-soon small { display: none; }
.sp-g-time.is-under-now { visibility: hidden; }

/* grand écran : la télé du club-house. ecran.js pose .sp-tv et met à l'échelle une scène d'au moins 1440 × 1080
   points ; chaque zone garde une taille fixe et tournoi.js y range, par pages, ce qui tient. Rien ne dépasse. */
.sp-tv, .sp-tv body { height: 100%; overflow: hidden; }
.sp-tv .sp-body { min-height: 0; padding: 0; }
.sp-tv .sp-stage { position: absolute; left: 0; top: 0; width: var(--tv-w); height: var(--tv-h); display: flex; flex-direction: column; overflow: hidden;
  transform: scale(var(--tv-s)); transform-origin: 0 0; }
.sp-tv .sp-head { position: relative; flex: none; width: 100%; max-width: none; margin: 0; padding: 22px 44px 12px; }
.sp-tv .sp-head-left { gap: 16px; max-width: calc(100% - 820px); }
.sp-tv .sp-head .crest-img.sp-crest { width: 56px; height: 68px; }
.sp-tv .sp-head .crest.sp-crest { width: 66px; height: 66px; }
.sp-tv .sp-head small { font-size: 15px; letter-spacing: 1.4px; }
.sp-tv .sp-head h1 { font-size: 50px; }
.sp-tv .sp-clock { min-width: 190px; padding: 7px 18px 1px; text-align: center; font-size: 56px; }
.sp-tv .sp-main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0 44px 30px; display: flex; flex-direction: column; }
.sp-tv [data-refresh-target], .sp-tv .sp-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sp-tv .demo-banner { flex: none; }
.sp-tv .sp-foot { position: absolute; right: 44px; bottom: 7px; margin: 0; font-size: 13px; }
/* l'état du tournoi rejoint l'en-tête, à gauche de l'horloge */
.sp-tv .sp-status { position: absolute; top: 38px; right: 258px; max-width: 520px; margin: 0; justify-content: flex-end; }
.sp-tv .sp-status-txt { font-size: 19px; }
.sp-tv .sp-livepill, .sp-tv .sp-status .sp-pill { padding: 7px 14px 6px; font-size: 14px; }
.sp-tv .sp-follow, .sp-tv .sp-tabs, .sp-tv .sp-dots, .sp-tv .sp-panel-equipe, .sp-tv .sp-list-block, .sp-tv .sp-seg,
.sp-tv .to-bracket-wrap, .sp-tv .sp-podium-big, .sp-tv .sp-panel-tableau > .sp-sec-head:not(.sp-tv-only) { display: none !important; }
.sp-tv .sp-tv-only { display: block; }
.sp-tv .sp-sec-head.sp-tv-only { display: flex; }

/* zones : terrains et résultats en haut ; programme à gauche, classements et tableau à droite */
.sp-tv .sp-panels { flex: 1; min-height: 0; display: grid; gap: 20px 34px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "direct direct" "prog side"; }
.sp-tv .sp-root:not(.has-side) .sp-panels { grid-template-areas: "direct direct" "prog prog"; }
.sp-tv .sp-panel, .sp-tv .sp-panel.is-off { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; overflow: hidden; }
.sp-tv .sp-panel.is-tv-off, .sp-tv .is-tv-off { display: none !important; }
.sp-tv .sp-panel-direct { grid-area: direct; overflow: visible; }
.sp-tv .sp-panel-programme { grid-area: prog; }
.sp-tv .sp-panel-classements, .sp-tv .sp-panel-tableau { grid-area: side; }
.sp-tv .sp-sec-head { flex: none; margin: 0 0 10px; }
.sp-tv .sp-sec-head h2 { font-size: 38px; }
.sp-tv .sp-tv-page { margin-left: auto; font: 700 16px/1 var(--font); letter-spacing: 1px; color: var(--ink-3); }

/* terrains */
.sp-tv .sp-boards { display: grid; grid-template-columns: repeat(var(--tv-cards, 3), minmax(0, 600px)); justify-content: center; gap: 22px;
  margin: 0; padding: 0; overflow: visible; }
.sp-tv .sp-card { padding: 16px 24px 14px; border-radius: 28px; }
.sp-tv .sp-card.is-page-off { display: none; }
.sp-tv .sp-card.is-mine { outline: 0; }
.sp-tv .sp-mine-tag { display: none; }
.sp-tv .sp-field { font-size: 32px; }
.sp-tv .sp-card-top .sp-livepill, .sp-tv .sp-card-top .sp-pill { padding: 6px 12px 5px; font-size: 13px; }
.sp-tv .sp-card .event-meta { margin-top: 2px; font-size: 15px; }
.sp-tv .sp-card .poster { margin: 10px 0 2px; row-gap: 8px; }
.sp-tv .sp-card .poster-logo { width: 92px; height: 92px; padding: 9px; }
.sp-tv .sp-card .poster-side strong { font-size: 25px; }
.sp-tv .sp-card .poster-score { font-size: 86px; }
.sp-tv .sp-card .poster-vs { font-size: 66px; }
.sp-tv .sp-card .poster-time { font-size: 21px; padding: 7px 14px 4px; white-space: nowrap; }
.sp-tv .sp-bar { height: 8px; }
.sp-tv .sp-card > .sp-time { padding-top: 8px; }
.sp-tv .sp-goal { margin-top: 8px; font-size: 26px; padding: 7px 16px 3px; }
.sp-tv .sp-next { margin-top: 10px; padding-top: 8px; font-size: 17px; }
.sp-tv .sp-next span { font-size: 12px; }
.sp-tv .sp-wait { font-size: 17px; }
.sp-tv .sp-podium { margin: 0; padding: 18px 26px; }
.sp-tv .sp-podium ol { grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 30px; }
.sp-tv .sp-podium li b { font-size: 40px; }
.sp-tv .sp-podium li strong { font-size: 30px; }
.sp-tv .sp-podium .sp-logo.is-lg { width: 96px; height: 96px; }

/* bandeau des résultats */
.sp-tv .sp-ticker { display: flex; margin: 16px 0 0; }
.sp-tv .sp-ticker-label { padding: 5px 20px 0; font-size: 24px; }
.sp-tv .sp-ticker-track { gap: 34px; padding: 11px 0 10px 18px; }
.sp-tv .sp-tick { gap: 10px; font-size: 17px; }
.sp-tv .sp-tick em { font-size: 27px; }
.sp-tv .sp-tick .sp-logo.is-xs { width: 26px; height: 26px; }

/* programme */
.sp-tv .sp-days { display: none; }
.sp-tv .sp-grid-wrap { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.sp-tv .sp-grid { grid-template-columns: 76px repeat(var(--tv-cols, var(--cols)), minmax(0, 1fr)); gap: 6px; }
.sp-tv .sp-g-corner, .sp-tv .sp-g-time { position: static; background: none; }
.sp-tv .sp-g-head { min-height: 44px; font-size: 21px; }
.sp-tv .sp-g-time { padding-top: 10px; font-size: 24px; }
.sp-tv .sp-cell { padding: 7px 11px; gap: 3px; }
.sp-tv .sp-cell small { font-size: 11px; }
.sp-tv .sp-c-team { gap: 8px; font-size: 17px; }
.sp-tv .sp-c-team .sp-logo.is-xs { width: 24px; height: 24px; padding: 2px; }
.sp-tv .sp-c-team b { font-size: 23px; }
.sp-tv .sp-now span { top: -11px; padding: 4px 7px 2px; font-size: 17px; }
.sp-tv .sp-panel-programme > .sp-wait { margin-top: 30px; }

/* classements et tableau final, colonne de droite */
.sp-tv [data-tv-items] { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sp-tv .sp-phase-title { margin: 0 0 4px; font-size: 13px; }
.sp-tv .sp-table { margin: 0 0 12px; border-spacing: 0 4px; font-size: 17px; }
.sp-tv .sp-table caption { font-size: 25px; }
.sp-tv .sp-table caption small { font-size: 12px; }
.sp-tv .sp-table th { font-size: 12px; }
.sp-tv .sp-table td { padding: 6px 10px; }
.sp-tv .sp-rk { width: 34px; font-size: 24px; }
.sp-tv .sp-pts { font-size: 25px; }
.sp-tv .sp-zone { padding: 4px 8px 3px; font-size: 12px; }
.sp-tv .sp-table .sp-logo.is-xs { width: 26px; height: 26px; padding: 2px; vertical-align: -6px; margin-right: 9px; }
.sp-tv .is-dense .sp-table { margin-bottom: 8px; border-spacing: 0 3px; font-size: 15px; }
.sp-tv .is-dense .sp-table caption { font-size: 22px; }
.sp-tv .is-dense .sp-table td { padding: 3px 10px; }
.sp-tv .is-dense .sp-rk { font-size: 20px; }
.sp-tv .is-dense .sp-pts { font-size: 21px; }
.sp-tv .is-dense .sp-table .sp-logo.is-xs { width: 22px; height: 22px; vertical-align: -5px; }
.sp-tv .sp-round { margin: 0 0 14px; }
.sp-tv .sp-lines.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-tv .sp-line { grid-template-columns: 1fr; gap: 6px; padding: 9px 14px; }
.sp-tv .sp-line-meta { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.sp-tv .sp-line-meta small { font-size: 13px; }
.sp-tv .sp-line-team { font-size: 18px; }
.sp-tv .sp-line-team .sp-logo.is-sm { width: 28px; height: 28px; }
.sp-tv .sp-line-team b { font-size: 26px; }

/* planning : « Terrain fermé » sous « + Match », séparé pour éviter un appui par erreur */
.plan-close { margin: 0; }

/* fiche d'un événement : présence du staff (présent par défaut) et réponses données pour un joueur */
.staff-presence { display: grid; gap: 10px; }
.staff-presence-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.staff-presence-text { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.staff-presence-text strong { font: 400 20px/1 var(--display); text-transform: uppercase; letter-spacing: .4px; padding-top: 3px; }
.staff-presence-text small { color: var(--ink-3); font-size: 13px; }
.board-fix summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 6px 0; }
.board-fix[open] summary { margin-bottom: 8px; }

/* compteurs de réponses : toujours quatre cases sur une ligne, même sur téléphone */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; }
.card > .counts { padding: 0; }
.counts .c { min-width: 0; padding: 6px 6px 5px; }
.counts .c small { white-space: normal; line-height: 1.1; }
@media (max-width: 480px) { .event > .counts { padding-left: 12px; } }

/* note de match : trois choix séparés (point fort, point faible, à travailler), chacun replié une fois rempli */
.note-picks { display: grid; gap: 10px; margin: 4px 0 14px; }
.note-pick { border-radius: 18px; background: var(--inset); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.note-pick > summary {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; list-style: none; cursor: pointer;
}
.note-pick > summary::-webkit-details-marker { display: none; }
.note-pick-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; color: #fff; }
.note-pick-fort .note-pick-mark { background: var(--note-fort); }
.note-pick-travailler .note-pick-mark { background: var(--note-travailler); }
.note-pick-faible .note-pick-mark { background: var(--note-faible); }
.note-pick-title { display: flex; flex-direction: column; min-width: 0; flex: none; }
.note-pick-title strong { font-size: 15px; line-height: 1.2; }
.note-pick-title small { font-size: 12px; color: var(--ink-3); }
.note-pick-value { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.note-pick[open] .note-pick-value { color: var(--ink-3); font-weight: 500; }
.note-pick-change { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); }
.note-pick-change svg { width: 14px; height: 14px; }
.note-pick[open] .note-pick-change { transform: rotate(0); opacity: .5; }
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
.note-chip { position: relative; display: inline-flex; }
.note-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.note-chip span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 15px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); font: 500 14px/1 var(--font); user-select: none;
}
.note-chip input:checked + span { color: #fff; font-weight: 600; }
.note-chip input:checked + span::before { content: "✓"; font-size: 13px; }
.note-pick-fort .note-chip input:checked + span { background: var(--note-fort); }
.note-pick-travailler .note-chip input:checked + span { background: var(--note-travailler); }
.note-pick-faible .note-chip input:checked + span { background: var(--note-faible); }
.note-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.note-chip input:disabled { cursor: not-allowed; }
.note-chip input:disabled + span { opacity: .4; }
.note-chip input[data-taken] + span { opacity: .3; text-decoration: line-through; }  /* déjà choisi dans une autre ligne */
.note-pick-error { margin: -4px 14px 12px; color: var(--no); font-size: 13px; font-weight: 600; }

/* ================================================================== plateaux : plusieurs matchs dans une convocation */

/* ------------------------------------------------ affiche : deux duels empilés */
.duels { display: grid; gap: 10px; margin: 14px 0 8px; }
.duel {
  position: relative; padding: 12px 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .26));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.duel-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 8px; min-width: 0; }
.duel-team { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-align: center; }
.duel-logo {
  width: 54px; height: 54px; border-radius: 50%; object-fit: contain; background: #fff; padding: 7px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .22), 0 0 0 7px rgba(255, 255, 255, .10), 0 10px 20px rgba(0, 0, 0, .32);
}
.duel-logo.is-tbd {
  display: grid; place-items: center; padding: 3px 0 0; color: rgba(255, 255, 255, .8);
  background: radial-gradient(circle at 50% 35%, #2c2d33, #111216); font: 400 26px/1 var(--display);
}
.duel-nm { max-width: 100%; font: 400 16px/.95 var(--display); letter-spacing: .4px; text-transform: uppercase; }
.duel-nm.is-tbd { opacity: .72; }
.duel-mid { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; margin-top: -10px; }
.duel-vs { font: 400 38px/.85 var(--display); text-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.duel-score { font: 400 42px/.85 var(--display); white-space: nowrap; text-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.duel-score i { font-style: normal; opacity: .55; margin: 0 4px; }
/* l'heure sous le VS, comme sur l'affiche d'un match : le duel reste symétrique */
.duel-time {
  font: 400 17px/1 var(--display); letter-spacing: .5px; white-space: nowrap; padding: 6px 11px 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.duel-time.is-tbd { font-size: 12px; font-family: var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; padding: 5px 10px 4px; }
.duel-res, .duel-live {
  font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
  padding: 4px 9px 3px; border-radius: 999px; background: rgba(0, 0, 0, .34);
}
.duel-res.is-w { color: color-mix(in srgb, var(--win) 25%, white); box-shadow: inset 0 0 0 1.5px var(--win); }
.duel-res.is-l { color: color-mix(in srgb, var(--loss) 25%, white); box-shadow: inset 0 0 0 1.5px var(--loss); }
.duel-res.is-n { color: #e7e8ec; box-shadow: inset 0 0 0 1.5px var(--draw); }
.duel-live { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #15161a; }
.duel-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--club); animation: duel-pulse 1.4s ease-in-out infinite; }
@keyframes duel-pulse { 50% { opacity: .25; } }
.duel.is-live { background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .34)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 10px 26px rgba(0, 0, 0, .25); }
.duel.is-done { background: rgba(0, 0, 0, .16); }
/* une ligne sous les duels : format du plateau */
.duels-format { margin: 2px 0 0; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; opacity: .8; }
/* bilan de la matinée, après le plateau */
.duels-bilan {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 2px; padding: 10px 14px;
  border-radius: 18px; background: rgba(0, 0, 0, .22);
}
.duels-bilan .eq-f { width: 30px; height: 30px; font-size: 17px; }
.duels-bilan p { margin: 0; line-height: 1.2; text-align: left; }
.duels-bilan strong { display: block; font: 400 21px/1 var(--display); letter-spacing: .4px; text-transform: uppercase; padding-top: 2px; }
.duels-bilan small { font-size: 12px; opacity: .85; }
@media (min-width: 640px) {
  .duel { padding: 14px 16px; }
  .duel-logo { width: 68px; height: 68px; padding: 9px; }
  .duel-nm { font-size: 20px; }
  .duel-vs { font-size: 48px; }
  .duel-score { font-size: 54px; }
  .duel-time { font-size: 19px; }
}

/* ------------------------------------------------ score du plateau (coach) : un onglet par match */
.duel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 12px; }
.duel-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px 7px; border: 0; border-radius: 14px;
  background: var(--surface-2); color: var(--ink-2); font: inherit; text-align: left; box-shadow: inset 0 0 0 1px var(--line-2);
}
.duel-tab { min-width: 0; }
.duel-tab strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 18px/1 var(--display); letter-spacing: .4px; text-transform: uppercase; padding-top: 2px; }
/* « En cours · Adversaire » se coupait en « En cours · Adversa… » dans un onglet étroit (4 matchs de plateau) :
   passe à deux lignes plutôt que de perdre le nom de l'adversaire (défaut relevé par l'audit : VM-D08) */
.duel-tab small { max-width: 100%; font-size: 12px; color: var(--ink-3); white-space: normal; line-height: 1.25; }
.duel-tab[aria-selected="true"] { background: var(--ink); color: #15161a; box-shadow: none; }
.duel-tab[aria-selected="true"] small { color: #4a4d55; }
.duel-tab .ok { color: var(--win); font-weight: 700; }

/* ------------------------------------------------ agenda : les deux matchs dans la carte */
.event-duos { display: grid; gap: 3px; margin-top: 5px; }
.event-duos span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.event-duos b { flex: none; min-width: 44px; font: 400 16px/1 var(--display); letter-spacing: .4px; color: var(--ink); padding-top: 2px; }
.event-duos img { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
/* sans min-width:0, l'adversaire refusait de se réduire et tout l'espace manquant retombait sur le score,
   qui se coupait sur deux lignes faute de flex:none (défaut relevé par l'audit : VM-D01) */
.event-duos em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pill-duo { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px 1px; border-radius: 999px; background: color-mix(in srgb, var(--club) 22%, transparent); color: color-mix(in srgb, var(--club) 70%, #fff); margin-left: 6px; }

/* ------------------------------------------------ page équipe : une ligne par plateau, deux résultats */
.eq-row.is-plateau { min-height: 118px; }
.eq-row.is-plateau .eq-node { gap: 5px; }
.eq-plateau-tag { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-3); background: var(--bg); padding: 0 4px; }
.eq-duo-list { position: relative; z-index: 1; display: grid; gap: 10px; min-width: 0; }
.eq-duo-list .eq-side { gap: 8px; }
.eq-duo-list .eq-nm { font-size: 16px; }
.eq-duo-list .eq-crest { width: 28px; height: 28px; }
.eq-row.is-plateau.is-prochain { min-height: 150px; }
.eq-knob.is-duo { font-size: 20px; }

/* ------------------------------------------------ formulaire : les matchs du plateau */
.pm-list { display: grid; gap: 8px; }
.pm-row { display: grid; grid-template-columns: 34px 124px minmax(0, 1fr) 40px; gap: 8px; align-items: center; padding: 10px; border-radius: 18px; background: var(--inset); }
.pm-row > input[type="time"] { grid-column: 2; }
.pm-row > .icon-btn { grid-column: 4; }
.pm-row > .pm-opp { grid-column: 1 / -1; grid-row: 2; }
.pm-dur { grid-column: 3; font-size: 12px; color: var(--ink-3); }
.pm-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--club); color: var(--club-ink); font: 400 18px/1 var(--display); padding-top: 2px; }
.pm-row input { min-width: 0; }
.pm-opp { position: relative; }
/* > (enfant direct), pas un descendant quelconque : sinon la règle s'applique aussi aux logos de la liste de
   suggestions (.combo-list, ajoutée comme enfant de .pm-opp), tous empilés au même endroit (défaut relevé
   par l'audit : VPC-D03) */
.pm-opp > img { position: absolute; left: 10px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: #fff; object-fit: contain; padding: 2px; }
.pm-opp:has(> img:not([hidden])) input { padding-left: 42px; }
.pm-add { margin-top: 10px; }
.pm-add[hidden] { display: none; }
.pm-row .icon-btn { width: 40px; height: 40px; }
.pm-sub { grid-column: 1 / -1; margin: -2px 0 0 4px; font-size: 12px; color: var(--ink-3); }

/* onglets de score d'un plateau : sans JavaScript, tous les matchs restent visibles */
.duel-panel + .duel-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.js .duel-panel + .duel-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.duel-panel-title { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); }
.js .duel-panel-title { display: none; }
.no-js-only { display: none; }
.report-match { margin: 14px 0 2px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.report-match:first-of-type { margin-top: 4px; }
.live-score.is-duo { font-size: 18px; white-space: nowrap; }
.event-duos .duo-score { margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--ink); flex: none; white-space: nowrap; }

/* ── Entraînements : bibliothèque d'exercices, schéma de terrain ─────────────────────── */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ex-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-edge); text-decoration: none; color: inherit; }
.ex-card:hover { box-shadow: var(--card-edge), 0 0 0 1px var(--line); }
.ex-card-schema { border-radius: var(--r-sm); overflow: hidden; background: var(--inset); }
.ex-card-nom { font-weight: 700; color: var(--ink); }
.ex-card-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-3); }
.ex-pill { padding: 2px 8px; border-radius: 999px; background: var(--surface); }
.ex-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.ex-filters select { min-width: 140px; }
.ex-a-valider { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
                background: var(--maybe-bg); color: var(--maybe-solid); font-size: 12px; font-weight: 600; }

/* Schéma d'exercice : même terrain que le poste de commande tactique (.tt-pitch), en SVG.
   Les couleurs de pelouse et de lignes sont littérales (c'est un terrain), les joueurs suivent
   le code bleu / orange / jaune du club, jamais vert-rouge. */
.ex-schema { width: 100%; aspect-ratio: var(--ex-ratio, 4 / 3); display: block; }
.ex-gazon { fill: var(--gazon-2); }
.ex-bande { fill: var(--gazon-1); }
.ex-aire { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: .09; }
.ex-zone { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .34); stroke-width: .07; stroke-dasharray: .55 .4; }
.ex-zone-nom { fill: rgba(255, 255, 255, .72); font: 700 .62px/1 var(--font); letter-spacing: .04px;
               paint-order: stroke; stroke: rgba(12, 38, 26, .9); stroke-width: .16px; stroke-linejoin: round; }

/* matériel en jaune, toujours : l'orange est la couleur de l'équipe B, un plot orange se
   confondait avec un joueur */
.ex-cone-base { fill: rgba(0, 0, 0, .3); }
.ex-cone-corps { fill: #ffd54a; filter: url(#ex-ombre); }
.ex-cone-bande { stroke: rgba(255, 255, 255, .85); stroke-width: .1; stroke-linecap: round; }
.ex-cible { fill: rgba(255, 213, 74, .14); stroke: #ffd54a; stroke-width: .08; stroke-dasharray: .3 .2; }
.ex-coupelle-corps { fill: #ffd54a; opacity: .9; }
.ex-porte { stroke: #ffd54a; stroke-width: .07; stroke-dasharray: .28 .22; opacity: .75; }
.ex-coupelle-trou { fill: #1a4a33; }

.ex-ballon-corps { fill: #fff; stroke: rgba(0, 0, 0, .55); stroke-width: .06; filter: url(#ex-ombre); }
.ex-ballon-motif { fill: #14161a; }

.ex-but-filet { fill: rgba(255, 255, 255, .14); }
.ex-but-cadre { fill: none; stroke: #fff; stroke-width: .16; stroke-linejoin: round; stroke-linecap: round; filter: url(#ex-ombre); }
.ex-latte { fill: #ffd54a; stroke: rgba(0, 0, 0, .35); stroke-width: .04; }
.ex-piquet-base { fill: rgba(0, 0, 0, .35); }
.ex-piquet-corps { stroke: #ffd54a; stroke-width: .16; stroke-linecap: round; }
.ex-cerceau { fill: none; stroke: #ffd54a; stroke-width: .14; }

.ex-fleche { fill: none; stroke: #fff; stroke-width: .12; stroke-linecap: round; stroke-linejoin: round; }
.ex-fleche.is-echo { opacity: .4; }
.ex-fleche-course { stroke-dasharray: .55 .38; }
.ex-fleche-dribble { stroke-width: .11; }
.ex-fleche-tir { stroke: #ffd54a; stroke-width: .18; }
.ex-pointe-forme { fill: #fff; }
.ex-pointe-forme-tir { fill: #ffd54a; }

.ex-joueur-disque { stroke: rgba(255, 255, 255, .92); stroke-width: .09; filter: url(#ex-ombre); }
.ex-joueur-reflet { fill: rgba(255, 255, 255, .22); }
.ex-joueur-a .ex-joueur-disque { fill: #2f6fe8; }
.ex-joueur-b .ex-joueur-disque { fill: #f07a1f; }
.ex-joueur-c .ex-joueur-disque { fill: #d8dbe2; }
.ex-gardien .ex-joueur-disque { fill: #f5c518; }
.ex-joueur.is-attente { opacity: .5; }
.ex-joueur.is-attente .ex-joueur-disque { stroke-dasharray: .22 .14; }

/* pastille d'étape : le même numéro que la consigne qu'elle illustre */
.ex-etape circle { fill: #fff; stroke: #14161a; stroke-width: .07; filter: url(#ex-ombre); }
.ex-etape text { fill: #14161a; font: 800 .6px/1 var(--font); text-anchor: middle; }

/* légende : seulement les symboles réellement présents dans le dessin */
.ex-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.ex-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ex-leg-ico { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ex-leg-joueur-a { background: #2f6fe8; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.ex-leg-joueur-b { background: #f07a1f; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.ex-leg-joueur-c { background: #d8dbe2; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.ex-leg-gardien { background: #f5c518; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.ex-leg-cone { width: 0; height: 0; border-radius: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #ffd54a; }
.ex-leg-cible { position: relative; width: 18px; height: 18px; border: 1.5px dashed #ffd54a; background: rgba(255, 213, 74, .14); }
.ex-leg-cible::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%);
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 9px solid #ffd54a; }
.ex-leg-coupelle { width: 14px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 3px solid #ffd54a; background: none; }
.ex-leg-attente { background: #d8dbe2; opacity: .55; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.ex-leg-etape { display: grid; place-items: center; width: 16px; height: 16px; background: #fff; color: #14161a; font: 800 10px/1 var(--font); }
.ex-leg-etape::before { content: "1"; }
.ex-leg-ballon { background: #fff; box-shadow: inset 0 0 0 1.5px #14161a; }
.ex-leg-but { border-radius: 0; background: none; box-shadow: inset 0 2px 0 #fff, inset 2px 0 0 #fff, inset -2px 0 0 #fff; }
.ex-leg-cerceau { background: none; box-shadow: inset 0 0 0 2px #ffd54a; }
.ex-leg-latte { height: 5px; border-radius: 2px; background: #ffd54a; }
.ex-leg-piquet { width: 3px; height: 14px; border-radius: 2px; background: #ffd54a; }
.ex-leg-fleche-passe, .ex-leg-fleche-course, .ex-leg-fleche-tir {
  width: 22px; height: 0; border-radius: 0; border-top: 2px solid var(--ink-2); }
.ex-leg-fleche-course { border-top-style: dashed; }
.ex-leg-fleche-tir { border-top-width: 3px; border-top-color: #ffd54a; }
/* la conduite est une vague dans le dessin : la légende montre une vague, pas des pointillés */
.ex-leg-fleche-dribble { width: 22px; height: 8px; border-radius: 0; background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 4 Q3.5 0.5 6 4 T11 4 T16 4 T21 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M1 4 Q3.5 0.5 6 4 T11 4 T16 4 T21 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

.ex-detail-grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 720px) { .ex-detail-grid { grid-template-columns: 1fr; } }
/* consignes numérotées en pastilles, les mêmes que sur le schéma : le texte et le dessin se
   répondent numéro par numéro */
.ex-consignes, .sb-consignes { list-style: none; padding-left: 0; counter-reset: consigne; }
.ex-consignes li, .sb-consignes li { position: relative; padding-left: 30px; counter-increment: consigne; }
.ex-consignes li::before, .sb-consignes li::before {
  content: counter(consigne); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #14161a; font: 800 11px/1 var(--font); }
.ex-consignes { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ex-variantes { display: grid; gap: 10px; margin-top: 10px; }
.ex-variante { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); }
.ex-variante b { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; }
.ex-securite { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--no-bg); color: var(--no); font-size: 13px; }
.ex-materiel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Séance : le plateau du coach (un bloc par carte) ────────────────────────────────── */
.sb-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 0 18px; }
.sb-head h1 { margin: 0 0 6px; }
.sb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 13px; color: var(--ink-3); }
.sb-statut { padding: 1px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-weight: 600; }
.sb-statut.is-prête { background: var(--yes-bg); color: var(--yes); }
.sb-statut.is-faite { background: var(--wait-bg); color: var(--wait); }
.sb-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.sb-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sb-bloc { position: relative; padding: 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-edge); }
.sb-bloc.is-vide { background: none; box-shadow: inset 0 0 0 2px var(--line-2); }
.sb-bloc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-bloc-head h2 { margin: 0; font-size: 20px; }
.sb-bloc-minutes {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; flex: none;
  background: var(--inset); color: var(--ink); font: 400 24px/1 var(--display); padding-top: 4px;
}
.sb-bloc-minutes small { font: 500 10px/1 var(--font); color: var(--ink-3); letter-spacing: .5px; }
.sb-bloc-body { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .sb-bloc-body { grid-template-columns: 1fr; } }
.sb-schema { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--inset); text-decoration: none; }
.sb-schema:hover { box-shadow: 0 0 0 2px var(--club); }
.sb-bloc-texte h3 { margin: 0 0 4px; font-size: 17px; }
.sb-objectif { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.sb-consignes { margin: 10px 0 0; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.sb-consignes li::before { top: 0; }
.sb-schema-col .ex-legende { margin-top: 8px; font-size: 11.5px; gap: 5px 12px; }
.sb-securite ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.sb-variante { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.sb-variante select { min-width: 140px; }
.sb-variante-texte { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.sb-securite { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--r-sm);
               background: var(--no-bg); color: var(--no); font-size: 13px; }
.sb-securite svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.sb-vide-corps { color: var(--ink-3); }
.sb-vide-corps p { margin: 0 0 10px; }
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sb-dispo { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); }
.sb-note { display: flex; gap: 8px; margin-top: 12px; }
.sb-note input { flex: 1; }
.sb-materiel { margin-top: 18px; }
.sb-reglages { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); }
.sb-reglages summary { cursor: pointer; font-weight: 600; }
.sb-reglages .form { margin-top: 14px; }

/* choisir l'exercice d'un bloc : une grille de fiches dessinées, jamais une liste déroulante */
.sb-pick-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 14px;
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sb-pick { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-edge); }
.sb-pick.is-hors { opacity: .72; }
.sb-pick h3 { margin: 4px 0 0; font-size: 16px; }
.sb-pick-schema { border-radius: var(--r-sm); overflow: hidden; background: var(--inset); }
.sb-pick-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.sb-pick-actions .btn { white-space: nowrap; }
.sb-pick-actions .btn[disabled] { opacity: .55; pointer-events: none; }

/* séance vue depuis la fiche d'un entraînement de l'agenda */
.sea-card { padding: 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-edge); }
.sea-card.is-vide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
                    background: none; box-shadow: inset 0 0 0 2px var(--line-2); }
.sea-card h2 { margin: 0 0 2px; font-size: 19px; }
.sea-card .sub { margin: 0; font-size: 13px; color: var(--ink-3); }
.sea-card-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sea-liste { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.sb-passe { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.sb-passe.is-neuf { color: var(--yes); font-weight: 600; }
.sb-neufs { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px;
            background: var(--yes-bg); color: var(--yes); font-size: 13px; font-weight: 600; }
.sb-neufs svg { width: 15px; height: 15px; }
.sb-groupes, .sb-hors-cadre { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; padding: 3px 10px;
                              border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.sb-groupes { background: var(--yes-bg); color: var(--yes); }
.sb-hors-cadre { background: var(--no-bg); color: var(--no); }
.sb-groupes svg, .sb-hors-cadre svg { width: 14px; height: 14px; flex: none; }

/* ---- Exercices du club, adaptation d'un bloc, éditeur de schéma (schema-editor.js) ---- */
.ex-pill-club { background: var(--yes-bg); color: var(--yes); font-weight: 600; }
.ex-pill-adapte { background: var(--maybe-bg); color: var(--maybe); font-weight: 600; }
.ex-origine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: var(--ink-3); }
.ex-origine .ex-pill { font-size: 12px; }
.ex-utiliser { display: grid; gap: 10px; margin: 0 0 20px; padding: 16px; border-radius: var(--r); background: var(--card); box-shadow: var(--card-edge); }
.ex-utiliser h2 { margin: 0; font-size: 22px; line-height: 1; text-transform: uppercase; }
.ex-utiliser .hint { margin: 0; }
.ex-utiliser-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex-utiliser-form select { flex: 1 1 260px; min-width: 0; }
.ex-utiliser-nouvelle { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-gestion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.page-head:has(> .btn) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sb-marques { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12px; }
.sb-creer { margin: 8px 0 0; }

.se-erreurs ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.se-chiffres { align-items: end; }
.se-effectif { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.se-espace { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.se-espace .field { width: 110px; }
.se-espace-effectif { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.se-espace-effectif .se-effectif { width: 240px; }
.se-zones { display: flex; flex-wrap: wrap; gap: 6px; }
.se-zones .chip { min-height: 36px; font-size: 13px; }
.se-atelier { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .se-atelier { grid-template-columns: 1fr; } }
.se { display: grid; gap: 10px; min-width: 0; }
.se-barre { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.se-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.se-groupe-titre { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.se-groupe-fin { margin-left: auto; align-self: flex-end; }
.se-outil { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 10px 4px 6px; border: 0; border-radius: 999px;
  background: var(--inset); color: var(--ink-2); font: 600 13px/1 var(--font); cursor: pointer; }
.se-outil:hover { color: var(--ink); background: var(--surface-2); }
.se-outil[aria-pressed="true"] { background: var(--club); color: var(--club-ink); box-shadow: var(--glow); }
.se-outil:focus-visible { outline: 2px solid var(--club); outline-offset: 2px; }
.se-glyphe { width: 20px; height: 20px; flex: none; }
.se-glyphe .g-plein { fill: currentColor; }
.se-glyphe .g-trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.se-glyphe .g-tirets { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 2.5; }
.se-glyphe .g-epais { stroke-width: 3.4; }
.se-glyphe .g-bleu { fill: #2f6fe8; stroke: #fff; stroke-width: 1.6; }
.se-glyphe .g-orange { fill: #f07a1f; stroke: #fff; stroke-width: 1.6; }
.se-glyphe .g-jaune { fill: #f5c518; }
.se-glyphe .g-jaune-trait { stroke: #f5c518; stroke-width: 2.6; }
.se-glyphe .g-blanc { fill: #fff; stroke: #14161a; stroke-width: 1.4; }
.se-aide { margin: 0; min-height: 1.3em; font-size: 13px; color: var(--ink-3); }
.se-terrain-cadre { border-radius: var(--r-sm); overflow: hidden; background: #17442f; }
.se-terrain { display: block; width: 100%; height: auto; max-height: 70vh; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.se-terrain[data-mode="deplacer"] { cursor: default; }
.se-terrain[data-mode="deplacer"] .se-el { cursor: grab; }
.se-terrain[data-mode="gomme"] .se-el { cursor: not-allowed; }
.se-pelouse { fill: #17442f; }
.se-repere { stroke: rgba(255, 255, 255, .07); stroke-width: .05; }
.se-aire { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .08; }
.se-cote { fill: rgba(255, 255, 255, .55); font: 600 .5px/1 var(--font); }
.se-zone-aire { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .5); stroke-width: .07; stroke-dasharray: .5 .35; }
.se-zone-nom { fill: rgba(255, 255, 255, .8); font: 700 .55px/1 var(--font); pointer-events: none; }
.se-zone-but { fill: rgba(255, 255, 255, .16); stroke: #fff; stroke-width: .14; }
.se-zone-cerceau { fill: rgba(245, 197, 24, .08); stroke: #f5c518; stroke-width: .12; }
.se-zone-latte { fill: #f5c518; }
.se-zone-piquet { fill: #f5c518; }
.se-coupelle { fill: #ffd54a; stroke: rgba(0, 0, 0, .35); stroke-width: .04; }
.se-cone { fill: #ffd54a; stroke: rgba(0, 0, 0, .4); stroke-width: .05; }
.se-cone-cible, .se-cone-depart { fill: #f07a1f; }
.se-cible { fill: none; stroke: #ffd54a; stroke-width: .07; stroke-dasharray: .25 .18; }
.se-porte { stroke: #ffd54a; stroke-width: .07; stroke-dasharray: .28 .2; pointer-events: none; }
.se-ballon { fill: #fff; stroke: #14161a; stroke-width: .07; }
.se-jeton { stroke: #fff; stroke-width: .09; }
.se-joueur-A .se-jeton { fill: #2f6fe8; }
.se-joueur-B .se-jeton { fill: #f07a1f; }
.se-joueur-C .se-jeton { fill: #b9bdc6; }
.se-gardien .se-jeton { fill: #f5c518; }
.se-joueur.is-attente { opacity: .55; }
.se-joueur.is-attente .se-jeton { stroke-dasharray: .2 .14; }
.se-jeton-num { fill: #fff; font: 800 .52px/1 var(--font); pointer-events: none; }
.se-gardien .se-jeton-num, .se-joueur-C .se-jeton-num { fill: #14161a; }
.se-role { fill: #fff; font: 800 .42px/1 var(--font); pointer-events: none; }
.se-fleche-prise { fill: none; stroke: transparent; stroke-width: .9; }
.se-fleche-trait { fill: none; stroke: #fff; stroke-width: .11; stroke-linecap: round; stroke-linejoin: round; }
.se-fleche-course .se-fleche-trait, .se-brouillon.se-fleche-course { stroke-dasharray: .5 .35; }
.se-fleche-tir .se-fleche-trait, .se-brouillon.se-fleche-tir { stroke: #ffd54a; stroke-width: .18; }
.se-brouillon { fill: none; stroke: #fff; stroke-width: .11; opacity: .75; pointer-events: none; }
rect.se-brouillon { fill: rgba(255, 255, 255, .08); stroke-dasharray: .5 .35; }
.se-pointe { fill: #fff; }
.se-pointe-tir { fill: #ffd54a; }
.se-etape { fill: #fff; stroke: #14161a; stroke-width: .06; }
.se-etape-num { fill: #14161a; font: 800 .5px/1 var(--font); pointer-events: none; }
.se-index { fill: rgba(255, 255, 255, .6); font: 700 .42px/1 var(--font); pointer-events: none; }
.se-el.is-sel .se-jeton, .se-el.is-sel .se-coupelle, .se-el.is-sel .se-cone, .se-ballon.is-sel,
.se-zone.is-sel rect, .se-zone.is-sel circle { stroke: #5ee0ff; stroke-width: .16; }
.se-fleche.is-sel .se-fleche-trait { stroke: #5ee0ff; }
.se-poignee { fill: rgba(94, 224, 255, .25); stroke: #5ee0ff; stroke-width: .08; cursor: move; }
.se-inspecteur { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: var(--surface); }
.se-inspecteur label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.se-inspecteur select, .se-inspecteur input { min-width: 0; width: auto; max-width: 180px; }
.se-inspecteur input[type="number"] { width: 84px; }
.se-insp-titre { align-self: center; font-weight: 700; color: var(--ink); }
.se-insp-suppr { margin-left: auto; }
.se-noms { display: flex; flex-wrap: wrap; gap: 10px; }
.se-noms label { display: grid; gap: 4px; flex: 1 1 180px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.se-apercu { position: sticky; top: 16px; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: var(--inset); }
.se-apercu h3 { margin: 0; font-size: 14px; color: var(--ink-2); }
.se-apercu .ex-legende { margin-top: 0; }
.se-verdict { padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; }
.se-verdict b { display: block; margin-bottom: 2px; }
.se-verdict ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.se-verdict.is-ok { background: var(--yes-bg); color: var(--yes); }
.se-verdict.is-ko { background: var(--no-bg); color: #ffd2ad; }
.se-materiel { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
@media (max-width: 600px) {
  /* téléphone : une seule ligne d'outils qui défile et reste en haut pendant qu'on dessine,
     sinon la barre occupait l'écran et il fallait descendre au terrain puis remonter à chaque outil */
  .se-barre { position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 5; flex-wrap: nowrap; gap: 6px;
    margin: 0 -10px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; background: var(--surface);
    border-radius: var(--r-sm); box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
  .se-barre::-webkit-scrollbar { display: none; }
  .se-groupe { flex-wrap: nowrap; }
  .se-groupe-titre { display: none; }
  .se-groupe + .se-groupe { padding-left: 6px; border-left: 1px solid var(--line); }
  .se-outil { white-space: nowrap; }
  .se-groupe-fin { margin-left: 0; }
  .se-groupe-fin .btn { white-space: nowrap; }
  .se-apercu { position: static; }
  .se-inspecteur select, .se-inspecteur input { max-width: 150px; }
}

/* ---- Assistant IA du staff (assistant.js) : bouton aux repères de la marque playbook., panneau par-dessus la page ---- */
/* Un petit rond discret, le logo seul (croix « play », rond « book »). Sur téléphone il se range dans la barre du bas :
   à droite de la pilule des onglets, centré sur sa hauteur ; la pilule se resserre à peine pour lui laisser la place et
   l'ensemble reste centré (le « Créer » de l'administrateur reste au centre de ses cinq onglets). Sur ordinateur, sans
   barre du bas, il flotte en bas à droite. */
:root { --ia-dock: 48px; --ia-ecart: 8px; --ia-marge: 12px; }
@media (max-width: 389.98px) { :root { --ia-ecart: 6px; --ia-marge: 10px; } }
/* très petits téléphones : « Messages » (49,5 px en 11 px) ne tiendrait plus dans son onglet */
@media (max-width: 349.98px) {
  :root { --ia-marge: 8px; }
  body:has(.ia-bulle) .tabbar a > span:not(.sr-only) { font-size: 10px; }
}
.ia-bulle { position: fixed; z-index: 60; display: grid; place-items: center; width: var(--ia-dock); height: var(--ia-dock);
  padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(14, 15, 17, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45); transition: background-color .15s, transform .15s; }
.ia-bulle:active { transform: scale(.94); }
.ia-bulle:focus-visible { outline: 2px solid var(--club); outline-offset: 2px; }
.ia-logo { width: 22px; height: 9.4px; }
.ia-croix { fill: var(--ink); }
.ia-rond { fill: var(--club); }
/* une réponse arrivée panneau fermé : le rond du logo bat doucement (une pastille rouge de plus se confondrait avec lui) */
.ia-rond { transform-box: fill-box; transform-origin: center; }
.ia.has-nouveau .ia-rond { animation: ia-pouls 1.4s ease-in-out infinite; }
@keyframes ia-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .ia.has-nouveau .ia-rond { animation: none; } }
@media (max-width: 1023.98px) {
  body:has(.ia-bulle) .tabbar { transform: none; padding: 8px 6px;
    left: calc((100% - min(var(--tab-max) + var(--ia-dock) + var(--ia-ecart), 100% - 2 * var(--ia-marge))) / 2);
    width: calc(min(var(--tab-max) + var(--ia-dock) + var(--ia-ecart), 100% - 2 * var(--ia-marge)) - var(--ia-dock) - var(--ia-ecart)); }
  .ia-bulle { right: calc((100% - min(var(--tab-max) + var(--ia-dock) + var(--ia-ecart), 100% - 2 * var(--ia-marge))) / 2);
    bottom: calc(12px + env(safe-area-inset-bottom) + (var(--tabbar-h) - var(--ia-dock)) / 2); }
  /* panneau ouvert : le rond reste dans la barre, cerclé de la couleur du club, et le referme */
  .ia.is-ouvert .ia-bulle { background: rgba(38, 40, 46, .96); box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 1.5px var(--club); }
}
@media (min-width: 1024px) {
  .ia-bulle { right: 24px; bottom: 24px; width: 44px; height: 44px; }
  .ia-bulle:hover { transform: translateY(-2px); background: rgba(24, 25, 29, .96); }
  .ia.is-ouvert .ia-bulle { display: none; }
}

/* Une feuille de verre dépoli : la page reste devinée derrière, très floue, sous un voile gris ; pas de bordure,
   pas d'ombre dure. Dedans, tout est à plat et translucide (bulles, cartes, saisie), comme une messagerie. */
.ia { --ia-voile: rgba(70, 72, 80, .22); --ia-flou: blur(12px) saturate(1.3);
  --ia-bulle-ia: rgba(0, 0, 0, .34); --ia-bulle-moi: rgba(255, 255, 255, .17); --ia-plat: rgba(255, 255, 255, .08); }
.ia-panneau { position: fixed; z-index: 61; left: 8px; right: 8px; top: calc(62px + env(safe-area-inset-top));
  bottom: max(calc(var(--ia-clavier, 0px) + 8px), calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: var(--ia-voile);
  -webkit-backdrop-filter: var(--ia-flou); backdrop-filter: var(--ia-flou);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.ia-panneau[hidden] { display: none; }
.ia-poignee { display: none; }
@media (min-width: 900px) {
  .ia-panneau { left: auto; top: 16px; right: 16px; bottom: 16px; width: 400px; }
}
/* tablette : panneau sur le côté mais barre du bas encore là, il s'arrête au-dessus pour laisser le rond visible */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .ia-panneau { bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
}

.ia-tete { display: flex; align-items: center; gap: 6px; padding: 12px 10px 4px 18px; }
.ia-tete-titre { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ia-tete b { font: 400 19px/1 var(--display); text-transform: uppercase; flex: none; }
.ia-sur { margin: 0; min-width: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ia-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink-2); background: transparent; }
.ia-icone:hover { color: var(--ink); background: var(--ia-plat); }
.ia-icone svg { width: 16px; height: 16px; }
.ia-onglets { display: flex; gap: 2px; align-self: flex-start; margin: 4px 0 0 14px; padding: 3px; border-radius: 999px; background: var(--ia-bulle-ia); }
.ia-onglets button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--ink-3); font: 600 12px/1 var(--font); }
.ia-onglets button[aria-selected="true"] { color: var(--ink); background: var(--ia-bulle-moi); }

.ia-corps { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.ia-corps > :first-child { margin-top: auto; }   /* le fil part du bas, comme une messagerie */
.ia-accueil { align-self: flex-start; max-width: 88%; margin: auto 0 0; padding: 11px 14px; border-radius: 20px; border-bottom-left-radius: 6px;
  color: var(--ink-2); font-size: 14px; background: var(--ia-bulle-ia); }
.ia-msg { max-width: 88%; padding: 11px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; }
.ia-msg p { margin: 0; }
.ia-msg p + p { margin-top: 6px; }
.ia-moi { align-self: flex-end; background: var(--ia-bulle-moi); color: var(--ink); border-bottom-right-radius: 6px; }
.ia-assistant { align-self: flex-start; color: var(--ink); background: var(--ia-bulle-ia); border-bottom-left-radius: 6px; }
.ia-erreur { align-self: flex-start; background: rgba(160, 60, 20, .35); color: #ffd2ad; }
.ia-attente { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; }
.ia-points { display: flex; gap: 4px; }
.ia-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: ia-point 1s infinite ease-in-out; }
.ia-points i:nth-child(2) { animation-delay: .15s; }
.ia-points i:nth-child(3) { animation-delay: .3s; }
@keyframes ia-point { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ia-points i { animation: none; } }
.ia-lien { display: inline-block; margin-top: 8px; color: var(--club-text); font-weight: 600; }
.ia-cout { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); }

.ia-carte { margin-top: 10px; padding: 11px 12px; border-radius: 14px; background: var(--ia-plat); }
.ia-carte-tete b { display: block; font-size: 14px; }
.ia-carte-tete small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.ia-carte-vide { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }
.ia-groupe { margin-top: 10px; }
.ia-groupe-label { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ia-noms { display: flex; flex-wrap: wrap; gap: 4px; }
.ia-nom { padding: 3px 8px; border-radius: 999px; background: var(--ia-plat); font-size: 12.5px; }
.ia-g-present .ia-groupe-label { color: var(--yes); }
.ia-g-present .ia-nom { background: var(--yes-bg); }
.ia-g-absent .ia-groupe-label { color: var(--no); }
.ia-g-absent .ia-nom { background: var(--no-bg); }
.ia-g-incertain .ia-groupe-label { color: var(--maybe); }
.ia-g-incertain .ia-nom { background: var(--maybe-bg); }
.ia-g-attente .ia-groupe-label { color: var(--wait); }
.ia-carte-page { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.ia-carte-titre { display: block; margin-bottom: 6px; }
.ia-carte-action ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--ink-2); font-size: 13.5px; }
.ia-carte-alerte { margin: 8px 0 0; color: var(--no); font-size: 13px; }
.ia-carte-etat { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }
.ia-carte-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ia-choix, .ia-suites { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-choix { margin-top: 10px; }
.ia-suites { align-self: flex-start; max-width: 92%; }
.ia-choix .chip, .ia-suites .chip { min-height: 34px; font-size: 13px; border: 0; background: var(--ia-plat); color: var(--ink); }
.ia-choix .chip:hover, .ia-suites .chip:hover { background: var(--ia-bulle-moi); }
.ia-choix .chip.is-choisi { background: var(--club); color: var(--club-ink); }
.ia-choix .chip[disabled]:not(.is-choisi) { opacity: .45; }
.ia-fin { display: flex; align-items: center; justify-content: center; gap: 10px; align-self: center; padding: 4px 6px 4px 14px;
  border-radius: 999px; color: var(--ink-3); font-size: 13px; background: var(--ia-bulle-ia); }
.ia-lien-btn { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--club-text); font: 600 13px/1 var(--font); }

.ia-histo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ia-histo-ligne { display: grid; gap: 3px; width: 100%; padding: 11px 14px; border: 0; border-radius: 16px; cursor: pointer;
  text-align: left; color: var(--ink); font: 500 14px/1.3 var(--font); background: var(--ia-bulle-ia); }
.ia-histo-ligne:hover { background: var(--ia-plat); }
.ia-histo-ligne small { color: var(--ink-3); font-size: 12px; }
.ia-effacer { align-self: center; margin-top: 6px; color: var(--ink-3); }
.ia-lecture { display: flex; align-items: center; justify-content: space-between; }
.ia-retour { border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--club-text); font: 600 13px/1 var(--font); }
.ia-lecture small { color: var(--ink-3); font-size: 12px; }

.ia-saisie[hidden] { display: none; }
.ia-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 6px 12px 12px; }
.ia-saisie textarea { flex: 1; min-height: 46px; max-height: 140px; resize: none; padding: 12px 16px; border: 0; border-radius: 23px;
  font-size: 16px; line-height: 1.35; color: var(--ink); background: var(--ia-bulle-ia); box-shadow: none; }
.ia-saisie textarea::placeholder { color: var(--ink-3); }
.ia-saisie textarea:focus { outline: none; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ia-envoyer { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
  cursor: pointer; color: var(--club-ink); background: var(--club); }
.ia-envoyer svg { width: 20px; height: 20px; }
details.ia-groupe summary { cursor: pointer; list-style: none; }
details.ia-groupe summary::-webkit-details-marker { display: none; }
details.ia-groupe summary::after { content: " · voir"; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
details.ia-groupe[open] summary::after { content: " · masquer"; }
.ia-mess { margin-top: 10px; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, .14); }
.ia-mess.is-nouveau { border-left-color: var(--club); }
.ia-mess-qui { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.ia-mess-qui small { color: var(--ink-3); font-size: 11.5px; }
.ia-mess p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; }
.ia-role { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ia-plat); color: var(--ink-3); }
.ia-role-famille { background: var(--yes-bg); color: var(--yes); }

/* Pages d'information des familles (confidentialité, mentions légales) */
.legal h2 { font-size: 22px; margin: 22px 0 6px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { line-height: 1.55; text-wrap: pretty; }
.legal ul { margin: 6px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 6px; }
.legal-manque { color: var(--maybe); font-style: normal; font-weight: 600; }
.app-legal { margin: 36px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.app-legal a { color: inherit; }
.app-legal + .app-version { margin-top: 8px; }

/* ------------------------------------------------------------------ marque playbook. (adresse de la plateforme, base sans club)
   croix « play » et rond « book » de vestiaire-site/img/mark.svg */
.pb-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.pb-mark svg { width: 58px; height: 28px; flex: none; }
.pb-mark .pb-croix rect { fill: var(--ink); }
.pb-mark .pb-rond { fill: #e3262f; }
.pb-mark b { font: 700 30px/1 var(--font); letter-spacing: -.045em; }
.auth-brand.is-platform { gap: 14px; padding: 30px 20px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--card-edge); }
.auth-brand.is-platform::before { display: none; }
.auth-brand.is-platform .pb-mark svg { width: 92px; height: 45px; }
.auth-brand.is-platform .pb-mark b { font-size: 44px; }
.auth-links { display: grid; gap: 8px; margin-top: 12px; }
.auth-links form { margin: 0; }