/* Outil d'entraîneur — 360 Performance Pro
   Charte : noir carbone, rouge 360 (#E3262B), argent ; Barlow / Barlow Condensed (logo). */
:root {
  --carbone: #0C0C0E; --carbone-2: #17171B; --carbone-3: #24242A;
  --nuit: #141418; --nuit-2: #2A2A31; --encre: #141418; --gris: #55565E; --gris-clair: #73747C;
  --ligne: #E3E4E8; --fond: #F3F3F5; --blanc: #FFFFFF; --argent: #C3C7CD;
  --accent: #E3262B; --accent-fonce: #B81B21; --accent-doux: #FCEBEB;
  --danger: #B42318; --ok: #12784A;
  --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texte: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(12,12,14,.05), 0 4px 14px rgba(12,12,14,.04);
  --lateral: 252px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); font-size: 16px; color: var(--encre); background: var(--fond); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--accent-fonce); }
h1, h2, h3 { font-family: var(--titre); line-height: 1.08; margin: 0; letter-spacing: .01em; }
h1 { text-transform: uppercase; font-style: italic; font-weight: 700; }
.conteneur { width: min(1180px, 100% - 40px); margin-inline: auto; }
.cache { display: none !important; }
svg use { pointer-events: none; }

/* ---------- Cadre de l’application ---------- */
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 16px;
  background: radial-gradient(420px 260px at 0% 0%, rgba(227,38,43,.20), transparent 70%), var(--carbone); color: #fff; overflow-y: auto; }
.lateral-logo { display: block; padding: 0 8px; }
.lateral-logo img { width: 190px; height: auto; display: block; }
.lateral-app { margin: 6px 8px 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--argent); }
.nav-outil { display: flex; flex-direction: column; gap: 2px; }
.nav-titre { margin: 16px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6E7078; }
.nav-outil a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; color: #C9CBD1; text-decoration: none; font-weight: 600; font-size: 15px; position: relative; }
.nav-outil a svg, .onglets svg, .feuille-contenu svg, .lien-discret svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-outil a:hover { background: var(--carbone-3); color: #fff; }
.nav-outil a[aria-current] { background: linear-gradient(90deg, rgba(227,38,43,.22), rgba(227,38,43,.06)); color: #fff; }
.nav-outil a[aria-current]::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.nav-outil a[aria-current] svg { color: var(--accent); }
.lateral-pied { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--carbone-3); display: flex; flex-direction: column; gap: 8px; }
#statut { font-size: 13px; color: var(--argent); min-height: 1.2em; }
#statut[data-etat="erreur"], #statut-mobile[data-etat="erreur"] { color: #FCA5A5; font-weight: 600; }
#statut[data-etat="calme"] { color: #7E8189; }
#statut[data-etat="ok"]::before, #statut[data-etat="calme"]::before { content: "✓ "; color: #4ADE80; }
.outils-edition { display: flex; gap: 4px; }
.outils-edition button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--carbone-2, #18181B); border: 1px solid var(--carbone-3); color: #D4D6DB; border-radius: 8px; padding: 7px 2px 5px; font: 600 11px var(--texte); cursor: pointer; }
.outils-edition button:hover:not(:disabled) { color: #fff; border-color: #55585F; }
.outils-edition button:disabled { opacity: .35; cursor: default; }
.outils-edition svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outils-edition button.tourne svg { animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.mobile-retour { background: none; border: 0; color: #fff; padding: 6px 2px; display: flex; cursor: pointer; }
.mobile-retour svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-retour[hidden] { display: none; }
.outils-mobile button { flex: none; width: 38px; height: 36px; padding: 0; justify-content: center; background: transparent; border-color: transparent; }
.outils-mobile svg { width: 21px; height: 21px; }
.lien-discret { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 4px; color: #A3A6AD; font: 600 14px var(--texte); cursor: pointer; text-align: left; }
.lien-discret:hover { color: #fff; }
#app, #vue-chargement { margin-left: var(--lateral); }

.barre-mobile, .onglets { display: none; }
body:not([data-etat="app"]) .lateral, body:not([data-etat="app"]) .barre-mobile, body:not([data-etat="app"]) .onglets { display: none !important; }
body:not([data-etat="app"]) #vue-chargement { margin-left: 0; }

@media (max-width: 979px) {
  .lateral { display: none; }
  #app, #vue-chargement { margin-left: 0; }
  .barre-mobile { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--carbone); }
  .barre-mobile img { width: 112px; height: auto; display: block; }
  .barre-mobile { justify-content: flex-start; gap: 6px; padding-left: 8px; padding-right: 8px; }
  .mobile-logo { margin-right: auto; }
  #statut-mobile { position: fixed; left: 50%; transform: translateX(-50%); top: calc(62px + env(safe-area-inset-top)); z-index: 40; max-width: calc(100vw - 32px); font-size: 13px; font-weight: 600; color: #fff; background: var(--carbone); border: 1px solid var(--carbone-3); border-radius: 999px; padding: 6px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  #statut-mobile:empty, #statut-mobile[data-etat="calme"] { display: none; }
  .onglets { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--carbone); border-top: 1px solid var(--carbone-3); padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
  /* Bandeau défilant : un peu plus de quatre sections visibles, la suivante dépasse pour montrer qu'il y en a d'autres */
  .onglets-piste { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0 4px; }
  .onglets-piste::-webkit-scrollbar { display: none; }
  .onglets-piste > * { flex: 0 0 22%; min-width: 74px; scroll-snap-align: center; }
  .onglets::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; pointer-events: none; background: linear-gradient(to right, transparent, var(--carbone)); }
  .onglets a, .onglets button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: #9C9FA6; text-decoration: none; font: 600 11px var(--texte); background: none; border: 0; cursor: pointer; }
  .onglets svg { width: 23px; height: 23px; }
  .onglets a[aria-current] { color: #fff; }
  .onglets a[aria-current] svg { color: var(--accent); }
  /* iPhone : un champ dont le texte fait moins de 16 px déclenche un zoom de toute la page quand on le touche */
  input, select, textarea { font-size: 16px !important; }
  #app { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------- Connexion et chargement ---------- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(800px 500px at 80% 10%, rgba(227,38,43,.25), transparent 70%), var(--carbone); }
.connexion { width: min(440px, 100%); display: flex; flex-direction: column; gap: 6px; }
.connexion img { width: 100%; height: auto; border-radius: 16px; }
.connexion form { background: var(--carbone-2); border: 1px solid var(--carbone-3); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; color: #fff; }
.connexion h1 { font-size: 26px; color: #fff; }
.connexion label { color: var(--argent); }
.connexion input { background: var(--carbone) !important; border-color: var(--carbone-3) !important; color: #fff !important; }
.connexion-note { margin: 0; font-size: 13px; color: #8A8D95; }
.page-centre { min-height: 70vh; display: grid; place-items: center; padding: 40px 16px; }
.chargeur { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--ligne); border-top-color: var(--accent); animation: tourner .8s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chargeur { animation-duration: 3s; } }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; font: 700 15px var(--texte); letter-spacing: .01em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .05s; }
.bouton:active { transform: translateY(1px); }
.bouton-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(227,38,43,.25); }
.bouton-accent:hover { background: var(--accent-fonce); }
.bouton-sombre { background: var(--nuit); color: var(--blanc); }
.bouton-sombre:hover { background: var(--nuit-2); }
.bouton[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.bouton-l { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--blanc); color: var(--nuit); font: 600 14px var(--texte); cursor: pointer; text-decoration: none; white-space: nowrap; }
.bouton-l:hover { border-color: #B9BBC2; background: #FAFAFB; }
.bouton-l.danger, .icone.danger { color: var(--danger); }
.bouton-l[disabled] { opacity: .7; cursor: default; }
label.bouton-l { flex-direction: row; gap: 0; color: var(--nuit); } /* bouton qui ouvre un choix de fichier */
.icone { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--blanc); font-size: 16px; cursor: pointer; }
.icone[disabled] { opacity: .35; cursor: default; }
:focus-visible { outline: 3px solid rgba(227,38,43,.45); outline-offset: 2px; }

/* ---------- Pages ---------- */
.entete-vue.entete-sombre { background: radial-gradient(700px 300px at 90% 0%, rgba(227,38,43,.28), transparent 70%), var(--carbone); border-bottom: 0; color: #fff; padding: 34px 0 30px; }
.entete-vue.entete-sombre h1 { color: #fff; }
.entete-sombre .surtitre { color: var(--argent); }
.entete-sombre .bouton-l { background: transparent; color: #fff; border-color: #45474F; }
.entete-sombre .bouton-l:hover { background: var(--carbone-3); }
.entete-vue { background: var(--blanc); border-bottom: 1px solid var(--ligne); padding: 26px 0 20px; }
.entete-ligne { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.entete-vue h1 { font-size: clamp(30px, 4vw, 44px); color: var(--nuit); }
.entete-vue h1::after { content: ''; display: block; width: 46px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--accent); transform: skewX(-20deg); }
.entete-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.surtitre { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-fonce); }
.retour { display: inline-block; margin-bottom: 6px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--gris); }
.retour:hover { color: var(--accent-fonce); }
.page { padding: 22px 0 64px; display: flex; flex-direction: column; gap: 18px; }
.titre-section { font-size: 24px; color: var(--nuit); text-transform: uppercase; font-style: italic; margin-top: 10px; }
.aide-section { margin: -10px 0 0; color: var(--gris); font-size: 14px; }
.panneau { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); }
.panneau h2 { font-size: 22px; color: var(--nuit); margin-bottom: 10px; text-transform: uppercase; }
.panneau h3 { font-size: 19px; color: var(--nuit); margin: 4px 0 6px; }
.panneau ul { margin: 0; padding-left: 18px; }
.vide { color: var(--gris); padding: 16px 0; margin: 0; }
.vide-court { color: var(--gris-clair); margin: 0; font-size: 14px; }
.deux-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.trois-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.liste-simple { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.liste-simple a { text-decoration: none; }

/* ---------- Formulaires ---------- */
label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14px; color: var(--encre); }
label small { font-weight: 400; color: var(--gris-clair); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--ligne); border-radius: 8px;
  font: 15px var(--texte); background: var(--blanc); color: var(--encre);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(227,38,43,.25); border-color: var(--accent-fonce); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.champs .large { grid-column: 1 / -1; }
.cases { display: flex; flex-wrap: wrap; gap: 6px 8px; }
label.case { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; background: var(--fond); border: 1px solid var(--ligne); border-radius: 20px; padding: 5px 12px 5px 8px; cursor: pointer; }
label.case:has(input:checked) { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-fonce); }
.total { align-self: end; margin: 0; padding-bottom: 10px; color: var(--gris); }
.total b { font-family: var(--titre); font-size: 26px; color: var(--nuit); }
.filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.filtres-court { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); }
.compteur { margin: 0; color: var(--gris); font-size: 14px; }
.message { margin: 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.message.ok { background: #E7F6EC; color: var(--ok); }
.message.erreur { background: #FDECEC; color: #7F1D1D; }
fieldset[disabled] input, fieldset[disabled] textarea, fieldset[disabled] select { background: var(--fond); color: var(--encre); opacity: 1; }

/* ---------- Étiquettes ---------- */
.pastille-phase { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c); border: 1.5px solid var(--c); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.etiquette { display: inline-block; font-size: 13px; font-weight: 600; background: #EEF3F7; color: var(--nuit-2); border-radius: 14px; padding: 3px 10px; text-decoration: none; margin: 0 4px 4px 0; }
.etiquette.neutre { background: var(--fond); color: var(--gris); border: 1px solid var(--ligne); }
.perso { font-size: 11px; font-weight: 700; color: var(--accent-fonce); text-transform: uppercase; letter-spacing: .04em; }
.ligne-etiquettes { margin: 0; }

/* ---------- Cartes ---------- */
.grille-ex { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.carte-ex { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.carte-ex:hover { border-color: var(--nuit-2); box-shadow: 0 6px 18px rgba(15,42,61,.08); }
.carte-ex-lien { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.vignette { padding: 8px 8px 0; }
.vignette figcaption { display: none; }
.carte-ex-texte { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.carte-ex h3 { font-size: 19px; color: var(--nuit); }
.carte-ex .meta { margin: 0; display: flex; gap: 8px; align-items: center; }
.carte-ex .detail { margin: 0; font-size: 13px; color: var(--gris); }
.chiffres { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--gris); }
.chiffres span + span::before { content: '· '; margin-left: -8px; }
.grille-seances { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.carte-seance { background: var(--blanc); border: 1px solid var(--ligne); border-top: 4px solid var(--nuit); border-radius: var(--rayon); padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.carte-seance:hover { border-color: var(--nuit-2); box-shadow: 0 6px 18px rgba(15,42,61,.08); }
.carte-seance .meta { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-clair); }
.carte-seance h3 { font-size: 21px; color: var(--nuit); }
.carte-seance .phases { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stats div { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 16px; }
.stats small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-clair); }
.stats b { font-family: var(--titre); font-size: 32px; color: var(--nuit); }

/* ---------- Éditeur de séance ---------- */
.blocs { display: flex; flex-direction: column; gap: 10px; }
details.bloc { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); }
details.bloc > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
details.bloc > summary::-webkit-details-marker { display: none; }
details.bloc .n { font-family: var(--titre); font-weight: 800; font-size: 24px; color: var(--accent-fonce); min-width: 22px; }
details.bloc .t { font-weight: 700; flex: 1 1 200px; }
details.bloc .d { font-weight: 700; color: var(--gris); white-space: nowrap; }
.bloc-actions { display: flex; gap: 4px; }
details.bloc[open] > summary { border-bottom: 1px solid var(--ligne); }
details.bloc > .form-ex { padding: 14px; }
.bloc-pied { margin: 0; padding: 0 14px 14px; }
.ajout-bloc { display: flex; flex-wrap: wrap; gap: 10px; }
.form-ex { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.form-ex-schema { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 120px; }
.schema-figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.schema-figure svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.schema-figure figcaption { font-size: 12px; color: var(--gris); }
.ajout-seance { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.ajout-seance label { flex: 1 1 260px; }
.ajout-seance .message { flex-basis: 100%; }

/* ---------- Fiche d'exercice ---------- */
.lecture { max-width: 980px; }
.fiche-ex { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 16px 18px; break-inside: avoid; page-break-inside: avoid; }
.fiche-ex-titre { display: flex; align-items: baseline; gap: 10px; border-bottom: 3px solid var(--nuit); padding-bottom: 6px; }
.fiche-ex-titre .n { font-family: var(--titre); font-weight: 800; font-size: 26px; color: var(--accent-fonce); }
.fiche-ex-titre h3 { font-size: 22px; color: var(--nuit); flex: 1; }
.fiche-ex-titre .d { font-weight: 700; white-space: nowrap; }
.fiche-ex-meta { margin: 6px 0 12px; font-size: 13px; color: var(--gris); }
.fiche-ex-grille { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.fiche-ex-texte { font-size: 14.5px; }
.fiche-ex-texte h4 { margin: 10px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-fonce); }
.fiche-ex-texte h4:first-child { margin-top: 0; }
.fiche-ex-texte p, .fiche-ex-texte ul { margin: 0; }
.fiche-ex-texte ul { padding-left: 18px; }
.materiel { margin-top: 10px !important; font-size: 13px; color: var(--gris); }
.legende-symboles { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--blanc); font-size: 12px; color: var(--gris); }
.legende-symboles .leg-item { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Principes ---------- */
.grille-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.carte-phase { background: var(--blanc); border: 1px solid var(--ligne); border-top: 5px solid var(--c); border-radius: var(--rayon); padding: 16px; }
.carte-phase h3 { font-size: 22px; color: var(--nuit); margin-bottom: 6px; }
.carte-phase p { margin: 0 0 10px; font-size: 14px; color: var(--gris); }
.carte-phase ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.carte-phase small { color: var(--gris-clair); }
.grille-principes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.carte-principe { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.carte-principe:hover { border-color: var(--nuit-2); }
.carte-principe h3 { font-size: 21px; color: var(--nuit); }
.carte-principe p { margin: 0; font-size: 14px; color: var(--gris); }
.fiche-principe { display: flex; flex-direction: column; gap: 14px; }
.definition { font-size: 17px; margin: 0; }

/* ---------- Systèmes ---------- */
.systeme-haut { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
.systeme-haut p { margin: 0 0 8px; }
.systeme-haut h3 { margin-top: 10px; }
.grille-postes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.carte-poste { display: flex; gap: 12px; align-items: flex-start; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 14px; text-decoration: none; color: inherit; }
.carte-poste:hover { border-color: var(--nuit-2); }
.carte-poste.actif { border-color: #E5534B; box-shadow: inset 4px 0 0 #E5534B; }
.carte-poste .num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #3B8FD9; color: #fff; display: grid; place-items: center; font-family: var(--titre); font-weight: 800; font-size: 18px; }
.carte-poste b { display: block; color: var(--nuit); }
.carte-poste small { display: block; color: var(--gris); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.bord-attaque { border-top: 4px solid #2563EB; }
.bord-defense { border-top: 4px solid #B45309; }
.bord-transition { border-top: 4px solid #059669; }
.qualites { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.qualites h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-fonce); }
.panneau li + li { margin-top: 4px; }
.poste-imprime { break-inside: avoid; page-break-inside: avoid; }
.fiche-systeme .systeme-haut { grid-template-columns: 300px minmax(0, 1fr); }

/* ---------- Composition sur le terrain ---------- */
.compo-barre { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.onglets-vue { display: inline-flex; background: var(--fond); border: 1px solid var(--ligne); border-radius: 10px; padding: 3px; }
.onglets-vue button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: 600 14px var(--texte); color: var(--gris); cursor: pointer; }
.onglets-vue button[aria-selected="true"] { background: var(--carbone); color: #fff; }
.compo-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.compo-terrain { border-radius: 10px; overflow: hidden; touch-action: none; }
.compo-svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.compo-joueur { cursor: grab; }
.compo-joueur:focus { outline: none; }
.compo-joueur:focus-visible circle { stroke: #141418; stroke-width: 2; }
.compo-panneau { display: flex; flex-direction: column; gap: 10px; }
.compo-panneau h3 { font-size: 22px; }
.compo-role { margin: 0; font-size: 14px; color: var(--gris); }
.compo-panneau details { background: var(--fond); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.compo-panneau summary { font-weight: 700; cursor: pointer; }
.compo-panneau details ul { margin: 6px 0 0; padding-left: 18px; }
.compo-liste { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.compo-liste button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--ligne); padding: 7px 4px; font: 500 14px var(--texte); color: var(--encre); cursor: pointer; }
.compo-liste button:hover { background: var(--fond); }
.compo-liste b { color: var(--accent-fonce); }
.compo-liste span { font-weight: 700; }
.compo-remplacants { margin-top: 14px; }
.compo-impression { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compo-impression figure { margin: 0; }
.compo-impression figcaption { font-size: 12px; color: var(--gris); text-align: center; }
.table-compo { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-compo th, .table-compo td { border-bottom: 1px solid var(--ligne); padding: 5px 8px; text-align: left; vertical-align: top; }

/* ---------- Tableau du match (plan de match) ---------- */
.conteneur-large { width: min(1480px, 100% - 40px); }
.tableau-match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'nous eux' 'postes postes' 'plan analyse'; gap: 16px; align-items: start; }
.tm-nous { grid-area: nous; } .tm-eux { grid-area: eux; } .tm-plan { grid-area: plan; } .tm-analyse { grid-area: analyse; } .tm-postes { grid-area: postes; }
.tm-zone { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tm-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-tete select { width: auto; min-width: 170px; flex: 1 1 170px; max-width: 260px; font-weight: 700; }
.tm-pastille { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 20px; text-transform: uppercase; padding: 3px 12px; border-radius: 6px; color: #fff; }
.tm-tete-nous .tm-pastille { background: var(--accent); }
.tm-tete-eux .tm-pastille { background: var(--carbone); }
.tm-lien { font-size: 13px; font-weight: 600; margin-left: auto; }
.compo-terrain { border-radius: 10px; overflow: hidden; touch-action: none; }
.compo-svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.compo-joueur { cursor: grab; }
.compo-joueur:focus { outline: none; }
.compo-joueur:focus-visible > circle:last-of-type { stroke: #141418; stroke-width: 2; }
.compo-sous-terrain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.onglets-vue { display: inline-flex; background: var(--fond); border: 1px solid var(--ligne); border-radius: 10px; padding: 3px; }
.onglets-vue button { border: 0; background: none; padding: 6px 11px; border-radius: 8px; font: 600 13.5px var(--texte); color: var(--gris); cursor: pointer; }
.onglets-vue button[aria-selected="true"] { background: var(--carbone); color: #fff; }
.compo-sous-terrain label.case { font-size: 13px; padding: 4px 10px 4px 7px; }
.lien-discret-clair { background: none; border: 0; color: var(--gris); font: 600 13px var(--texte); cursor: pointer; text-decoration: underline; padding: 4px; margin-left: auto; }
.aide-terrain { margin: 0; font-size: 13px; color: var(--gris-clair); }
.compo-vide { padding: 40px 0; text-align: center; }
.compo-edition { background: var(--fond); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.compo-edition-titre { margin: 0; display: flex; gap: 10px; align-items: center; font-size: 15px; }
.compo-edition-titre a { font-size: 13px; }
.lien-fermer { margin-left: auto; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--gris); cursor: pointer; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.champs-2 .large { grid-column: 1 / -1; }
.champs-2 label { font-size: 13px; }
.compo-edition input, .compo-edition select { min-height: 38px; font-size: 14px; }
.compo-role { margin: 0; font-size: 13px; color: var(--gris); }
.compo-remplacants { font-size: 13px; }
.compo-remplacants textarea { font-size: 14px; }
.tm-titre { font-size: 22px; text-transform: uppercase; font-style: italic; color: var(--nuit); }
.tm-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-bloc { border-radius: 10px; padding: 10px 12px; background: var(--fond); border-top: 4px solid; display: flex; flex-direction: column; gap: 6px; }
.tm-off { border-top-color: #2563EB; }
.tm-def { border-top-color: #B45309; }
.tm-bloc h4 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.tm-off h4 { color: #1D4ED8; } .tm-def h4 { color: #92400E; }
.tm-bloc h5 { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--gris); }
.tm-bloc h5.plus { color: var(--ok); } .tm-bloc h5.moins { color: var(--danger); }
.tm-bloc h5.plus::before { content: '+ '; } .tm-bloc h5.moins::before { content: '− '; }
.tm-zone textarea { font-size: 14px; line-height: 1.4; background: #fff; }
.tm-zone textarea[readonly] { background: transparent; border-color: transparent; resize: none; padding-left: 0; }
.tm-sous { margin: 4px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.tm-aide { margin: 0 !important; font-size: 12.5px; }
.tm-taches-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.tm-taches-tete h4 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.table-taches { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-taches th, .table-taches td { border-bottom: 1px solid var(--ligne); padding: 6px; vertical-align: top; text-align: left; }
.table-taches thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.table-taches thead th:nth-child(2) { color: #1D4ED8; } .table-taches thead th:nth-child(3) { color: #92400E; }
.table-taches th[scope="row"] { width: 150px; }
.table-taches textarea { min-height: 84px; font-size: 13px; padding: 6px 8px; field-sizing: content; }
.table-taches ul { margin: 0; padding-left: 16px; }
.table-taches tr.ligne-sel { background: var(--accent-doux); }
/* Onglets du plan de match : bandeau défilant (carrousel), une seule partie affichée */
.onglets-plan { position: sticky; top: 0; z-index: 20; background: var(--blanc); border-bottom: 1px solid var(--ligne); box-shadow: 0 2px 8px rgba(12,12,14,.04); }
.onglets-plan-piste { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 8px 0; -webkit-overflow-scrolling: touch; }
.onglets-plan-piste::-webkit-scrollbar { display: none; }
.onglets-plan-piste button { flex: none; scroll-snap-align: center; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--ligne); background: var(--fond); color: var(--gris); font: 700 14.5px var(--texte); white-space: nowrap; cursor: pointer; }
.onglets-plan-piste button[aria-selected="true"] { background: var(--carbone); border-color: var(--carbone); color: #fff; }
.onglets-plan-piste button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onglets-suite { display: flex; justify-content: space-between; gap: 10px; }
.onglets-suite button:last-child { margin-left: auto; }
.plan[data-onglet="match"] fieldset:not([data-o]), .plan[data-onglet="compo"] fieldset:not([data-o]) { display: none; }
.plan[data-onglet="match"] [data-o]:not([data-o="match"]) { display: none; }
.plan[data-onglet="compo"] [data-o]:not([data-o="compo"]) { display: none; }
.plan[data-onglet="plan"] [data-o]:not([data-o="plan"]) { display: none; }
.plan[data-onglet="cpa"] [data-o]:not([data-o="cpa"]) { display: none; }
.plan[data-onglet="adv"] [data-o]:not([data-o="adv"]) { display: none; }
.plan[data-onglet="semaine"] [data-o]:not([data-o="semaine"]) { display: none; }
.plan[data-onglet="causerie"] [data-o]:not([data-o="causerie"]) { display: none; }
.plan[data-onglet="bilan"] [data-o]:not([data-o="bilan"]) { display: none; }
.plan:not([data-onglet="compo"]):not([data-onglet="plan"]):not([data-onglet="adv"]) [data-tableau] { display: none; }
.plan[data-onglet="compo"] .tableau-match { grid-template-columns: minmax(340px, 480px) minmax(0, 1fr); grid-template-areas: 'nous postes'; }
.plan[data-onglet="adv"] .tableau-match { grid-template-columns: minmax(340px, 480px) minmax(0, 1fr); grid-template-areas: 'eux analyse'; }
.plan[data-onglet="plan"] .tableau-match { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'plan'; }
.plan[data-onglet="compo"] .tm-nous, .plan[data-onglet="adv"] .tm-eux { position: sticky; top: 68px; }
@media (max-width: 1099px) {
  .plan[data-onglet="compo"] .tableau-match { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'nous' 'postes'; }
  .plan[data-onglet="adv"] .tableau-match { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'eux' 'analyse'; }
  .plan[data-onglet="compo"] .tm-nous, .plan[data-onglet="adv"] .tm-eux { position: static; }
}
@media (max-width: 979px) { .onglets-plan { top: calc(52px + env(safe-area-inset-top)); } .onglets-plan-piste { padding: 7px 0; } }
/* Champ date : sur iPhone il débordait du panneau */
input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

.tm-terrain-vue { background: #fff; }
.tm-terrain-aide { margin: -2px 0 2px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gris-clair); }
.tm-terrain-aide .lien-discret-clair { margin-left: auto; }
.plan[data-onglet="plan"] .tm-plan > .tm-deux { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .plan[data-onglet="plan"] .tm-plan > .tm-deux { grid-template-columns: minmax(0, 1fr); } }

.causerie-prenoms { align-self: end; }
.causerie-actions { align-items: center; margin: 12px 0; }
.causerie-etat { font-size: 14px; color: var(--gris); }
.causerie-texte textarea { line-height: 1.55; field-sizing: content; min-height: 180px; }
.causerie-imprimee p { margin: 0 0 6px; font-size: 13px; }
.causerie-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.causerie-version { border: 1px solid var(--ligne); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.causerie-version h3 { font-size: 19px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.causerie-version h3 small { font: 500 12.5px var(--texte); color: var(--gris); letter-spacing: 0; text-transform: none; }
.causerie-version p { margin: 0; font-size: 13.5px; color: var(--gris); }
.causerie-version .actions-bloc { margin-top: auto; padding-top: 6px; }
.causerie-repere { margin: 0; font-size: 13.5px; color: var(--nuit) !important; }
.causerie-pieges { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; display: grid; gap: 2px; color: var(--gris); }
.causerie-pieges li::before { content: "✓ "; color: #047857; font-weight: 700; }
.causerie-pieges li.manque { color: #B45309; font-weight: 600; } .causerie-pieges li.manque::before { content: "! "; color: #B45309; }
.causerie-versions { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.causerie-versions em { display: block; font-style: normal; color: #B45309; font-weight: 600; }
@media (max-width: 700px) { .causerie-deux { grid-template-columns: minmax(0, 1fr); } }
.causerie-recap { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.causerie-recap li { border: 1px solid var(--ligne); border-radius: 8px; padding: 6px 10px; background: var(--fond); }
.causerie-recap li b { margin-right: 4px; }
.causerie-recap li.manque { color: var(--gris); border-style: dashed; }
.aide-champ { display: block; margin-top: 4px; font-weight: 400; color: var(--gris); }
.causerie-fiche h2 { margin-top: 22px; }
.causerie-messages { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.causerie-lue p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.causerie-lue.notes p { font-size: 14.5px; }
.causerie-lue p, .causerie-messages li { break-inside: avoid; }

/* Vues du terrain : bandeau défilant (base, phases avec le ballon, hauteurs de bloc) */
.vues-terrain { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; flex: 1 1 100%; min-width: 0; }
.vues-terrain::-webkit-scrollbar { display: none; }
.vues-terrain button { flex: none; min-height: 36px; padding: 0 13px; border-radius: 18px; border: 1px solid var(--ligne); background: var(--fond); color: var(--gris); font: 700 13.5px var(--texte); white-space: nowrap; cursor: pointer; }
.vues-terrain button[aria-selected="true"] { background: var(--carbone); border-color: var(--carbone); color: #fff; }
.vues-terrain button.off[aria-selected="true"] { background: #1D4ED8; border-color: #1D4ED8; }
.vues-terrain button.def[aria-selected="true"] { background: #92400E; border-color: #92400E; }
.vues-groupe { display: inline-flex; align-items: center; gap: 6px; flex: none; padding-left: 8px; border-left: 2px solid var(--ligne); }
.vues-groupe i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.vues-groupe.off i { color: #1D4ED8; } .vues-groupe.def i { color: #92400E; }
.vues-terrain.camp { flex: none; }
.principe-phase { border-radius: 8px; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid; padding: 8px 11px; font-size: 13.5px; }
.principe-phase.off { border-left-color: #2563EB; } .principe-phase.def { border-left-color: #B45309; }
.principe-phase summary { cursor: pointer; font-size: 13px; }
.principe-phase .principe, .phase-systeme .principe { margin: 6px 0 4px; font-weight: 600; color: var(--nuit); line-height: 1.4; }
.principe-phase ul, .phase-systeme ul { margin: 0; padding-left: 18px; }
.principe-phase li, .phase-systeme li { margin-top: 3px; line-height: 1.4; }
.structure { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 10px; background: var(--carbone); color: #fff; font: 700 12px var(--texte); letter-spacing: .02em; vertical-align: 1px; }
.principes-systeme .aide-section { margin: 4px 0 0; }
.phases-camp { margin: 14px 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.phases-camp.off { color: #1D4ED8; } .phases-camp.def { color: #92400E; }
.phases-systeme { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.phase-systeme { background: var(--blanc); border: 1px solid var(--ligne); border-top: 4px solid; border-radius: var(--rayon); padding: 12px 14px; font-size: 14px; break-inside: avoid; }
.phase-systeme.off { border-top-color: #2563EB; } .phase-systeme.def { border-top-color: #B45309; }
.phase-systeme h3 { margin: 0 0 8px; font-size: 19px; color: var(--nuit); }
.phase-terrain { border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.phase-terrain .compo-joueur { cursor: default; }
.ti-terrains.six { grid-template-columns: repeat(3, 1fr); }
.ti-terrains.six figcaption { font-size: 10.5px; }

/* Rôle de chaque joueur dans une phase */
.roles-phase { margin-top: 8px; border-top: 1px dashed var(--ligne); padding-top: 6px; }
.roles-phase summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--nuit-2); }
.roles-phase dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.roles-phase dt { font-weight: 700; color: var(--accent-fonce); white-space: nowrap; }
.roles-phase dd { margin: 0; line-height: 1.4; }
.compo-mission { margin: 0; font-size: 13.5px; line-height: 1.4; background: #fff; border-left: 4px solid var(--accent); border-radius: 6px; padding: 7px 10px; }
@media (max-width: 560px) { .roles-phase dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .roles-phase dd { margin-bottom: 6px; } }

/* Rapports de force */
.rapports { display: grid; grid-template-columns: minmax(280px, 520px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rapports-terrain { margin: 0; border-radius: 10px; overflow: hidden; }
.rapports-terrain figcaption { font-size: 12px; color: var(--gris); padding: 6px 2px 0; }
.rapports-texte h4 { margin: 12px 0 4px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.rapports-texte h4.sup { color: var(--ok); } .rapports-texte h4.inf { color: var(--danger); }
.rapports-texte ul { margin: 0; padding-left: 18px; font-size: 14px; }
.rapports-lignes { width: 100%; border-collapse: collapse; font-size: 14px; }
.rapports-lignes th, .rapports-lignes td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--ligne); }
.rapports-lignes tr.sup td:last-child { color: var(--ok); font-weight: 700; } .rapports-lignes tr.inf td:last-child { color: var(--danger); font-weight: 700; } .rapports-lignes tr.egal td:last-child { color: var(--gris); font-weight: 700; }
.rapports-note { margin: 10px 0 0 !important; font-size: 12.5px; }
@media (max-width: 760px) { .rapports { grid-template-columns: minmax(0, 1fr); } }

/* Grille d'observation de l'adversaire */
.observation h2 small { font-family: var(--texte); font-size: 14px; color: var(--gris-clair); text-transform: none; }
.obs-titre { margin: 14px 0 8px !important; font-size: 14px !important; letter-spacing: .05em; text-transform: uppercase; color: var(--gris) !important; }
.obs-titre.off { color: #1D4ED8 !important; } .obs-titre.def { color: #92400E !important; }
.obs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 14px; }
.obs-point label { gap: 5px; }
.obs-point input { font-size: 14px; }
.obs-imprimee { columns: 2; padding-left: 16px; font-size: 12.5px; }

/* Coups de pied arrêtés */
.cpa { display: flex; flex-direction: column; gap: 16px; }
.cpa-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.cpa-carte { background: var(--blanc); border: 1px solid var(--ligne); border-top: 4px solid var(--carbone); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cpa-carte.off { border-top-color: #2563EB; } .cpa-carte.def { border-top-color: #B45309; }
.cpa-carte header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cpa-carte h3 { margin: 0; font-size: 21px; color: var(--nuit); text-transform: uppercase; font-style: italic; }
.cpa-carte h3 small { font-family: var(--texte); font-style: normal; font-size: 13px; color: var(--gris-clair); }
.cpa-aide { margin: 0 !important; font-size: 13px; }
.cpa-cotes { flex: 0 1 auto; }
.cpa-cotes button small { font-weight: 600; opacity: .8; margin-left: 2px; }
.cpa-carte .mp-actions { margin: 0; }
.cpa-corps { display: grid; grid-template-columns: minmax(170px, 270px) minmax(0, 1fr); gap: 12px; align-items: start; }
.cpa-schema svg { border-radius: 8px; display: block; }
.cpa-roles ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: role; display: flex; flex-direction: column; gap: 6px; }
.cpa-roles li { counter-increment: role; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.cpa-roles li::before { content: counter(role); grid-row: 1 / 3; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--carbone); color: #fff; font: 700 12.5px var(--texte); }
.cpa-roles li::before { background: #fff !important; color: var(--carbone); box-shadow: inset 0 0 0 1.5px currentColor; }
.cpa-carte.off .cpa-roles li::before { color: #1D4ED8; } .cpa-carte.def .cpa-roles li::before { color: #92400E; }
.cpa-roles li.num::before { content: attr(data-num); color: #fff; box-shadow: none; }
.cpa-roles li.abr::before { content: attr(data-num); font-size: 9px; letter-spacing: -.02em; }
.cpa-roles li:not(.num):not(.abr)::before { box-shadow: none; border: 1.5px dashed currentColor; opacity: .75; }
.cpa-carte.off .cpa-roles li.num::before { background: #1D4ED8 !important; color: #fff; } .cpa-carte.def .cpa-roles li.num::before { background: #92400E !important; color: #fff; }
.cpa-numeros { margin: 0 0 10px !important; font-size: 13px; }
.cpa-schema.mobile svg { touch-action: none; -webkit-user-select: none; user-select: none; }
.cpa-schema.mobile .cpa-pion { cursor: grab; }
.cpa-geste { margin: 6px 0 0; font-size: 12px; color: var(--gris); }
.cpa-roles li span { font-size: 12.5px; font-weight: 600; color: var(--gris); line-height: 1.2; }
.cpa-roles li select { min-height: 38px; font-size: 14.5px; font-weight: 600; }
.cpa-variante, .cpa-note { font-size: 13px; }
.cpa-tireurs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.cpa-tireurs-grille label { font-size: 13px; }
.cpa-imprime ul { margin: 0; padding-left: 16px; } .cpa-imprime li { font-size: 12px; }
@media (max-width: 560px) { .cpa-liste { grid-template-columns: minmax(0, 1fr); } .cpa-corps { grid-template-columns: minmax(0, 1fr); } .cpa-schema { max-width: 420px; } }

/* Joueurs et missions au poste */
.mp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; align-items: start; }
.mp { border: 1px solid var(--ligne); border-radius: 10px; background: var(--blanc); min-width: 0; }
.mp.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.mp-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) 62px; grid-template-areas: 'pastille nom nom' 'joueur joueur num'; gap: 8px; align-items: center; padding: 10px; }
.mp-tete.lu { grid-template-areas: 'pastille nom nom' 'lu lu lu'; }
.mp-pastille { grid-area: pastille; min-width: 44px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: 700 15px var(--titre); letter-spacing: .04em; cursor: pointer; }
.mp-pastille:hover { background: var(--accent-fonce); }
.mp-nom { grid-area: nom; min-width: 0; font-size: 14.5px; line-height: 1.25; color: var(--nuit); }
.mp-joueur { grid-area: joueur; min-width: 0; } .mp-num { grid-area: num; } .mp-lu { grid-area: lu; font-weight: 600; }
.mp-joueur span, .mp-num span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-clair); }
.mp-joueur select, .mp-joueur input, .mp-num input { min-height: 42px; font-size: 15px; font-weight: 600; width: 100%; }
.mp-num input { text-align: center; padding-left: 4px; padding-right: 4px; }
.mp-tete.banc { grid-template-columns: auto minmax(0, 1fr) 62px; grid-template-areas: 'pastille nom fermer' 'joueur joueur num' 'entre entre entre'; }
.mp-tete.banc.lu { grid-template-areas: 'pastille nom nom' 'lu lu lu'; }
.mp-tete.banc .lien-fermer { grid-area: fermer; justify-self: end; min-width: 40px; min-height: 30px; }
.mp-pastille.r { background: var(--carbone); display: grid; place-items: center; cursor: default; }
.mp-entre { grid-area: entre; min-width: 0; }
.mp-entre span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-clair); }
.mp-entre select { min-height: 40px; font-size: 14.5px; width: 100%; }
.mp-sous-titre { margin: 8px 0 0; font-family: var(--titre); font-style: italic; font-size: 20px; text-transform: uppercase; color: var(--nuit); }
.mp-sous-titre small { font-style: normal; font-size: 14px; color: var(--gris-clair); }
.mp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mp-consigne-banc { margin: 0 10px 10px; }
.mp-missions { border-top: 1px solid var(--ligne); }
.mp-missions summary { padding: 9px 10px; font-size: 13.5px; font-weight: 700; color: var(--nuit-2); cursor: pointer; }
.mp-missions summary em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--accent-fonce); }
.mp-col { margin: 0 10px 10px; padding: 9px 11px 10px; border-radius: 8px; background: var(--fond); border-left: 4px solid; }
.mp-off { border-left-color: #2563EB; } .mp-def { border-left-color: #B45309; }
.mp-col h5 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mp-off h5 { color: #1D4ED8; } .mp-def h5 { color: #92400E; }
.mp-phases { margin: 0; }
.mp-phases dt { font-size: 12.5px; font-weight: 700; color: var(--nuit); margin-top: 7px; }
.mp-phases dt:first-child { margin-top: 0; }
.mp-phases dd { margin: 1px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--encre); }
.mp-consigne { margin-top: 9px; font-size: 12.5px; color: var(--gris); }
.mp-consigne textarea { font-size: 13.5px; padding: 6px 8px; min-height: 0; field-sizing: content; }
.mp-consigne-lue { margin: 8px 0 0; font-size: 13.5px; }
.mp-fiche { margin: 0 10px 10px; font-size: 13px; }
.mp-reste { margin: 2px 0 0; font-size: 14px; color: var(--gris); }
.mp-reste b { color: var(--nuit); }
.table-missions ul { margin: 0; padding-left: 14px; }
.table-missions li { font-size: 11.5px; line-height: 1.35; }
.table-missions li.perso { color: var(--accent-fonce); }
.table-missions td:first-child { width: 17%; } .table-missions small { color: var(--gris); }
.table-missions tr { break-inside: avoid; }
.ti-source { font-size: 11px; color: var(--gris); margin-top: 6px; }
.missions-poste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.missions-poste .mp-col { margin: 0; }
@media (max-width: 760px) { .missions-poste { grid-template-columns: minmax(0, 1fr); } .mp-liste { grid-template-columns: minmax(0, 1fr); } }
.poste-lien { display: flex; gap: 8px; align-items: flex-start; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 500 13px var(--texte); color: var(--encre); }
.poste-lien .num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.poste-lien b { color: var(--accent-fonce); }
@media (max-width: 1099px) {
  .tableau-match { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'nous' 'postes' 'plan' 'eux' 'analyse'; }
}
@media (max-width: 560px) {
  .tm-deux, .champs-2 { grid-template-columns: minmax(0, 1fr); }
  .table-taches thead { display: none; }
  .table-taches tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ligne); padding: 6px 0; }
  .table-taches th[scope="row"] { grid-column: 1 / -1; width: auto; border: 0; }
  .table-taches td { border: 0; }
  .conteneur-large { width: min(1480px, 100% - 24px); }
}
/* impression du tableau */
.ti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.ti h2 { font-size: 18px !important; margin-top: 4px !important; }
.ti-terrains { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ti-terrains.un { grid-template-columns: 1fr; max-width: 70%; }
.ti-terrains figure { margin: 0; }
.ti-terrains figcaption { font-size: 11px; color: var(--gris); text-align: center; }
.ti-adv { font-size: 12.5px; }
.ti-remp { font-size: 12.5px; }
.ti .deux-col { gap: 10px; grid-template-columns: 1fr 1fr; }
.ti p, .ti li { font-size: 12.5px; }

/* ---------- Gardien selon la défense ---------- */
.gk-comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gk-col { border: 1px solid var(--ligne); border-radius: 10px; padding: 14px 16px; background: var(--fond); }
.gk-col.actuel { background: #fff; border: 2px solid var(--accent); box-shadow: var(--ombre); }
.gk-col h3 { font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gk-badge { font-family: var(--texte); font-style: normal; font-size: 12px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 12px; padding: 2px 9px; }
.gk-sys { margin: 4px 0 10px; font-size: 13px; color: var(--gris); }
.gk-col dl { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.gk-col dt { font-weight: 700; color: var(--nuit); }
.gk-col dd { margin: 0; }
@media (max-width: 760px) { .gk-comparaison { grid-template-columns: minmax(0, 1fr); } .gk-col dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .gk-col dd { margin-bottom: 8px; } }

/* ---------- Plans ---------- */
.plan fieldset { display: flex; flex-direction: column; gap: 18px; }
.microcycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.jour { border: 1px solid var(--ligne); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--fond); }
.jour-nom { font-family: var(--titre); font-weight: 800; font-size: 20px !important; min-height: 36px !important; }
.table-semaine { width: 100%; border-collapse: collapse; }
.table-semaine th, .table-semaine td { border-bottom: 1px solid var(--ligne); padding: 6px 8px; text-align: left; vertical-align: top; }
.table-semaine th { width: 60px; font-family: var(--titre); font-size: 18px; }

/* ---------- Suivi ---------- */
.liste-suivi { display: flex; flex-direction: column; gap: 6px; }
.ligne-suivi { display: grid; grid-template-columns: 150px minmax(0, 1fr) 140px 90px 80px; gap: 10px; align-items: center; background: var(--blanc); border: 1px solid var(--ligne); border-left: 5px solid var(--gris-clair); border-radius: 8px; padding: 10px 14px; text-decoration: none; color: inherit; }
.ligne-suivi:hover { border-color: var(--nuit-2); }
.ligne-suivi.statut-realisee { border-left-color: #059669; }
.ligne-suivi.statut-prevue { border-left-color: var(--accent); }
.ligne-suivi.statut-annulee { opacity: .6; }
.ligne-suivi .titre { font-weight: 700; }
.ligne-suivi .date, .ligne-suivi .groupe, .ligne-suivi .statut { font-size: 14px; color: var(--gris); }
.ligne-suivi .duree { font-weight: 700; text-align: right; }
.barres { display: flex; flex-direction: column; gap: 8px; }
.barre-phase { display: grid; grid-template-columns: 190px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 14px; }
.barre-phase .piste { background: var(--fond); border-radius: 4px; height: 14px; overflow: hidden; }
.barre-phase .piste span { display: block; height: 100%; border-radius: 4px; }
.barre-phase .val { text-align: right; font-weight: 600; }


/* ---------- Charge ---------- */
.stats-petites div { padding: 10px 14px; }
.stats-petites b { font-size: 28px; }
.stats-petites span { display: block; font-size: 12px; color: var(--gris); }
.zone-cible { border-left: 5px solid #059669 !important; }
.zone-vigilance { border-left: 5px solid #D97706 !important; }
.zone-pic { border-left: 5px solid #DC2626 !important; background: #FEF2F2 !important; }
.zone-basse { border-left: 5px solid #64748B !important; }
.alerte { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.alerte-fort { background: #FEE2E2; color: #7F1D1D; }
.alerte-moyen { background: #FEF3C7; color: #78350F; }
.alerte-info { background: #EEF3F7; color: var(--nuit-2); }
.graphe-charge { width: 100%; max-width: 680px; height: auto; margin-top: 14px; display: block; }
.graphe-charge .b { fill: #94A3B8; }
.graphe-charge .b-actuelle { fill: var(--accent); }
.graphe-charge .v { font: 600 10px var(--texte); fill: var(--encre); }
.graphe-charge .d { font: 10px var(--texte); fill: var(--gris); }
.pastille-match { font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--nuit); color: #fff; border-radius: 4px; padding: 1px 6px; vertical-align: 2px; }
.ua { font-weight: 600; color: var(--gris); margin-left: 6px; }
.seance-du-jour { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--nuit); color: #fff; border-radius: var(--rayon); padding: 14px 18px; text-decoration: none; }
.seance-du-jour small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.seance-du-jour b { font-family: var(--titre); font-size: 24px; }

/* ---------- Effectif ---------- */
.titre-section small { font-family: var(--texte); font-size: 14px; font-weight: 500; color: var(--gris); text-transform: none; margin-left: 6px; }
.sous-titre-section { font-size: 19px; color: var(--nuit); margin: 4px 0 -6px; }
.grand-chiffre { font-family: var(--titre); font-size: 44px; font-weight: 800; color: var(--nuit); margin: 0; line-height: 1; }
.table-defile { overflow-x: auto; }
.table-eval { border-collapse: collapse; width: 100%; font-size: 14px; }
.table-eval th, .table-eval td { border-bottom: 1px solid var(--ligne); padding: 6px 10px; text-align: left; }
.table-eval thead th { font-size: 13px; vertical-align: bottom; }
.table-eval thead a { text-decoration: none; }
.table-eval td.n { text-align: center; font-weight: 700; width: 90px; }
.table-eval tr.cat th, .table-eval tr.cat td { background: var(--fond); font-weight: 700; }
.table-eval tr.cat td { text-align: center; }
.n1 { color: #B42318; } .n2 { color: #B45309; } .n3 { color: #047857; } .n4 { color: #1D4ED8; }
.cat-eval { margin: 18px 0 6px; font-size: 20px; color: var(--nuit); }
.ligne-eval { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.ligne-eval .notes { display: flex; gap: 6px; flex: none; }
.note input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.note span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid var(--ligne); background: #fff; font-weight: 700; cursor: pointer; }
.note input:checked + span { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.note input:focus-visible + span { outline: 3px solid rgba(227,38,43,.45); }
label.note { display: block; }

/* ---------- Équipes ---------- */
.grille-equipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-equipe { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--rayon); text-decoration: none; color: #fff;
  background: radial-gradient(260px 140px at 100% 0%, rgba(227,38,43,.35), transparent 70%), var(--carbone); box-shadow: var(--ombre); transition: transform .12s; }
.carte-equipe:hover { transform: translateY(-2px); }
.ce-haut { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ce-cat { color: var(--accent); }
.ce-saison { color: var(--argent); }
.ce-nom { font-family: var(--titre); font-style: italic; font-size: 30px; line-height: 1; text-transform: uppercase; }
.ce-stats { display: flex; gap: 14px; font-size: 13px; color: #C9CBD1; }
.ce-stats b { font-family: var(--titre); font-size: 20px; color: #fff; margin-right: 2px; }
.ce-bas { font-size: 13px; color: var(--argent); border-top: 1px solid var(--carbone-3); padding-top: 8px; }
.vide-equipes { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vide-equipes p { margin: 0; color: var(--gris); max-width: 60ch; }
.fiche-equipe > summary, .ajout-rapide > summary { cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; list-style: none; }
.fiche-equipe > summary::-webkit-details-marker, .ajout-rapide > summary::-webkit-details-marker { display: none; }
.fiche-equipe > summary h2 { margin: 0; }
.fiche-equipe[open] > summary { margin-bottom: 14px; }
.ajout-rapide textarea { margin-top: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }
.couverture { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.couv { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ligne); border-left: 4px solid; text-decoration: none; color: var(--encre); }
.couv.ok { border-left-color: var(--ok); } .couv.juste { border-left-color: #D97706; } .couv.vide { border-left-color: var(--danger); background: #FEF2F2; }
.couv .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--carbone); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.couv b { display: block; font-size: 14px; } .couv small { color: var(--gris); }

/* ---------- Générateur ---------- */
.bloc-gen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px; }
.bloc-gen .vignette { padding: 0; }
.bloc-gen h3 { font-size: 20px; margin: 2px 0 4px; }
.bloc-gen h3 a { text-decoration: none; color: var(--nuit); }
.bloc-gen p { margin: 0 0 6px; font-size: 14px; }
.bloc-gen .meta { color: var(--gris); }
.actions-bloc { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Mode terrain ---------- */
body.mode-terrain { background: var(--carbone); }
body.mode-terrain .lateral, body.mode-terrain .barre-mobile, body.mode-terrain .onglets { display: none !important; }
body.mode-terrain #app { margin-left: 0; padding-bottom: 0; }
.terrain { min-height: 100vh; display: flex; flex-direction: column; color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgba(227,38,43,.18), transparent 70%), var(--carbone); }
.terrain-haut { display: flex; align-items: center; gap: 12px; padding: 10px 14px; position: sticky; top: 0; background: var(--carbone); z-index: 3; padding-top: calc(10px + env(safe-area-inset-top)); }
.terrain-fermer { color: #fff; text-decoration: none; font-size: 22px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); flex: none; }
.terrain-titre { min-width: 0; }
.terrain-titre b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terrain-titre small { color: #9FB3C3; }
.terrain-progression { display: flex; gap: 4px; padding: 0 14px 8px; }
.terrain-progression span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.terrain-progression .fait { background: #059669; }
.terrain-progression .actuel { background: var(--accent); }
.terrain-corps { flex: 1; padding: 6px 14px 110px; width: min(760px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.terrain-corps h1 { font-size: 32px; }
.terrain-meta { margin: -6px 0 0; color: #9FB3C3; font-size: 14px; }
.terrain-schema .schema-figure figcaption { display: none; }
.terrain-chrono { display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px; }
.chrono { font-family: var(--titre); font-style: italic; font-weight: 700; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; }
.chrono.depasse { color: #F87171; }
.chrono-boutons { display: flex; gap: 10px; align-items: center; }
.rond { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 16px var(--texte); cursor: pointer; }
.rond.grand { width: 76px; height: 76px; background: var(--accent); color: #fff; font-size: 20px; box-shadow: 0 8px 20px rgba(227,38,43,.35); }
.rond.grand.pause { background: #fff; color: var(--carbone); box-shadow: none; }
.terrain-corps h2 { font-size: 20px; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; }
.terrain-corps section ul { margin: 0; padding-left: 20px; font-size: 18px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.terrain-corps details { background: rgba(255,255,255,.06); border-radius: 10px; padding: 12px 14px; }
.terrain-corps summary { font-weight: 700; cursor: pointer; }
.terrain-corps details p, .terrain-corps details ul { margin: 8px 0 0; color: #DCE4EA; }
.terrain-fin { align-self: stretch; }
.terrain-bas { position: fixed; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--carbone); border-top: 1px solid rgba(255,255,255,.1); }
.terrain-bas button { min-height: 56px; border-radius: 12px; border: 0; background: rgba(255,255,255,.12); color: #fff; font: 700 17px var(--texte); cursor: pointer; }
.terrain-bas button[data-nav="1"] { background: var(--accent); color: #fff; }
.terrain-bas button[disabled] { opacity: .3; }

/* ---------- Fenêtres ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(1200px, 100% - 16px); max-height: calc(100vh - 16px); box-shadow: 0 30px 80px rgba(0,0,0,.35); background: var(--fond); color: var(--encre); }
dialog::backdrop { background: rgba(15,42,61,.55); }
.choix-tete, .editeur-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: var(--blanc); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 2; }
.choix-tete h2, .editeur-tete h2 { font-size: 24px; color: var(--nuit); text-transform: uppercase; }
.choix-filtres { padding: 14px 18px 0; }
.choix-liste { padding: 14px 18px 18px; }
.editeur-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editeur-auto { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--gris); padding: 0 4px; }
.editeur-corps { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
.editeur-outils { display: flex; flex-direction: column; gap: 10px; }
.editeur-outils .groupe { display: flex; flex-wrap: wrap; gap: 5px; }
.editeur-outils .groupe span { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair); }
.editeur-outils button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border-radius: 6px; border: 1.5px solid var(--ligne); background: var(--blanc); font: 600 13px var(--texte); cursor: pointer; color: var(--encre); }
.editeur-outils button[aria-pressed="true"] { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }
.editeur-outils i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #1F2A33; display: inline-block; }
.editeur-zone { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.editeur-svg { width: 100%; max-width: calc((100vh - 300px) * 1.4); align-self: center; aspect-ratio: 280 / 200; touch-action: none; cursor: crosshair; border-radius: 10px; user-select: none; -webkit-user-select: none; }
.editeur-svg .poignee { fill: rgba(255,255,255,.01); stroke: #0F2A3D; stroke-width: .5; stroke-dasharray: 1.2 1; }
.editeur-svg .poignee.sel { fill: rgba(227,38,43,.25); stroke: #B45309; stroke-width: .9; stroke-dasharray: none; }
.editeur-svg .poignee.milieu { fill: #fff; stroke: #0F2A3D; stroke-dasharray: none; stroke-width: .5; }
.editeur-aide { margin: 0; font-size: 14px; color: var(--gris); }
.editeur-options { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; min-height: 10px; }
.editeur-options label { flex: 0 1 200px; }
.editeur-options label.case { flex: none; }
.editeur-terrain summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.editeur-terrain { display: flex; flex-direction: column; gap: 10px; }
.editeur-terrain label { margin-top: 8px; max-width: 420px; }
dialog.editeur > .legende-symboles { margin: 0 18px 18px; }

/* ---------- Connexion ---------- */
.page-centre { min-height: calc(100vh - 56px); display: grid; place-items: center; padding: 40px 16px; }
.boite { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 28px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; }
.boite h1 { font-size: 32px; color: var(--nuit); }
.boite p { margin: 0; color: var(--gris); }
.boite form { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Fiche imprimable ---------- */
.barre-impression { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; }
.fiche-imprimable { width: min(860px, 100% - 16px); margin: 0 auto 64px; background: var(--blanc); padding: 28px 32px; border-radius: 6px; box-shadow: 0 6px 30px rgba(15,42,61,.12); display: flex; flex-direction: column; gap: 14px; }
.fiche-tete { background: var(--carbone) url(/img/logo-compact-sombre.svg) no-repeat right 28px center / auto 46px; color: var(--blanc); margin: -28px -32px 0; padding: 22px 230px 22px 32px; border-radius: 6px 6px 0 0; border-bottom: 4px solid var(--accent); }
.fiche-marque { margin: 0 0 4px; font-family: var(--titre); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-size: 14px; }
.fiche-tete h1 { font-size: 34px; }
.fiche-infos { margin: 6px 0 0; color: #DCE4EA; font-size: 14px; }
.fiche-objectif, .fiche-materiel, .fiche-principes { margin: 0; }
.fiche-imprimable .fiche-ex { border: 0; padding: 0; border-radius: 0; }
.fiche-imprimable h2 { font-size: 22px; color: var(--nuit); text-transform: uppercase; border-bottom: 2px solid var(--nuit); padding-bottom: 4px; margin-top: 8px; }
.fiche-imprimable h4 { margin: 8px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-fonce); }
.fiche-imprimable p, .fiche-imprimable ul { margin: 0; }
.fiche-imprimable ul { padding-left: 18px; }
.fiche-notes { break-inside: avoid; }
.lignes-ecriture { height: 120px; border: 1.5px solid #C7D0D8; border-radius: 8px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #E1E6EA 29px, #E1E6EA 30px); }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .compo-grille { grid-template-columns: minmax(0, 1fr); }
  .compo-terrain { margin: 0 -8px; }
  .stats div { padding: 10px 12px; }
  .stats b { font-size: 26px; }
  .stats small { font-size: 11px; }
  .entete-vue { padding: 18px 0 16px; }
  .entete-vue.entete-sombre { padding: 22px 0 20px; }
  .entete-actions .bouton, .entete-actions .bouton-l { min-height: 40px; }
  .seance-du-jour b { font-size: 21px; }
  .conteneur { width: min(1180px, 100% - 32px); }
  .bloc-gen { grid-template-columns: minmax(0, 1fr); }
  .ligne-eval { flex-direction: column; align-items: flex-start; }
  .systeme-haut, .fiche-systeme .systeme-haut { grid-template-columns: minmax(0, 1fr); }
  .form-ex, .fiche-ex-grille, .editeur-corps { grid-template-columns: minmax(0, 1fr); }
  .form-ex-schema { position: static; max-width: 420px; }
  .editeur-outils { flex-direction: row; flex-wrap: wrap; }
  .editeur-outils .groupe span { display: none; }
  .ligne-suivi { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-suivi .groupe, .ligne-suivi .statut { display: none; }
  .ligne-suivi .date { grid-column: 1 / -1; }
  .barre-phase { grid-template-columns: 120px minmax(0, 1fr) 60px; }
  .fiche-imprimable { padding: 20px 16px; }
  .fiche-tete { margin: -20px -16px 0; padding: 70px 16px 18px; background-position: 16px 16px; background-size: auto 38px; }
  .marque { font-size: 15px; letter-spacing: .08em; }
  .barre > .conteneur { gap: 8px; }
  #statut { font-size: 11px; max-width: 90px; line-height: 1.2; }
  .bouton-contour { padding: 0 10px; font-size: 13px; }
  .editeur-svg { max-width: 100%; }
}

@page { size: A4; margin: 12mm; }
@media print {
  body { background: #fff; }
  .barre-impression, .lateral, .barre-mobile, .onglets, .feuille { display: none !important; }
  #app { margin: 0 !important; padding: 0 !important; }
  .fiche-imprimable { width: 100%; box-shadow: none; padding: 0; margin: 0; }
  .fiche-tete { margin: 0; border-radius: 0; }
  .fiche-ex-grille { grid-template-columns: 260px minmax(0, 1fr); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Situations de jeu */
.sit h2 { margin: 0 0 4px; }
.sit-reglages { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sit-adv { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.sit-adv select { font: 500 14px var(--texte); padding: 6px 8px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--blanc); }
.sit-etiquette { margin: 6px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.sit-porteurs { display: flex; flex-wrap: wrap; gap: 6px; }
.sit-porteurs button { border: 1px solid var(--ligne); background: var(--blanc); border-radius: 999px; padding: 6px 11px; font: 500 13px var(--texte); cursor: pointer; color: var(--nuit); }
.sit-porteurs button b { color: #D9782B; margin-right: 2px; }
.sit-porteurs button[aria-selected="true"] { background: var(--carbone); border-color: var(--carbone); color: #fff; }
.sit-porteurs button[aria-selected="true"] b { color: #fff; }
.sit-principal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; align-items: start; }
.sit-dessin svg { width: 100%; height: auto; display: block; }
.sit-legende { margin: 6px 0 0; font-size: 12.5px; color: var(--gris); }
.sit-legende .pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 3px; }
.sit-legende .pt.nous { background: #3B8FD9; } .sit-legende .pt.eux { background: #F2994A; } .sit-legende .pt.actif { background: var(--accent); }
.sit-texte h3 { margin: 0 0 10px; font-size: 18px; text-transform: uppercase; color: var(--nuit); line-height: 1.2; }
.sit-consigne { border-left: 4px solid var(--accent); background: var(--fond); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.sit-consigne p { margin: 0; line-height: 1.5; }
.sit-alerte { font-weight: 700; color: var(--accent-fonce); margin-bottom: 6px !important; }
.sit-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.sit-liste li { font-size: 13.5px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 8px; }
.sit-liste li a { color: var(--nuit); text-decoration: none; }
.sit-liste li.sit-special { border-color: var(--accent); }
.sit-liste em { color: var(--accent-fonce); font-style: normal; font-weight: 600; font-size: 12px; }
.sit-sous { margin: 22px 0 8px; font-size: 15px; text-transform: uppercase; color: var(--nuit); }
.sit-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sit-vignette { border: 1px solid var(--ligne); background: var(--blanc); border-radius: 10px; padding: 6px; cursor: pointer; text-align: left; font: 500 12.5px var(--texte); color: var(--nuit); display: flex; flex-direction: column; gap: 2px; }
.sit-vignette svg { width: 100%; height: auto; display: block; }
.sit-vignette small { color: var(--gris); }
.sit-vignette.actif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 760px) {
  .sit-principal { grid-template-columns: 1fr; }
  .sit-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Notification de mise à jour */
.maj-bandeau { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; background: var(--carbone); color: #fff; border: 1px solid var(--carbone-3); border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.35); animation: maj-entree .25s ease-out; transition: opacity .5s, transform .5s; }
.maj-bandeau.maj-faite { border-left-color: #22C55E; }
.maj-bandeau.maj-sortie { opacity: 0; transform: translateY(12px); }
.maj-texte b { display: block; font-size: 16px; margin-bottom: 4px; }
.maj-texte ul { margin: 4px 0 6px; padding-left: 18px; font-size: 13.5px; color: #D4D6DB; line-height: 1.4; }
.maj-texte small { color: #9C9FA6; font-size: 12px; }
.maj-actions { display: flex; gap: 8px; justify-content: flex-end; }
.maj-bandeau .bouton-l { background: transparent; color: #D4D6DB; border-color: var(--carbone-3); }
@keyframes maj-entree { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 979px) { .maj-bandeau { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Clubs des joueurs (sélections) */
.onglets-vue a { padding: 7px 12px; border-radius: 8px; font: 600 14px var(--texte); color: var(--gris); text-decoration: none; }
.onglets-vue a[aria-selected="true"] { background: var(--carbone); color: #fff; }
.club-joueur { color: var(--accent-fonce) !important; font-weight: 600; }
.case .club-joueur { font-size: 11.5px; margin-left: 4px; }
.titre-club { margin: 18px 0 8px; font-size: 16px; text-transform: uppercase; color: var(--nuit); border-left: 4px solid var(--accent); padding-left: 10px; }
.titre-club small { color: var(--gris); font-weight: 500; text-transform: none; margin-left: 6px; }
.table-suivi-club { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-suivi-club th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); padding: 6px 8px; border-bottom: 2px solid var(--ligne); }
.table-suivi-club td { padding: 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.table-suivi-club td a { color: var(--nuit); font-weight: 600; }
.table-suivi-club small { color: var(--gris); }
.a-faire { color: var(--accent-fonce); font-weight: 700; }
.suivi-club { display: grid; gap: 10px; margin-top: 10px; }
.suivi-club-ligne { border: 1px solid var(--ligne); border-left: 4px solid var(--accent); border-radius: 10px; padding: 12px; }
.suivi-club-ligne .petit { margin-top: 8px; padding: 5px 10px; font-size: 12.5px; }

/* Causerie de match projetée (plein écran) */
body.en-projection { overflow: hidden; }
.projection { position: fixed; inset: 0; z-index: 2000; background: #fff; color: var(--carbone); display: flex; flex-direction: column; font-family: var(--texte); --pj: clamp(15px, 2.05vw, 34px); }
.pj-scene { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; cursor: pointer; -webkit-user-select: none; user-select: none; }
.pj-scene.sombre { background: var(--carbone); color: #fff; }
.pj-tete { background: var(--carbone); color: #fff; border-bottom: 4px solid var(--accent); padding: clamp(10px, 1.6vw, 26px) clamp(16px, 3vw, 48px); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pj-tete p { margin: 0; font-size: calc(var(--pj) * .5); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pj-tete h2 { margin: 2px 0 0; font: 700 calc(var(--pj) * 1.25)/1.1 var(--titre, var(--texte)); text-transform: uppercase; color: #fff; }
.pj-tete .pj-match { color: #C8C8CE; text-align: right; white-space: nowrap; }
.pj-corps { flex: 1; min-height: 0; padding: clamp(12px, 2vw, 32px) clamp(16px, 3vw, 48px); display: flex; flex-direction: column; }
.pj-corps > * { flex: 1; min-height: 0; }
.pj-titre { display: flex; flex-direction: column; justify-content: center; }
.pj-titre .pj-sur { margin: 0; color: var(--accent); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: calc(var(--pj) * .7); }
.pj-titre h1 { margin: .15em 0; font: 700 clamp(34px, 8vw, 130px)/1 var(--titre, var(--texte)); text-transform: uppercase; color: #fff; }
.pj-titre .pj-infos { margin: 0; font-size: var(--pj); color: #C8C8CE; }
.pj-titre .pj-systemes { margin: 1.2em 0 0; font-size: calc(var(--pj) * 1.15); font-weight: 700; }
.pj-compo, .pj-cpa { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 32px); align-items: stretch; }
.pj-cpa { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pj-terrain { min-height: 0; display: flex; align-items: center; justify-content: center; }
.pj-terrain svg { width: 100%; height: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); display: block; }
.pj-terrain .compo-joueur { cursor: inherit; }
.pj-compo .compo-joueur text:last-of-type { font-size: 7.4px; }
.pj-compo aside h3 { margin: 0 0 .5em; font-size: calc(var(--pj) * .62); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border-bottom: 2px solid var(--carbone); padding-bottom: .3em; }
.pj-compo aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; font-size: calc(var(--pj) * .8); }
.pj-compo aside li small { color: var(--gris); font-weight: 600; }
.pj-compo aside li span { display: block; font-size: .72em; color: var(--gris); }
.pj-vide { color: var(--gris); font-size: calc(var(--pj) * .7); }
.pj-consignes.adv section { border-color: var(--carbone); } .pj-consignes.adv h3 { color: var(--carbone); }
.pj-adv .compo-joueur text:last-of-type { font-size: 7.4px; }
.pj-rapports { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.pj-rapports figure { margin: 0; }
.pj-rapports aside { display: flex; flex-direction: column; gap: 1em; }
.pj-rapports aside h3 { color: #0B6B3A; border-color: #0B6B3A; } .pj-rapports aside .inf h3 { color: #C81E1E; border-color: #C81E1E; }
.pj-rapports aside li b::after { content: " :"; }
.pj-rapports aside { gap: .7em !important; }
.pj-legende { margin: auto 0 0; font-size: calc(var(--pj) * .5); color: var(--gris); }
.pj-duel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(10px, 1.6vw, 26px); }
.pj-duel section { background: #F5F5F7; border-left: 6px solid #0B6B3A; border-radius: 0 10px 10px 0; padding: clamp(10px, 1.5vw, 24px) clamp(14px, 2vw, 30px); }
.pj-duel section.inf { border-color: #C81E1E; }
.pj-duel h3, .pj-phase h3 { margin: 0 0 .6em; font-size: calc(var(--pj) * .58); letter-spacing: .08em; text-transform: uppercase; color: #0B6B3A; }
.pj-duel .inf h3 { color: #C81E1E; }
.pj-duel ul { margin: 0; padding-left: 1.1em; display: grid; gap: .55em; font-size: calc(var(--pj) * .78); line-height: 1.28; }
.pj-phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(12px, 2vw, 30px); align-items: start; }
.pj-phase-gauche { display: flex; flex-direction: column; gap: .7em; min-width: 0; }
.pj-phase .pj-terrain svg { height: auto; max-height: none; border-radius: 8px; }
.pj-phase .compo-joueur text:last-of-type { font-size: 6.6px; }
.pj-principe { margin: 0; font-size: calc(var(--pj) * .82); font-weight: 700; line-height: 1.25; }
.pj-principe small { display: block; margin-bottom: .2em; font-size: .62em; letter-spacing: .08em; text-transform: uppercase; color: #1D4ED8; }
.pj-phase.def .pj-principe small, .pj-phase.def h3 { color: #92400E; }
.pj-phase h3 { color: #1D4ED8; }
.pj-phase .contre h3 { color: var(--accent); }
.pj-phase-droite { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.pj-phase ul { margin: 0; padding-left: 1.1em; display: grid; gap: .5em; font-size: calc(var(--pj) * .72); line-height: 1.28; }
.pj-phase-gauche section { margin-top: .4em; }
.pj-phase .contre li::marker { color: var(--accent); }
.pj-phase.sans-terrain .pj-principe { font-size: calc(var(--pj) * 1.15); }
.pj-phase.sans-terrain ul { font-size: calc(var(--pj) * .7); }
.pj-points { list-style: none; margin: 0; padding: 0; counter-reset: pt; display: flex; flex-direction: column; justify-content: center; gap: .9em; height: 100%; }
.pj-points li { counter-increment: pt; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: .3em; align-items: baseline; font-size: calc(var(--pj) * 1.02); font-weight: 600; line-height: 1.24; }
.pj-points li::before { content: counter(pt); font-size: 1.5em; font-weight: 700; color: #1D4ED8; }
.pj-court.def .pj-points li::before { color: #92400E; }
.pj-court.pj-phase { align-items: stretch; }
.pj-court .pj-phase-gauche { justify-content: center; }
.pj-questions .pj-points li { font-size: calc(var(--pj) * 1.3); } .pj-questions .pj-points li::before { color: var(--accent); }
.pj-contexte { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
.pj-contexte section.match { border-color: var(--carbone); } .pj-contexte .match h3 { color: var(--carbone); }
.pj-contexte ul { font-size: calc(var(--pj) * .95); font-weight: 500; }
.pj-mitemps { display: flex; flex-direction: column; gap: 1em; }
.pj-mitemps-blocs { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: clamp(10px, 1.6vw, 26px); }
.pj-mitemps section { background: #F5F5F7; border-left: 6px solid #1D4ED8; border-radius: 0 10px 10px 0; padding: clamp(12px, 1.6vw, 26px); }
.pj-mitemps section.def { border-color: #92400E; }
.pj-mitemps h3 { margin: 0 0 .6em; font-size: calc(var(--pj) * .6); letter-spacing: .08em; text-transform: uppercase; color: #1D4ED8; }
.pj-mitemps .def h3 { color: #92400E; } .pj-mitemps .def .pj-points li::before { color: #92400E; }
.pj-mitemps .pj-points { height: auto; } .pj-mitemps .pj-points li { font-size: calc(var(--pj) * 1.15); }
.pj-mot { margin: 0; padding: .6em 1em; background: var(--carbone); color: #fff; border-radius: 10px; font-size: calc(var(--pj) * 1.3); font-weight: 700; text-align: center; }
.pj-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 26px); align-content: start; }
.pj-plan figure { margin: 0; display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.pj-plan .pj-terrain svg { height: auto; max-height: none; border-radius: 8px; }
.pj-plan .compo-joueur text:last-of-type { display: none; }
.pj-plan .compo-joueur circle { r: 8.6px; } .pj-plan .compo-joueur text:first-of-type { font-size: 7.6px; }
.pj-plan h3 { margin: 0 0 .3em; display: flex; justify-content: space-between; gap: 8px; font-size: calc(var(--pj) * .78); letter-spacing: .05em; text-transform: uppercase; color: #1D4ED8; }
.pj-plan.def h3 { color: #92400E; }
.pj-plan h3 span { color: var(--carbone); letter-spacing: 0; }
.pj-plan p { margin: 0; font-size: calc(var(--pj) * .74); line-height: 1.3; }
.pj-consignes { display: grid; grid-auto-rows: 1fr; gap: clamp(8px, 1.2vw, 18px); }
.pj-consignes section { background: #F5F5F7; border-left: 6px solid #1D4ED8; border-radius: 0 10px 10px 0; padding: clamp(10px, 1.5vw, 24px) clamp(14px, 2vw, 32px); }
.pj-consignes.def section { border-color: #92400E; }
.pj-consignes h3 { margin: 0 0 .5em; display: flex; justify-content: space-between; gap: 12px; font-size: calc(var(--pj) * .6); letter-spacing: .08em; text-transform: uppercase; color: #1D4ED8; }
.pj-consignes.def h3 { color: #92400E; }
.pj-consignes h3 small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gris); }
.pj-consignes p { margin: 0 0 .35em; font-size: calc(var(--pj) * 1.12); line-height: 1.32; }
.pj-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 22px); justify-content: center; }
.pj-roles.par1 { grid-template-columns: minmax(0, 34%); } .pj-roles.par2 { grid-template-columns: repeat(2, minmax(0, 34%)); }
.pj-roles article { background: #F5F5F7; border-radius: 12px; padding: clamp(10px, 1.3vw, 22px); display: flex; flex-direction: column; gap: .7em; min-height: 0; }
.pj-roles header { display: flex; align-items: center; gap: .6em; }
.pj-roles header > div { flex: 1; min-width: 0; }
.pj-roles h3 { margin: 0; font-size: calc(var(--pj) * 1.2); line-height: 1.05; }
.pj-roles header p { margin: 0; font-size: calc(var(--pj) * .56); color: var(--gris); }
.pj-mini { flex: none; width: 24%; min-width: 54px; height: auto; }
.pj-pastille { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: var(--carbone); color: #fff; font-weight: 700; font-size: calc(var(--pj) * .95); }
.pj-pastille.abr { font-size: calc(var(--pj) * .56); width: 3.4em; height: 3.4em; }
.pj-camp { flex: 1; min-height: 0; }
.pj-camp h4 { margin: 0 0 .5em; padding: .3em .7em; border-radius: 6px; background: #1D4ED8; color: #fff; font: 700 calc(var(--pj) * .56)/1.2 var(--texte); letter-spacing: .08em; text-transform: uppercase; }
.pj-camp.def h4 { background: #92400E; }
.pj-camp ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: .4em; font-size: calc(var(--pj) * .82); line-height: 1.22; font-weight: 500; }
.pj-camp li::marker { color: #1D4ED8; } .pj-camp.def li::marker { color: #92400E; }
.pj-ce-match { font-weight: 700; color: #1D4ED8; } .pj-camp.def .pj-ce-match { color: #92400E; }
.pj-cpa-liste { display: flex; flex-direction: column; gap: .6em; min-height: 0; }
.pj-cpa-liste ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .32em; font-size: calc(var(--pj) * .74); }
.pj-cpa-liste li { display: grid; grid-template-columns: 2.3em minmax(0, auto) minmax(0, 1fr); gap: .5em; align-items: center; }
.pj-cpa-liste li small { color: var(--gris); font-size: .78em; }
.pj-cpa .pj-pastille { font-size: 1em; width: 2em; height: 2em; background: #92400E; }
.pj-cpa.off .pj-pastille { background: #1D4ED8; }
.pj-cpa .pj-pastille.vide { background: #fff; color: #92400E; box-shadow: inset 0 0 0 2px currentColor; font-size: .62em; width: 3.2em; height: 3.2em; }
.pj-cpa.off .pj-pastille.vide { color: #1D4ED8; }
.pj-note { margin: 0; background: #F5F5F7; border-left: 5px solid #92400E; padding: .5em .8em; font-weight: 700; font-size: calc(var(--pj) * .72); }
.pj-cpa.off .pj-note { border-color: #1D4ED8; }
.pj-tireurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); align-content: start; }
.pj-tireurs div { background: #F5F5F7; border-radius: 10px; padding: .6em 1em; display: grid; gap: .1em; }
.pj-tireurs small { color: var(--gris); font-size: calc(var(--pj) * .56); }
.pj-tireurs b { font-size: calc(var(--pj) * 1.05); }
.pj-messages { margin: 0; padding: 0; list-style: none; counter-reset: msg; display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.pj-messages li { counter-increment: msg; display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .4em; align-items: baseline; font-size: calc(var(--pj) * 1.5); font-weight: 700; line-height: 1.2; }
.pj-messages li::before { content: counter(msg); color: var(--accent); font-size: 1.3em; }
.pj-barre { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: var(--carbone); color: #fff; }
.pj-barre button { min-width: 44px; min-height: 40px; border: 1px solid #3A3A42; border-radius: 8px; background: #1F1F25; color: #fff; font: 700 22px/1 var(--texte); cursor: pointer; }
.pj-barre button.pj-texte { font-size: 13px; padding: 0 12px; }
.pj-barre button:disabled { opacity: .35; cursor: default; }
.pj-minuteur { min-width: 96px; text-align: center; font: 600 13px var(--texte); color: #C8C8CE; font-variant-numeric: tabular-nums; }
.pj-minuteur.depasse { color: #FDBA74; }
.pj-citation { margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 1em; }
.pj-citation p { margin: 0; font-size: calc(var(--pj) * 1.9); font-weight: 700; line-height: 1.22; color: #fff; }
.pj-citation p::before { content: "« "; color: var(--accent); } .pj-citation p::after { content: " »"; color: var(--accent); }
.pj-citation footer { font-size: var(--pj); color: #C8C8CE; }
.pj-compte { min-width: 64px; text-align: center; font-weight: 600; font-size: 14px; }
.projection:fullscreen .pj-barre { opacity: .25; transition: opacity .2s; } .projection:fullscreen .pj-barre:hover, .projection:fullscreen .pj-barre:focus-within { opacity: 1; }
@media (max-width: 700px) and (orientation: portrait) {
  .projection { --pj: 17px; }
  .pj-mitemps-blocs, .pj-contexte, .pj-duel, .pj-phase, .pj-rapports, .pj-compo, .pj-cpa, .pj-roles, .pj-roles.par1, .pj-roles.par2, .pj-tireurs, .pj-plan { grid-template-columns: minmax(0, 1fr); }
  .pj-corps > * { flex: none; }
  .pj-terrain svg { height: auto; max-height: none; }
  .pj-tete .pj-match { display: none; }
  .pj-mitemps-blocs, .pj-contexte { grid-auto-flow: row; }
  .pj-points { height: auto; }
}
@media print { .projection { display: none; } }

/* Sans réseau */
.bandeau-hors-ligne { margin: 0; padding: 8px 16px; background: #FEF3C7; color: #78350F; border-bottom: 1px solid #F59E0B; font-size: 13.5px; font-weight: 600; text-align: center; }
.bandeau-hors-ligne[hidden] { display: none; }
@media print { .bandeau-hors-ligne { display: none; } }