/* Analyses Sportives — feuille de style unique. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Direction « Verdict » : la conclusion d'abord, la démonstration ensuite.
   L'identité tient dans trois couleurs pleines qui portent un jugement — vert,
   terre cuite, ardoise — posées sur un fond presque blanc et une encre dense.
   Aucune teinte d'accent ne leur fait concurrence : le noir tient ce rôle, si
   bien qu'une couleur sur l'écran veut toujours dire quelque chose. */
:root {
  color-scheme: light;
  --plane: #f1f4f5; --surface: #ffffff; --surface-2: #f6f8f9;
  --ink: #0a0c0d; --ink-2: #3d474f; --muted: #6a7580;
  --rule: #e4e8ea; --baseline: #ccd3d6; --ring: rgba(10,12,13,0.09);
  --good: #0b7a5a; --crit: #b23b2e; --warn: #94651a; --neutre: #59646e;
  --accent: #0a0c0d; --marque: #1668e3;

  --h0: #eef4fc; --h1: #cde2fb; --h2: #9ec5f4; --h3: #6da7ec;
  --h4: #3987e5; --h5: #256abf; --h6: #184f95; --h7: #0d366b;
  --h-lo-ink: #0e1114; --h-hi-ink: #ffffff;

  /* Couches sédimentaires du fond : cinq tons à quelques points d'écart
     du plan, assez pour donner une matière, jamais assez pour gêner. */
  --strate-1: #e8ebef; --strate-2: #e3e7ec; --strate-3: #ebeef2;
  --strate-4: #e0e5ea; --strate-5: #f0f2f5;

  --ombre: 0 1px 2px rgba(14,17,20,0.04), 0 6px 20px rgba(14,17,20,0.06);

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* La maquette était claire et fixe. Le jumeau sombre existe quand même :
       l'application se consulte le soir sur un téléphone, et un écran blanc à
       cette heure-là est un vrai défaut d'usage. Les trois couleurs de verdict
       montent en clarté juste assez pour rester des aplats sur lesquels du
       texte blanc se lit. */
    color-scheme: dark;
    --plane: #0c0e10; --surface: #16191c; --surface-2: #1c2126;
    --ink: #f3f6f7; --ink-2: #b9c2c8; --muted: #7f8a93;
    --rule: #262b30; --baseline: #39414a; --ring: rgba(255,255,255,0.11);
    --good: #17a274; --crit: #d15646; --warn: #c8912f; --neutre: #6b7681;
    --accent: #f3f6f7; --marque: #4b93ff;
    --h0: #15181c; --h1: #16233a; --h2: #184f95; --h3: #256abf;
    --h4: #2a78d6; --h5: #5598e7; --h6: #86b6ef; --h7: #cde2fb;
    --h-lo-ink: #ffffff; --h-hi-ink: #0b0d0e;

    --strate-1: #101316; --strate-2: #0d1012; --strate-3: #121619;
    --strate-4: #0a0c0e; --strate-5: #151a1e;

    --ombre: 0 1px 2px rgba(0,0,0,0.30), 0 6px 22px rgba(0,0,0,0.35);
  }
}

body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- fond stratifié */

#strates {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
}

/* ------------------------------------------------------------- logotype */

/* Repris du logo : STRATES en capitales largement approchées, META dans le
   bleu de la marque. Ce bleu ne sert qu'à l'identité et aux commandes — jamais
   à une donnée. Les seules couleurs qui portent un jugement restent le vert,
   la terre cuite et l'ardoise des aplats de verdict, si bien qu'une couleur
   vue sur un chiffre veut toujours dire la même chose. */
.marque {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: 1rem; line-height: 1; white-space: nowrap;
}
.marque b {
  font-weight: 800; letter-spacing: 0.15em; color: var(--ink);
  text-transform: uppercase;
}
.marque span {
  font-weight: 700; font-size: 0.74em; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--marque);
}
.marque-xl { font-size: 1.6rem; }
.marque-xl b { letter-spacing: 0.17em; }

.descripteur {
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding-left: 0.9rem; border-left: 1px solid var(--baseline);
}

/* ------------------------------------------------------------- en-tête */

.chrome {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--baseline);
  position: sticky; top: 0; z-index: 20;
}
.chrome-inner {
  max-width: 72rem; margin: 0 auto; padding: 0.7rem clamp(0.9rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem;
}

.onglets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-left: auto; }
.onglet {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0.3rem 0.85rem; background: var(--surface-2); color: var(--muted);
  border: 1px solid transparent; cursor: pointer; border-radius: 999px;
}
.onglet:hover { color: var(--ink); }
.onglet[aria-selected="true"] { background: var(--ink); color: var(--plane); border-color: var(--ink); }
.onglet:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible,
.depot:focus-visible, summary:focus-visible { outline: 2px solid var(--marque); outline-offset: 2px; }

/* --------------------------------------------------------------- page */

.page { max-width: 72rem; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) clamp(0.9rem, 3vw, 2rem) 4rem; }
.vue { display: flex; flex-direction: column; gap: 1.2rem; }
.vue[hidden] { display: none; }

/* Cartes franches, aux angles adoucis : elles se comportent comme des blocs
   posés, ce qui laisse aux aplats de verdict le seul geste marquant de l'écran. */
.carte {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: var(--ombre);
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.carte > h2 {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: baseline; gap: 0.6rem;
}
.note { font-size: 0.88rem; color: var(--ink-2); max-width: 52em; }
.note.mono { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.aide { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

/* ------------------------------------------------------------ formulaires */

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.8rem 1rem; }
.champ { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: flex; gap: 0.4rem; align-items: baseline; }
.champ label output { font-family: var(--mono); color: var(--ink); font-weight: 600; letter-spacing: 0; }

input[type="text"], input[type="number"], input[type="date"], select {
  font-family: var(--mono); font-size: 0.9rem; font-variant-numeric: tabular-nums;
  padding: 0.42rem 0.55rem; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--baseline); width: 100%; min-width: 0; border-radius: 7px;
}
select { font-family: var(--sans); }
input[type="range"] { accent-color: var(--accent); width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.btn {
  font: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 0.45rem 0.95rem; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--baseline); cursor: pointer; border-radius: 8px;
}
.btn:hover { border-color: var(--ink); }
.btn.primaire { background: var(--marque); color: #ffffff; border-color: var(--marque); }
.btn.primaire:hover { opacity: 0.88; }
.btn.mini { font-size: 0.76rem; padding: 0.22rem 0.6rem; border-radius: 999px; }
.btn.danger:hover { border-color: var(--crit); color: var(--crit); }

/* ---------------------------------------------------------------- dépôt */

.depot {
  border: 2px dashed var(--baseline); background: var(--surface-2);
  padding: 1.6rem 1rem; text-align: center; cursor: pointer; border-radius: 3px;
}
.depot:hover, .depot.actif { border-color: var(--marque); background: var(--surface); }
.depot-titre { font-weight: 700; }
.depot-sous { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

.etat { font-size: 0.85rem; padding: 0.6rem 0.75rem; border-left: 3px solid var(--marque); background: var(--surface-2); border-radius: 0 7px 7px 0; }
.etat.avertissement { border-left-color: var(--warn); }
.etat.erreur { border-left-color: var(--crit); }

.brut { font-family: var(--mono); font-size: 0.76rem; white-space: pre-wrap; word-break: break-word;
        background: var(--surface-2); padding: 0.7rem; max-height: 16rem; overflow: auto; color: var(--ink-2); }

details { border: 1px solid var(--rule); background: var(--surface-2); border-radius: 2px; }
summary { cursor: pointer; padding: 0.5rem 0.7rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
details[open] summary { border-bottom: 1px solid var(--rule); }
details > *:not(summary) { margin: 0; }

/* -------------------------------------------------------------- tableaux */

.table-wrap { overflow-x: auto; }
table.tbl { border-collapse: collapse; width: 100%; font-size: 0.84rem; min-width: 34rem; }
table.tbl th, table.tbl td { text-align: right; padding: 0.42rem 0.4rem; border-bottom: 1px solid var(--rule); }
table.tbl th:first-child, table.tbl td:first-child { text-align: left; padding-left: 0; }
table.tbl th:last-child, table.tbl td:last-child { padding-right: 0; }
table.tbl thead th { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
                     color: var(--muted); border-bottom: 1px solid var(--baseline); white-space: nowrap; }
table.tbl tbody td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.tbl tbody td.txt { font-family: var(--sans); color: var(--ink-2); }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl tbody tr.groupe td { border-top: 1px solid var(--baseline); }
table.tbl input[type="number"] { width: 5.4rem; padding: 0.2rem 0.35rem; font-size: 0.8rem; text-align: right; }
table.tbl .vide { color: var(--muted); font-family: var(--sans); }

.pos { color: var(--good); font-weight: 700; }
.neg { color: var(--crit); }
.idle { color: var(--muted); }

.puce { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
        padding: 0.08rem 0.4rem; border: 1px solid var(--baseline); color: var(--ink-2); border-radius: 2px; white-space: nowrap; }

/* --------------------------------------------------------------- tuiles */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tuiles div { background: var(--surface); padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.15rem; }
.tuiles dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.tuiles dd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; }

/* -------------------------------------------------------------- matrice */

.matrice-wrap { overflow-x: auto; }
table.matrice { border-collapse: separate; border-spacing: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.7rem; }
table.matrice th { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; color: var(--muted);
                   padding: 0.15rem 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
table.matrice th.coin { text-align: left; }
table.matrice td { width: 2.9rem; height: 2rem; text-align: center; border-radius: 2px; color: var(--h-lo-ink); }
td.n0 { background: var(--h0); } td.n1 { background: var(--h1); }
td.n2 { background: var(--h2); } td.n3 { background: var(--h3); }
td.n4 { background: var(--h4); color: var(--h-hi-ink); }
td.n5 { background: var(--h5); color: var(--h-hi-ink); }
td.n6 { background: var(--h6); color: var(--h-hi-ink); }
td.n7 { background: var(--h7); color: var(--h-hi-ink); }
td.sommet { box-shadow: 0 0 0 2px var(--ink); }

.legende { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--muted); flex-wrap: wrap; }
.rampe { display: flex; gap: 2px; }
.rampe i { width: 1.4rem; height: 0.55rem; display: block; }
.rampe i:nth-child(1) { background: var(--h0); } .rampe i:nth-child(2) { background: var(--h1); }
.rampe i:nth-child(3) { background: var(--h2); } .rampe i:nth-child(4) { background: var(--h3); }
.rampe i:nth-child(5) { background: var(--h4); } .rampe i:nth-child(6) { background: var(--h5); }
.rampe i:nth-child(7) { background: var(--h6); } .rampe i:nth-child(8) { background: var(--h7); }
.legende #matriceNote { margin-left: auto; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--plane); padding: 0.6rem 1rem;
  font-size: 0.86rem; font-weight: 600; border-radius: 3px; z-index: 50;
  max-width: min(38rem, calc(100vw - 2rem)); box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
.toast[hidden] { display: none; }
.toast.erreur { background: var(--crit); color: #fff; }

/* ------------------------------------------------------- barre de réglages */

/* Les réglages commandent toute la page : ils restent visibles au défilement. */
.barre-reglages { position: sticky; top: 3.4rem; z-index: 15; }
.reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.8rem 1.1rem; align-items: end; }
.reglages .tuiles { grid-column: 1 / -1; }
.tuiles.compact dd { font-size: 0.95rem; }
.tuiles.compact div { padding: 0.45rem 0.6rem; }

/* ------------------------------------------------------------ confrontation */

.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: end; }
.duel-camp { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.duel-camp label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.btn.echange { font-size: 1.1rem; line-height: 1; padding: 0.5rem 0.7rem; align-self: end; }

/* Une barre unique où se lisent d'un coup les trois issues et leur poids. */
.barre-issues { display: flex; gap: 2px; height: 2.2rem; margin-top: 0.4rem; }
.barre-issues span {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.78rem; font-weight: 600; color: #fff; overflow: hidden;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.barre-issues span:first-child { border-radius: 3px 0 0 3px; }
.barre-issues span:last-child { border-radius: 0 3px 3px 0; }
.iss1 { background: var(--h5); }
.issN { background: var(--baseline); color: var(--ink); }
.iss2 { background: #b45309; }

/* --------------------------------------------------------- tableau triable */

table.triable thead th { cursor: pointer; user-select: none; white-space: nowrap; }
table.triable thead th:hover { color: var(--ink); }
table.triable thead th[aria-sort]::after { content: " ▾"; }
table.triable thead th[aria-sort="ascending"]::after { content: " ▴"; }
table.triable tbody tr { cursor: pointer; }
table.triable tbody tr.actif td { background: var(--surface-2); font-weight: 600; }
table.triable tbody tr.actif td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Barre de contexte : la position de la valeur face à la moyenne du championnat. */
.jauge { display: block; height: 3px; margin-top: 3px; background: var(--rule); border-radius: 2px; position: relative; }
.jauge i { position: absolute; top: 0; height: 3px; border-radius: 2px; background: var(--accent); }
.jauge.inverse i { background: var(--h6); }
.rang { font-size: 0.68rem; color: var(--muted); font-family: var(--sans); }

/* ------------------------------------------------------ coupons de saisie */

/* Une carte par rencontre, et la conclusion avant la démonstration : un aplat
   nomme le pari et affiche son espérance en grand, les cotes descendent au rang
   de pièce justificative. Le bandeau n'apparaît qu'après l'analyse — avant, il
   n'y a rien à conclure, seulement des cotes à vérifier. */
.coupons { display: flex; flex-direction: column; gap: 0.8rem; }

.coupon {
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.coupon-orphelin { border-color: var(--warn); }

.coupon-tete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--rule);
}
.coupon-tete select { flex: 1 1 14rem; font-size: 0.88rem; }

/* ---- l'aplat de verdict ---- */
.coupon-bloc { padding: 0.7rem 0.85rem 0.75rem; color: #ffffff; }
.coupon-bloc:empty { display: none; }
.coupon-bloc.oui  { background: var(--good); }
.coupon-bloc.non  { background: var(--crit); }
.coupon-bloc.rien { background: var(--neutre); }
.coupon-bloc.muet { background: var(--surface-2); color: var(--ink-2); }

.coupon-bloc-haut {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; opacity: 0.82; margin-bottom: 0.15rem;
}
.coupon-bloc-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.7rem; }
.coupon-bloc-quoi {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; min-width: 0;
}
.coupon-bloc-quoi small {
  display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0;
  opacity: 0.88; font-variant-numeric: tabular-nums;
}
.coupon-bloc-ev {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.045em; line-height: 0.9;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.coupon-bloc-ev sub {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em;
  vertical-align: 0.85rem; opacity: 0.8;
}

/* ---- la bande justificative ---- */
.coupon-issues {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem;
  padding: 0.65rem 0.8rem 0.5rem;
}
.coupon-issue {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: 7px;
  padding: 0.45rem 0.45rem 0.5rem;
}
.coupon-issue.retenue { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }
.coupon-equipe {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coupon-cote {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.05rem !important; font-weight: 700; text-align: center;
  padding: 0.25rem !important; background: var(--surface) !important;
}
.coupon-part {
  font-size: 0.72rem !important; text-align: center; padding: 0.18rem !important;
  color: var(--muted); background: transparent !important; border-color: transparent !important;
}
.coupon-part:focus { border-color: var(--baseline) !important; }

/* Marché, modèle, espérance : trois lignes sous la cote qu'elles concernent. */
.coupon-modele {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.68rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 0.05rem;
}
.coupon-modele:empty { display: none; }
.coupon-modele > .coupon-rang { display: flex; justify-content: space-between; gap: 0.3rem; }
.coupon-rang-nom { font-family: var(--sans); letter-spacing: 0.01em; }
.coupon-rang.fort { color: var(--ink); font-weight: 700; }
.coupon-ev {
  margin-top: 0.1rem; padding-top: 0.18rem; border-top: 1px solid var(--rule);
  text-align: right; font-size: 0.8rem; font-weight: 700; color: var(--muted);
}
.coupon-modele.mieux .coupon-ev { color: var(--good); }
.coupon-modele.moins .coupon-ev { color: var(--crit); }

.coupon-marge {
  font-size: 0.68rem; color: var(--muted); padding: 0 0.8rem 0.7rem;
  font-variant-numeric: tabular-nums;
}
.coupon-marge:empty { display: none; }

@media (max-width: 40rem) {
  /* En colonne unique chaque issue devient une rangée : le nom occupe la
     première, cote, part et verdict se partagent la seconde. Les aligner tous
     sur une seule rangée écrasait le nom jusqu'à le faire disparaître. */
  .coupon-issues { grid-template-columns: 1fr; }
  .coupon-issue {
    display: grid; align-items: center; gap: 0.3rem 0.6rem;
    grid-template-columns: 5rem 4.2rem 1fr;
    grid-template-areas: 'nom nom nom' 'cote part verdict';
    text-align: left;
  }
  .coupon-equipe { grid-area: nom; white-space: normal; text-align: left; font-size: 0.68rem; }
  .coupon-cote { grid-area: cote; }
  .coupon-part { grid-area: part; }
  .coupon-modele { grid-area: verdict; }
  .coupon-bloc-ev { font-size: 1.75rem; }
}

/* --------------------------------------------------- fiche d'avant-match */

.fiche { border-top: 3px solid var(--accent); gap: 1.1rem; }
.fiche-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fiche-titre { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.15; }
.fiche-sous-titre {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}

/* Les absents, groupés par équipe. */
.absents { display: flex; flex-direction: column; gap: 0.5rem; }
.absents-equipe { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.absents ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.absents li { font-size: 0.82rem; color: var(--ink-2); display: flex; gap: 0.5rem; }
.absents li b { color: var(--ink); font-weight: 600; }
.absents li span { color: var(--muted); font-size: 0.76rem; }

/* Les articles : titre cliquable, source et date en retrait. */
ul.actus { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; max-height: 26rem; overflow-y: auto; }
ul.actus li { border-left: 2px solid var(--rule); padding-left: 0.7rem; }
ul.actus a { color: var(--ink); text-decoration: none; font-size: 0.88rem; line-height: 1.35; display: block; }
ul.actus a:hover { text-decoration: underline; }
ul.actus a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ul.actus .meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
ul.actus .puce-club { font-size: 0.68rem; color: var(--ink-2); border: 1px solid var(--baseline); border-radius: 2px; padding: 0 0.3rem; }

.fiche textarea {
  width: 100%; font: inherit; font-size: 0.9rem; line-height: 1.5;
  padding: 0.6rem; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--baseline); border-radius: 2px; resize: vertical;
}
.fiche textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ graphiques */

/* Les couleurs des graphiques passent par des variables, pour que le SVG suive
   le thème sans être redessiné. Paire divergente bleu ↔ rouge : deux pôles qui
   se lisent comme opposés, là où deux teintes froides se confondraient. */
.graphique, .jauges {
  --g-fond: var(--surface);
  --g-texte: var(--ink);
  --g-texte2: var(--ink-2);
  --g-muet: var(--muted);
  --g-grille: var(--rule);
  --g-axe: var(--baseline);
  --g-pour: #0b7a5a;
  --g-contre: #b23b2e;
  --g-neutre: #ccd3d6;
  --g-dom: #0a0c0d;
  --g-ext: #8a97a0;
}
@media (prefers-color-scheme: dark) {
  .graphique, .jauges {
    --g-pour: #17a274;
    --g-contre: #d15646;
    --g-neutre: #39414a;
    --g-dom: #f3f6f7;
    --g-ext: #7f8a93;
  }
}
.graphique { overflow-x: auto; }
.graphique svg { min-width: 30rem; }

.jauges { display: flex; flex-direction: column; gap: 0.7rem; }
.jauge-bloc { display: flex; flex-direction: column; gap: 0.25rem; }
.jauge-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--ink-2); }
.jauge-tete b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--ink); }
.jauge-piste { position: relative; height: 0.6rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.jauge-piste i { display: block; height: 100%; background: var(--g-pour); border-radius: 2px; }
/* Repère du championnat : un trait, pas une couleur, pour ne pas concurrencer
   la barre elle-même. */
.jauge-piste u {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--ink); opacity: 0.55; text-decoration: none;
}

/* --------------------------------------------------------------- sélection */

.selection { border-top: 3px solid var(--accent); gap: 1rem; }
.sel-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; }
.sel-haut .champ label { font-size: 0.7rem; }
.sel-haut select { font-size: 1rem; padding: 0.5rem 0.6rem; }
.sel-identite { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.9rem 1.5rem; }
.sel-identite .vig-resume { flex: 1 1 22rem; }

/* -------------------------------------------------------------- vignette */

.vignette { gap: 1.1rem; }

.vig-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; }
.vig-tete .champ { min-width: 13rem; }
.vig-nom { font-weight: 800; letter-spacing: -0.03em; font-size: clamp(1.3rem, 3.5vw, 1.8rem); line-height: 1.05; }
.vig-sous { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.03em; margin-top: 0.15rem; }

/* Des interrupteurs plutôt que des menus : l'état de chaque filtre se voit
   sans avoir à déplier quoi que ce soit. */
.filtres { display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; padding: 0.7rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.filtre-groupe { display: flex; flex-direction: column; gap: 0.35rem; }
.filtre-titre { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chips .chip {
  font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.6rem; border-radius: 2px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--baseline);
}
.chips .chip:hover { border-color: var(--ink); color: var(--ink); }
.chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chips .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vig-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.vig-resume div { background: var(--surface); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; }
.vig-resume dt, .vig-resume .cle { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.vig-resume .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }

/* Répartition victoires / nuls / défaites, lisible d'un seul regard. */
.vnd { display: flex; height: 0.5rem; gap: 2px; margin-top: 0.3rem; border-radius: 2px; overflow: hidden; }
.vnd i { display: block; }
.vnd .v { background: var(--good); }
.vnd .n { background: var(--baseline); }
.vnd .d { background: var(--crit); }

.vig-groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.vig-groupe { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.vig-groupe h3 {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 0.45rem 0.7rem; background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.vig-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: baseline; padding: 0.36rem 0.7rem; border-bottom: 1px solid var(--rule); }
.vig-ligne:last-child { border-bottom: 0; }
.vig-ligne .lib { font-size: 0.8rem; color: var(--ink-2); }
.vig-ligne .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; font-weight: 600; }
.vig-ligne .ecart { font-family: var(--mono); font-size: 0.7rem; min-width: 3.4rem; text-align: right; }
.ecart.mieux { color: var(--good); }
.ecart.moins { color: var(--crit); }
.ecart.neutre { color: var(--muted); }

/* ------------------------------------------------------------------ forme */

.forme { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.forme span {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 3.6rem; padding: 0.3rem 0.4rem; border-radius: 2px;
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.2;
  border: 1px solid var(--rule); background: var(--surface-2);
}
.forme span b { font-family: var(--sans); font-size: 0.72rem; }
.forme .V { border-color: var(--good); color: var(--good); }
.forme .D { border-color: var(--crit); color: var(--crit); }
.forme .N { color: var(--ink-2); }
.forme small { color: var(--muted); font-size: 0.62rem; }

details.carte summary { padding: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
details.carte[open] summary { border-bottom: 0; }

@media (max-width: 40rem) {
  .barre-reglages { position: static; }
  .duel { grid-template-columns: 1fr; }
  .btn.echange { justify-self: center; }
}

/* ------------------------------------------------------------- connexion */

.connexion {
  position: fixed; inset: 0; z-index: 100;
  background: var(--plane);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  padding-top: max(1.5rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
.connexion[hidden] { display: none; }
.connexion-boite {
  background: var(--surface); border: 1px solid var(--ring);
  border-radius: 3px; box-shadow: var(--ombre);
  padding: 1.8rem 1.5rem; width: 100%; max-width: 23rem;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.connexion-boite .marque-xl { margin-bottom: 0.1rem; }
.connexion-note { font-size: 0.86rem; color: var(--ink-2); }
.connexion input[type="password"] {
  font-family: var(--mono); font-size: 16px;
  padding: 0.55rem 0.6rem; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--baseline); width: 100%; min-height: 44px; border-radius: 2px;
}
.connexion .btn { min-height: 44px; justify-content: center; }

/* ------------------------------------------------------- bandeau d'install */

.installer {
  background: var(--surface); border: 1px solid var(--ring);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 0.9rem; display: flex; gap: 0.8rem; align-items: flex-start;
  font-size: 0.86rem; color: var(--ink-2);
}
.installer[hidden] { display: none; }
.installer strong { color: var(--ink); }
.installer .btn { margin-left: auto; flex: none; }

/* =========================================================== TÉLÉPHONE === */

@media (max-width: 40rem) {

  /* iOS zoome sur tout champ dont le texte fait moins de 16 px. */
  input[type="text"], input[type="number"], input[type="date"], select,
  table.tbl input[type="number"] {
    font-size: 16px;
    padding: 0.55rem 0.6rem;
    min-height: 44px;
  }
  table.tbl input[type="number"] { min-height: 38px; width: 6rem; }

  .btn { min-height: 44px; padding: 0.5rem 0.9rem; }
  .btn.mini { min-height: 36px; }

  .chrome-inner { padding: 0.55rem 0.9rem; padding-top: max(0.55rem, env(safe-area-inset-top)); }
  .marque { font-size: 0.98rem; }
  .marque-xl { font-size: 1.55rem; }
  /* Le descripteur disparaît sur téléphone : le logotype suffit à situer. */
  .descripteur { display: none; }

  /* La navigation descend en bas de l'écran, à portée du pouce. */
  .onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: var(--surface); border-top: 1px solid var(--baseline);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
  }
  .onglet {
    border-radius: 0; border: 0; border-top: 2px solid transparent;
    padding: 0.7rem 0.2rem; font-size: 0.78rem; min-height: 48px;
  }
  .onglet:hover { border-color: transparent; }
  .onglet[aria-selected="true"] {
    background: transparent; color: var(--ink);
    border-top-color: var(--accent); font-weight: 800;
  }

  .page {
    padding: 0.9rem 0.75rem;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .carte { padding: 0.85rem 0.8rem; }
  .grille { grid-template-columns: 1fr; gap: 0.7rem; }
  .tuiles { grid-template-columns: repeat(2, 1fr); }

  /* Les tableaux restent défilables, mais plus compacts. */
  table.tbl { min-width: 26rem; font-size: 0.8rem; }
  table.matrice td { width: 2.4rem; height: 1.8rem; font-size: 0.64rem; }

  .toast { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  .depot { padding: 1.9rem 0.8rem; }
}

/* En mode plein écran, l'app n'a plus la barre Safari : on récupère la place. */
@media (display-mode: standalone) {
  .chrome { position: sticky; }
}

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

/* -------------------------------------------------- statistiques comptées */

/* Le total domine, la moyenne le suit en plus petit : on lit d'abord le fait
   brut, la comparabilité vient ensuite. Les deux sur la même cellule évitent
   de doubler le nombre de colonnes. */
.st-total { display: block; font-weight: 700; }
.st-moy {
  display: block; font-family: var(--sans); font-size: 0.7rem;
  color: var(--muted); font-weight: 400; letter-spacing: 0.01em;
}

table.stats-equipe { min-width: 26rem; }
table.stats-equipe td { padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* Les lignes de tête portent l'indicateur principal, les suivantes son détail :
   le décrochage et la graisse rendent la hiérarchie lisible sans surtitre. */
table.stats-equipe tr.groupe > td:first-child { font-weight: 700; color: var(--ink); }
table.stats-equipe tr.groupe > td { border-top: 1px solid var(--baseline); }
table.stats-equipe tr.sous > td:first-child { padding-left: 1rem; color: var(--ink-2); }

.tri {
  font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  font-weight: inherit;
}
.tri:hover { color: var(--ink); }
.tri.haut::after { content: " ▲"; font-size: 0.7em; color: var(--marque); }
.tri.bas::after  { content: " ▼"; font-size: 0.7em; color: var(--marque); }