/* Application mobile du membre (/app/, ADR-071) — reprend la maquette approuvée du 2026-10-22 (docs/club/maquettes/app-membre/). */
:root {
  --fond: #f1f5fa; --panneau: #fff; --ligne: #d8e1ec; --encre: #10233f; --discret: #5b6b82; --marine: #102f5e; --accent: #1261b5;
  --live: #e0352f; --vert: #1f7a45; --rouge: #b3261e; --alerte-fond: #fff4e5; --alerte-bord: #f3c98b; --alerte-encre: #7a4b00;
  --bas: calc(76px + env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html.i18n-attente body { visibility: hidden; }
#app-racine { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fond); position: relative; padding-bottom: var(--bas); }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; }
h1:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.charge { text-align: center; color: var(--discret); padding: 40px 16px; margin: 0; }
.charge.petit { padding: 12px 0; }
.disc { color: var(--discret); font-size: 13px; }
.centre { text-align: center; }
.vert { color: var(--vert); }
.rouge { color: var(--rouge); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* En-tête */
.top { background: #fff; border-bottom: 1px solid var(--ligne); display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 56px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); position: sticky; top: 0; z-index: 5; }
.top h1 { font-size: 19px; color: var(--marine); flex: 1; }
.top .logo { display: inline-flex; align-items: center; }
.top .logo img { display: block; height: 32px; width: auto; }
.top .gap { flex: 1; }
.ib { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--ligne); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--marine); text-decoration: none; cursor: pointer; padding: 0; font: inherit; }
.top .ib { flex: none; }

/* Navigation du bas */
.nav { position: fixed; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; bottom: 0; height: var(--bas); background: #fff; border-top: 1px solid var(--ligne); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 10; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--discret); text-decoration: none; font-size: 12px; font-weight: 600; position: relative; min-height: 44px; }
.nav a.on { color: var(--accent); }
.nav a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.badge { position: absolute; top: 6px; left: 54%; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--live); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

/* Corps */
.wrap { padding: 14px 16px; }
.wrap.sans-bas { padding-bottom: 0; }
.carte { background: var(--panneau); border: 1px solid var(--ligne); border-radius: 14px; padding: 14px; margin-bottom: 12px; display: block; }
.carte h2 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.carte h2 a { gap: 4px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.carte.vide { text-align: center; color: var(--discret); }
.carte.vide p { margin: 0 0 12px; }
.carte.vide .btn:last-child { margin-bottom: 0; }
.carte.vide[data-mes-equipes] p { color: var(--encre); }
.carte.liste { list-style: none; padding: 0 14px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 0; }
.wrap > .puces, .wrap .puces[role] { margin-top: 0; margin-bottom: 8px; }
.puce { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #e7eef8; color: var(--marine); font: 600 14px/1 system-ui, sans-serif; border: 1px solid transparent; cursor: pointer; }
.puce.on { background: var(--marine); color: #fff; }
.puce.sur-fonce { background: rgba(255, 255, 255, .14); color: #fff; min-height: 32px; font-size: 13px; cursor: default; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; display: inline-block; text-decoration: none; white-space: nowrap; }
.tag.bleu { background: #e7eef8; color: #0d4f95; }
.tag.gris { background: #eef2f7; color: var(--discret); }
.tag.orange { background: var(--alerte-fond); color: var(--alerte-encre); border: 1px solid var(--alerte-bord); padding: 0 12px; font-size: 12px; min-height: 44px; display: inline-flex; align-items: center; }
.live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #b71c17; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.pierre { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.pierre.inconnue { background: #c5d1e0; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid #c5d1e0; background: #fff; font: 600 16px/1.2 system-ui, sans-serif; color: var(--marine); text-decoration: none; width: 100%; cursor: pointer; margin-bottom: 10px; }
.btn.p { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Lignes de liste */
.ligne { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-top: 1px solid #edf1f6; color: inherit; text-decoration: none; position: relative; }
.ligne:first-of-type { border-top: 0; }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .corps b { overflow-wrap: anywhere; }
.ligne .droite { text-align: right; flex: none; }
.ligne .rang { font-size: 18px; color: var(--marine); }
.ligne-lien { position: absolute; inset: 0; }
.ligne-int { display: flex; align-items: center; gap: 10px; width: 100%; color: inherit; text-decoration: none; }
.date { width: 52px; flex: none; text-align: center; line-height: 1.2; }
.date .num { font: 800 20px/1.1 system-ui, sans-serif; color: var(--marine); }
.vs-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-ligne.petit { gap: 6px; font-size: 14px; margin-top: 2px; }
.eq-groupe { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; white-space: nowrap; }
.eq-groupe > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vs-bloc { margin-top: 10px; display: grid; gap: 4px; }
.gros { font: 800 18px/1.3 system-ui, sans-serif; color: var(--marine); }
.semaine { font-size: 13px; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; margin: 16px 2px 8px; }
.initiales-carre { width: 36px; height: 36px; border-radius: 10px; background: #e7eef8; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--marine); flex: none; }

/* Écran Moi */
.hero { background: var(--marine); color: #fff; padding: 18px 16px 16px; }
.hero-ligne { display: flex; gap: 14px; align-items: center; }
.hero-avatar .avatar { border: 3px solid #fff; }
.hero-nom { font: 800 22px/1.2 system-ui, sans-serif; overflow-wrap: anywhere; }
.hero-saison { opacity: .85; font-size: 13px; }
.hero.centre { text-align: center; padding: 28px 20px; }
.hero-logo { width: 84px; height: 84px; border-radius: 22px; background: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.hero-logo img { display: block; height: 60px; width: auto; }
.hero-titre { font: 800 24px/1.2 system-ui, sans-serif; margin: 0 0 6px; }
.hero.centre p { margin: 0; opacity: .9; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.alerte { display: flex; align-items: center; gap: 12px; background: var(--alerte-fond); border-color: var(--alerte-bord); text-decoration: none; color: var(--alerte-encre); min-height: 56px; }
.alerte-texte { flex: 1; min-width: 0; }
.alerte .disc { color: var(--alerte-encre); }
.prochaine { border-left: 5px solid var(--accent); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.tuile { background: var(--fond); border-radius: 10px; padding: 12px 4px; }
.tuile b { font-size: 24px; color: var(--marine); }
.tuile b.vert { color: var(--vert); }

/* Saisie */
.compteur { display: grid; grid-template-columns: 1fr 52px 56px 52px; align-items: center; gap: 8px; margin: 12px 0; }
.compteur-nom { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.compteur-bouton { width: 52px; min-height: 52px; padding: 0; font-size: 24px; margin: 0; }
.valeur { font: 800 28px/1 system-ui, sans-serif; text-align: center; color: var(--marine); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.choix-bouton { margin: 0; }
.choix.choix-issues { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; padding: 0; border: 0; background: none; margin: 12px 0 6px; }
.choix.choix-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix-issues .choix-bouton { min-height: 64px; }
.choix-bouton[aria-pressed="true"] { background: #e8f3ec; border-color: var(--vert); color: #14532d; }
.apercu { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; margin: 12px 0; }
.apercu.ok { background: #e8f3ec; color: #14532d; }
.apercu.refus { background: var(--alerte-fond); color: var(--alerte-encre); }
.limite { font-size: 12px; font-weight: 600; color: var(--alerte-encre); }
.erreur { background: #fdecea; color: #8c1d18; padding: 10px 12px; border-radius: 10px; margin: 0 0 10px; }
.flash { background: #e8f3ec; color: #14532d; padding: 10px 12px; border-radius: 10px; margin: 0 0 12px; }

/* Calendrier */
.select-bloc { margin: 4px 0 10px; }
.select { width: 100%; min-height: 48px; border: 1px solid #c5d1e0; border-radius: 10px; padding: 0 12px; font: 600 16px system-ui, sans-serif; background: #fff; color: var(--marine); }
.mois-nav { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.mois-titre { font-size: 17px; color: var(--marine); }
.cs-agenda-texte h2 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--encre); margin-bottom: 6px; }
.cs-agenda-texte p { margin: 0 0 10px; }
.cs-agenda-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-agenda-principal, .cs-agenda-secondaire { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 10px; border: 1px solid #c5d1e0; background: #fff; color: var(--marine); font: 600 15px/1.2 system-ui, sans-serif; cursor: pointer; padding: 8px; text-decoration: none; }
.cs-agenda-principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.cs-agenda-aide { margin: 10px 0 0 !important; font-size: 13px; color: var(--discret); }
.cs-agenda-aide button { padding: 0; min-height: 44px; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.cs-agenda-confirmation, .cs-agenda-message { margin: 10px 0 0; font-size: 14px; }
.cs-agenda-confirmation { display: grid; gap: 8px; background: var(--fond); padding: 10px; border-radius: 10px; }
.cs-agenda-relie { color: var(--discret); font-size: 13px; }
.cs-agenda-lien { width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #c5d1e0; border-radius: 8px; font: inherit; font-size: 13px; }

/* Installation */
.numero { width: 28px; height: 28px; border-radius: 50%; background: #e7eef8; color: var(--marine); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

@media (max-width: 380px) { .compteur { grid-template-columns: 1fr 48px 48px 48px; } .compteur-bouton { width: 48px; } .hero-nom { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Outils et calculatrice de mouche (RDM-096), repris de la maquette approuvée. */
[hidden] { display: none !important; }
.nav.cinq { grid-template-columns: repeat(5, 1fr); }
.reglage { margin: 0 0 14px; }
.reglage:last-child { margin-bottom: 0; }
.reglage-titre { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.reglage .puces { margin: 0; }
.champ { display: grid; gap: 6px; margin: 0 0 12px; }
.champ > span { font-weight: 600; font-size: 14px; }
.champ input { width: 100%; min-height: 48px; border: 1px solid #c5d1e0; border-radius: 10px; padding: 0 12px; font: 600 18px/1.2 system-ui, sans-serif; color: var(--marine); background: #fff; }
.champ input[aria-invalid="true"] { border-color: var(--rouge); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux .champ { margin-bottom: 0; }
.resultat { text-align: center; border-left: 5px solid var(--accent); }
.resultat .valeur-mouche { font: 800 44px/1.1 system-ui, sans-serif; color: var(--marine); margin: 4px 0 2px; overflow-wrap: anywhere; }
.resultat .valeur-mouche.vide { color: #9aa8ba; }
.resultat .erreur { text-align: left; margin: 8px 0 0; }
.aide-tri { margin: 0 0 10px; }
.outil-icone { width: 44px; height: 44px; border-radius: 12px; background: #e7eef8; color: var(--marine); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chevron { color: var(--discret); flex: none; }
.actions-reglages { display: grid; gap: 0; margin-top: 4px; }
.aide-champ { margin: -6px 0 12px; }
#reg-intro { margin: 0 0 14px; }
.reglages-texte { color: var(--discret); font-size: 14px; text-align: center; margin: 0 8px 4px; }
.lien { background: none; border: 0; padding: 0 8px; min-height: 44px; color: var(--accent); font: 600 15px/1.2 system-ui, sans-serif; text-decoration: underline; cursor: pointer; }

/* Notifications (RDM-098, ADR-075), reprises de la maquette approuvée du 2026-10-27 (docs/notifications/maquettes/). */
.ib.cloche { position: relative; }
.pastille { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--live); color: #fff; font: 700 11px/20px system-ui; text-align: center; border: 2px solid #fff; }
.ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.ic.petit { width: 32px; height: 32px; }
.ic.gros-ic { width: 56px; height: 56px; margin: 0 auto 10px; }
.ic.bleu { background: #1261b5; } .ic.ambre { background: #c77700; } .ic.marine { background: #102f5e; } .ic.vert { background: #1f8a4c; } .ic.violet { background: #6b3fb5; } .ic.gris { background: #6b7c93; }
.carte.remplacant { display: flex; align-items: center; gap: 12px; background: #f4f8ff; border-color: #b9d1ee; }
.carte.remplacant .corps { flex: 1; min-width: 0; }
.btn.auto { width: auto; display: inline-flex; margin-bottom: 0; }
.btn.sm { min-height: 44px; padding: 6px 14px; font-size: 15px; }
.rappels-ligne { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.filtres { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; flex-wrap: wrap; }
.filtres .gap { flex: 1; }
.groupe { font: 700 12px/1 system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin: 16px 2px 8px; }
.carte.flush { padding: 0; overflow: hidden; }
.notif { display: flex; gap: 12px; padding: 12px 14px; border-top: 1px solid #edf1f6; position: relative; align-items: flex-start; }
.notif:first-child { border-top: 0; }
.notif.nonlu { background: #f4f8ff; }
.notif.nonlu::after { content: ""; position: absolute; right: 14px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.notif .corps { flex: 1; min-width: 0; padding-right: 16px; }
.notif .zone { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.notif .t { display: block; font-weight: 700; color: var(--marine); line-height: 1.3; overflow-wrap: anywhere; }
.notif .x { display: block; font-size: 14px; color: #33465f; margin-top: 2px; overflow-wrap: anywhere; }
.notif .m { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--discret); flex-wrap: wrap; }
.notif .act { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag.org { background: #efe7fb; color: #5b2ca0; } .tag.club { background: #e3f4ea; color: #1f6b3f; }
.pied60 { margin: 14px 0 0; }
.carte .msg-sujet { font: 800 20px/1.25 system-ui, sans-serif; color: var(--marine); text-transform: none; letter-spacing: 0; display: block; margin: 0 0 6px; }
.msg-corps { margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }
.carte.activation { text-align: center; }
.carte.activation .ligne { text-align: left; }
.carte .act-titre { font: 800 22px/1.25 system-ui, sans-serif; color: var(--marine); text-transform: none; letter-spacing: 0; display: block; margin: 0 0 6px; }
.carte.avert { background: var(--alerte-fond); border-color: var(--alerte-bord); color: var(--alerte-encre); }
.etat { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.point { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #9fb0c6; }
.point.vert-p { background: var(--vert); } .point.rouge { background: var(--rouge); }
.sw { width: 56px; height: 44px; background: none; position: relative; flex: none; border: 0; padding: 0; cursor: pointer; }
.sw::before { content: ""; position: absolute; top: 8px; left: 4px; width: 48px; height: 28px; border-radius: 14px; background: #c5d1e0; }
.sw::after { content: ""; position: absolute; top: 11px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sw.on::before { background: var(--accent); } .sw.on::after { left: 27px; }
.plage { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.champ-heure { min-height: 44px; padding: 0 12px; border: 1px solid #c5d1e0; border-radius: 8px; background: #fff; font: 600 16px system-ui, sans-serif; color: var(--marine); }
.champ-heure:disabled { opacity: .6; }
.matrice-tete, .matrice-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px; align-items: center; }
.matrice-ligne.simple, .matrice-tete.simple { grid-template-columns: minmax(0, 1fr) 58px; }
.matrice-tete span { font: 700 11px/1.2 system-ui; letter-spacing: .05em; text-transform: uppercase; color: var(--discret); text-align: center; }
.matrice-ligne { border-top: 1px solid #edf1f6; padding: 4px 0; min-height: 56px; }
.matrice-ligne .c { display: flex; justify-content: center; }
.matrice .lib { font-weight: 600; color: var(--marine); line-height: 1.3; }
.matrice .sous { font-size: 12.5px; color: var(--discret); margin-top: 2px; font-weight: 400; }
.lien-ligne { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; min-height: 44px; width: 100%; }
.ck { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.ck::before { content: ""; width: 26px; height: 26px; border-radius: 7px; border: 2px solid #9fb0c6; background: #fff; position: absolute; }
.ck > svg { position: relative; }
.ck.on::before { background: var(--accent); border-color: var(--accent); }
.ck.lock { cursor: default; color: #fff; }
.ck.lock::before { background: #b8c4d4; border-color: #b8c4d4; }
.verrou-note { display: flex; align-items: center; gap: 6px; margin: -4px 4px 12px; }
.dots { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ligne); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--marine); cursor: pointer; padding: 0; flex: none; }
.ligne.regle, .ligne.appareil { position: relative; }
.menu-ctx { position: absolute; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--ligne); border-radius: 10px; box-shadow: 0 6px 18px rgba(16,35,63,.18); padding: 4px; min-width: 160px; }
.menu-item { display: block; width: 100%; min-height: 44px; text-align: left; background: none; border: 0; padding: 0 12px; font: 600 15px system-ui; color: var(--marine); cursor: pointer; border-radius: 8px; }
.menu-item.rouge { color: var(--rouge); }
.apercu-notif .pn { background: #eef2f7; border-radius: 16px; padding: 11px 13px; display: flex; gap: 10px; }
.pn .app-ic { width: 36px; height: 36px; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pn-t { font-weight: 700; } .pn-x { font-size: 14px; color: #22324a; }
.feuille-racine { position: fixed; inset: 0; z-index: 40; }
.voile { position: absolute; inset: 0; background: rgba(16,35,63,.45); }
.feuille { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 520px; bottom: var(--clavier, 0px); background: #fff; border-radius: 18px 18px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(0,0,0,.18); max-height: min(90dvh, calc(var(--vue-h, 100dvh) * 0.9)); overflow-y: auto; }
/* L-094 : clavier ouvert, le bas de la feuille est posé sur le clavier (clavier.js écrit --clavier et --vue-h); la marge de la zone sûre du bas est sous le clavier. */
.clavier-ouvert .feuille { padding-bottom: 16px; }
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: #c5d1e0; margin: 0 auto 10px; touch-action: none; cursor: grab; user-select: none; }
/* L-097 : zone de prise de la poignée (feuille-glisser.js) = pleine largeur de la feuille (le bloc positionné est .feuille), 32 px de haut, sans déplacer le titre. */
.feuille .poignee::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; touch-action: none; }
.feuille.glisse .poignee { cursor: grabbing; }
.feuille.agrandie { max-height: calc(var(--vue-h, 100dvh) - env(safe-area-inset-top, 0px) - 8px); }
.feuille h3 { margin: 0 0 12px; font-size: 18px; color: var(--marine); }
.choix { display: flex; align-items: center; gap: 12px; min-height: 52px; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; width: 100%; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.choix.on { border-color: var(--accent); background: #f4f8ff; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9fb0c6; flex: none; position: relative; }
.choix.on .radio { border-color: var(--accent); }
.choix.on .radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.sous-champ { margin: -2px 0 10px 34px; }
.pied-feuille { display: flex; gap: 10px; margin-top: 14px; }
.pied-feuille .btn { margin-bottom: 0; }
@media (max-width: 380px) { .matrice-tete, .matrice-ligne { grid-template-columns: minmax(0, 1fr) 48px 48px; } .ck { width: 48px; } }

/* Mode Organisateur (ADR-076) — maquette approuvée du 2026-10-27 (docs/club/maquettes/app-organisateur/) */
.org-bande { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #efe7fb; color: #5b2ca0; font-size: 14px; padding: 0 16px; min-height: 44px; border-bottom: 1px solid #e0d2f5; }
.org-bande b { font-weight: 700; }
.org-bande a { color: #5b2ca0; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.org-tournoi { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; font: inherit; color: inherit; text-align: left; min-height: 64px; cursor: pointer; }
.org-tournoi .corps { flex: 1; min-width: 0; }
.org-tournoi .corps b { font-size: 17px; color: var(--marine); overflow-wrap: anywhere; }
.org-sigle { width: 42px; height: 42px; border-radius: 10px; background: var(--marine); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.org-sigle.gris { background: #6b7c93; }
.org-lecture { background: var(--alerte-fond); border: 1px solid var(--alerte-bord); color: var(--alerte-encre); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-weight: 600; }
.org-titre { font: 700 12px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin: 16px 2px 8px; }
.org-groupe { font: 700 12px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin: 12px 2px 8px; }
h3.org-titre { margin: 14px 0 4px; }
.org-tache { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; text-decoration: none; color: var(--encre); min-height: 64px; }
.org-tache .corps { flex: 1; min-width: 0; }
.org-tache .corps b { color: var(--marine); }
.org-ic { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; font-weight: 800; }
.org-ic.rouge { background: #c62828; }
.org-ic.ambre { background: #c77700; }
.org-ic.bleu { background: #1261b5; }
.org-ic.vert { background: #1f8a4c; }
.org-ic.violet { background: #6b3fb5; }
.org-ic.marine { background: var(--marine); }
.org-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.org-tuiles.une { grid-template-columns: 1fr; }
.org-tuiles.deux { grid-template-columns: 1fr 1fr; }
.org-tuiles .tuile { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 6px; text-align: center; }
.org-tuiles .tuile b { display: block; font-size: 19px; color: var(--marine); line-height: 1.2; }
.org-tuiles .tuile b.vert { color: var(--vert); }
.org-tuiles .tuile b.ambre, .ambre { color: #b26a00; }
.org-tuiles .tuile span { font-size: 12px; }
.org-glace { width: 58px; flex: none; }
.org-voir { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.org-draws { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.org-draws .puce { flex: none; white-space: nowrap; }
.org-ok { margin-left: 4px; }
.org-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-left: 6px; display: inline-block; }
.org-partie { background: #fff; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.org-partie.manque { border-color: #e6a5a5; background: #fff7f7; }
.org-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--discret); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.org-etat { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: none; letter-spacing: 0; background: #eef2f7; color: var(--discret); }
.org-etat.manq { background: #fde2e2; color: #b3261e; }
.org-etat.live { background: #fde2e2; color: #c62828; }
.org-eq { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.org-eq .nom { flex: 1; min-width: 0; font-weight: 600; color: var(--marine); overflow-wrap: anywhere; }
.org-eq .score { font-size: 19px; color: var(--marine); min-width: 24px; text-align: right; }
.org-partie .btn { margin: 10px 0 2px; }
.org-note { color: var(--discret); font-size: 14px; margin: 8px 2px 12px; }
.org-info { background: #f1f5fa; border-radius: 10px; padding: 12px 14px; color: #33465f; margin: 12px 0; font-size: 14px; }
.org-info.refus { background: var(--alerte-fond); color: var(--alerte-encre); }
.org-ligne-eq { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; min-height: 64px; }
.org-ligne-eq .corps { flex: 1; min-width: 0; }
.org-ligne-eq .corps b { overflow-wrap: anywhere; color: var(--marine); }
.org-montant { color: #b26a00; font-size: 18px; flex: none; }
.org-act { width: auto; min-height: 44px; padding: 0 14px; flex: none; margin: 0; }
.org-plus { flex: none; width: 44px; height: 44px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; color: var(--marine); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.org-versements .ligne { align-items: flex-start; padding: 12px 0; }
.org-sig { height: 26px; width: 70px; object-fit: contain; vertical-align: middle; background: #fff; border: 1px solid var(--ligne); border-radius: 4px; }
.org-past { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.org-past span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #eef2f7; color: #33465f; }
.org-past span.ambre { background: var(--alerte-fond); color: var(--alerte-encre); }
.org-champ { display: block; margin: 0 0 12px; }
.org-champ > b, .org-lbl { display: block; color: var(--marine); margin: 0 0 6px; }
.org-champ .champ { width: 100%; min-height: 48px; border: 1px solid #c5d1e0; border-radius: 10px; padding: 0 12px; font: 600 18px system-ui, sans-serif; background: #fff; color: var(--marine); }
.org-avert { background: var(--alerte-fond); border: 1px solid var(--alerte-bord); color: var(--alerte-encre); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.org-panneau-tete h1 { font-size: 18px; }
.org-segments { display: flex; background: #e7eef8; border-radius: 11px; padding: 3px; gap: 3px; margin: 0 0 12px; }
.org-seg { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-weight: 700; color: var(--discret); text-decoration: none; }
.org-seg.on { background: #fff; color: var(--marine); box-shadow: 0 1px 3px rgba(16, 35, 63, .15); }
.org-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef2f7; color: var(--discret); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.org-pill.attente { background: #fde2e2; color: #b3261e; text-transform: none; }
.org-insc h2 { margin-bottom: 4px; }
.org-ligne-insc { padding: 10px 0; }
.org-plus-carte .ligne { min-height: 64px; text-decoration: none; color: inherit; }
.org-carte-acces { border-left: 6px solid #6b3fb5; }
.org-acces { text-decoration: none; color: inherit; }
.org-note-acces { margin: 8px 2px 0; }
.nav.org .badge { left: 58%; }
.feuille .choix { width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; text-decoration: none; }
.feuille .choix .org-sigle { width: 34px; height: 34px; font-size: 13px; }
.feuille .corps { flex: 1; min-width: 0; }

/* Suivi de tournoi (ADR-077) : liste, écran du tournoi (en-tête, onglets), classements, pointage bout par bout, choix de l'équipe. */
.logo-equipe { padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--ligne); }
.logo-equipe img { width: 100%; height: 100%; object-fit: contain; display: block; }
.su-logo { width: 64px; height: 30px; flex: none; border: 1px solid var(--ligne); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.su-logo img { max-width: 58px; max-height: 26px; width: auto; height: auto; }
.su-sigle { font: 800 13px/1 system-ui, sans-serif; color: var(--marine); }
.su-logo { position: relative; }
.su-logo .su-logo-attente { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; opacity: 0; object-fit: contain; }
.su-logo img:not(.su-logo-attente) { object-fit: contain; }
.su-champ { display: flex; align-items: center; gap: 8px; min-height: 48px; border: 1px solid #c5d1e0; border-radius: 10px; padding: 0 12px; background: #fff; color: var(--discret); }
.su-champ-saisie { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px system-ui, sans-serif; color: var(--encre); min-height: 44px; }
.su-puces { margin: 12px 0; }
.carte .su-tournoi-lien { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.su-tournoi-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.btn.pt { min-height: 44px; font-size: 14px; width: auto; padding: 6px 14px; margin: 0; flex: none; }
.btn.suivi { background: #e7f3ec; border-color: #a9d3b8; color: var(--vert); }
.btn.lien-bouton { border: 0; background: transparent; color: var(--accent); margin-top: 8px; }
.su-actualiser { margin-top: 8px; }
.su-haut .su-titre { flex: 1; min-width: 0; }
.su-haut .su-titre h1 { font-size: 16px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; flex: none; }
.su-haut .su-titre .disc { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-haut .ib.on { background: #e7eef8; border-color: #b9cbe4; color: var(--accent); }
.su-bande { background: #fff; border-bottom: 1px solid var(--ligne); display: flex; justify-content: center; padding: 8px 0; }
.su-bande img { height: 34px; width: auto; max-width: 90%; }
.su-onglets { background: #fff; border-bottom: 1px solid var(--ligne); display: flex; justify-content: space-around; overflow-x: auto; scrollbar-width: none; position: sticky; top: calc(61px + env(safe-area-inset-top, 0px)); z-index: 4; }
.su-onglets::-webkit-scrollbar { display: none; }
.su-onglets a { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; font-size: 14px; font-weight: 600; color: var(--discret); text-decoration: none; position: relative; padding: 0 6px; white-space: nowrap; }
@media (max-width: 419px) { .su-onglets a { font-size: 13px; padding: 0 3px; gap: 4px; } }
.su-onglets a.on { color: var(--marine); }
.su-onglets a.on::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.su-point-live { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
/* En-tête marine de l'équipe (L-020; maquette docs/tournoi/maquettes/suivi-app/equipe-entete-mouches.html, option 1) */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/polices/bricolage-grotesque-800.woff2") format("woff2"); }
.su-hero { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 12px; color: #fff;
  background: radial-gradient(circle at 112% -18%, transparent 0 22px, rgba(255, 255, 255, .16) 22px 24px, transparent 24px 52px, rgba(224, 53, 47, .30) 52px 80px, transparent 80px 108px, rgba(95, 176, 255, .30) 108px 146px, transparent 146px),
    linear-gradient(150deg, #06142a 0%, #0c2650 55%, #123f7c 100%);
  box-shadow: 0 6px 18px rgba(7, 22, 43, .28); }
.su-hero :focus-visible { outline-color: #fff; }
.su-hero-haut { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; }
.su-hero-logo { width: 58px; height: 58px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font: 800 20px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: linear-gradient(145deg, #1d5fae, #0c2650);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 5px rgba(95, 176, 255, .35), 0 0 18px rgba(95, 176, 255, .55); }
.su-hero-id { flex: 1; min-width: 0; }
.su-hero-ligne { display: flex; align-items: center; gap: 8px; }
.su-hero-sur { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 11px/1.3 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.su-hero-etat { flex: none; font: 800 10.5px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.su-hero-etat.enlice { background: rgba(95, 176, 255, .18); color: #bfe0ff; border: 1px solid rgba(95, 176, 255, .45); }
.su-hero-etat.qualif { background: rgba(52, 199, 120, .18); color: #a9f0c6; border: 1px solid rgba(52, 199, 120, .5); }
.su-hero-etat.elim { background: rgba(255, 107, 97, .16); color: #ffc2bc; border: 1px solid rgba(255, 107, 97, .45); }
.su-hero-nom { font: 800 italic 30px/1.05 "Bricolage Grotesque", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 3px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-hero-cap { font: 500 13px/1.3 system-ui, sans-serif; color: rgba(255, 255, 255, .8); }
.su-hero-stats { display: grid; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.su-hero-stats.n2 { grid-template-columns: repeat(2, 1fr); } .su-hero-stats.n3 { grid-template-columns: repeat(3, 1fr); } .su-hero-stats.n4 { grid-template-columns: repeat(4, 1fr); }
.su-hero-stats > div { min-width: 0; padding: 12px 4px 11px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .14); }
.su-hero-stats > div:first-child { border-left: 0; }
.su-hero-stats b { display: block; white-space: nowrap; font: 800 25px/1.1 "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.su-hero-stats b sup { font-size: .55em; vertical-align: .7em; margin-left: 1px; }
.su-hero-stats .cle b { color: #5fb0ff; }
.su-hero-stats span { display: block; margin-top: 4px; white-space: nowrap; font: 700 10.5px/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.su-hero-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.su-hero-prochaine { flex: 1; min-width: 0; font: 500 13px/1.35 system-ui, sans-serif; color: rgba(255, 255, 255, .7); overflow-wrap: anywhere; }
.su-hero-prochaine.live { color: #fff; font-weight: 700; }
.su-hero-prochaine.live::before { background: #ff6b61; }
.su-badge-vous { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #ffcf4d; color: #3d2b00; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.su-suivre { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font: 700 14px/1 system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.su-suivre.on { background: var(--vert); border-color: var(--vert); }
.su-suivre:disabled { opacity: .55; cursor: not-allowed; }
.su-lien-hero { margin: -6px 0 8px; }
/* Tirs de mouche dans « Ses parties » (option B) */
.su-mv { color: var(--marine); font-weight: 700; font-variant-numeric: tabular-nums; }
.su-mv.hm { color: var(--rouge); }
.su-mv.retire { color: #9fb0c6; text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 600; }
.su-note-mouche { margin: 10px 2px 0; font-size: 13px; }
.su-lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.tag.vert { background: #e7f3ec; color: var(--vert); }
.tag.ambre { background: var(--alerte-fond); color: var(--alerte-encre); }
.tag.rouge { background: #fdecea; color: var(--rouge); }
.su-score { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; align-items: center; margin-top: 8px; }
.su-eq { display: flex; align-items: center; gap: 8px; font-weight: 700; min-width: 0; }
.su-eq-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-pts { font: 800 24px/1 system-ui, sans-serif; color: var(--marine); text-align: right; min-width: 32px; }
.su-pts.pt { font-size: 20px; }
.su-marteau { display: inline-flex; color: var(--marine); flex: none; }
.su-dests { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.su-dest { display: flex; gap: 8px; align-items: center; }
.su-res { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 800; flex: none; }
.su-res.v { background: #e7f3ec; color: var(--vert); }
.su-res.d { background: #fdecea; color: var(--rouge); }
.su-res.c { background: #eef2f7; color: var(--discret); }
.su-res.neutre { background: #eef2f7; color: var(--discret); }
.su-res-live { width: 24px; justify-content: center; font-size: 0; }
.su-draw-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--marine); }
.su-partie { padding: 12px 14px; }
.su-partie.mienne { border: 2px solid var(--accent); }
.su-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.su-vous { color: var(--accent); }
.su-basculer { margin-top: 8px; border: 0; background: none; color: var(--accent); font: 600 14px system-ui, sans-serif; min-height: 44px; padding: 0; cursor: pointer; }
.su-defile { overflow-x: auto; margin-top: 8px; }
.su-bouts { border-collapse: collapse; width: 100%; }
.su-bouts th, .su-bouts td { padding: 5px 0; font-size: 13px; text-align: center; border-bottom: 1px solid #edf1f6; min-width: 22px; }
.su-bouts th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--discret); border-bottom: 1px solid var(--ligne); }
.su-bouts td.n, .su-bouts th.n { text-align: left; font-weight: 700; padding-left: 2px; white-space: nowrap; min-width: 84px; }
.su-bouts td.n .pierre { vertical-align: -2px; margin-right: 6px; }
.su-bouts td.n .su-marteau { margin-left: 4px; vertical-align: -1px; }
.su-bouts .tot { font-weight: 800; color: var(--marine); font-size: 15px; }
.su-bouts .cur { background: #fff7d6; }
.su-bouts td.x { color: var(--discret); font-weight: 600; }
.su-table { border-collapse: collapse; width: 100%; }
.su-table th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--discret); font-weight: 700; text-align: center; padding: 4px 2px; border-bottom: 1px solid var(--ligne); }
.su-table td { text-align: center; padding: 7px 2px; border-bottom: 1px solid #edf1f6; font-size: 14px; }
.su-table td.n, .su-table th.n { text-align: left; }
.su-table tr.moi td { background: #eef4fc; font-weight: 700; }
.su-table tr.suivie td { background: #f6f9fd; }
.su-etoile { color: #b7791f; }
.su-equipes-puces { flex-wrap: wrap; }
.su-autres .su-autre { width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--ligne); font: inherit; color: inherit; cursor: pointer; min-height: 48px; }
.su-nom-partie { font-weight: 500; }
/* Titre d'une partie de l'Horaire (ADR-077, amendement 2026-10-29 (5)) : bleu = équipe suivie, gras = en avance, vert gras = gagnant; su-gagnant après su-suivie : le vert l'emporte sur le bleu. */
.su-nom-partie .su-suivie { color: var(--accent); }
.su-nom-partie .su-avance { font-weight: 800; }
.su-nom-partie .su-gagnant { color: var(--vert); font-weight: 800; }
.su-case { flex: none; width: 22px; height: 22px; border: 2px solid #8a99ad; border-radius: 6px; background: #fff; display: inline-block; margin-right: 10px; position: relative; }
.su-case.on { background: var(--marine); border-color: var(--marine); }
.su-case.on::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.su-choix.verrouillee { opacity: .85; cursor: default; }
.su-choix[disabled] { opacity: .45; }
.su-barre-choix { margin-top: 12px; display: grid; gap: 6px; }
.su-table .su-zone { width: 4px; padding: 0; }
.su-table .su-sous { font-weight: 400; }
.su-groupe td.n { font-size: 12px; font-weight: 700; color: var(--discret); padding-top: 10px; }
.z-v { background: #1f7a45; }
.z-b { background: #1261b5; }
.z-a { background: #d98a00; }
.z-g { background: #b8c2cf; }
.su-jour { font-size: 13px; font-weight: 700; color: var(--marine); margin: 14px 2px 6px; }
.carte.su-liste { padding: 4px 14px; }
.carte.pot { border-style: dashed; background: #fbfcfe; }
.su-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9fb0c6; flex: none; box-sizing: border-box; }
.su-radio.on { border: 7px solid var(--accent); }
.ligne.su-choix { width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; cursor: pointer; }
.su-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.su-pos { display: block; border-radius: 8px; text-align: center; padding: 6px 0 4px; font: 800 14px/1.2 system-ui, sans-serif; border: 1px solid transparent; }
.su-pos small { display: block; font: 800 11px/1.2 system-ui, sans-serif; margin-top: 2px; }
.su-pos.v { background: #e7f3ec; color: var(--vert); border-color: #a9d3b8; }
.su-pos.j { background: #fff4d6; color: #7a5a00; border-color: #f0d27a; }
.su-pos.r { background: #fdecea; color: var(--rouge); border-color: #f3b7b1; }
.su-pos.act { outline: 3px solid var(--marine); outline-offset: 1px; }
.su-pos.large { margin-top: 6px; padding: 8px 0; }

/* Positions possibles (ADR-078) */
.su-fait { display: flex; gap: 10px; align-items: center; border: 1px solid; border-radius: 10px; padding: 10px 12px; font-weight: 700; margin-bottom: 4px; }
.su-fait.v { background: #e7f3ec; border-color: #a9d3b8; color: var(--vert); }
.su-fait.r { background: #fdecea; border-color: #f3b7b1; color: var(--rouge); }
.su-fait-sym { font-size: 18px; }
.su-actuelle { margin: 12px 0 6px; font-size: 14px; }
.su-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--discret); }
.su-leg span { display: inline-flex; align-items: center; gap: 5px; }
.su-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.su-leg-v { background: #1f7a45; }
.su-leg-j { background: #e0b100; }
.su-leg-r { background: #b3261e; }
.tag.su-etat.v { background: #e7f3ec; color: var(--vert); }
.tag.su-etat.j { background: #fff4d6; color: #7a5a00; }
.tag.su-etat.r { background: #fdecea; color: var(--rouge); }

/* Écran d'une équipe touchée (L-016) — maquette approuvée du 2026-10-30 (docs/tournoi/maquettes/suivi-app/equipe-consultee.html) */
.su-table tr.su-cliquable { cursor: pointer; }
.su-table tr.su-cliquable:active td { background: #e3ecf8; }
.su-table a.su-nom-equipe { color: inherit; text-decoration: none; }
.su-table th.su-ch, .su-table td.su-ch { width: 14px; padding: 0 2px 0 0; }
.su-table td.su-ch { color: #9fb0c6; font-size: 18px; line-height: 1; }
a.su-seg { color: inherit; text-decoration: none; }
.chevron.su-chev { color: #9fb0c6; }

/* Confirmation « Est-ce bien vous ? » (L-013) — maquette approuvée du 2026-10-30 (docs/maquettes/lien-joueur-confirmation/, écran 3) */
.conf-lien .conf-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.conf-lien .conf-tete h3 { margin: 0; }
.conf-lien .conf-tete h3:focus { outline: none; }
.conf-lien p { margin: 0 0 10px; }
.conf-ident { border: 1px solid var(--ligne); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; background: #f8fafc; }
.conf-ident dl { margin: 0; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px 10px; }
.conf-ident dt { font-size: 13px; color: var(--discret); padding-top: 1px; }
.conf-ident dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.conf-ident dd small { display: block; font-weight: 400; color: var(--discret); font-size: 13px; }
.conf-lien .btn { margin-bottom: 8px; }
.conf-lien .btn.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.conf-lien .btn.lien { min-height: 48px; padding: 10px 14px; font-weight: 400; margin-bottom: 0; }

/* Horaire : tirs à la mouche (une équipe par ligne) et bouton « Maintenant » (L-025) */
.su-mouches { margin-top: 2px; overflow-wrap: anywhere; }
.su-puces .su-maintenant { margin-left: auto; }
.su-rangee-maintenant { display: flex; justify-content: flex-end; }
.su-maintenant { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--accent); background: #fff; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.su-maintenant::after { content: ""; position: absolute; inset: -4px -2px; }
.su-maintenant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.su-maintenant-point { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; }

/* Lien vidéo en direct de l'équipe (L-032, ADR-084; maquette docs/maquettes/video-equipe/, écrans 3 à 6) */
.vid-eq { margin-top: 12px; border-top: 1px solid var(--ligne); padding-top: 12px; }
.vid-eq .disc { margin: 6px 2px 0; }
.btn.video-eq { border-color: #9cc3ec; color: var(--accent); background: #f4f8ff; margin: 0; }
.btn.video-eq .court { display: none; }
@media (max-width: 479px) { .btn.video-eq .long { display: none; } .btn.video-eq .court { display: inline; } }
.vid-pub { display: flex; align-items: center; gap: 10px; }
.vid-pub .ico { width: 36px; height: 36px; border-radius: 10px; background: #e7eef8; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.vid-pub .corps { flex: 1; min-width: 0; }
.vid-pub .corps b { display: block; font-size: 14px; }
.vid-pub .corps .disc { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-pub a.vid-url { color: inherit; text-decoration: none; }
.vid-actions { display: flex; gap: 8px; margin-top: 10px; }
.vid-actions .btn { flex: 1; margin: 0; min-height: 44px; font-size: 15px; }
.vid-actions .btn.retirer { color: var(--rouge); border-color: #e3b3b0; }
.su-score-bloc, .su-bouts-bloc { min-width: 0; }
.su-videos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.su-videos a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; font: 700 13px/1 system-ui, sans-serif; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-videos a.club { background: #fdecea; color: #b71c17; }
.su-videos a.su-video-eq { background: #e7f0fb; color: #0d4f95; margin-left: 0; }
a.su-video-eq { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 9px; border-radius: 999px; background: #e7f0fb; color: #0d4f95; font: 700 12px/1 system-ui, sans-serif; text-decoration: none; flex: none; margin-left: 2px; }
.su-videos a:focus-visible, a.su-video-eq:focus-visible, .vid-pub a.vid-url:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Feuille « Vidéo en direct de l'équipe » */
.vid-feuille p { margin: 0 0 10px; }
.vid-feuille h3:focus { outline: none; }
.vid-feuille #vid-sous { margin: -6px 0 14px; }
.vid-etiquette { display: block; font-weight: 600; margin: 0 0 6px; }
.vid-champ { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--ligne); border-radius: 10px; font: inherit; font-size: 16px; margin: 0 0 8px; }
.vid-champ[aria-invalid="true"] { border-color: var(--rouge); }
.vid-apercu { display: flex; align-items: center; gap: 10px; background: #0b0d12; color: #fff; border-radius: 8px; padding: 0 12px 0 0; min-height: 40px; margin: 0 0 12px; overflow: hidden; }
.vid-apercu .vid-code { align-self: stretch; display: inline-flex; align-items: center; padding: 0 10px; background: #c8202a; font: 700 15px/1 system-ui, sans-serif; }
.vid-apercu .vid-nom { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-apercu .vid-lien { color: #5fb0ff; font: 600 12px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.vid-feuille .btn { margin-bottom: 8px; }
.vid-feuille .btn.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.vid-feuille .btn.lien { min-height: 48px; padding: 10px 14px; font-weight: 400; margin-bottom: 0; }

/* Onglet Éliminatoires (L-033, ADR-077 amendement (12)) : l'arbre de la page publique dans une zone déplacée au doigt et zoomée en pinçant */
html.su-arbre-actif, html.su-arbre-actif body { overflow: hidden; overscroll-behavior: none; }
.su-arbre-cat { margin: 0 0 8px; }
.su-arbre { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; margin: 0 -16px; height: 420px; background-color: #f6f8fb;
  background-image: radial-gradient(#cdd8e6 1px, transparent 1.2px); background-size: 18px 18px; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); cursor: grab; }
.su-arbre:active { cursor: grabbing; }
.su-arbre:focus-visible { outline-offset: -3px; }
.su-arbre-calque { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.su-arbre-titre { position: absolute; left: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px 6px; border-bottom: 1px solid var(--ligne); color: var(--marine); font-size: 15px; }
.su-arbre-titre span { font-size: 12px; color: var(--discret); font-weight: 600; }
.su-arbre-ronde { position: absolute; height: 22px; line-height: 22px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); }
.su-arbre-traits { position: absolute; left: 0; overflow: visible; pointer-events: none; }
.su-arbre-traits path { fill: none; stroke: #9db0c9; stroke-width: 2; }
.su-arbre-boite { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px 5px; background: #fff; border: 1px solid var(--ligne); border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 35, 63, .1);
  font: inherit; font-size: 13px; color: var(--encre); text-align: left; cursor: pointer; overflow: hidden; }
.su-arbre-boite.encours { border-color: #f1b5b2; box-shadow: 0 1px 3px rgba(16, 35, 63, .1), inset 3px 0 0 var(--live); }
.su-arbre-boite.suivie { border: 2px solid var(--accent); padding: 5px 7px 4px; }
.su-arbre-boite:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sab-tete { display: flex; align-items: center; gap: 6px; height: 18px; font-size: 11px; color: var(--discret); white-space: nowrap; }
.sab-tete b { color: var(--encre); font-size: 12px; }
.sab-lib { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sab-live { margin-left: auto; color: var(--live); font-weight: 700; flex: none; }
.sab-ligne { display: flex; align-items: center; gap: 6px; height: 25px; }
.sab-q { flex: none; min-width: 26px; text-align: center; font-size: 11px; font-weight: 700; color: var(--discret); border-radius: 4px; padding: 1px 3px; }
.sab-ligne:not(.tbd) .sab-q:not(:empty) { background: #eef2f7; }
.sab-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sab-pts { flex: none; min-width: 20px; text-align: right; font-weight: 800; font-size: 15px; }
.sab-ligne.avance .sab-nom { font-weight: 700; }
.sab-ligne.gagnant { color: var(--vert); }
.sab-ligne.gagnant .sab-nom { font-weight: 800; }
.sab-ligne.perdant { color: var(--discret); }
.sab-ligne.suivie .sab-nom { color: var(--accent); font-weight: 700; }
.sab-ligne.tbd .sab-nom { font-style: italic; color: var(--discret); font-weight: 400; }
.sab-pied { display: flex; gap: 6px; height: 17px; font-size: 11px; color: var(--discret); white-space: nowrap; overflow: hidden; border-top: 1px solid #eef2f7; padding-top: 2px; }
.sab-quand { flex: none; }
.sab-x { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.saf-flot { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; }
.saf-flot.haut-g { top: 10px; left: 10px; } .saf-flot.haut-d { top: 10px; right: 10px; } .saf-flot.bas-g { bottom: 10px; left: 10px; } .saf-flot.bas-d { bottom: 12px; right: 10px; }
.saf-bouton { min-width: 44px; min-height: 44px; border-radius: 22px; border: 1px solid var(--ligne); background: #fff; box-shadow: 0 2px 8px rgba(16, 35, 63, .2); color: var(--marine); font: 700 14px/1 system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; cursor: pointer; }
.saf-bouton.rond, .saf-bouton.plein { width: 44px; padding: 0; }
.saf-bouton.rond { font-size: 24px; font-weight: 600; }
.saf-seg { display: inline-flex; background: #fff; border-radius: 22px; box-shadow: 0 2px 8px rgba(16, 35, 63, .2); border: 1px solid var(--ligne); }
.saf-seg .saf-bouton { border: 0; box-shadow: none; background: transparent; padding: 0 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saf-seg .saf-bouton.on { background: var(--marine); color: #fff; }
.saf-bouton.texte { gap: 6px; }
.saf-bouton.texte svg { flex: none; }
.saf-bouton.bleu { border-color: var(--accent); color: var(--accent); }
/* colonne de zoom de la maquette (L-034) : une seule carte verticale à droite, « + », le pourcentage, « − » */
.saf-zoom { display: flex; flex-direction: column; align-items: stretch; border: 1px solid #c5d1e0; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(16, 35, 63, .12); overflow: hidden; }
.saf-zoom .saf-bouton { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; color: var(--marine); font: 500 24px/1 system-ui, sans-serif; }
.saf-zoom .saf-pct { min-width: 0; padding: 0; border-radius: 0; background: #fff; box-shadow: none; border-top: 1px solid #e3e9f1; border-bottom: 1px solid #e3e9f1; font: 600 11px/22px system-ui, sans-serif; color: var(--discret); }
.saf-pct { min-width: 56px; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(16, 35, 63, .18); font-size: 13px; font-weight: 700; text-align: center; color: var(--marine); }
.su-arbre-astuce { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 4; background: rgba(16, 47, 94, .93); color: #fff; border-radius: 16px; padding: 8px 14px; font-size: 13px; margin: 0; pointer-events: none; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.su-arbre-astuce[hidden], .sap-reste[hidden] { display: none; }
.su-arbre-podium { background: var(--marine); color: #fff; border-radius: 12px; margin: 0 0 8px; border: 2px solid #f0b429; }
.sap-bande { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; background: transparent; border: 0; color: #fff; font: inherit; cursor: pointer; text-align: left; }
.sap-ligne { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.sap-ligne i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sap-ligne.or i { background: #f0b429; } .sap-ligne.argent i { background: #c3cbd6; } .sap-ligne.bronze i { background: #c98a4b; }
.sap-med { min-width: 54px; font-size: 12px; opacity: .85; }
.sap-chevron { font-size: 20px; transition: transform .2s; transform: rotate(90deg); }
.su-arbre-podium.ouvert .sap-chevron { transform: rotate(-90deg); }
.sap-reste { padding: 0 14px 8px; }
.su-arbre-fenetre { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.su-arbre-voile { position: absolute; inset: 0; background: rgba(16, 35, 63, .5); }
.su-arbre-feuille { position: relative; width: 100%; max-width: 520px; max-height: 86vh; max-height: 86dvh; overflow: auto; background: #fff; border-radius: 16px 16px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .28); }
.saf-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.saf-tete h2 { font-size: 17px; color: var(--marine); }
.saf-tete h2:focus { outline: none; }
.saf-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef2f7; color: var(--marine); font-size: 18px; cursor: pointer; flex: none; }
.saf-quand { margin: 0 0 8px; font-size: 13px; color: var(--discret); }
.saf-live { color: var(--live); font-weight: 700; }
.saf-eq { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--ligne); border-radius: 12px; color: var(--encre); text-decoration: none; background: #fff; }
.saf-eq .sab-q:not(:empty) { background: #eef2f7; }
.saf-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.saf-pts { font-weight: 800; font-size: 18px; min-width: 22px; text-align: right; }
.saf-fl { color: var(--discret); font-size: 20px; width: 14px; text-align: right; }
.saf-eq.gagnant { color: var(--vert); } .saf-eq.gagnant .saf-nom { font-weight: 800; } .saf-eq.perdant { color: var(--discret); }
.saf-eq.suivie { border: 2px solid var(--accent); } .saf-eq.suivie .saf-nom { color: var(--accent); }
.saf-eq.tbd .saf-nom { font-style: italic; color: var(--discret); font-weight: 400; }
.saf-suite { margin: 10px 0 0; font-size: 14px; color: var(--discret); }
.saf-suite b { color: var(--encre); }
.su-arbre-barre-plein { display: none; }
html.su-arbre-plein .top, html.su-arbre-plein .su-onglets, html.su-arbre-plein .su-bande, html.su-arbre-plein .nav, html.su-arbre-plein .su-arbre-cat, html.su-arbre-plein .su-arbre-podium, html.su-arbre-plein .su-actualiser { display: none; }
html.su-arbre-plein .wrap { display: flex; flex-direction: column; padding: 0; }
html.su-arbre-plein .su-arbre { margin: 0; border-top: 0; }
html.su-arbre-plein .su-arbre-barre-plein { display: flex; order: -1; align-items: center; gap: 8px; min-height: 48px; padding: calc(4px + env(safe-area-inset-top, 0px)) 8px 4px; background: #fff; border-bottom: 1px solid var(--ligne); color: var(--marine); font-weight: 700; font-size: 15px; }
.sab-sortir { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef2f7; color: var(--marine); font-size: 18px; cursor: pointer; flex: none; }
@media (prefers-reduced-motion: reduce) { .sap-chevron { transition: none; } }
html.su-arbre-plein #app-racine { padding-bottom: 0; min-height: 0; }

/* Demande de liaison « C'est moi ! » (L-046, maquette docs/maquettes/liaison-joueur-demande/, écrans 4, 5, 7 et 8) : carte Alignement, feuille, écran des demandes. */
.lia-av { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 17px; line-height: 1; flex: none; }
.lia-av.sm { width: 38px; height: 38px; font-size: 14px; }
.lia-av.xs { width: 32px; height: 32px; font-size: 12px; }
.lia-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: #dfe8f3; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #bcd3ec; }
.lia-ident { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #edf1f6; }
.lia-ident b { display: block; font-size: 18px; color: var(--marine); line-height: 1.25; overflow-wrap: anywhere; }
.lia-ident b:focus { outline: none; }
.lia-feuille p { margin: 0 0 10px; font-size: 14.5px; color: #33465f; }
.lia-encadre { background: #f1f6fd; border: 1px solid #cfe0f3; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.lia-encadre h4 { margin: 0 0 4px; font-size: 16px; color: var(--marine); }
.lia-encadre p { margin: 0; font-size: 14px; }
.lia-encadre.gris { background: #f4f6f9; border-color: #d7dee6; }
.lia-encadre b { color: var(--encre); }
.lia-feuille .btn { margin-bottom: 8px; }
.lia-feuille .btn.lien { min-height: 48px; padding: 10px 14px; font-weight: 400; margin-bottom: 0; }
.lia-resultat { display: grid; gap: 4px; background: #e8f3ec; border: 1px solid #b7dcc5; color: #14532d; padding: 12px; border-radius: 12px; margin-bottom: 12px; }
.lia-resultat b { color: #14532d; }
.lia-attente { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; background: var(--alerte-fond); border: 1px solid var(--alerte-bord); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.lia-attente .btn.lien { width: auto; min-height: 44px; }
.lia-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fdf1dc; color: var(--alerte-encre); border: 1px solid var(--alerte-bord); font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.lia-pastille i { width: 8px; height: 8px; border-radius: 50%; background: #d98a00; }
.su-align .ligne { min-height: 56px; width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; text-align: left; cursor: pointer; }
.su-align .ligne:first-of-type { border-top: 0; }
.su-align .ligne .corps b { display: block; color: var(--marine); font-weight: 600; }
.su-align .ligne.vous { cursor: default; }
.su-align .tag.vous { background: #e7eef8; color: var(--accent); }
.lia-dem { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.lia-dem .lbl { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--discret); margin: 0 0 6px; }
.lia-dem .joueur { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #edf1f6; }
.lia-dem .joueur b { display: block; font-size: 17px; color: var(--marine); line-height: 1.25; overflow-wrap: anywhere; }
.lia-dem .par { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.lia-dem .par .corps { flex: 1; min-width: 0; }
.lia-dem .par b { display: block; color: var(--marine); font-weight: 600; overflow-wrap: anywhere; }
.lia-dem .par .disc { display: block; overflow-wrap: anywhere; }
.lia-dem .tag { margin-top: 4px; }
.lia-dem .avert { display: flex; gap: 8px; background: var(--alerte-fond); border: 1px solid var(--alerte-bord); color: var(--alerte-encre); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; overflow-wrap: anywhere; }
.lia-dem .avert svg { flex: none; margin-top: 1px; }
.lia-dem .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lia-dem .boutons .btn { min-height: 44px; margin-bottom: 0; font-size: 15px; }
.lia-sous { font-size: 13px; color: var(--discret); margin: 0 2px 10px; }
.org-liaison-pastille { margin-left: 6px; }
.org-acces .badge-liaison { position: static; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; background: #6b3fb5; vertical-align: middle; }
/* Points CTRS estimés (L-047, ADR-089) : bloc encadré de « Si le classement s'arrêtait maintenant », ligne de « En résumé », carte « Points CTRS » */
.su-ctrs-bloc { margin-top: 12px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: 10px; background: #f3f7fd; }
.su-ctrs-bloc .disc { margin-top: 2px; }
.su-ctrs-min { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--accent); }
.su-ctrs-liste { margin-top: 8px; }
.su-ctrs-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e9f1; }
.su-ctrs-l b { font: 800 17px/1.1 "Bricolage Grotesque", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-ctrs-liste .su-ctrs-l:last-child { border-bottom: 0; }
/* Carte « Statistiques » de l'écran d'une équipe (L-105) : tableau Pour / Contre, groupes Points, Marteau, Bouts marqués */
.su-stats .st-sous { margin: -4px 0 10px; }
.su-stats .st { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.su-stats .st th, .su-stats .st td { padding: 7px 0; border-top: 1px solid #edf1f6; text-align: right; }
.su-stats .st th[scope="row"], .su-stats .st th[scope="rowgroup"] { text-align: left; font-weight: 400; font-size: 14px; color: var(--encre); }
.su-stats .st td { font-size: 14px; color: var(--encre); white-space: nowrap; }
.su-stats .st thead th { border-top: 0; padding-top: 0; font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); width: 64px; }
.su-stats .st thead th:first-child { width: auto; }
.su-stats .st .grp th { padding: 12px 0 4px; border-top: 0; font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.su-stats .st td.p { font-weight: 800; color: var(--marine); }
.su-stats .st td.c { font-weight: 600; color: var(--discret); }
.su-stats .st td.z { color: #b9c6d8; font-weight: 600; }
.su-stats .st tr.tot td { font-size: 15px; }
.su-stats .st-note { margin: 10px 0 0; }
.su-ctrs-note { margin: 10px 0 0; font-size: 12px; }

/* Tableau de stratégie (RDM-123, ADR-092; maquette approuvée du 2026-11-03, docs/club/maquettes/app-strategie/). */
/* L'écran occupe exactement la hauteur visible : la glace s'adapte (aucun défilement pendant qu'on déplace une pierre). */
.strat { display: flex; flex-direction: column; height: calc(100vh - 61px - env(safe-area-inset-top, 0px) - var(--bas)); height: calc(100dvh - 61px - env(safe-area-inset-top, 0px) - var(--bas)); min-height: 360px; padding: 6px 4px; }
/* 12 px de plus sur les côtés de la glace : les pierres des plateaux restent à 30 px ou plus des bords de l'écran (geste « Retour » d'Android et de Safari). */
.strat-plan { flex: 1; min-height: 0; padding: 0 12px; }
.strat-plan .glace { width: 100%; height: 100%; }
.strat-plan svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.strat-plan svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 10px; }
/* Une seule ligne sous la glace : le décompte à gauche, quatre boutons-icônes à droite. */
.strat-bas { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; }
.strat-compte { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--marine); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strat-compte.neutre { color: var(--discret); font-weight: 600; }
.strat-compte .strat-pt { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); flex: none; }
.strat-actions { flex: none; display: flex; gap: 6px; }
.strat-actions .ib:disabled { opacity: .45; cursor: not-allowed; }
.strat-actions .ib[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.strat-avis { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bas) + 62px); margin: 0; padding: 8px 16px; border-radius: 18px; background: var(--marine); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.35; text-align: center; width: max-content; max-width: min(92vw, 470px); z-index: 20; } /* L-092 : l'avis du split est une phrase; il passe à la ligne (les courts restent sur une ligne) */
/* Pierres et cases (SVG) */
.pg { cursor: grab; }
.pg.levee { cursor: grabbing; }
.pg.hors { opacity: .45; }
.pg .sel { fill: none; stroke: var(--accent); stroke-width: .045; }
.case-vide { fill: none; stroke: #b9c6d6; stroke-width: .025; stroke-dasharray: .07 .06; }
/* Calculatrice de split (L-092; maquette approuvée du 2026-11-06, docs/club/maquettes/app-strategie-split/). Bouton « Split » avec texte dans l'en-tête : le titre reste sur une ligne (ellipse en dernier recours). */
.top.avec-action h1 { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bascule { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 9px; border-radius: 12px; border: 1px solid var(--ligne); background: #fff; color: var(--marine); font: 700 14px/1 system-ui, sans-serif; cursor: pointer; }
.bascule[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
/* Consigne tant qu'aucune pierre de référence n'est choisie : reste affichée (pas de minuterie), sur deux lignes au besoin. */
.strat-consigne { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bas) + 62px); width: max-content; max-width: min(92vw, 470px); margin: 0; padding: 9px 16px; border-radius: 14px; background: var(--marine); color: #fff; font-weight: 600; font-size: 14px; line-height: 1.35; text-align: center; z-index: 20; box-shadow: 0 6px 18px rgba(16, 47, 94, .25); }
.split-sous { margin: -6px 0 12px; }
.split-note { font-size: 12.5px; margin: 0 0 4px; }
.split-feuille .btn.lien { border: 0; background: none; color: var(--rouge); font-weight: 600; min-height: 44px; margin: 6px 0 0; }
/* Nouveauté : point sur l'onglet Plus, étiquette sur la ligne de l'outil (nouveautes.js). Le fond de l'étiquette est plus foncé que --live pour garder un contraste AA (texte de 10 px). */
.nav a .point-nouveau { position: absolute; top: 9px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px #fff; }
.tag.nouveau { background: #c62828; color: #fff; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
.strat-plan svg:focus:not(:focus-visible) { outline: none; }
/* Feuille d'annonce d'une nouveauté (annonce-nouveaute.js, L-065) : reprend dialog.cond-fenetre et dialog.avis-feuille (conditions.js, avis-demande.js); ces feuilles de style sont injectées APRÈS app.css,
   d'où la double classe (spécificité) sur chaque règle qui les contredit. Valeurs de la maquette docs/club/maquettes/app-annonce-nouveaute/annonce.html. */
dialog.cond-fenetre.nv-feuille { padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 16px; }
dialog.cond-fenetre.nv-feuille .nv-apercu { display: block; width: 100%; height: auto; border-radius: 14px; margin: 0 0 14px; }
dialog.cond-fenetre.nv-feuille button.nv-x { position: absolute; top: 24px; right: 26px; width: 44px; height: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: #16202b; cursor: pointer; }
dialog.cond-fenetre.nv-feuille button.nv-x::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(11, 26, 40, .2); }
dialog.cond-fenetre.nv-feuille button.nv-x svg { position: relative; width: 20px; height: 20px; }
dialog.cond-fenetre.nv-feuille .nv-tag { display: inline-block; background: #c62828; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; margin: 0 0 6px; }
dialog.cond-fenetre.nv-feuille h2 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; padding-right: 36px; }
dialog.cond-fenetre.nv-feuille p { margin: 0 0 10px; font-size: 15.5px; color: #33414f; }
dialog.cond-fenetre.nv-feuille p.nv-note { font-size: 13.5px; color: #5a6b7b; margin-bottom: 16px; }
dialog.cond-fenetre.nv-feuille button.cond-oui, dialog.cond-fenetre.nv-feuille button.cond-non { min-height: 48px; border-radius: 10px; font-weight: 700; }
dialog.cond-fenetre.nv-feuille button.cond-non { font-weight: 600; }
dialog.cond-fenetre.nv-feuille button:focus-visible { outline: 3px solid #1261b5; outline-offset: 2px; }

/* Ligue par draws dans « Mes ligues » (L-071) : une ligne par draw passé et le total de la saison dans la ligue */
.ligue-draws:not(:first-child) { border-top: 1px solid #edf1f6; }
.ligue-draws > .ligne { border-top: 0; }
.ligue-draws > .passe { color: var(--discret); font-size: 13px; border-top: 1px dashed #d8e1ec; margin-top: 4px; padding-top: 8px; }
.ligue-draws > .passe:last-child { padding-bottom: 8px; }