/* Design systeme - plateforme de pronos entre potes */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Taille de texte minimale (lisibilite sur telephone) : aucun texte en dessous. */
  --taille-min: 12px;
  --couleur-fond: #F4F3EF;
  --couleur-surface: #FFFFFF;
  --couleur-surface-2: #EFEEE9;
  --couleur-texte: #141518;
  --couleur-texte-secondaire: #5C5F66;
  --couleur-bordure: #E3E1DA;
  --couleur-or: #9A6F10;
  --medaille-argent: #8A9099;
  --medaille-bronze: #A8653A;
  --couleur-positif: #1B7A4B;
  --couleur-negatif: #B3261E;
  --marque: #10193F;
  /* Accent (charte) : marine par defaut (hors ligue, ou ligue sans couleur choisie). La couleur choisie par
     l'organisateur le remplace via cssAccentLigue() (couleurs.js), avec ses valeurs claires et sombres. */
  --accent: var(--marque);
  --accent-fond-leger: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-texte: var(--accent);
  --accent-encre: #FFFFFF; /* texte pose sur un fond d'accent */
  /* Charte 2026, lot A : jetons. --good-soft est OPAQUE (4,67:1 pour le texte vert sur le fond ; 14 % de transparence ne donnait que 4,0:1). */
  --good-soft: #E8F2ED;
  --couleur-bordure-controle: #84878E; /* contour des champs : 3:1 minimum sur fond, surface et surface 2 */
  --couleur-sur-or: #FFFFFF;
  --couleur-sur-positif: #FFFFFF;
  --couleur-negatif-leger: #F9EEED;
  --bulle: rgba(16,25,63,.06);
  --bulle-claire: rgba(255,255,255,.07);
  --voile: rgba(13,14,16,.6);
  --opacite-liaison: .62;
  --ombre-flottante: 0 2px 4px rgba(16,25,63,.06), 0 16px 40px rgba(16,25,63,.14);
  --rayon-tuile: 24px;
  --rayon-pastille: 8px;
  --zone-tactile: 44px;
  /* Charte 2026, lot B : le code des résultats. Exact = or, bon résultat = vert, raté ou à venir = neutre (jamais de rouge). */
  --resultat-exact: var(--couleur-or);
  --sur-resultat-exact: var(--couleur-sur-or);
  --resultat-bon: var(--couleur-positif);
  --sur-resultat-bon: var(--couleur-sur-positif);
  --resultat-rate: var(--couleur-surface-2);
  --sur-resultat-rate: var(--couleur-texte-secondaire);
  --shadow-card: 0 1px 2px rgba(20,21,24,.04), 0 10px 30px rgba(20,21,24,.06);

  --rayon-carte: 28px;
  --rayon-bouton: 16px;
  --espace-blocs: 12px; /* ecart unique entre deux blocs (cartes) en Score (resserre le 19 oct. 2026, avant 20) */
  --marge-mobile: 20px;
  --marge-pc: 36px;
  /* Bords de l'appli sur telephone (28 oct. 2026, demande de JEL) : le jeu (tuiles, bandeaux de match, en-tetes, onglets)
     a 4 px du bord ; la partie sociale bord a bord. Un texte pose hors d'une carte (titres de section, texte d'une
     publication) garde un retrait de 12 px. */
  --bord-ecran: 4px;
  --retrait-texte: 12px;
  /* Pages publiques (30 oct. 2026) : forme d'un club (V, N, D, toujours avec la lettre) et segments de la tendance. */
  --forme-victoire: var(--couleur-positif);
  --forme-nul: #2B5FB0;
  --forme-defaite: var(--couleur-negatif);
  --sur-forme: #FFFFFF;
  --tendance-dom: #10193F;
  --sur-tendance-dom: #FFFFFF;
  --tendance-nul: var(--couleur-surface-2);
  --sur-tendance-nul: var(--couleur-texte);
  --tendance-ext: #5C5F66;
  --sur-tendance-ext: #FFFFFF;
  /* Finitions des pages publiques (30 oct. 2026) : filets des zones du classement et lignes zébrées. */
  --zone-haut: var(--couleur-positif);
  --zone-europe: #2B5FB0;
  --zone-barrage: var(--couleur-or);
  --zone-bas: var(--couleur-negatif);
  --ligne-zebre: #F9F8F5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --couleur-fond: #0D0E10;
    --couleur-surface: #17191C;
    --couleur-surface-2: #212428;
    --couleur-texte: #F3F2EE;
    --couleur-texte-secondaire: #A3A7AE;
    --couleur-bordure: #2A2D32;
    --couleur-or: #E3B341;
    --medaille-argent: #B9BEC6;
    --medaille-bronze: #C47A45;
    --couleur-positif: #46B97F;
    --couleur-negatif: #F2726A;
    /* le marine disparait sur #0D0E10 : accent blanc casse, texte marine dessus */
    --accent: #F3F2EE;
    --accent-texte: #F3F2EE;
    --accent-encre: #10193F;
    --good-soft: #1E2F2A;
    --couleur-bordure-controle: #6B7078;
    --couleur-sur-or: #0D0E10;
    --couleur-sur-positif: #0D0E10;
    --couleur-negatif-leger: #362527;
    --bulle: rgba(243,242,238,.05);
    --voile: rgba(0,0,0,.7);
    --ombre-flottante: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --forme-nul: #7AA7F0;
    --sur-forme: #0D0E10;
    --tendance-dom: #F3F2EE;
    --sur-tendance-dom: #10193F;
    --tendance-ext: #A3A7AE;
    --sur-tendance-ext: #0D0E10;
    --zone-europe: #7AA7F0;
    --ligne-zebre: #1B1D21;
  }
}

:root[data-theme="dark"] {
  --couleur-fond: #0D0E10;
  --couleur-surface: #17191C;
  --couleur-surface-2: #212428;
  --couleur-texte: #F3F2EE;
  --couleur-texte-secondaire: #A3A7AE;
  --couleur-bordure: #2A2D32;
  --couleur-or: #E3B341;
  --medaille-argent: #B9BEC6;
  --medaille-bronze: #C47A45;
  --couleur-positif: #46B97F;
  --couleur-negatif: #F2726A;
  --accent: #F3F2EE;
  --accent-texte: #F3F2EE;
  --accent-encre: #10193F;
  --good-soft: #1E2F2A;
  --couleur-bordure-controle: #6B7078;
  --couleur-sur-or: #0D0E10;
  --couleur-sur-positif: #0D0E10;
  --couleur-negatif-leger: #362527;
  --bulle: rgba(243,242,238,.05);
  --voile: rgba(0,0,0,.7);
  --ombre-flottante: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --forme-nul: #7AA7F0;
  --sur-forme: #0D0E10;
  --tendance-dom: #F3F2EE;
  --sur-tendance-dom: #10193F;
  --tendance-ext: #A3A7AE;
  --sur-tendance-ext: #0D0E10;
  --zone-europe: #7AA7F0;
  --ligne-zebre: #1B1D21;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
textarea { font: inherit; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
button, a { cursor: pointer; }
input::placeholder { color: var(--couleur-texte-secondaire); }
/* Charte 2026 : le contour d'un champ (3:1 minimum) est --couleur-bordure-controle. Cette règle de base est à spécificité nulle (:where) :
   elle ne fait que donner la bonne couleur à un champ qui n'a aucune bordure à lui, une règle de classe ou un style en ligne l'emporte. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { border-color: var(--couleur-bordure-controle); }

h1, h2, h3, .chiffre {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

h1 { font-size: 32px; }
@media (min-width: 900px) { h1 { font-size: 38px; } }

/* Utility classes from mockup */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.num { font-family: 'Outfit', sans-serif; font-variant-numeric: tabular-nums; }
.disp { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; }

.conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--marge-mobile);
}
@media (min-width: 900px) { .conteneur { padding: 0 var(--marge-pc); } :root { --espace-blocs: 16px; } }

.carte {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
:root[data-theme="dark"] .carte { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte { box-shadow: none; }
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--rayon-bouton);
  border: none;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  min-width: 44px;
  text-decoration: none;
}

.bouton-principal {
  background: var(--accent);
  color: var(--accent-encre);
}

.bouton-secondaire {
  background: var(--couleur-surface-2);
  color: var(--couleur-texte);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-weight: 800;
  width: 40px;
  height: 40px;
}

/* z-index 1 : la barre est ecrite avant le contenu (src/html.js, 26 oct. 2026) ; sans lui, les elements positionnes
   du contenu (cartes de match, couverture du profil) passaient devant. 1 rend l'empilement d'avant : devant tout ce
   qui n'a pas de z-index, derriere les menus, feuilles et fenetres qui en ont un. */
.nav-bas {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: var(--couleur-surface);
  border-top: 1px solid var(--couleur-bordure);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
@media (min-width: 900px) { .nav-bas { display: none; } }

.nav-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--couleur-texte-secondaire);
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}
.nav-bas a.actif { color: var(--accent-texte); background: var(--accent-fond-leger); border-radius: 14px; }
.nav-bas a svg { width: 22px; height: 22px; }

.bouton-theme {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.badge-or { color: var(--couleur-or); font-weight: 800; }
.texte-secondaire { color: var(--couleur-texte-secondaire); font-size: 14px; }

/* Score picker - mobile compact */
.compteur-score {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--couleur-surface-2);
  border-radius: 16px;
  border: 1px solid var(--couleur-bordure);
  overflow: hidden;
}
.btn-score {
  width: 44px;
  height: 52px;
  border: none;
  background: transparent;
  font-size: 22px;
  font-weight: 800;
  color: var(--couleur-texte);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-score:active { background: var(--couleur-bordure); }
.input-score {
  width: 44px;
  height: 52px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--couleur-texte);
  -moz-appearance: textfield;
}
.input-score::-webkit-inner-spin-button,
.input-score::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- SIDEBAR PC (mockup design) --- */
.layout-ligue { display: flex; gap: 0; }
.sidebar-pc { display: none; }
@media (min-width: 900px) {
  .sidebar-pc {
    display: flex;
    flex-direction: column;
    width: 272px;
    min-width: 272px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 28px 20px;
    border-right: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond);
    gap: 28px;
    overflow-y: auto;
  }
  .contenu-principal { flex: 1; min-width: 0; overflow-y: auto; height: 100vh; padding: 32px 40px 40px; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.sidebar-brand svg { display: block; height: 28px; width: auto; }

.league-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.league-badge {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-encre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.league-selector-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.league-selector-name { font-size: 15px; font-weight: 800; }
.league-selector-meta { font-size: 12px; color: var(--couleur-texte-secondaire); }
.league-selector svg { width: 18px; height: 18px; color: var(--couleur-texte-secondaire); }

.league-dropdown {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 0;
  right: 0;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--shadow-card);
  z-index: 10;
  flex-direction: column;
  gap: 2px;
  display: none;
}
.league-dropdown.open {
  display: flex;
}
.league-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--couleur-texte);
  font-size: 14px;
  font-weight: 500;
}
.league-dropdown a:hover { background: var(--couleur-surface-2); }
.league-dropdown a.actif { background: var(--accent-fond-leger); color: var(--accent-texte); font-weight: 800; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  color: var(--couleur-texte);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  transition: background 0.15s;
}
.sidebar-nav .nav-link:hover { background: var(--couleur-surface-2); }
.sidebar-nav .nav-link.actif {
  background: var(--accent-fond-leger);
  color: var(--accent-texte);
  font-weight: 800;
}
.sidebar-nav .nav-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-link .nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-encre);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pass-card {
  padding: 18px;
  border-radius: 20px;
  background: var(--accent-fond-leger);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--couleur-texte);
  transition: background 0.15s;
}
.sidebar-user:hover { background: var(--couleur-surface-2); }
.sidebar-user.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-sub { font-size: 12px; color: var(--couleur-texte-secondaire); }

/* Menu lateral PC = la navigation du telephone (point 5 de la revue produit, 23 oct. 2026) : Pronostiquer, les
   quatre entrees, puis la liste de mes ligues avec la ligue ouverte depliee en rubriques. */
.menu-pc { gap: 18px; }
.menu-pc-pronostiquer { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; }
.menu-pc-pronostiquer .pastille-nb { position: absolute; top: -6px; right: -6px; }
.menu-pc-ligues { display: flex; flex-direction: column; gap: 2px; }
.menu-pc-titre { margin: 6px 14px 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--couleur-texte-secondaire); }
.menu-pc-ligue { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 14px; color: var(--couleur-texte); text-decoration: none; font-size: 14px; font-weight: 800; }
.menu-pc-ligue:hover { background: var(--couleur-surface-2); }
.menu-pc-ligue.ouverte { background: var(--accent-fond-leger); }
.menu-pc-ligue .league-nb { margin-left: auto; }
.menu-pc-badge { width: 28px; height: 28px; border-radius: 9px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; font-size: var(--taille-min); font-weight: 800; flex-shrink: 0; }
.menu-pc-ligue-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-pc-rubriques { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px 22px; padding-left: 12px; border-left: 2px solid var(--couleur-bordure); }
.menu-pc-place { font-size: 12px; padding: 4px 10px 6px; min-height: 18px; }
.menu-pc-rubrique { position: relative; display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 12px; color: var(--couleur-texte); text-decoration: none; font-size: 14px; font-weight: 500; }
.menu-pc-rubrique:hover { background: var(--couleur-surface-2); }
.menu-pc-rubrique.actif { background: var(--accent-fond-leger); color: var(--accent-texte); font-weight: 800; }
.menu-pc-rubrique .olg-compte { margin-left: auto; }
.menu-pc-rubrique .olg-point { position: static; margin-left: 4px; }
.menu-pc-lien { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; color: var(--accent-texte); text-decoration: none; font-size: 14px; font-weight: 800; }
.menu-pc-lien:hover { background: var(--couleur-surface-2); }
.pass-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
.pass-desc { font-size: 14px; line-height: 1.45; }

/* --- MAIN HEADER (mockup) --- */
.main-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
}
.main-header-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.main-header-sub { font-size: 14px; color: var(--couleur-texte-secondaire); }
.main-header h1 { margin: 0; }
.header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

/* --- DESKTOP GRID LAYOUT --- */
.grille-desktop {
  display: flex;
  flex-direction: column;
  gap: var(--espace-blocs);
}
@media (min-width: 900px) {
  .grille-desktop {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--espace-blocs);
    align-items: start;
  }
  .grille-gauche { grid-column: span 7; display: flex; flex-direction: column; gap: var(--espace-blocs); }
  .grille-droite { grid-column: span 5; display: flex; flex-direction: column; gap: var(--espace-blocs); }
}

/* .ordre-classement contient 2 blocs (classement + trophee/lanterne) qui
   etaient colles l'un a l'autre : meme ecart que partout ailleurs dans
   cette grille (24px, la valeur de .grille-gauche/.grille-droite). */
.ordre-classement { display: flex; flex-direction: column; gap: var(--espace-blocs); }

/* Mobile uniquement : le classement remonte entre le prochain match et le
   dernier match (demande JEL), sans toucher a la mise en page PC ci-dessus.
   display:contents efface les wrappers .grille-gauche/.grille-droite du flux
   pour que chaque bloc devienne un enfant direct de .grille-desktop et
   puisse etre reordonne individuellement via `order`. */
@media (max-width: 899px) {
  .grille-gauche, .grille-droite { display: contents; }
  .ordre-prochain { order: 1; }
  .ordre-classement { order: 2; }
  .ordre-admin, .ordre-equipier { order: 3; }
  .ordre-dernier { order: 4; }
  .ordre-avenir { order: 5; }
}

/* --- PROCHAIN MATCH CARD (mockup) --- */
.carte-prochain {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 32px;
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.prochain-badge {
  font-size: 13px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-fond-leger);
  color: var(--accent-texte);
}
.prochain-date { font-size: 14px; color: var(--couleur-texte-secondaire); }

.prochain-equipes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.prochain-equipes { position: relative; }
.compte-a-rebours {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}
.compte-a-rebours .car-label { font-size: var(--taille-min); color: var(--couleur-texte-secondaire); }
.compte-a-rebours .car-valeur { font-size: 15px; font-weight: 800; color: var(--accent-texte); }
.compte-a-rebours.cloture .car-valeur { color: var(--couleur-texte-secondaire); }
@media (min-width: 900px) {
  .prochain-equipes { padding-top: 40px; }
  .compte-a-rebours { top: 0; }
  .compte-a-rebours .car-label { font-size: 12px; }
  .compte-a-rebours .car-valeur { font-size: 18px; }
}
.equipe-col {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
@media (min-width: 900px) { .equipe-col { width: 150px; } }
.equipe-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
}
img.equipe-logo {
  border-radius: 0;
  background: transparent;
  padding: 4px;
}
@media (min-width: 900px) {
  .equipe-logo { width: 72px; height: 72px; border-radius: 22px; font-size: 17px; }
}
.equipe-nom { font-size: 15px; font-weight: 800; text-align: center; }
@media (min-width: 900px) { .equipe-nom { font-size: 17px; } }

.score-picker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.btn-rond {
  width: var(--zone-tactile); /* audit du 23 oct. 2026 : 44 px (zone tactile), etait 40 */
  height: var(--zone-tactile);
  border-radius: 999px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.btn-rond:active { background: var(--couleur-bordure); }
.btn-rond svg { width: 18px; height: 18px; }
.score-big {
  font-family: 'Outfit', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  .score-big { font-size: 72px; width: 70px; }
}
.score-sep {
  font-family: 'Outfit', sans-serif;
  font-size: 40px;
  color: var(--couleur-texte-secondaire);
  font-weight: 500;
}

.prochain-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--couleur-bordure);
  flex-wrap: wrap;
}
.prochain-meta {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--couleur-texte-secondaire);
}
.prochain-meta svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-valider-prono {
  height: 52px;
  padding: 0 28px;
  border-radius: 16px;
  border: 0;
  background: var(--accent);
  color: var(--accent-encre);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.prono-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 8px 0 16px;
  border-radius: 16px;
  background: var(--good-soft);
}
.prono-saved-score { white-space: nowrap; }
.prono-saved svg { width: 20px; height: 20px; color: var(--couleur-positif); }
.prono-saved span { font-size: 15px; font-weight: 800; }
.prono-saved button {
  background: none;
  border: 0;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-texte);
  cursor: pointer;
}

/* --- DERNIER MATCH (mockup) --- */
.carte-dernier {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 28px;
  padding: 24px 28px 12px;
  display: flex;
  flex-direction: column;
}
.dernier-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.dernier-sub { font-size: 13px; color: var(--couleur-texte-secondaire); }
.dernier-titre { margin: 0; font-size: 24px; font-weight: 800; }
.dernier-bareme { font-size: 13px; color: var(--couleur-texte-secondaire); }

.pronos-grid {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .pronos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}
.prono-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--couleur-bordure);
}
.prono-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.prono-name { flex: 1; font-size: 15px; font-weight: 800; }
.prono-score { font-size: 15px; color: var(--couleur-texte-secondaire); }
.prono-chip {
  width: 42px;
  text-align: center;
  padding: 4px 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}
.prono-chip-good { background: var(--good-soft); color: var(--couleur-positif); }
.prono-chip-ok { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.prono-chip-zero { background: var(--resultat-rate); color: var(--sur-resultat-rate); }

/* --- CLASSEMENT PANEL (mockup) --- */
.carte-classement {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 28px;
  padding: 24px 28px 10px;
  display: flex;
  flex-direction: column;
}
.classement-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
}
.classement-header h2 { margin: 0; font-size: 22px; font-weight: 800; }
.classement-header a {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-texte);
  text-decoration: none;
}
.classement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--couleur-bordure);
}
.classement-rank {
  width: 20px;
  font-size: 15px;
  font-weight: 800;
}
.classement-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.classement-name { flex: 1; font-size: 15px; font-weight: 800; }
.classement-mv { font-size: 12px; font-weight: 800; }
.classement-pts {
  width: 36px;
  text-align: right;
  font-size: 17px;
  font-weight: 800;
}

/* --- CLASSEMENT (visuel) : src/pages/classement-visuel.js --- */
.cl-podium {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 4px;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 12px 10px 10px;
  margin-top: var(--espace-blocs);
}
.cl-podium-place { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.cl-podium-premier { padding-bottom: 8px; }
.cl-medaillon { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--cl-medaille); display: flex; align-items: center; justify-content: center; }
.cl-podium-premier .cl-medaillon { width: 68px; height: 68px; }
.cl-medaille-or { --cl-medaille: var(--couleur-or); }
.cl-medaille-argent { --cl-medaille: var(--medaille-argent); }
.cl-medaille-bronze { --cl-medaille: var(--medaille-bronze); }
.cl-halo { position: absolute; inset: -11px; border-radius: 50%; background: color-mix(in srgb, var(--couleur-or) 16%, transparent); }
.cl-medaillon-avatar { position: relative; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; overflow: hidden; }
.cl-podium-premier .cl-medaillon-avatar { font-size: 22px; }
.cl-medaillon-rang { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); background: var(--cl-medaille); color: var(--couleur-fond); font-size: 12px; font-weight: 800; border-radius: 10px; padding: 1px 8px; line-height: 1.4; }
.cl-podium-nom { margin-top: 12px; font-size: 15px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-podium-premier .cl-podium-nom { font-size: 16px; }
.cl-podium-pts { font-size: 20px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.cl-podium-premier .cl-podium-pts { font-size: 24px; color: var(--couleur-or); }
.cl-podium-ecart { font-size: 12px; color: var(--couleur-texte-secondaire); }
.cl-podium-evo { margin-top: 4px; min-height: 16px; }
.cl-podium .cl-moi .cl-podium-nom a, .cl-podium .cl-moi .cl-podium-nom { color: var(--accent-texte); }
.cl-podium-compact { box-shadow: none; border: 0; padding: 12px 0 8px; margin-top: 0; }
.cl-podium-compact .cl-medaillon { width: 52px; height: 52px; }
.cl-podium-compact .cl-podium-premier .cl-medaillon { width: 68px; height: 68px; }
.cl-podium-compact .cl-medaillon-avatar { font-size: 16px; }
.cl-podium-compact .cl-podium-premier .cl-medaillon-avatar { font-size: 22px; }
.cl-podium-compact .cl-podium-pts { font-size: 18px; }
.cl-podium-compact .cl-podium-premier .cl-podium-pts { font-size: 24px; }
.cl-podium-compact .cl-podium-nom { font-size: 14px; }

.cl-liste { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 24px; overflow: hidden; margin-top: var(--espace-blocs); }
.cl-ligne { position: relative; display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; min-height: 64px; }
.cl-ligne + .cl-ligne { border-top: 1px solid var(--couleur-bordure); }
.cl-ligne.cl-moi { background: var(--accent-fond-leger); }
.cl-ligne.cl-moi::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--accent); }
.cl-ligne-rang { font-size: 16px; font-weight: 800; color: var(--couleur-texte-secondaire); text-align: center; }
.cl-moi .cl-ligne-rang { color: var(--couleur-texte); }
.cl-ligne-rang.cl-rang-lanterne { color: var(--couleur-negatif); }
.cl-ligne-avatar { width: 40px; height: 40px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; overflow: hidden; }
.cl-ligne-joueur { min-width: 0; }
.cl-ligne-nom { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ligne-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 12px; color: var(--couleur-texte-secondaire); white-space: nowrap; }
.cl-pastille-moi { font-size: var(--taille-min); font-weight: 800; background: var(--accent); color: var(--accent-encre); border-radius: 8px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.cl-pastille-lanterne { font-size: var(--taille-min); color: var(--couleur-negatif); border: 1px solid var(--couleur-negatif); border-radius: 8px; padding: 0 6px; }
.cl-forme { display: inline-flex; gap: 3px; }
.cl-forme-point { width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.cl-forme-bon { background: var(--couleur-positif); }
.cl-forme-rate { background: var(--couleur-bordure); }
.cl-forme-absent { border: 1.5px solid var(--couleur-bordure); }
.cl-ligne-score { text-align: right; }
.cl-ligne-pts { font-size: 18px; font-weight: 800; line-height: 1.2; }
.cl-ligne-ecart { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.cl-dernier { white-space: nowrap; }
.cl-dernier-plus { color: var(--couleur-positif); font-weight: 800; }
.cl-evo { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 800; font-family: 'Outfit', sans-serif; }
.cl-evo-monte { color: var(--couleur-positif); }
.cl-evo-descend { color: var(--couleur-negatif); }
.cl-evo-stable { color: var(--couleur-texte-secondaire); font-weight: 500; }
.cl-saut { text-align: center; color: var(--couleur-texte-secondaire); font-size: 14px; letter-spacing: .2em; padding: 2px 0; border-top: 1px solid var(--couleur-bordure); }
.cl-saut + .cl-ligne { border-top: 1px solid var(--couleur-bordure); }
#classement-widget .cl-liste { border: 0; border-radius: 0; margin: 0 -28px; background: transparent; }
@media (max-width: 767px) {
  #classement-widget .cl-liste { margin: 0 -20px; }
  .cl-ligne { padding: 12px 14px; gap: 8px; }
}

/* --- TROPHEE / LANTERNE (mockup) --- */
.trophee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.carte-award {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.award-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.award-name { font-size: 24px; font-weight: 800; }
.award-stat { font-size: 14px; color: var(--couleur-texte-secondaire); }

/* --- SHARE (compositeur) --- */
.resultat-contexte:hover { background: var(--couleur-surface-2); }

/* --- VESTIAIRE (24 oct. 2026, lot 1) : la messagerie d'une ligue, plein écran, bulles, séparateurs de jour --- */
.ve-page { display: flex; flex-direction: column; min-height: calc(100dvh - 240px); }
.ve-page.ve-ferme { min-height: 0; }
.ve-bandeau { margin: 0 0 12px; }
.ve-fil { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.ve-precedents { align-self: center; min-height: var(--zone-tactile); margin: 0 0 8px; padding: 0 16px; border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-surface); color: var(--couleur-texte-secondaire); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ve-precedents[hidden] { display: none; }
.ve-messages { display: flex; flex-direction: column; }
.ve-messages > .etat-vide { margin: auto 0; }
.ve-jour { display: flex; justify-content: center; margin: 14px 0 6px; }
.ve-nouveaux-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--accent-texte); font-size: var(--taille-min); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ve-nouveaux-sep::before, .ve-nouveaux-sep::after { content: ""; flex: 1; height: 1px; background: var(--accent); opacity: .5; }
.ve-jour span { padding: 4px 12px; border-radius: 999px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font-size: var(--taille-min); font-weight: 800; }
.ve-msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ve-msg.suite { margin-top: 2px; }
.ve-msg.mien { flex-direction: row-reverse; }
.ve-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 800; }
.ve-avatar-vide { background: transparent; }
.ve-corps { max-width: 82%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ve-msg.mien .ve-corps { align-items: flex-end; }
.ve-bulle { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 6px; border-radius: 18px 18px 18px 6px; background: var(--couleur-surface-2); color: var(--couleur-texte); }
.ve-msg.suite .ve-bulle { border-radius: 18px; }
.ve-msg.mien .ve-bulle { border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--accent-encre); }
.ve-msg.mien.suite .ve-bulle { border-radius: 18px; }
.ve-nom { font-size: 13px; font-weight: 800; color: var(--accent-texte); }
.ve-nom .lien-joueur { color: inherit; }
.ve-texte { font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.ve-mention { font-weight: 800; color: var(--accent-texte); text-decoration: none; }
.ve-msg.mien .ve-mention { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ve-heure { align-self: flex-end; font-size: var(--taille-min); opacity: .7; }
.ve-photo-cadre { display: block; margin: 2px 0 4px; }
/* Vague 3 : media protege dont l'adresse signee a expire (onglet reste ouvert), ou sans secret. */
.media-expire { display: block; font-size: var(--taille-min); color: var(--couleur-texte-secondaire); margin: 2px 0 4px; }
.ve-photo { display: block; width: min(100%, 280px); height: auto; border-radius: 12px; background: var(--couleur-surface); cursor: zoom-in; }
.ve-apercu { position: relative; display: inline-flex; margin-bottom: 8px; }
.ve-apercu[hidden] { display: none; }
.ve-apercu-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--couleur-bordure); }
.ve-apercu .ve-reponse-fermer { position: absolute; top: -10px; right: -10px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--ombre-flottante); }
.ve-photo-bouton { width: var(--zone-tactile); height: var(--zone-tactile); flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ve-jeu { display: flex; flex-direction: column; gap: 4px; width: 300px; max-width: 100%; margin: 2px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--couleur-surface); color: var(--couleur-texte); }
.ve-msg.mien .ve-jeu { background: var(--bulle-claire); color: inherit; }
.ve-jeu-titre { font-size: var(--taille-min); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.ve-jeu-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.ve-jeu-equipe { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-jeu-equipe:first-child { text-align: right; }
.ve-jeu-score { font-size: 28px; line-height: 1; white-space: nowrap; }
.ve-jeu-etat { font-size: 13px; opacity: .85; }
.ve-msg.rappel .ve-bulle { border: 2px solid var(--accent); background: var(--couleur-surface); color: var(--couleur-texte); } /* aussi pour l'organisateur (bulle « mien ») */
.ve-rappel-titre { font-size: var(--taille-min); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-texte); }
.ve-feuille-corps { display: flex; flex-direction: column; gap: 14px; }
.ve-jeu-section { display: flex; flex-direction: column; gap: 6px; }
.ve-jeu-sous-titre { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.ve-jeu-ligne { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: var(--zone-tactile); padding: 10px 14px; border: 1px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; text-align: left; cursor: pointer; }
.ve-jeu-ligne:hover, .ve-jeu-ligne:focus-visible { border-color: var(--accent); }
.ve-jeu-ligne-match { font-size: 15px; font-weight: 800; }
.ve-jeu-ligne-detail { font-size: 13px; color: var(--couleur-texte-secondaire); }
.ve-jeu-vide { margin: 0; font-size: 14px; }
.ve-citation { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 10px; background: var(--couleur-surface); color: inherit; text-decoration: none; }
.ve-msg.mien .ve-citation { border-left-color: var(--accent-encre); background: var(--bulle-claire); }
.ve-citation-supprimee { font-size: 13px; font-style: italic; opacity: .8; }
.ve-citation-nom { font-size: var(--taille-min); font-weight: 800; color: var(--accent-texte); }
.ve-msg.mien .ve-citation-nom { color: inherit; }
.ve-citation-texte { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ve-cible .ve-bulle { outline: 2px solid var(--accent); outline-offset: 3px; }
.ve-reponse { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 6px 6px 10px; border-left: 3px solid var(--accent); border-radius: 12px; background: var(--couleur-surface-2); }
.ve-reponse[hidden] { display: none; }
.ve-reponse-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ve-reponse-nom { font-size: var(--taille-min); font-weight: 800; color: var(--accent-texte); }
.ve-reponse-texte { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-reponse-fermer { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; color: var(--couleur-texte-secondaire); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ve-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: -8px 0 0 10px; position: relative; z-index: 1; }
.ve-msg.mien .ve-reactions { margin: -8px 10px 0 0; justify-content: flex-end; }
.ve-reactions[hidden] { display: none; }
.ve-reaction { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 8px; border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-surface); color: var(--couleur-texte); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ve-reaction.moi { border-color: var(--accent); background: var(--accent-fond-leger); }
.ve-reaction-emoji { font-size: 15px; line-height: 1; }
.ve-actions { display: none; margin-top: 4px; }
.ve-msg.actions-visibles .ve-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ve-msg.mien.actions-visibles .ve-actions { align-items: flex-end; }
.ve-actions-boutons { display: flex; gap: 6px; }
.ve-choix { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--ombre-flottante); }
.ve-choix-bouton { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.ve-choix-bouton:hover, .ve-choix-bouton:focus-visible { background: var(--couleur-surface-2); }
.ve-msg.actions-visibles > .ve-avatar { margin-bottom: 92px; } /* l'avatar reste au bas de la bulle, pas des actions */
.ve-action { min-height: 36px; padding: 0 12px; border: 1px solid var(--couleur-bordure); border-radius: 12px; background: var(--couleur-surface); color: var(--couleur-texte-secondaire); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ve-nouveaux { position: sticky; bottom: calc(var(--ve-bas, 84px) + 76px); z-index: 4; align-self: center; min-height: 36px; margin: 8px 0 0; padding: 0 14px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-encre); font-family: inherit; font-size: 13px; font-weight: 800; box-shadow: var(--ombre-flottante); cursor: pointer; }
.ve-nouveaux[hidden] { display: none; }
.ve-saisie { position: sticky; bottom: var(--ve-bas, 84px); z-index: 5; margin-top: 10px; padding: 8px 0 10px; background: var(--couleur-fond); }
.ve-suggestions { display: flex; flex-direction: column; margin-bottom: 6px; border: 1px solid var(--couleur-bordure); border-radius: 14px; background: var(--couleur-surface); box-shadow: var(--ombre-flottante); overflow: hidden; }
.ve-suggestions[hidden] { display: none; }
.ve-suggestion { min-height: var(--zone-tactile); padding: 0 14px; border: 0; background: none; text-align: left; color: var(--couleur-texte); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.ve-ligne { display: flex; align-items: flex-end; gap: 8px; }
.ve-champ { flex: 1; min-width: 0; min-height: var(--zone-tactile); max-height: 132px; padding: 11px 16px; border: 1px solid var(--couleur-bordure-controle); border-radius: 22px; background: var(--couleur-surface); color: var(--couleur-texte); font-family: inherit; font-size: 16px; line-height: 1.35; resize: none; overflow-y: hidden; }
.ve-envoyer { width: var(--zone-tactile); height: var(--zone-tactile); flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ve-envoyer:disabled { opacity: .5; cursor: default; }
.ve-lecture { margin: 12px 0 0; font-size: 14px; text-align: center; }
/* Sur téléphone, .contenu-principal (overflow-x: hidden) serait le conteneur de défilement du champ collant : il ne collerait pas. Comme le salon. */
@media (max-width: 899px) { body:has(.ve-page) .contenu-principal, body:has(.ve-page) .layout-ligue { overflow: visible; } body:has(.ve-page) .contenu-principal { padding-bottom: var(--ve-bas, 84px); } }
/* A4 du bilan du 25 oct. 2026 : dans le vestiaire, l'en-tete de la ligue et ses trois onglets restent colles en haut
   (comme l'en-tete d'une conversation privee) ; --ve-haut (mesure par le script) evite qu'un message vise passe dessous. */
@media (max-width: 899px) { body:has(.ve-page) .mobile-header-wrap { position: sticky; top: 0; z-index: 7; margin-bottom: 0; padding-bottom: 8px; background: var(--couleur-fond); } }
.ve-nouveaux-sep, .ve-msg { scroll-margin-top: calc(var(--ve-haut, 0px) + 8px); }
@media (min-width: 900px) { .ve-page { max-width: 760px; min-height: calc(100vh - 150px); } .ve-saisie { bottom: 0; padding-bottom: 16px; } .ve-nouveaux { bottom: 80px; } }

/* --- MESSAGES PRIVÉS façon messagerie (24 oct. 2026, lot A1) : les bulles, le champ et les séparateurs du vestiaire
   (.ve-…), sans avatar ni nom (on est deux : ils sont dans l'en-tête), l'en-tête de la conversation collé en haut --- */
.dm-page { display: flex; flex-direction: column; min-height: calc(100dvh - 200px); }
.dm-page .entete-conversation { position: sticky; top: 0; z-index: 6; background: var(--couleur-fond); }
.dm-page .bandeau-dm { margin: 12px 0 0; }
.dm-fil { padding-top: 12px; }
.ve-msg .ve-bulle.dm-supprime, .ve-msg.mien .ve-bulle.dm-supprime { background: transparent; border: 1px dashed var(--couleur-bordure); color: var(--couleur-texte-secondaire); }
.dm-supprime .ve-texte { font-size: 14px; font-style: italic; }
.dm-msg .post-partage { margin-top: 2px; }
.page-messages.msg-page-conv { padding-bottom: 0; } /* le champ collé touche la barre du bas */
/* Sur téléphone, la conversation prend l'écran : l'en-tête de la conversation (retour, profil, menu) remplace celui de
   l'appli, qui flotte et le recouvrirait ; .contenu-principal ne doit pas être un conteneur de défilement (champ collé). */
@media (max-width: 899px) {
  body:has(.dm-page) .contenu-principal { overflow: visible; padding-bottom: var(--ve-bas, 84px); }
  body:has(.dm-page) .entete-flottant, body:has(.dm-page) .entete-flottant-espace { display: none; }
  .dm-page .entete-conversation { padding-top: 10px; }
  .dm-page { min-height: calc(100dvh - var(--ve-bas, 84px) - 8px); } /* conversation courte : le champ reste en bas */
}
/* Sur PC, .contenu-principal défile avec 32 px de marge en haut : l'en-tête collé couvre cette marge. */
@media (min-width: 900px) { .dm-page { min-height: calc(100vh - 64px); } .dm-page .entete-conversation { top: -32px; margin-top: -32px; padding-top: 32px; } }

/* --- ADMIN SECTIONS (keep functional) --- */
.carte-admin {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 20px;
  margin-bottom: 20px;
}

/* --- LEGACY / SHARED STYLES --- */
.toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .toggle-track {
  position: absolute;
  inset: 0;
  background: var(--couleur-bordure);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch .toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(20px); }

.carte-trophee {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.carte-trophee .info-trophee { flex: 1; }
.carte-trophee .info-trophee strong { display: block; font-size: 15px; }
.carte-trophee .info-trophee span { font-size: 13px; color: var(--couleur-texte-secondaire); }

.badge-coeff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--accent-fond-leger);
  color: var(--accent-texte);
}

.wizard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.wizard-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--couleur-surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--couleur-texte);
}
.wizard-back svg { width: 20px; height: 20px; }
.wizard-step-text { font-size: 13px; color: var(--couleur-texte-secondaire); font-weight: 500; }

.connexion-hero {
  text-align: center;
  padding-top: 60px;
  max-width: 420px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 900px) { .connexion-hero { padding-top: 120px; } }
.connexion-hero h1, .connexion-hero .connexion-titre { line-height: 1.15; font-size: 26px; font-weight: 800; margin: 0; }
@media (min-width: 480px) { .connexion-hero h1, .connexion-hero .connexion-titre { font-size: 32px; } }
.connexion-hero .sous-titre {
  margin-top: 12px;
  color: var(--couleur-texte-secondaire);
  font-size: 17px;
}

.carte-ligue {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
}
.carte-ligue .ligue-icone {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}
.carte-ligue .ligue-info { flex: 1; }
.carte-ligue .ligue-info strong { display: block; font-size: 16px; }
.carte-ligue .ligue-info span { font-size: 13px; color: var(--couleur-texte-secondaire); }

.grille-tuiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .grille-tuiles { grid-template-columns: repeat(2, 1fr); }
}
.carte-tuile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s, border-color .2s;
}
.carte-tuile:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.carte-tuile .tuile-icone {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.carte-tuile .tuile-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.carte-tuile .tuile-texte strong { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.carte-tuile .tuile-texte span { font-size: 13px; color: var(--couleur-texte-secondaire); }
.tuile-badge {
  font-size: var(--taille-min);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-secondaire);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--couleur-surface-2);
  color: var(--couleur-texte-secondaire);
  font-weight: 500;
  white-space: nowrap;
}

.qui-a-parie {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.qui-a-parie .avatar-mini {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--taille-min);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.qui-a-parie .avatar-mini.pas-parie { opacity: 0.25; }
/* Grande ligue (plus de 50 membres) : barre de « qui a pronostique » (point 1 de la section 5.2 de la revue produit). */
.qui-barre { margin: 2px 0 4px; }
.qui-compte { font-size: 13px; margin: 0 0 6px; }

/* Carte rappel */
.carte-rappel { border-color: var(--accent); }

/* --- LIVE SCORE --- */
.carte-live {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-positif);
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--couleur-positif) 20%, transparent);
}
.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--couleur-positif);
  margin-bottom: 10px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--couleur-positif);
  animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.live-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-team { font-size: 16px; font-weight: 800; flex: 1; }
.live-score {
  font-size: 28px;
  font-weight: 800;
  min-width: 80px;
  text-align: center;
}
.live-minute {
  text-align: center;
  font-size: 13px;
  color: var(--couleur-positif);
  font-weight: 800;
  margin-top: 4px;
}

/* Matchs a venir mobile (compact list below prochain match) */
.matchs-avenir-item {
  padding: 16px 0;
  border-top: 1px solid var(--couleur-bordure);
}
.matchs-avenir-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.matchs-avenir-summary::-webkit-details-marker { display: none; }
.matchs-avenir-summary h3 { margin: 0; }
.matchs-avenir-summary .chevron-details { flex-shrink: 0; color: var(--couleur-texte-secondaire); transition: transform 0.2s; }
.matchs-avenir-details[open] .chevron-details { transform: rotate(180deg); }

/* --- TRANSITIONS & POLISH --- */
.bouton { transition: opacity .15s, transform .1s; }
.bouton:active { transform: scale(0.97); }
.bouton-principal:hover { opacity: 0.9; }
.bouton-secondaire:hover { background: var(--couleur-bordure); }
.carte-ligue { transition: box-shadow .2s, border-color .2s; }
.carte-ligue:hover { border-color: var(--accent); box-shadow: var(--shadow-card); }
.carte-classement, .carte-prochain, .carte-dernier, .carte-award { transition: box-shadow .2s; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.connexion-logo { margin-bottom:20px; }
.connexion-logo svg { height: 96px; width: auto; margin: 0 auto; display: block; }
.connexion-header-mobile svg { height: 28px; width: auto; display: block; }

/* === MOBILE HEADER === */
.mobile-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: 8px; padding: 20px 20px 12px; position: relative; }
@media (min-width: 900px) { .mobile-header { display: none; } .mobile-header-wrap { display: none; } }
.mobile-header .league-badge-header { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.mobile-header .mobile-league-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; justify-self: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-family: inherit; }
.mobile-header .league-name-col { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.mobile-header .league-name-col .league-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; line-height: 1.2; overflow: hidden; white-space: nowrap; max-width: 100%; }
.mobile-header .league-title .league-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mobile-header .league-title .league-nb { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); font-variant-numeric: tabular-nums; }
.mobile-header .league-title .league-fleche { flex-shrink: 0; }
.mobile-header .mobile-header-spacer { width: 44px; height: 1px; }

/* Bouton de bascule Score <-> Share : le logo lui-meme fait office de bouton. */
.bascule-univers { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; text-decoration: none; }
.sidebar-pc .bascule-univers { width: auto; height: auto; padding: 10px 14px; border-radius: 14px; }
.bascule-univers svg { width: 22px; height: auto; }
.sidebar-pc .bascule-univers svg { height: 28px; width: auto; }

/* === MOBILE LEAGUE DROPDOWN === */
.mobile-header-wrap { position: relative; }
@media (min-width: 900px) { .mobile-header-wrap { display: none; } }
.mobile-league-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 0 0 20px 20px; box-shadow: 0 8px 32px rgba(0,0,0,.15); z-index: 200; overflow: hidden; }
.mobile-league-dropdown.open { display: block; }
.mobile-league-dropdown { color: var(--couleur-texte); }
.mobile-league-creer { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 12px 16px 16px; border-radius: 16px; background: var(--accent); color: var(--accent-encre); font-weight: 800; font-size: 15px; text-decoration: none; }

/* === NAV BASSE 5 ONGLETS (mobile) === */
.nav-bas button { display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--couleur-texte-secondaire); text-decoration: none; min-width: 44px; min-height: 44px; justify-content: center; cursor: pointer; }
@media (max-width: 899px) {
  .nav-bas { grid-template-columns: repeat(5, minmax(0, 1fr)); display: grid; padding: 8px 8px max(26px, env(safe-area-inset-bottom)); }
  .nav-bas a, .nav-bas button { font-size: var(--taille-min); font-weight: 800; gap: 4px; padding: 6px 0; }
  .nav-bas a.actif { font-weight: 800; }
  .nav-bas a svg, .nav-bas button svg { width: 24px; height: 24px; }
}

/* Bouton central Publier de Share (variante 3 validee) : carre tres arrondi,
   couleur d'accent, remonte au-dessus de la barre, rebond au toucher. */
.nav-bas a.nav-publier { background: none; position: relative; overflow: visible; }
.nav-publier .pastille-publier {
  width: 58px; height: 50px; border-radius: 18px; margin-top: -22px;
  background: var(--accent); color: var(--accent-encre);
  border: 4px solid var(--couleur-surface);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-publier .pastille-publier svg { width: 28px; height: 28px; stroke-width: 2.2; }
.nav-publier > span:last-child { margin-top: -3px; }
.nav-publier:active .pastille-publier { transform: scale(.88); }
.nav-bas a.nav-publier.actif .pastille-publier { box-shadow: 0 0 0 2px var(--accent-texte), 0 6px 14px color-mix(in srgb, var(--accent) 38%, transparent); }
@media (prefers-reduced-motion: reduce) { .nav-publier .pastille-publier { transition: none; } }

/* === MOBILE SCORE PICKER === */
@media (max-width: 899px) {
  .prochain-equipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .prochain-equipes .score-picker { display: none; }
  .prochain-equipes .equipe-col { width: auto; }
  .equipe-col .mobile-score { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
  .score-big { font-size: 44px; width: 40px; }
}
/* Audit du 23 oct. 2026 (ergonomie) : sous 380 px, les deux reglages (−, score, +) debordaient de leur moitie et les
   boutons « + domicile » et « − exterieur » se chevauchaient (8 px, 16 px avec les zones de 44 px) : on resserre. */
@media (max-width: 380px) {
  .equipe-col .mobile-score { gap: 4px; }
  .score-big { width: 32px; }
}
@media (min-width: 900px) {
  .equipe-col .mobile-score { display: none; }
}

/* === HIDE DESKTOP HEADER ON MOBILE === */
@media (max-width: 899px) {
  .main-header { display: none; }
}

/* === MOBILE CARD TWEAKS === */
@media (max-width: 899px) {
  .carte-prochain { padding: 20px; border-radius: 24px; gap: 20px; --tuile-retrait: 20px; }
  .carte-dernier { padding: 18px 20px 8px; border-radius: 24px; }
  .carte-classement { padding: 18px 20px 8px; border-radius: 24px; }
  .carte-award { padding: 16px; border-radius: 20px; }
  .carte-admin { border-radius: 24px; padding: 18px 20px; }
  .trophee-grid { gap: 10px; }
  .contenu-principal { padding: 0 var(--bord-ecran) 120px; min-width: 0; width: 100%; overflow-x: hidden; }
  .grille-desktop { gap: var(--espace-blocs); }
  .grille-gauche, .grille-droite { display: contents; }
}

/* === MOBILE MAIN WRAPPER === */
@media (max-width: 899px) {
  .mobile-main { padding: 8px 20px 120px; display: flex; flex-direction: column; gap: 16px; }
  .mobile-header-wrap { margin-bottom: 12px; }
  /* contenu-principal already provides the side padding (--bord-ecran), avoid double-padding with .conteneur */
  .contenu-principal .conteneur { padding-left: 0; padding-right: 0; }
}

/* === CONNEXION MOBILE === */
@media (max-width: 899px) {
  .connexion-hero { padding-top: 0; padding-left: 24px; padding-right: 24px; }
  .connexion-hero h1, .connexion-hero .connexion-titre { font-size: 32px; line-height: 1.05; text-align: left; }
  .connexion-hero .connexion-titre-share { font-size: 28px; }
  .connexion-hero .accent-word { color: var(--accent-texte); }
  .connexion-hero .sous-titre { text-align: left; font-size: 16px; line-height: 1.5; }
}
.connexion-header-mobile { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
@media (min-width: 900px) { .connexion-header-mobile { display: none; } }
.separator-ou { display: flex; align-items: center; gap: 12px; color: var(--couleur-texte-secondaire); font-size: 13px; }
.separator-ou span { flex: 1; height: 1px; background: var(--couleur-bordure); }

/* === ONT DEJA PARIE === */
.carte-qui-a-parie { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 24px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.carte-qui-a-parie h2 { margin: 0; font-size: 15px; font-weight: 800; }

/* === DERNIER MATCH COMPACT (mobile) === */
.carte-dernier-compact { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 24px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.carte-dernier-compact .dernier-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.carte-dernier-compact .dernier-info .dernier-sub { font-size: 12px; color: var(--couleur-texte-secondaire); }
.carte-dernier-compact .dernier-info .dernier-result { font-size: 20px; font-weight: 800; }
.carte-dernier-compact .dernier-info .dernier-prono { font-size: 13px; color: var(--couleur-texte-secondaire); }
.carte-dernier-compact .dernier-points { padding: 8px 12px; border-radius: 14px; background: var(--good-soft); color: var(--couleur-positif); font-size: 18px; font-weight: 800; }

/* === CLASSEMENT MINI (mobile) === */
@media (max-width: 899px) {
  .carte-classement .classement-header h2 { font-size: 15px; }
}

/* === CREER LIGUE - WIZARD RESTYLE === */

.wizard-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.wizard-step-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 8px;
}

/* Progress pills */
.progress-pills {
  display: flex;
  gap: 6px;
}
.progress-pill {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--couleur-bordure);
  transition: background 0.25s;
}
.progress-pill.active {
  background: var(--accent);
}

/* Toggle switch - iOS style (override base) */
.toggle-switch {
  width: 52px;
  height: 32px;
}
.toggle-switch .toggle-track {
  border-radius: 16px;
}
.toggle-switch .toggle-track::after {
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(20px);
}

/* Club recap card */
.club-recap-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 20px;
  margin-bottom: 16px;
}
.club-recap-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-encre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--taille-min);
  flex-shrink: 0;
}
.club-recap-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.club-recap-name {
  font-size: 15px;
  font-weight: 800;
}
.club-recap-league {
  font-size: 13px;
}

/* Coefficient grid */
.coef-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.coef-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 16px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.coef-btn.active {
  background: var(--accent-fond-leger);
  border-color: var(--accent);
  color: var(--accent-texte);
}

/* Sticky bottom CTA */
.sticky-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom));
  background: var(--couleur-fond);
  border-top: 1px solid var(--couleur-bordure);
  z-index: 10;
}
@media (min-width: 900px) {
  .sticky-bottom { left: 272px; }
}
.sticky-bottom-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 18px;
  font-size: 16px;
}

/* Competition row hover */
.competition-row { transition: border-color 0.15s; }
.competition-row:hover { border-color: var(--accent); }

/* Titre visible uniquement sur mobile (le enTete PC gère le titre sur desktop) */
@media (min-width: 900px) { .titre-page-mobile { display: none; } }

@media (max-width: 899px) {
  .wizard-step-title { font-size: 24px; }
}

/* === SHARE : colonne de contenu pleine largeur (comme les blocs Score) === */
.share-colonne { max-width: 640px; margin: 0 auto; padding: 8px 0 100px; }
/* Bouton « Retour » des pages ouvertes depuis un fil (profil, publication, club, match de Share). */
.barre-retour-fil { max-width: 640px; margin: 0 auto; padding-top: 8px; display: flex; align-items: center; min-height: 44px; }
.barre-retour-fil + .share-colonne { padding-top: 8px; }

/* Notifications : compteur, point sur le logo de bascule, cloche mobile */
.badge-notif { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--couleur-negatif); color: #fff; font-size: var(--taille-min); font-weight: 800; line-height: 1; }
.badge-notif[hidden] { display: none; }
.badge-notif-nav { position: absolute; top: 0; right: calc(50% - 22px); margin-left: 0; }
.point-bascule { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--couleur-negatif); border: 2px solid var(--couleur-fond); }
.point-bascule[hidden] { display: none; }
.page-notifications { max-width: 640px; margin: 0 auto; padding: 8px 20px 100px; }

/* Messages prives Share */
.mobile-header-share { grid-template-columns: 88px minmax(0, 1fr) 88px; }
.mobile-header-share .bascule-univers { justify-self: start; }
.mobile-header-actions { display: flex; justify-content: flex-end; align-items: center; }
.page-messages { max-width: 640px; margin: 0 auto; padding: 8px 20px 100px; }
.titre-page-messages { font-size: 32px; font-weight: 800; margin: 12px 0 16px; }
.onglets-messages { display: flex; gap: 8px; margin-bottom: 10px; }
.onglets-messages a { flex: 1; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); text-decoration: none; font-weight: 800; font-size: 14px; }
.onglets-messages a.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
.ligne-conversation { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 4px; border-bottom: 1px solid var(--couleur-bordure); text-decoration: none; color: inherit; }
.ligne-conversation-texte { flex: 1; min-width: 0; }
.ligne-conversation-nom { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-conversation-apercu { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-conversation.non-lue .ligne-conversation-apercu { color: var(--couleur-texte); font-weight: 800; }
.ligne-conversation-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; flex-shrink: 0; }
.carte-reglage-dm { margin-top: 28px; padding: 16px 20px; border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); }
.champ-dm { min-height: 44px; border-radius: 14px; border: 1px solid var(--couleur-bordure-controle); padding: 10px 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 15px; }
textarea.champ-dm { flex: 1; resize: none; min-height: 52px; max-height: 160px; }
.entete-conversation { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 0 12px; border-bottom: 1px solid var(--couleur-bordure); }
.retour-messages, .btn-menu-conv { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; cursor: pointer; flex-shrink: 0; }
.entete-conversation-profil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-size: 15px; overflow: hidden; }
.menu-conv { position: absolute; right: 0; top: 56px; z-index: 20; min-width: 220px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.menu-conv[hidden] { display: none; }
.menu-conv button { display: block; width: 100%; min-height: 44px; padding: 0 16px; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--couleur-texte); }
.bandeau-dm { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: var(--accent-fond-leger); font-size: 14px; }
.post-partage { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.12); color: inherit; text-decoration: none; font-size: 13px; }
@media (min-width: 900px) { .mobile-header-share { display: none; } }

/* Connexion : alternance Score <-> Share */
.connexion-bascule { display: grid; perspective: 1200px; cursor: pointer; }
.connexion-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.connexion-face-share { transform: rotateX(180deg); }
.connexion-bascule.retournee .connexion-face-bets { transform: rotateX(-180deg); }
.connexion-bascule.retournee .connexion-face-share { transform: rotateX(0deg); }
.connexion-points { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.connexion-point { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; }
.connexion-point span { width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-bordure); transition: background .3s, transform .3s; }
.connexion-point.actif span { transform: scaleX(2.75); background: var(--accent); }
@media (max-width: 899px) { .connexion-points { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .connexion-face { transition: opacity .4s; }
  .connexion-face-share, .connexion-bascule.retournee .connexion-face-bets, .connexion-bascule.retournee .connexion-face-share { transform: none; }
  .connexion-face-share { opacity: 0; pointer-events: none; }
  .connexion-bascule.retournee .connexion-face-bets { opacity: 0; pointer-events: none; }
  .connexion-bascule.retournee .connexion-face-share { opacity: 1; pointer-events: auto; }
}

/* Cloche Score dans l'en-tete principal : seulement quand la page n'a ni barre laterale ni en-tete mobile (compte sans ligue) */
.cloche-entete { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); color: inherit; text-decoration: none; }
.cloche-entete .badge-notif { position: absolute; top: -4px; right: -4px; margin-left: 0; }
.layout-ligue:has(.sidebar-pc, .mobile-header) .cloche-entete { display: none; }

/* Posts d'un compte officiel aux couleurs de son club (lot 2) : fond de la
   couleur principale (plus leger en clair qu'en sombre), bordure de la
   couleur secondaire. --club-p / --club-s sont posees sur l'element. */
:root { --club-fond-pct: 9%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --club-fond-pct: 20%; } }
:root[data-theme="dark"] { --club-fond-pct: 20%; }
.post-officiel {
  background: color-mix(in srgb, var(--club-p) var(--club-fond-pct), var(--couleur-surface));
  border: 2px solid var(--club-s);
  border-radius: 20px;
  padding: 12px;
  margin: 10px 0;
}


/* Share mobile : bandeau du haut semi-fixe (se cache en descendant, revient en
   remontant) et fils de lecture presque colles au bandeau. */
.entete-flottant-espace { display: none; }
@media (max-width: 899px) {
  .mobile-header-wrap.entete-flottant {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60; margin-bottom: 0;
    background: var(--couleur-fond); transition: transform .25s ease;
  }
  .mobile-header-wrap.entete-flottant.cache { transform: translateY(-100%); }
  .entete-flottant-espace { display: block; }
  .entete-flottant .mobile-header-share { padding-top: 10px; padding-bottom: 2px; }
  .entete-flottant + .entete-flottant-espace + .share-colonne { padding-top: 0; }
  .entete-flottant + .entete-flottant-espace + .barre-retour-fil { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .mobile-header-wrap.entete-flottant { transition: none; } }

/* Nom d'un joueur cliquable (Score) : garde l'apparence du texte. */
.lien-joueur { color: inherit; text-decoration: none; }
.lien-joueur:hover, .lien-joueur:focus-visible { text-decoration: underline; }
/* Temps 1 (28 oct. 2026) : zones tactiles de 44 px sans changer le texte ni la mise en page.
   Classement : le lien couvre toute sa ligne (64 px) ou toute sa place du podium, par un calque transparent pose sur
   l'ancetre positionne (hors du overflow: hidden du nom, qui couperait une marge interne).
   Vestiaire : marge interne compensee par une marge negative (aucun deplacement). */
.cl-podium-place { position: relative; }
.cl-ligne-nom .lien-joueur::after, .cl-podium-nom .lien-joueur::after { content: ""; position: absolute; inset: 0; }
.ve-nom .lien-joueur { display: inline-block; padding: 15px 6px; margin: -15px -6px; }

/* Encarts de match Share : intensite du fondu entre les couleurs des deux clubs
   (plus legere en clair, plus marquee en sombre). */
:root { --m-fort: 24%; --m-doux: 8%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-fort: 42%; --m-doux: 14%; } }
:root[data-theme="dark"] { --m-fort: 42%; --m-doux: 14%; }

/* iPhone (Safari) : un champ de moins de 16 px declenche un zoom de la page a la
   selection. Sur ecran tactile, tous les champs de saisie passent a 16 px. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  textarea, select { font-size: 16px !important; }
}

/* Matchs a venir (mobile) : les deux compteurs de score tiennent sur une ligne, le bouton
   Valider/Modifier passe dessous sur toute la largeur au lieu d'etre ecrase. */
.form-prono-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.form-prono-suite .bouton { flex: 1 1 100%; min-width: 0; }
@media (min-width: 520px) { .form-prono-suite .bouton { flex: 1 1 0; } }

/* Explorer (accueil) : chips, "En ce moment" et "Matchs" (cartes aux couleurs des clubs) */
.exp-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px 10px; padding: 2px 20px 4px; scrollbar-width: none; }
.exp-chips::-webkit-scrollbar, .exp-defile::-webkit-scrollbar { display: none; }
.exp-chip { flex-shrink: 0; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--couleur-bordure); background: var(--couleur-surface); color: var(--couleur-texte); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.exp-chip.actif { border-color: var(--accent); color: var(--accent-texte); }
.exp-chip.petit { min-height: 36px; padding: 0 14px; font-size: 13px; }
.exp-sec { margin-bottom: 24px; }
.exp-sec[hidden], .exp-defile[hidden] { display: none; }
.exp-sec-tete { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.exp-sec-tete h2 { font-size: 20px; font-weight: 800; margin: 0; }
.exp-voir-tout { font-size: 14px; font-weight: 800; color: var(--accent-texte); text-decoration: none; }
.exp-vide { color: var(--couleur-texte-secondaire); font-size: 14px; padding: 14px 4px; margin: 0; }
.exp-defile { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
.exp-defile > * { scroll-snap-align: start; }
.exp-sous-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.exp-direct { flex: 0 0 min(86%, 420px); display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; border-radius: 20px; text-decoration: none; color: var(--couleur-texte); box-shadow: var(--shadow-card); }
.exp-direct-haut { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; }
.exp-live-txt { display: inline-flex; align-items: center; gap: 6px; color: var(--couleur-negatif); letter-spacing: .03em; }
.exp-live-txt i { width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-negatif); }
.exp-minute { display: inline-flex; align-items: center; gap: 5px; color: var(--couleur-texte-secondaire); }
.exp-direct-corps { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.exp-eq { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.exp-eq-nom { font-size: 14px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-score { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.exp-score strong { font-size: 34px; line-height: 1; white-space: nowrap; }
.exp-score em { font-style: normal; font-size: var(--taille-min); font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--couleur-negatif); border-radius: 6px; padding: 2px 8px; }
.exp-comp { text-align: center; font-size: 13px; color: var(--couleur-texte-secondaire); }
.exp-mini { flex: 0 0 172px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 18px; text-decoration: none; color: var(--couleur-texte); }
.exp-mini-comp { font-size: var(--taille-min); font-weight: 800; color: var(--couleur-texte-secondaire); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-mini-corps { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.exp-mini-centre { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.exp-mini-centre strong { font-size: 20px; line-height: 1.1; }
.exp-mini-heure { font-size: var(--taille-min); font-weight: 800; color: var(--couleur-texte-secondaire); }
.exp-mini-etat { font-size: var(--taille-min); font-weight: 800; color: var(--couleur-texte-secondaire); }
.exp-mini-etat.direct { color: var(--couleur-negatif); }
.exp-mini-noms { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 800; }
.exp-mini-noms span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-mini-noms span + span { text-align: right; }
@media (min-width: 900px) { .exp-chips, .exp-defile { margin: 0; padding-left: 0; padding-right: 0; scroll-padding: 0; } }

/* Explorer : Clubs populaires (liste) et A decouvrir (cartes) */
.exp-liste { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.exp-club { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--couleur-texte); border-bottom: 1px solid var(--couleur-bordure); }
.exp-club:last-child { border-bottom: 0; }
.exp-club-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.exp-club-nom { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; }
.exp-club-abo { font-size: 13px; color: var(--couleur-texte-secondaire); }
.exp-chevron { color: var(--couleur-texte-secondaire); display: flex; }
.exp-decouvrir { flex: 0 0 148px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px 12px; border-radius: 20px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); }
.exp-decouvrir-lien { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--couleur-texte); width: 100%; text-align: center; }
.exp-decouvrir-nom { font-size: 15px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-decouvrir-sous { font-size: 12px; color: var(--couleur-texte-secondaire); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-suivre { min-height: 40px; width: 100%; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-encre); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.exp-suivre.suivi { background: var(--couleur-surface-2); color: var(--couleur-texte); }

/* Explorer : Tendances (liste avec fleche d'evolution) */
.exp-tendance { display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-decoration: none; color: var(--couleur-texte); border-bottom: 1px solid var(--couleur-bordure); }
.exp-tendance:last-child { border-bottom: 0; }
.exp-fleche { display: flex; flex-shrink: 0; width: 20px; }
.exp-fleche.hausse { color: var(--couleur-positif); }
.exp-fleche.baisse { color: var(--couleur-negatif); }
.exp-fleche.stable { color: var(--couleur-texte-secondaire); }
.exp-tag-pastille { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--accent-fond-leger); color: var(--accent-texte); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; }
.exp-tendance-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exp-tendance-nom { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-tendance-sous { font-size: 13px; color: var(--couleur-texte-secondaire); }
.exp-tendance-nb { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: var(--couleur-texte-secondaire); flex-shrink: 0; }

/* Explorer : Pour toi (cartes compactes) */
.exp-post { flex: 0 0 min(78%, 300px); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 20px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); text-decoration: none; color: var(--couleur-texte); }
.exp-post-auteur { display: flex; align-items: center; gap: 8px; min-width: 0; }
.exp-post-nom { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.exp-post-texte { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.exp-post-pied { display: flex; gap: 12px; font-size: 12.5px; color: var(--couleur-texte-secondaire); margin-top: auto; }

/* Explorer : barre de recherche, onglets de resultats, meilleur resultat */
.exp-recherche { position: relative; margin-bottom: 12px; }
.exp-recherche .ic-loupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--couleur-texte-secondaire); pointer-events: none; }
.exp-recherche input[type="search"] { width: 100%; height: 50px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); padding: 0 46px 0 46px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 16px; font-family: inherit; -webkit-appearance: none; appearance: none; }
.exp-recherche input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.exp-recherche input[type="search"]:focus { outline: none; border-color: var(--accent); }
.exp-effacer { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--couleur-texte-secondaire); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exp-effacer[hidden] { display: none; }
#exp-resultats.charge { opacity: .55; transition: opacity .15s; }
.exp-onglets { display: flex; gap: 22px; overflow-x: auto; margin: 0 -20px 10px; padding: 0 20px; border-bottom: 1px solid var(--couleur-bordure); scrollbar-width: none; }
.exp-onglets::-webkit-scrollbar { display: none; }
.exp-onglet { flex-shrink: 0; padding: 7px 2px 6px; font-size: 15px; font-weight: 800; color: var(--couleur-texte-secondaire); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.exp-onglet.actif { color: var(--couleur-texte); font-weight: 800; border-bottom-color: var(--accent); }
.exp-hero { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 20px; border-radius: 22px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); }
.exp-hero.themed { background: color-mix(in srgb, var(--club-p) var(--club-fond-pct), var(--couleur-surface)); border: 2px solid var(--club-s); }
.exp-hero-lien { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--couleur-texte); }
.exp-hero-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.exp-hero-nom { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 20px; font-weight: 800; }
.exp-hero-officiel { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-encre); }
.exp-hero-alias { font-size: 14px; color: var(--couleur-texte-secondaire); }
.exp-hero-bio { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.exp-hero-meta { font-size: 13px; color: var(--couleur-texte-secondaire); }
.exp-hero .exp-suivre { width: auto; padding: 0 14px; flex-shrink: 0; align-self: flex-start; }
.exp-posts-liste { display: flex; flex-direction: column; gap: 10px; }
.exp-posts-liste .exp-post { flex: none; }
.exp-grille-matchs { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.exp-grille-matchs .exp-mini { flex: none; }

/* Salon de match : page plein ecran (bandeau et barre du bas masques), messages, saisie */
body:has(.page-salon) .nav-bas, body:has(.page-salon) .entete-flottant, body:has(.page-salon) .entete-flottant-espace { display: none; }
@media (max-width: 899px) { body:has(.page-salon) .contenu-principal, body:has(.page-salon) .layout-ligue { overflow: visible; padding-bottom: 0; } }
.page-salon { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 720px; margin: 0 auto; }
.salon-entete { position: sticky; top: 0; z-index: 5; background: var(--couleur-fond); padding: 8px 16px 8px; border-bottom: 1px solid var(--couleur-bordure); }
.salon-barre { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.salon-retour { width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; color: var(--couleur-texte); text-decoration: none; }
.salon-titre { flex: 1; font-size: 17px; font-weight: 800; }
.salon-actifs { font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.salon-match { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 18px; }
.salon-eq { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.salon-eq-nom { max-width: 100%; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-score { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.salon-score strong { font-size: 30px; line-height: 1; white-space: nowrap; }
.salon-etat-match { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.salon-etat-match.direct { color: var(--couleur-negatif); }
.salon-comp { text-align: center; font-size: 12px; color: var(--couleur-texte-secondaire); margin-top: 4px; }
.salon-fil { flex: 1; padding: 12px 16px 8px; }
.salon-vide { text-align: center; color: var(--couleur-texte-secondaire); font-size: 14px; padding: 40px 16px; }
.salon-msg { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0; }
.salon-msg.mien { flex-direction: row-reverse; }
.salon-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.salon-avatar-initiale { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.salon-corps { max-width: 80%; display: flex; flex-direction: column; }
.salon-msg.mien .salon-corps { align-items: flex-end; }
.salon-bulle { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--couleur-surface-2); color: var(--couleur-texte); }
.salon-msg.mien .salon-bulle { border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--accent-encre); }
.salon-msg.officiel .salon-bulle { background: color-mix(in srgb, var(--club-p) var(--club-fond-pct), var(--couleur-surface)); border: 2px solid var(--club-s); color: var(--couleur-texte); }
.salon-nom { font-size: 12px; font-weight: 800; opacity: .85; }
.salon-texte { font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.salon-heure { font-size: var(--taille-min); opacity: .7; align-self: flex-end; }
.salon-actions { display: none; margin-top: 4px; }
.salon-msg.actions-visibles .salon-actions { display: block; }
.salon-action { min-height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); color: var(--couleur-texte-secondaire); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.salon-saisie { position: sticky; bottom: 0; z-index: 5; background: var(--couleur-fond); border-top: 1px solid var(--couleur-bordure); padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
.salon-info { margin: 0 0 8px; font-size: 13px; color: var(--couleur-texte-secondaire); text-align: center; }
.salon-ligne { display: flex; gap: 10px; }
.salon-ligne input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 16px; }
.salon-ligne input:disabled { opacity: .6; }
.salon-envoyer { width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.salon-envoyer:disabled { opacity: .5; cursor: default; }

/* Salons : choix de l'identite d'ecriture, mentions, liste des salons ouverts */
.salon-auteur { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.salon-auteur select { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 16px; }
.salon-mention { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.salons-liste { display: flex; flex-direction: column; gap: 12px; }
.salons-carte { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 20px; text-decoration: none; color: var(--couleur-texte); box-shadow: var(--shadow-card); }
.salons-haut { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.salons-actifs { color: var(--accent-texte); font-weight: 800; }
.salons-match { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.salons-eq { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.salons-eq-nom { max-width: 100%; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salons-centre { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.salons-dernier { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Pulse (rangee de l'accueil Share) et bascule Pour toi / Abonnements ---- */
.pulse-section { margin-bottom: 8px; }
.pulse-rangee { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pulse-rangee::-webkit-scrollbar { display: none; }
.pulse-item { position: relative; flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: start; }
.pulse-ouvrir { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.pulse-anneau { display: flex; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-texte)); }
.pulse-anneau.vu { background: var(--couleur-bordure); }
.pulse-anneau.aucun { background: var(--couleur-bordure); }
.pulse-coeur { display: flex; border-radius: 50%; border: 3px solid var(--couleur-fond); overflow: hidden; }
.pulse-direct { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: var(--couleur-negatif); color: #fff; font-size: var(--taille-min); font-weight: 800; letter-spacing: .04em; white-space: nowrap; border: 2px solid var(--couleur-fond); }
.pulse-plus { position: absolute; top: 46px; left: 50px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--couleur-fond); background: var(--accent); color: var(--accent-encre, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pulse-nom { max-width: 78px; font-size: 12px; font-weight: 800; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--couleur-texte-secondaire); }
/* Lot S5 : etat vide compact de la rangee Pulse, sans icone (la bulle « Ton Pulse » est juste au-dessus). */
.etat-vide-compact.pulse-vide { padding: 2px 4px 12px; gap: 2px; align-items: flex-start; text-align: left; }
.etat-vide-compact.pulse-vide .etat-vide-icone { display: none; }
.etat-vide-compact.pulse-vide .etat-vide-texte { max-width: none; font-size: 13px; line-height: 18px; }
.pulse-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 1100; max-width: 90vw; padding: 12px 18px; border-radius: 16px; background: var(--couleur-texte); color: var(--couleur-fond); font-size: 14px; font-weight: 800; }
.pulse-toast[hidden], .pulse-visionneuse[hidden], .pulse-vis-direct[hidden] { display: none; }
.pulse-visionneuse { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; justify-content: flex-end; }
.pulse-vis-fond { position: absolute; inset: 0; }
.pulse-vis-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.1) 30%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.5)); }
.pulse-vis-zone { position: absolute; top: 90px; bottom: 0; width: 40%; border: 0; background: transparent; cursor: pointer; }
.pulse-vis-zone.gauche { left: 0; }
.pulse-vis-zone.droite { right: 0; width: 60%; }
.pulse-vis-barres { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 4px; }
.pulse-vis-barre { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.pulse-vis-barre > span { display: block; height: 100%; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.pulse-vis-barre.fait > span { transform: none; }
.pulse-vis-barre.en-cours > span { animation: pulse-barre 5s linear forwards; }
/* Barre animee en transform (gere par la carte graphique) plutot qu'en width (redessin a chaque image). */
@keyframes pulse-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pulse-vis-tete { position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 12px; right: 4px; display: flex; align-items: center; gap: 10px; color: #fff; z-index: 2; }
.pulse-vis-tete .avatar, .pulse-vis-tete img { width: 40px !important; height: 40px !important; font-size: 16px !important; }
.pulse-vis-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pulse-vis-qui strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-vis-direct { padding: 3px 8px; border-radius: 999px; background: var(--couleur-negatif); color: #fff; font-size: var(--taille-min); font-weight: 800; letter-spacing: .04em; }
.pulse-vis-fermer { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pulse-vis-legende { position: relative; z-index: 1; margin: 0 24px 12px; font-size: 24px; font-weight: 800; line-height: 1.25; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); text-align: center; pointer-events: none; }
.pulse-vis-club { position: relative; z-index: 1; margin: 0 24px calc(28px + env(safe-area-inset-bottom)); font-size: 13px; font-weight: 800; color: #fff; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.fil-bascule { display: flex; gap: 8px; margin: 2px 0 10px; }
.fil-bascule a { flex: 1; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); text-decoration: none; font-weight: 800; font-size: 14px; }
.fil-bascule a.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
#exp-champ::placeholder { font-size: 13.5px; }

/* ---- Pulse : media de la visionneuse, menu, creation ---- */
.pulse-vis-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pulse-vis-media img, .pulse-vis-media video { width: 100%; height: 100%; object-fit: contain; }
.pulse-vis-media .plein { object-fit: cover; }
.pulse-vis-barre > span { animation-timing-function: linear; }
.pulse-feuille { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--couleur-surface); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pulse-feuille button { min-height: 48px; border: 0; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.pulse-feuille button:first-child { color: var(--couleur-negatif); }
.pulse-feuille button:last-child { color: var(--couleur-texte-secondaire); }
.pulse-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; color: var(--couleur-texte-secondaire); text-decoration: none; font-size: 14px; font-weight: 800; }
.pulse-apercu { display: flex; align-items: center; justify-content: center; width: min(100%, calc(42vh * 9 / 16)); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 24px; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); overflow: hidden; }
.pulse-apercu img, .pulse-apercu video { width: 100%; height: 100%; object-fit: contain; }
.pulse-etiquette { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.pulse-erreur { margin: 12px 0 0; color: var(--couleur-negatif); font-size: 14px; font-weight: 800; }
.pulse-erreur[hidden] { display: none; }
a.pulse-ouvrir { text-decoration: none; }
a.pulse-plus { text-decoration: none; }

/* ---- Pulse : camera integree ---- */
.pulse-camera { position: relative; width: min(100%, calc(52vh * 9 / 16)); margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 24px; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pulse-live { width: 100%; height: 100%; object-fit: cover; }
.pulse-camera-etat { position: absolute; inset: 0; margin: 0; padding: 24px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 15px; font-weight: 800; background: rgba(0,0,0,.55); }
.pulse-camera-etat[hidden], .pulse-rec[hidden], #pulse-etape-capture[hidden], #pulse-etape-publier[hidden] { display: none; }
.pulse-rec { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--couleur-negatif); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pulse-commandes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.pulse-cmd { min-width: 96px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.pulse-declencheur { --p: 0; flex-shrink: 0; width: 80px; height: 80px; padding: 6px; border: 0; border-radius: 50%; background: conic-gradient(var(--couleur-negatif) calc(var(--p) * 1%), var(--couleur-bordure) 0); cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pulse-declencheur span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--couleur-surface); border: 5px solid var(--couleur-texte); transition: transform .15s ease, background .15s ease; }
.pulse-declencheur.enregistre span { transform: scale(.62); background: var(--couleur-negatif); border-color: var(--couleur-negatif); }
.pulse-declencheur:disabled { opacity: .4; cursor: default; }
.pulse-aide { margin: 0; font-size: 13px; text-align: center; }

/* ---- Pulse : identite football (ecussons, LIVE, visionneuse a gestes) ---- */
.pulse-item { flex: 0 0 80px; }
.pulse-ouvrir { border-radius: 0; min-width: 72px; min-height: 84px; }
.pulse-ecu { --reste: 100; position: relative; display: block; width: 72px; height: 84px; clip-path: path('M8 0H64Q72 0 72 8V46C72 66 54 78 36 84C18 78 0 66 0 46V8Q0 0 8 0Z'); background: conic-gradient(from 0deg, var(--accent) calc(var(--reste) * 1%), var(--couleur-bordure) 0); }
.pulse-ecu.vu, .pulse-ecu.aucun { background: var(--couleur-bordure); }
.pulse-ecu-coeur { position: absolute; left: 4px; top: 4px; display: block; width: 64px; height: 76px; overflow: hidden; background: var(--couleur-fond); clip-path: path('M6 0H58Q64 0 64 6V41C64 59 49 70 32 76C15 70 0 59 0 41V6Q0 0 6 0Z'); }
.pulse-ecu-coeur > * { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; font-size: 28px !important; }
.pulse-direct { position: absolute; left: 50%; bottom: -6px; display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--couleur-negatif); color: #fff; font-size: var(--taille-min); font-weight: 800; letter-spacing: .08em; border: 2px solid var(--couleur-fond); transform: translateX(-50%); animation: pulse-vibre 3.6s ease-in-out infinite; }
.pulse-direct i, .pulse-vis-direct i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse-clignote 1s ease-in-out infinite; }
/* Onde de choc du badge LIVE : un anneau fixe qui grandit et s'efface (transform + opacity,
   geres par la carte graphique), au lieu d'animer box-shadow (redessin a chaque image). */
.pulse-direct::after, .pulse-vis-direct::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 5px rgba(179, 38, 30, .55); opacity: 0; pointer-events: none; animation: pulse-onde 1.8s ease-out infinite; }
@keyframes pulse-onde { 0% { opacity: 1; transform: scale(.82); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes pulse-vibre { 0%, 88%, 100% { transform: translateX(-50%); } 90% { transform: translateX(calc(-50% - 2px)); } 92% { transform: translateX(calc(-50% + 2px)); } 94% { transform: translateX(calc(-50% - 2px)); } 96% { transform: translateX(calc(-50% + 1px)); } }
@keyframes pulse-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-plus { top: 56px; left: 52px; }
.pulse-vis-geste { position: absolute; inset: 0; z-index: 1; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pulse-vis-barres { pointer-events: none; gap: 5px; }
.pulse-vis-barre { height: 2px; border-radius: 0; transform: skewX(-24deg); }
.pulse-vis-score { padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.pulse-vis-score[hidden] { display: none; }
.pulse-vis-score { position: absolute; right: 16px; top: 58px; font-size: var(--taille-min); }
.pulse-vis-qui { min-width: 0; flex: 1; }
.pulse-vis-sous { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pulse-vis-sous .pulse-vis-direct { padding: 1px 6px; font-size: var(--taille-min); }
.pulse-vis-sous .pulse-vis-direct[hidden] { display: none; }
.pulse-vis-direct { position: relative; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; letter-spacing: .08em; }
.pulse-vis-legende { margin: 0 84px 12px 24px; text-align: left; font-size: 22px; }
.pulse-vis-club { margin: 0 84px calc(28px + env(safe-area-inset-bottom)) 24px; text-align: left; }
.pulse-vis-actions { position: absolute; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.pulse-vis-action { width: 52px; min-height: 52px; padding: 6px 0; border: 0; border-radius: 16px; background: rgba(0, 0, 0, .38); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.pulse-vis-action:disabled { cursor: default; }
/* ---- Passeport : collection des Pulses Certifies ---- */
.pc-titre { font-size: 20px; margin: 8px 0 10px; }
.pc-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.pc-carte { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; text-decoration: none; color: #fff; border: 3px solid var(--tri-p, #d4a72c); box-shadow: 0 0 0 2px var(--tri-s, #f1d27a); background: #000; }
.pc-media, .pc-media img, .pc-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-legende { position: absolute; left: 0; right: 0; top: 0; padding: 8px 10px 16px; font-size: 12px; font-weight: 800; line-height: 1.25; background: linear-gradient(rgba(0, 0, 0, .65), transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.pc-tampon { position: absolute; left: 8px; bottom: 12px; display: flex; flex-direction: column; max-width: 82%; padding: 5px 9px 6px; border: 2px double #f1d27a; border-radius: 9px; color: #f7e3a1; background: rgba(0, 0, 0, .45); transform: rotate(-7deg); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); overflow: hidden; pointer-events: none; }
.pc-tampon::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; background: linear-gradient(115deg, transparent 20%, var(--tri-p, #d4a72c) 35%, #fff 46%, var(--tri-s, #f1d27a) 56%, transparent 72%); background-size: 100% 100%; will-change: transform; mix-blend-mode: overlay; opacity: .7; animation: pulse-holo 3.4s linear infinite; }
.pc-tampon b { font-size: var(--taille-min); font-weight: 800; }
.pc-tampon i { font-size: var(--taille-min); font-style: normal; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pc-tampon::after { animation: none; } }
/* ---- Pulse Certifie : repere, cadre Tribunes, tampon holographique ---- */
.pulse-certif { position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #f1d27a, #c8961c); color: #3a2a00; display: flex; align-items: center; justify-content: center; border: 2px solid var(--couleur-fond); }
.pulse-certif svg { stroke-width: 3; }
.pulse-vis-cadre { position: absolute; inset: 6px; z-index: 2; border: 3px solid var(--tri-p, #d4a72c); outline: 2px solid var(--tri-s, #f1d27a); outline-offset: 3px; border-radius: 22px; pointer-events: none; }
.pulse-vis-cadre[hidden], .pulse-vis-tampon[hidden], .pulse-vis-certif[hidden] { display: none; }
.pulse-vis-certif { position: absolute; left: 16px; top: calc(78px + env(safe-area-inset-top)); z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 8px; background: linear-gradient(135deg, #f1d27a, #c8961c); color: #3a2a00; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.pulse-vis-certif svg { stroke-width: 3; }
.pulse-vis-tampon { position: absolute; left: 22px; bottom: 34%; z-index: 3; transform: rotate(-9deg); display: flex; flex-direction: column; gap: 1px; padding: 8px 14px 9px; border: 3px double #f1d27a; border-radius: 12px; color: #f7e3a1; background: rgba(0, 0, 0, .38); text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); pointer-events: none; overflow: hidden; }
.pulse-vis-tampon::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; background: linear-gradient(115deg, transparent 20%, var(--tri-p, #d4a72c) 35%, #fff 46%, var(--tri-s, #f1d27a) 56%, transparent 72%); background-size: 100% 100%; will-change: transform; mix-blend-mode: overlay; opacity: .7; animation: pulse-holo 3.4s linear infinite; }
.pulse-vis-tampon .t-titre { font-size: 14px; font-weight: 800; }
.pulse-vis-tampon .t-stade, .pulse-vis-tampon .t-date { font-size: var(--taille-min); font-weight: 800; }
.pulse-vis-tampon.tamponne { animation: pulse-tampon .55s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pulse-tampon { 0% { transform: rotate(-9deg) scale(2.5); opacity: 0; } 60% { transform: rotate(-9deg) scale(.93); opacity: 1; } 100% { transform: rotate(-9deg) scale(1); opacity: 1; } }
/* Reflet holographique : meme trajectoire qu'avant (background-position 160% -> -60% sur un fond
   de 260 %), obtenue en deplacant une bande de 260 % de large (transform, sans redessin). */
@keyframes pulse-holo { from { transform: translateX(-98.46%); } to { transform: translateX(36.92%); } }
@media (prefers-reduced-motion: reduce) { .pulse-vis-tampon::after, .pulse-vis-tampon.tamponne { animation: none; } }
/* ---- Mode Tribunes a la creation ---- */
.pulse-stade-bloc { margin-bottom: 12px; }
.pulse-stade-etat { margin: 8px 0 0; font-size: 13px; }
.pulse-camera.tribunes, .pulse-apercu.tribunes { box-shadow: 0 0 0 4px var(--tri-p, #d4a72c), 0 0 0 7px var(--tri-s, #f1d27a); }
.pulse-tribunes-ruban { position: absolute; left: 50%; bottom: 12px; z-index: 2; transform: translateX(-50%); max-width: 90%; padding: 5px 12px; border-radius: 8px; background: var(--tri-p, #d4a72c); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-tribunes-ruban[hidden], .pulse-certif-info[hidden], #pulse-stade[hidden] { display: none; }
.pulse-certif-info { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--accent-fond-leger); color: var(--accent-texte); font-size: 13px; font-weight: 800; }
.pulse-vis-action.aime { background: rgba(255, 255, 255, .92); color: #111; }
.pulse-vis-confettis { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.pulse-ballon-explose { position: absolute; transform: translate(-50%, -50%); }
.pulse-confetti { position: absolute; width: 8px; height: 12px; border-radius: 2px; }
.pulse-vis-pause { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); margin: 0; padding: 8px 16px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.pulse-vis-pause[hidden] { display: none; }
@keyframes pulse-ent-haut { from { transform: translateY(28px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes pulse-ent-bas { from { transform: translateY(-28px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes pulse-ent-gauche { from { transform: translateX(28px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes pulse-ent-droite { from { transform: translateX(-28px); opacity: .3; } to { transform: none; opacity: 1; } }
.entree-haut { animation: pulse-ent-haut .26s ease-out; }
.entree-bas { animation: pulse-ent-bas .26s ease-out; }
.entree-gauche { animation: pulse-ent-gauche .26s ease-out; }
.entree-droite { animation: pulse-ent-droite .26s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pulse-direct, .pulse-vis-direct, .pulse-direct::after, .pulse-vis-direct::after, .pulse-direct i, .pulse-vis-direct i, .entree-haut, .entree-bas, .entree-gauche, .entree-droite { animation: none; }
}

/* ---- Passeport : fil unique, filtres, details, carte ---- */
.passeport-filtres { margin: 0 0 10px; }
.passeport-ligne { margin: 0 0 4px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.passeport-ligne a { color: var(--accent-texte); font-weight: 800; }
.passeport-note { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 10px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font-size: var(--taille-min); font-weight: 800; vertical-align: middle; }
.passeport-note-ok { background: color-mix(in srgb, var(--couleur-or) 20%, transparent); color: var(--couleur-or); }
.passeport-bloc { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border: 1px dashed var(--couleur-bordure); border-radius: 16px; }
.passeport-bloc[hidden] { display: none; }
.passeport-puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.passeport-puces:empty { display: none; }
.passeport-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px 0 12px; border-radius: 18px; background: var(--accent-fond-leger); color: var(--accent-texte); font-size: 14px; font-weight: 800; }
.passeport-puce button, .passeport-retirer { width: 28px; height: 28px; border: 0; border-radius: 14px; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.passeport-retirer { width: auto; padding: 0 8px; font-size: 13px; color: var(--couleur-negatif); }
.passeport-carte { width: 100%; height: min(60vh, 460px); border-radius: 24px; overflow: hidden; border: 1px solid var(--couleur-bordure); z-index: 0; }
.passeport-legende-carte { display: flex; align-items: center; gap: 6px; margin: 8px 0; font-size: 13px; }
.passeport-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #a3a7ae; border: 3px solid #5c5f66; margin-left: 10px; }
.passeport-pastille:first-child, .passeport-pastille-ok { background: #f1d27a; border-color: #9a6f10; margin-left: 0; }
.passeport-carte .leaflet-popup-content a { color: #0b57d0; font-weight: 800; }
/* Bulle d'un point de la carte : un souvenir (nom, date, photo), 2 ou 3 (nom, date), au-dela « Voir les événements ». */
.pp-bulle-souvenir { margin-top: 8px; }
.pp-bulle-souvenir a { display: block; }
.pp-bulle-date { display: block; font-size: 12px; opacity: .75; }
.pp-bulle-photo { margin-top: 8px; }
.pp-bulle-photo img { display: block; width: 100%; max-width: 220px; height: auto; max-height: 220px; object-fit: cover; border-radius: 12px; }
.pp-bulle-voir { margin-top: 4px; }
.pp-bulle-liens { margin-top: 10px; font-size: 12px; }
.pp-lieu { padding: 14px 18px; margin-bottom: 12px; }
.pp-lieu-titre { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.pp-lieu-liens { margin: 0; font-size: 14px; }
.pp-lieu-liens a { color: var(--accent-texte); font-weight: 800; }
.pc-fil { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pc-fil .pc-carte { width: 104px; flex-shrink: 0; }
.pc-fil-texte { min-width: 0; }

/* ---- Regie publicitaire : publicite sponsorisee et carte de consentement ---- */
.pub { border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); overflow: hidden; margin: 0 0 var(--espace-blocs, 20px); }
.pub-entete { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 0; }
.pub-mention { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.pub-masquer { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.pub-corps { display: block; color: inherit; text-decoration: none; }
.pub-media { display: block; width: 100%; height: auto; }
.pub-texte { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px 14px; font-size: 14px; }
.pub-texte strong { font-size: 16px; font-weight: 800; }
.pub-action { display: inline-block; margin: 0 16px 14px; font-size: 14px; font-weight: 800; color: var(--accent-texte); }
.pub-invitation { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 900; max-width: 420px; margin: 0 auto; padding: 18px 20px 20px; border-radius: 24px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); box-shadow: 0 8px 28px rgba(0,0,0,.16); }
@media (min-width: 900px) { .pub-invitation { left: auto; right: 24px; bottom: 24px; margin: 0; } }
.pub-invitation-titre { margin: 0 28px 6px 0; font-size: 16px; font-weight: 800; }
.pub-invitation-texte, .pub-invitation-precision { margin: 0 0 8px; font-size: 14px; color: var(--couleur-texte-secondaire); }
.pub-invitation-boutons { display: flex; gap: 12px; margin-top: 12px; }
.pub-invitation-boutons .bouton { flex: 1; min-height: 48px; padding: 0 12px; }
.pub-invitation-fermer { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--couleur-texte-secondaire); font-size: 24px; line-height: 1; cursor: pointer; }
.pub-intro { margin: 0; padding: 0 16px 4px; font-size: 13px; font-weight: 800; }
.pub-bandeau .pub-corps:has(.pub-media) { display: grid; grid-template-columns: 96px 1fr; align-items: center; column-gap: 14px; padding-left: 16px; }
.pub-bandeau .pub-corps:has(.pub-media) .pub-media { border-radius: 12px; }
.pub-bandeau .pub-corps:has(.pub-media) .pub-texte { padding: 0 16px 0 0; }
.pub-bandeau .pub-corps:has(.pub-media) .pub-action { grid-column: 1 / -1; margin: 10px 0 14px; }
.pub-liste { display: flex; flex-direction: column; }

/* ---- Regie publicitaire, lot R4 : post sponsorise, Pulse sponsorise ---- */
.pub-post { padding: 12px 0 10px; border-bottom: 1px solid var(--couleur-bordure); }
.pub-post-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pub-post-qui { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.pub-post .pub-media { border-radius: 16px; margin-bottom: 8px; }
.pub-post-texte { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
.pub-post-action { display: flex; width: 100%; min-height: 44px; }
.pulse-vis-pub { position: absolute; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 4; display: flex; gap: 12px; justify-content: center; }
.pulse-vis-pub .bouton { min-height: 48px; padding: 0 20px; }
.pulse-vis-pub[hidden], .pulse-vis-pub .bouton[hidden] { display: none; }
.pulse-visionneuse.mode-pub .pulse-vis-actions, .pulse-visionneuse.mode-pub .pulse-vis-club { display: none; }
.pulse-visionneuse.mode-pub .pulse-vis-legende { margin-bottom: calc(100px + env(safe-area-inset-bottom)); font-size: 20px; }
.pub-actions { display: inline-flex; gap: 4px; }
.pub-merci { margin: 0 0 var(--espace-blocs, 20px); padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); font-size: 14px; font-weight: 800; }
.pulse-vis-pub { flex-wrap: wrap; }

/* ---- Publicites epurees : visuel seul, menu a trois points du post sponsorise ---- */
.pub.pub-image { border: 0; background: none; border-radius: 16px; overflow: visible; }
.pub-image .pub-media { border-radius: 16px; }
.pub-image .pub-corps, .pub-image .pub-media { display: block; width: 100%; height: auto; }
/* Proportions imposees : le visuel remplit le cadre (recadre au centre), jamais plus haut que le plafond */
.pub-image .pub-media { object-fit: cover; }
.pub-forme-bandeau .pub-media { aspect-ratio: 3 / 1; max-height: min(130px, 22vh); }
.pub-forme-tuile .pub-media { aspect-ratio: 4 / 3; max-height: min(260px, 40vh); }
.pub-forme-fin .pub-media { aspect-ratio: 6 / 1; max-height: min(70px, 12vh); }
@media (min-width: 900px) { .pub-forme-bandeau .pub-media { max-height: 170px; } .pub-forme-tuile .pub-media { max-height: 300px; } }
.pub-post .pub-media { aspect-ratio: 1 / 1; object-fit: cover; max-height: 80vh; }
.apercu-portrait { width: 100%; max-width: 240px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--couleur-surface-2); }
.pub-post-menu { position: relative; flex-shrink: 0; }
.pub-points { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--couleur-texte-secondaire); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pub-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 220px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.pub-menu[hidden] { display: none; }
.pub-menu button { display: block; width: 100%; min-height: 44px; padding: 0 16px; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--couleur-texte); }
.pub-menu button.danger { color: var(--couleur-negatif); }

/* === CONNEXION PC : marque a gauche, formulaire dans une carte a droite (le mobile ne change pas) === */
.connexion-form-titre { display: none; }
@media (min-width: 900px) {
  .connexion-hero { max-width: none; width: 100%; min-height: 100vh; margin: 0; padding: 0; text-align: left; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .connexion-hero .connexion-marque {
    display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(48px, 7vw, 120px);
    background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), color-mix(in srgb, var(--accent) 9%, var(--couleur-fond));
    border-right: 1px solid var(--couleur-bordure);
  }
  .connexion-hero .connexion-marque .connexion-logo svg { height: 132px; margin: 0; }
  .connexion-hero .connexion-marque .connexion-titre { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.04; text-align: left; }
  .connexion-hero .connexion-marque .connexion-titre-share { font-size: clamp(34px, 3.6vw, 50px); }
  .connexion-hero .connexion-marque .sous-titre { font-size: 20px; line-height: 1.5; text-align: left; max-width: 520px; margin-top: 18px; }
  .connexion-hero .connexion-marque .accent-word { color: var(--accent-texte); }
  .connexion-hero .connexion-points { justify-content: flex-start; margin-top: 28px; }
  .connexion-hero .connexion-formulaire {
    align-self: center; justify-self: center; width: 100%; max-width: 460px; margin: 48px 32px; padding: 40px;
    background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 32px; box-shadow: var(--shadow-card);
  }
  .connexion-form-titre { display: block; margin: 0 0 4px; font-size: 26px; font-weight: 800; }
  .connexion-hero .connexion-formulaire form { margin-top: 20px !important; }
  .connexion-hero .connexion-formulaire p { text-align: left; }
}

/* ---- Publicites : petite legende et trois points en haut a gauche ---- */
.pub-barre { display: flex; align-items: center; gap: 4px; padding: 0; margin: -4px 0 -3px; position: relative; z-index: 1; }
.pub.pub-image { margin-bottom: 12px; }
.ordre-pub-match .pub.pub-image { margin-bottom: -8px; }
.pub-intro-petit { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.pub-entete { justify-content: flex-start; gap: 6px; padding-top: 4px; padding-left: 4px; }
.pub-barre .pub-menu, .pub-entete .pub-menu { left: 0; right: auto; }
.pub-rotation > [hidden] { display: none; }
/* ---- Chantier « Match présenté par » (28 oct. 2026) : ligne sponsor dans la carte d'un match (lot 2) ---- */
/* 28 oct. 2026 (demande de JEL) : logo du bord gauche sur toute sa hauteur, « Match présenté par » en petit (12 px, le
   minimum) sous le nom de l'annonceur en grand (16 px). Gazette du vestiaire, lot à part (28 oct. 2026) : 52 px au lieu de
   60 (40 au lieu de 48 en version compacte) ; le logo prend le rayon de l'encart (--rayon-encart), plus de coin carré ni
   de fond de logo qui dépasse ; dans une tuile, l'encart va d'un bord à l'autre (voir plus bas). Pas d'overflow: hidden
   sur l'encart : il couperait le menu des trois points, qui s'ouvre dessous ; le logo est arrondi lui-même. */
.pub.pub-ligne { --rayon-encart: 14px; display: flex; align-items: center; gap: 8px; min-height: 52px; margin: 8px 0; padding: 0 4px 0 0; border: 0; border-radius: var(--rayon-encart); background: var(--couleur-surface-2); overflow: visible; }
.pub-ligne[hidden] { display: none; }
.pub-ligne-corps { display: flex; align-items: center; align-self: stretch; gap: 12px; flex: 1; min-width: 0; min-height: var(--zone-tactile); color: var(--couleur-texte); text-decoration: none; }
.pub-ligne-logo { align-self: stretch; width: 52px; height: auto; flex-shrink: 0; border-radius: var(--rayon-encart) 0 0 var(--rayon-encart); object-fit: cover; background: transparent; }
/* Dans une tuile de match (pile de l'Accueil, direct, prochain match de la ligue, page Match), l'encart passe en pleine
   largeur : il déborde du rembourrage de la tuile (--tuile-retrait) et touche ses deux bords, coins droits ; le logo est
   collé au bord gauche de la tuile, dont la bordure arrondie encadre l'ensemble. */
.carte-ms { --tuile-retrait: 18px; }
.carte-prochain { --tuile-retrait: 32px; }
.carte-ms > .pub.pub-ligne, .carte-prochain > .pub.pub-ligne { --rayon-encart: 0px; margin-left: calc(-1 * var(--tuile-retrait)); margin-right: calc(-1 * var(--tuile-retrait)); }
.pub-ligne-initiale { display: inline-flex; align-items: center; justify-content: center; color: var(--couleur-texte); font-size: 18px; font-weight: 800; }
.pub-ligne-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pub-ligne-intro { font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.pub-ligne-nom { font-size: 16px; font-weight: 800; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.pub-ligne-mention { flex-shrink: 0; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pub-ligne .pub-points { width: var(--zone-tactile); height: var(--zone-tactile); }
.pub-ligne .pub-menu { right: 0; left: auto; }
/* Onglet Matchs : une seule ligne de 40 px (logo sur toute la hauteur, « présenté par », nom en 16 px). Sélecteurs en
   .pub.pub-ligne-compacte : avant, .pub.pub-ligne (plus précis) gardait la version compacte à 60 px. La zone touchée du
   lien et des trois points dépasse de 2 px en haut et en bas : 44 px (--zone-tactile), comme partout. */
.pub.pub-ligne-compacte { min-height: 40px; margin: 4px 0 0; padding-top: 0; padding-bottom: 0; }
.pub-ligne-compacte .pub-ligne-corps { min-height: 40px; position: relative; }
.pub-ligne-compacte .pub-ligne-corps::after, .pub-ligne-compacte .pub-points::after { content: ""; position: absolute; inset: -2px 0; }
.pub-ligne-compacte .pub-ligne-texte { flex-direction: row; align-items: baseline; gap: 4px; flex: 1; }
.pub-ligne-compacte .pub-ligne-intro { flex-shrink: 0; white-space: nowrap; }
.pub-ligne-compacte .pub-ligne-nom { display: block; min-width: 0; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.pub-ligne-compacte .pub-ligne-logo { width: 40px; }
.pub-ligne-compacte .pub-ligne-initiale { font-size: 15px; }
.pub-ligne.pub-ligne-compacte .pub-points { height: 40px; position: relative; }
/* Lot C6 : bouton des trois points de 44 px, « Pourquoi cette pub ? », masquage avec « Annuler » */
.pub-points { width: var(--zone-tactile); height: var(--zone-tactile); }
.pub-pourquoi { padding: 8px 16px 12px; font-size: 13px; color: var(--couleur-texte-secondaire); border-top: 1px solid var(--couleur-bordure); }
.pub-pourquoi[hidden] { display: none; }
.pub-pourquoi p { margin: 0 0 6px; }
.pub-pourquoi a { display: inline-flex; align-items: center; min-height: var(--zone-tactile); color: var(--accent-texte); font-weight: 800; }
.pub-masquee { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: 8px 0; padding: 0 4px 0 14px; border-radius: var(--rayon-pastille, 8px); background: var(--couleur-surface-2); font-size: 14px; }
.pub-annuler { min-height: var(--zone-tactile); padding: 0 14px; border: 0; background: none; color: var(--accent-texte); font: inherit; font-weight: 800; cursor: pointer; }
/* Lot B4 : offre supporters signalee sur la pub, page de l'offre, « Mes offres » */
.pub-offre { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--rayon-pastille, 8px); background: var(--accent-fond-leger); color: var(--accent-texte); font-size: 12px; font-weight: 800; }
.offre-page { max-width: 480px; margin: 0 auto; padding: 16px; }
.offre-carte { text-align: center; }
.offre-code { margin: 16px 0; font-size: 44px; font-weight: 800; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.offre-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Lot C7 : sortie de l'appli dite en texte, a cote de l'appel a l'action */
.pub-externe { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.pub-post-pied { display: flex; align-items: center; gap: 8px; }
.pub-post-pied .pub-post-action { flex: 1; }
/* Lot C9 : version sombre d'un visuel, sinon le visuel clair un peu attenue en theme sombre */
:root { --pub-attenuation: none; --pub-clair-affichage: block; --pub-sombre-affichage: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pub-attenuation: brightness(0.88); --pub-clair-affichage: none; --pub-sombre-affichage: block; } }
:root[data-theme="dark"] { --pub-attenuation: brightness(0.88); --pub-clair-affichage: none; --pub-sombre-affichage: block; }
.pub-media, .pub-ligne-logo { filter: var(--pub-attenuation); }
.pub-theme-clair { display: var(--pub-clair-affichage) !important; }
.pub-theme-sombre { display: var(--pub-sombre-affichage) !important; filter: none; }
/* Regie maison (M4) : places des nouveaux bandeaux */
.ms-bandeau { margin: var(--espace-blocs, 20px) 0 0; }
.mm-bandeau { margin: 0 0 var(--espace-blocs, 20px); }
.cl-bandeau { margin: 0 0 12px; }
.ve-bandeau { margin: 0 0 12px; }
.cl-presente { margin: 16px 0 0; }
.cl-bandeau.cl-presente { margin: 0 0 12px; }
/* Grandes ligues (point 1 de la section 5.2 de la revue produit) : recherche et suite du classement. */
.cl-recherche { display: flex; gap: 8px; margin: 12px 0; }
.cl-recherche .champ { flex: 1; min-width: 0; min-height: var(--zone-tactile); }
.cl-recherche .bouton { min-height: var(--zone-tactile); padding: 0 16px; }
.cl-grande-note { font-size: 13px; margin: 12px 0; text-align: center; }
.cl-grande-note a { color: var(--accent-texte); font-weight: 800; }
.membres-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 13px; }
.membres-pages .bouton { min-height: var(--zone-tactile); padding: 0 14px; }
/* Regie maison (M3) : infos club du repli (src/pages/info-club.js) */
.info-club { margin: 0 0 12px; }
.info-club-corps { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border: 1px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-surface); color: inherit; text-decoration: none; }
.info-club-logo { flex-shrink: 0; width: 48px; height: 48px; object-fit: contain; }
.info-club-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-club-titre { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.info-club-ligne { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.info-club-sous { font-size: 13px; color: var(--couleur-texte-secondaire); }
.info-club-tuile .info-club-corps { flex-direction: column; justify-content: center; min-height: 180px; text-align: center; }
.info-club-tuile .info-club-logo { width: 72px; height: 72px; }
.info-club-tuile .info-club-texte { align-items: center; }
.info-club-post .info-club-corps { margin-bottom: 8px; }
.info-club-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; background: var(--couleur-surface-2); }
.info-club-fin .info-club-corps { min-height: 52px; padding: 8px 14px; gap: 10px; }
.info-club-fin .info-club-logo { width: 28px; height: 28px; }
.info-club-fin .info-club-texte { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.info-club-fin .info-club-ligne { font-size: 14px; }
.info-club-fin .info-club-sous { display: none; }
.pub-retour { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--couleur-positif); }

/* === PRONO D'UN EQUIPIER (carte compacte : ne deborde jamais, meme avec un long nom d'equipe) === */
.carte-equipier { padding: 16px 20px; gap: 12px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.equipier-entete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.equipier-nom { font-weight: 800; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipier-role { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--couleur-texte-secondaire); }
.equipier-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.equipier-equipe { overflow-wrap: anywhere; min-width: 0; }
.equipier-equipe-dom { text-align: right; }
.equipier-tiret { color: var(--couleur-texte-secondaire); }
.equipier-scores { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.equipier-score { display: flex; align-items: center; gap: 6px; }
.carte-equipier .btn-rond { width: 36px; height: 36px; flex-shrink: 0; }
.carte-equipier .score-big { font-size: 28px; width: 32px; min-width: 0; }
.equipier-actions { display: flex; align-items: center; justify-content: flex-end; }

/* === Nombre de joueurs d'une ligue (partout ou l'on choisit une ligue) === */
.league-nb { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); font-variant-numeric: tabular-nums; }
.league-nb svg.ic { width: 14px; height: 14px; color: inherit; }

/* Elements adaptes au theme (logos de marque, icones lune/soleil) : affiches ou masques
   en CSS pour etre justes des le premier affichage, sans attendre le JavaScript.
   Le theme choisi a la main est pose sur <html data-theme> par le script du <head>. */
:root[data-theme="dark"] .theme-adapte-clair,
:root[data-theme="dark"] .theme-icon-moon,
:root[data-theme="light"] .theme-adapte-sombre,
:root[data-theme="light"] .theme-icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-adapte-clair,
  :root:not([data-theme]) .theme-icon-moon { display: none; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-adapte-sombre,
  :root:not([data-theme]) .theme-icon-sun { display: none; }
}

/* Transitions entre les pages (View Transitions entre documents) : fondu court au lieu de
   l'ecran blanc. Les navigateurs qui ne le gerent pas naviguent normalement. Les elements
   presents sur toutes les pages (barre du bas, en-tete, menu PC) restent en place. Chaque
   view-transition-name doit etre unique sur la page, sinon la transition est simplement sautee. */
@view-transition { navigation: auto; }
.nav-bas { view-transition-name: nav-bas; }
#mobile-header { view-transition-name: entete-mobile; }
.sidebar-pc { view-transition-name: menu-pc; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }
::view-transition-group(nav-bas),
::view-transition-group(entete-mobile),
::view-transition-group(menu-pc) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Toucher sur mobile : pas de flash gris sur iPhone, pas de delai lie au zoom par double tap.
   (« manipulation » garde le defilement et le zoom a deux doigts.) */
a, button, [role="button"], label, summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- Pronos du groupe pendant le match (remplace le bloc du prochain match des le coup d'envoi) ---- */
.carte-pronos-direct { gap: 20px; }
.pd-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pd-badge { margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--good-soft); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 800; }
.pd-sous-titre { font-size: 14px; color: var(--couleur-texte-secondaire); }
.pd-affiche { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.pd-equipe { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; font-size: 17px; }
.pd-equipe > span:not(.pd-ecusson) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-equipe-ext { justify-content: flex-end; text-align: right; }
.pd-contre { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--couleur-texte-secondaire); }
.pd-ecusson { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.pd-ecusson-vide { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--couleur-surface-2); font-size: 13px; }
.pd-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px 12px; }
.pd-ligne { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 14px; background: var(--couleur-surface-2); overflow: hidden; transition: background-color .25s, color .25s; }
.pd-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; }
.pd-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pd-score { margin-left: auto; font-size: 17px; font-weight: 800; white-space: nowrap; }
.pd-ligne.sans { opacity: .55; }
.pd-ligne.sans .pd-score { font-weight: 500; color: var(--couleur-texte-secondaire); }
/* Pourcentages : barre de fond proportionnelle a la part (teinte neutre, verte si bon resultat). */
.pd-pct { justify-content: space-between; }
.pd-pct::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pd-part, 0%); background: color-mix(in srgb, var(--couleur-texte) 8%, transparent); border-radius: inherit; pointer-events: none; }
.pd-pct > span { position: relative; }
.pd-pct .pd-score { margin-left: 0; }
.pd-valeur { font-size: 15px; font-weight: 800; color: var(--couleur-texte-secondaire); }
/* Score du moment (charte 2026, lot B) : exact = or, bon résultat = vert, le reste neutre. Chaque ligne affiche aussi son icône (cible, coche). */
.pd-ligne.bon { background: var(--resultat-bon); color: var(--sur-resultat-bon); }
.pd-ligne.bon .pd-score, .pd-ligne.bon .pd-valeur { color: var(--sur-resultat-bon); }
.pd-ligne.bon.pd-pct::before { background: color-mix(in srgb, var(--sur-resultat-bon) 20%, transparent); }
.pd-ligne.exact { background: var(--resultat-exact); color: var(--sur-resultat-exact); }
.pd-ligne.exact .pd-score, .pd-ligne.exact .pd-valeur { color: var(--sur-resultat-exact); }
.pd-ligne.exact.pd-pct::before { background: color-mix(in srgb, var(--sur-resultat-exact) 18%, transparent); }
.pd-ico { display: none; }
.pd-ligne.exact .pd-ico, .pd-ligne.bon .pd-ico { display: inline-block; }
.pd-ligne.exact .pd-ico { --ico-m: var(--ico-exact); }
.pd-ligne.bon .pd-ico { --ico-m: var(--ico-bon); }
.pd-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pd-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.pd-compte { margin-left: auto; }
@media (max-width: 899px) {
  .pd-grille { gap: 6px 8px; }
  .pd-ligne { padding: 7px 9px; gap: 7px; border-radius: 12px; }
  .pd-avatar { width: 22px; height: 22px; font-size: var(--taille-min); }
  .pd-nom { font-size: 13px; }
  .pd-score { font-size: 15px; }
  .pd-equipe { font-size: 15px; gap: 8px; }
  .pd-compte { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pd-ligne { transition: none; } }

/* Lot A de l'audit UX (10 oct. 2026) */
/* Connexion : code a 6 chiffres sous le message « Email envoye » */
.connexion-code { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.connexion-code[hidden] { display: none; }
.connexion-code-champ { height: 64px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); padding: 0 16px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-family: inherit; font-size: 28px; font-weight: 800; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.connexion-code-champ::placeholder { color: var(--couleur-texte-secondaire); opacity: 0.45; }

/* Prono partage entre ligues : case « Seulement pour cette ligue » sous le bouton de validation */
.prono-partage { flex: 1 1 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.prono-partage-choix { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 800; cursor: pointer; }
.prono-partage-choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.prono-partage-info { margin: 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.prono-perso { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); white-space: nowrap; }

/* Carte proposee apres le prono : rappel par notification ou installation */
.invite-prono { margin-top: 12px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); box-shadow: var(--shadow-card); }
.invite-prono-tete { display: flex; align-items: center; gap: 10px; }
/* Icones en couleur de texte : dans une ligue, --accent-texte vaut la couleur du logo posee sur l'accent (souvent blanc). */
.invite-prono-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-fond-leger); color: var(--couleur-texte); flex-shrink: 0; }
.invite-prono-titre { font-size: 16px; font-weight: 800; line-height: 1.25; }
.invite-prono-texte { margin: 8px 0 0; font-size: 14px; color: var(--couleur-texte-secondaire); }
.invite-prono-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.invite-prono-actions .bouton { flex: 1 1 auto; min-height: 44px; white-space: nowrap; }

/* Guide d'installation : feuille du bas */
.guide-installation-fond { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.45); }
.guide-installation { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18); animation: guide-monte 0.22s ease-out; }
@media (min-width: 900px) { .guide-installation-fond { align-items: center; } .guide-installation { border-radius: 28px; padding-bottom: 24px; } }
@keyframes guide-monte { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guide-installation { animation: none; } }
.guide-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-titre { margin: 0; font-size: 20px; font-weight: 800; }
.guide-fermer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--couleur-surface-2); color: var(--couleur-texte); cursor: pointer; flex-shrink: 0; }
.guide-intro { margin: 10px 0 0; font-size: 15px; color: var(--couleur-texte-secondaire); }
.guide-installer { width: 100%; margin-top: 16px; }
.guide-section { margin-top: 18px; }
.guide-section-titre { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.guide-etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.guide-etape { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--couleur-surface-2); font-size: 15px; }
.guide-etape-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--couleur-surface); color: var(--couleur-texte); flex-shrink: 0; }

/* Lot B de l'audit UX : page admin des indicateurs */
.ind-page { max-width: 960px; }
.ind-retour { display: inline-block; margin-bottom: 8px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.ind-h1 { margin: 0 0 16px; font-size: 26px; font-weight: 800; }
.ind-carte { padding: 20px; margin-bottom: var(--espace-blocs); }
.ind-titre { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.ind-aide { margin: 0 0 12px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.ind-resume { margin: 0 0 12px; font-size: 15px; }
.ind-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ind-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ind-table th, .ind-table td { padding: 8px 10px 8px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--couleur-bordure); white-space: nowrap; }
.ind-table thead th { font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.ind-table tbody th { font-weight: 800; }
.ind-date { display: block; font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.ind-barre { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--couleur-surface-2); vertical-align: middle; overflow: hidden; }
.ind-barre-plein { display: block; height: 100%; border-radius: 4px; background: var(--couleur-positif); }
.ind-pct { display: inline-block; min-width: 42px; margin-left: 8px; font-weight: 800; }
.ind-detail { margin-left: 4px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.ind-vide { color: var(--couleur-texte-secondaire); }

/* Lot C1 de l'audit UX : invitation sans compte, inscription legere, alias */
.invit-page { max-width: 480px; margin: 0 auto; padding: 32px 20px calc(48px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.invit-tete { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.invit-logo { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; margin-bottom: 8px; }
.invit-logo-initiales { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-encre); font-size: 26px; font-weight: 800; }
.invit-surtitre { margin: 0; font-size: 14px; }
.invit-nom { margin: 0; font-size: 30px; line-height: 1.15; overflow-wrap: anywhere; }
.invit-infos { margin: 4px 0 0; font-size: 14px; color: var(--couleur-texte-secondaire); }
.invit-match { padding: 18px; }
.invit-match-titre { margin: 0; font-size: 16px; font-weight: 800; }
.invit-match-date { margin: 2px 0 14px; font-size: 14px; color: var(--couleur-texte-secondaire); }
.invit-match-equipes { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.invit-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.invit-equipe { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.invit-equipe-nom { font-weight: 800; font-size: 15px; text-align: center; overflow-wrap: anywhere; }
.invit-score { display: flex; align-items: center; gap: 8px; }
.invit-score-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 22px; font-weight: 800; cursor: pointer; }
.invit-score-valeur { min-width: 36px; text-align: center; font-size: 34px; font-weight: 800; }
.invit-match-aide { margin: 14px 0 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.invit-cta { width: 100%; min-height: 56px; }
.invit-sans-prono { text-align: center; font-weight: 800; color: var(--couleur-texte-secondaire); padding: 8px; }
.invit-note { margin: 0; text-align: center; font-size: 13px; }
/* Lot 6 de la revue produit : ecran « Bienvenue dans la ligue » (prenom + case + Rejoindre) et connexion avec invitation. */
.invit-form { display: flex; flex-direction: column; gap: 14px; }
.invit-champ .champ { width: 100%; }
.invit-aide-champ { margin: 6px 0 0; font-size: 12px; }
.invit-bienvenue { margin: 0; text-align: center; color: var(--couleur-texte-secondaire); }
.invit-form .case-age { margin: 0; }
.connexion-invitation .invit-marque { display: flex; justify-content: center; }
.connexion-invitation .invit-marque svg { height: 28px; width: auto; }
.connexion-invitation .connexion-formulaire { width: 100%; }
.connexion-invitation .connexion-form { margin-top: 8px; }
.connexion-invitation .note-bas, .connexion-invitation .mention-gratuit { text-align: center; }
.connexion-invitation .message[hidden] { display: none; }
.case-age { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.case-age input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.case-age a { color: inherit; text-decoration: underline; }
/* Audit RGPD (29 oct. 2026) : information sur la citation du vestiaire dans la gazette (sous le champ de saisie). */
.ve-info-gazette { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
.ve-info-gazette[hidden] { display: none; }
.ve-info-gazette span { flex: 1; }
/* Audit RGPD (29 oct. 2026) : lien vers la politique sous la case ; suppression d'un compte de moins de 16 ans (/naissance). */
.case-age-note { margin: 6px 0 0 32px; font-size: 13px; }
.case-age-note a { color: inherit; text-decoration: underline; }
.bloc-moins-16 { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.bloc-moins-16[hidden] { display: none; }
.annonce-invitation { position: fixed; left: 16px; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 1100; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: 16px; background: var(--couleur-texte); color: var(--couleur-surface); font-size: 15px; font-weight: 800; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.annonce-invitation.ok { background: var(--couleur-positif); color: #fff; }
.alias-page { max-width: 480px; margin: 0 auto; padding: 32px 20px 100px; }
.alias-titre { margin: 0 0 8px; }
.alias-intro { margin: 0 0 20px; }
.alias-form { display: flex; flex-direction: column; gap: 10px; }
.alias-label { font-size: 14px; font-weight: 800; }
.alias-champ-zone { position: relative; }
.alias-arobase { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--couleur-texte-secondaire); font-weight: 800; }
.alias-champ { width: 100%; height: 52px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); padding: 0 16px 0 32px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 16px; }
.alias-aide { margin: 0; font-size: 12px; }

/* Lot C2 de l'audit UX : creation de ligue express */
.express-page { max-width: 480px; margin: 0 auto; padding: 24px 20px calc(100px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.express-titre { margin: 0; }
.express-intro { margin: 0 0 8px; }
.express-form { display: flex; flex-direction: column; gap: 8px; }
.express-label { margin-top: 8px; font-size: 14px; font-weight: 800; }
.express-champ { width: 100%; height: 52px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); padding: 0 16px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 16px; }
.express-champ[hidden] { display: none; }
.express-resultats { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.express-club { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); color: var(--couleur-texte); font: inherit; text-align: left; cursor: pointer; }
.express-club img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.express-club-nom { flex: 1; font-weight: 800; }
.express-club-choisi { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 2px solid var(--accent); font-weight: 800; }
.express-club-choisi[hidden] { display: none; }
.express-lien { border: 0; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; min-height: 44px; }
.express-cta { width: 100%; min-height: 56px; margin-top: 12px; }
.express-message { margin: 0; min-height: 20px; font-size: 14px; color: var(--couleur-negatif); }
.express-options { text-align: center; font-size: 14px; font-weight: 800; color: var(--couleur-texte-secondaire); padding: 8px; }
.express-options[hidden] { display: none; }
.ligue-creee { margin-bottom: var(--espace-blocs); }
.ligue-creee-titre { margin: 0 0 8px; font-size: 17px; font-weight: 800; text-align: center; }
/* Temps 1 (28 oct. 2026) : ecusson qui ne se charge pas, remplace par le cercle neutre aux initiales du club
   (script commun, img[data-ecusson]) ; la taille vient de l'image remplacee. */
.ecusson-repli { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); color: var(--couleur-texte-secondaire); font-weight: 800; line-height: 1; object-fit: initial; padding: 0; }
/* Temps 1, lot 9 (28 oct. 2026) : la ligue Score & Share. */
.lss-carte { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--espace-blocs); text-decoration: none; color: inherit; border: 1px solid var(--accent); }
.lss-carte-titre { font-size: 18px; }
.lss-carte-action { font-weight: 800; color: var(--accent-texte); }
.lss-lots { font-weight: 800; }
.lss-page { display: flex; flex-direction: column; gap: var(--espace-blocs); }
.lss-titre { margin: 0; font-size: 32px; }
.lss-intro { margin: 0; font-size: 16px; line-height: 1.5; }
.lss-prochains h2 { margin: 0 0 8px; font-size: 18px; }
.lss-prochains ul { list-style: none; margin: 0; padding: 0; }
.lss-prochains li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--couleur-bordure); }
.lss-prochains li:first-child { border-top: 0; }
.lss-comp { font-size: 13px; font-weight: 800; color: var(--accent-texte); }
.lss-bouton { width: 100%; }
/* Temps 1, lot 8 (28 oct. 2026) : carte « Pronos » du profil Share. */
.profil-pronos { padding: 20px 22px; margin-top: 16px; }
.profil-pronos-titre { margin: 0; font-size: 18px; }
.profil-pronos-saison { margin: 2px 0 12px; font-size: 13px; }
.profil-pronos-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; }
.profil-pronos-case { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: var(--couleur-surface-2); }
.profil-pronos-case dt { font-size: 13px; color: var(--couleur-texte-secondaire); }
.profil-pronos-case dd { margin: 0; font-size: 24px; font-weight: 800; }
.profil-pronos-case .texte-secondaire { font-size: 12px; }
/* Temps 1, lot 7 (28 oct. 2026) : classements entre ligues. */
.cll-page { display: flex; flex-direction: column; gap: var(--espace-blocs); }
.cll-section h2, .cll-section h3, .cll-share-titre { margin: 0 0 6px; font-size: 18px; }
/* Revue produit du 28 oct. 2026 : page Classements des ligues (onglet Ligues), tuile de l'onglet, ligne de « Mes ligues » */
.cll-onglet { padding-bottom: 40px; }
.cll-onglet .tl-retour { align-self: flex-start; }
.cll-titre { margin: 0; }
.lg-icone { width: 44px; height: 44px; background: var(--couleur-surface-2); color: var(--accent-texte); }
.ms-ligue-cll { font-size: 12px; line-height: 1.3; color: var(--accent-texte); font-weight: 800; }
.cll-section > p, .cll-eligibilite p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.cll-eligibilite { margin-bottom: var(--espace-blocs); }
.cll-liste { list-style: none; margin: 0; padding: 0; }
.cll-ligne { display: grid; grid-template-columns: 36px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--couleur-bordure); }
.cll-ligne:first-child { border-top: 0; }
.cll-ligne.moi { font-weight: 800; }
.cll-ligne.moi .cll-nom strong { color: var(--accent-texte); }
.cll-rang { font-size: 15px; font-weight: 800; text-align: center; }
.cll-nom { display: flex; flex-direction: column; min-width: 0; }
.cll-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.cll-nom .texte-secondaire { font-size: 13px; }
.cll-valeur { font-size: 16px; font-weight: 800; }
.cll-competitions { display: flex; flex-wrap: wrap; gap: 8px; }
.cll-competition { display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 14px; border-radius: 999px; border: 1px solid var(--couleur-bordure-controle); color: var(--couleur-texte); text-decoration: none; font-size: 14px; font-weight: 800; }
.cll-competition.actif { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.cll-share { padding: 20px 22px; margin-bottom: 20px; }
.cll-famille { margin: 12px 0 4px; font-size: 13px; }
.ligue-creee-note { margin: 8px 0 0; font-size: 13px; text-align: center; }
/* Temps 1, lot 6 (28 oct. 2026) : questions bonus de saison. */
.bonus-page { display: flex; flex-direction: column; gap: var(--espace-blocs); }
.bonus-titre { margin: 0; font-size: 32px; }
.bonus-regle p, .bonus-question p { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.bonus-form { display: flex; flex-direction: column; gap: 12px; }
.bonus-question { border: 0; margin: 0; min-width: 0; }
/* La légende d'un fieldset se pose sur sa bordure : flottante sur toute la largeur, elle reste dans la carte. */
.bonus-question > legend { float: left; width: 100%; }
.bonus-question > legend + * { clear: both; }
.bonus-intitule { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: 800; line-height: 1.35; }
.bonus-numero { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--couleur-surface-2); font-size: 14px; }
.bonus-nombre { max-width: 140px; }
.bonus-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.bonus-choix-option { display: inline-flex; align-items: center; gap: 8px; min-height: var(--zone-tactile); padding: 0 14px; border-radius: 14px; border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); font-size: 15px; cursor: pointer; }
.bonus-envoyer { width: 100%; }
.bonus-compte { margin: 0; font-size: 13px; }
.bonus-points { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--couleur-surface-2); font-size: 13px; font-weight: 800; }
.bonus-points.gagne { background: var(--good-soft); color: var(--couleur-positif); }
.bonus-reponses { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bonus-classement h3, .bonus-orga h3 { margin: 0 0 10px; font-size: 18px; }
.bonus-classement ol { list-style: none; margin: 0; padding: 0; }
.bonus-classement li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--couleur-bordure); font-size: 15px; }
.bonus-classement li:first-child { border-top: 0; }
.bonus-classement li.moi { font-weight: 800; color: var(--accent-texte); }
.bonus-liste-orga { list-style: none; margin: 0 0 12px; padding: 0; }
.bonus-liste-orga li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--couleur-bordure); font-size: 14px; }
.bonus-retirer { min-height: var(--zone-tactile); padding: 0 12px; border-radius: 10px; border: 1px solid var(--couleur-bordure-controle); background: transparent; color: var(--couleur-texte); font: inherit; font-size: 13px; cursor: pointer; }
.bonus-orga .bouton { width: 100%; margin-top: 10px; }
.bonus-choix-saisie { margin-top: 8px; }
.bonus-officielle { padding: 10px 0; border-top: 1px solid var(--couleur-bordure); }
.bonus-hub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bonus-hub-ligue, .bonus-bandeau { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; min-height: var(--zone-tactile); }
.bonus-bandeau { margin-bottom: var(--espace-blocs); border: 1px solid var(--accent); }
/* Temps 1, lot 5 (28 oct. 2026) : passer le relais (Gestion) et demande de relais (Infos). */
.relais-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.relais-case { display: flex; align-items: center; gap: 10px; min-height: var(--zone-tactile); margin: 8px 0; font-size: 14px; }
#section-relais .bouton, .lg-relais .bouton { width: 100%; margin-top: 8px; }
.lg-relais { margin-bottom: var(--espace-blocs); }
.lg-relais p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
/* Temps 1 (28 oct. 2026) : invitation, WhatsApp en tete sur toute la largeur, puis les copies et le partage. */
.invitation-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; max-width: 420px; margin: 14px auto 0; }
.invitation-actions .bouton { min-height: var(--zone-tactile); padding: 0 12px; font-size: 15px; }
.invitation-actions .invitation-whatsapp { grid-column: 1 / -1; min-height: 52px; font-size: 16px; }
.invitation-actions .invitation-partager { grid-column: 1 / -1; }

/* === NOUVELLE NAVIGATION EN ESSAI (lot H1a, pour tout le monde depuis H2) ===
   Variante A de la maquette du lot D. La barre, le bouton + et sa feuille gardent les couleurs de
   l'application (marine, bleu clair en sombre), quelle que soit la ligue affichee. */
/* La barre du bas suit l'accent de la page (charte) : marine hors ligue, couleur de la ligue dans une ligue. */
.nav-essai a { position: relative; }
.nav-bas.nav-essai button.nav-publier { background: none; position: relative; overflow: visible; padding: 0; font: inherit; }
.nav-essai .pastille-nb, .feuille-plus .pastille-nb {
  position: absolute; top: 0; right: calc(50% - 24px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--couleur-negatif); color: #fff; font-size: var(--taille-min); font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid var(--couleur-surface); box-sizing: content-box;
}
.nav-essai .pastille-nb[hidden], .feuille-plus .pastille-nb[hidden] { display: none; }

/* Feuille du bouton + */
.feuille-plus-voile { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 12, 16, 0.45); }
.feuille-plus-voile[hidden] { display: none; }
.feuille-plus { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--couleur-surface); color: var(--couleur-texte); }
@media (prefers-reduced-motion: no-preference) { .feuille-plus { animation: guide-monte 0.22s ease-out; } }
.feuille-plus .poignee { width: 40px; height: 5px; border-radius: 9px; background: var(--couleur-bordure); align-self: center; }
.feuille-plus h2 { margin: 0; font-size: 20px; font-weight: 800; }
.choix-grand { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px; border: 1px solid var(--couleur-bordure); border-radius: 20px; background: var(--couleur-surface); color: inherit; text-decoration: none; text-align: left; }
.choix-grand[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.choix-grand .ico { position: relative; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--couleur-surface-2); }
.choix-grand .ico .pastille-nb { top: -4px; right: -6px; }
.choix-grand .txt { flex: 1; min-width: 0; }
.choix-grand .txt strong { display: block; font-size: 16px; font-weight: 800; }
.choix-grand .txt span { font-size: 13px; color: var(--couleur-texte-secondaire); }

/* En-tete mobile en essai : logo de l'application, puis recherche, messages et notifications */
.mobile-header.mobile-header-essai { grid-template-columns: 44px minmax(0, 1fr) auto; }
.mobile-header-essai .mobile-league-btn { justify-self: start; }
.logo-app-essai { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.logo-app-essai svg { width: 30px; height: auto; }
.entete-essai-actions { display: flex; gap: 0; justify-self: end; }
.entete-essai-actions .btn-ic { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--couleur-texte); text-decoration: none; }
.entete-essai-actions .btn-ic:active { background: var(--couleur-surface-2); }
.entete-essai-actions .badge-notif { position: absolute; top: 4px; right: 2px; margin-left: 0; }

/* Rubriques de la ligue en essai (option A du 18 oct. 2026) : trois onglets fixes qui tiennent a 360 px, sans defilement */
.onglets-ligue-essai { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0 20px 8px; padding: 3px; border-radius: 18px; background: var(--couleur-surface-2); }
.onglets-ligue-essai a { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--zone-tactile); padding: 0 6px; border-radius: 14px; color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.onglets-ligue-essai a.actif { background: var(--couleur-surface); color: var(--couleur-texte); font-weight: 800; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.olg-compte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--couleur-negatif); color: var(--couleur-surface); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; box-sizing: border-box; }
.olg-compte[hidden] { display: none; }
.olg-point { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-negatif); }
.olg-point[hidden] { display: none; }
/* Place et points sous le nom de la ligue : ligne reservee des le depart (pas de saut de l'en-tete). */
.mobile-header .league-name-col .league-place { min-height: 16px; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (min-width: 900px) { .onglets-ligue-essai { display: none; } }
/* Matchs de la ligue sur telephone : le classement a son onglet, plus de resume en double sous les matchs. */
@media (max-width: 899px) { .ligue-essai .ordre-classement { display: none; } }
/* Bas du classement : fin de saison et Hall of Fame (depliable) */
.cl-liens { display: flex; flex-direction: column; margin-top: var(--espace-blocs); padding: 4px 18px; }
.cl-liens a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--couleur-texte); font-size: 15px; font-weight: 800; text-decoration: none; }
.cl-liens a + a { border-top: 1px solid var(--couleur-bordure); }
/* Lot 7 de la revue produit : raccourcis du classement (titre + ligne d'explication), sous-pages et Hall of Fame. */
.cl-liens a { padding: 10px 0; }
.cl-lien-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-lien-texte .texte-secondaire { font-size: 13px; font-weight: 500; }
.cl-sous-barre { display: flex; align-items: center; gap: 6px; min-height: var(--zone-tactile); margin: 0 0 12px -8px; }
.cl-retour { display: inline-flex; align-items: center; justify-content: center; width: var(--zone-tactile); height: var(--zone-tactile); border-radius: 50%; color: var(--couleur-texte); }
.cl-sous-titre { margin: 0; font-size: 22px; font-weight: 800; }
.hof { display: flex; flex-direction: column; gap: var(--espace-blocs); }
.hof-saison { padding: 18px; }
.hof-titre { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.hof-podium, .hof-suite { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hof-marche { display: grid; grid-template-columns: 36px auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon-tuile, 16px); background: var(--couleur-surface-2); }
.hof-medaille { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.hof-or .hof-medaille { background: var(--couleur-or); color: var(--couleur-sur-or); }
.hof-argent .hof-medaille, .hof-bronze .hof-medaille { background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); }
.hof-place { font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.hof-or .hof-nom { font-size: 17px; }
.hof-points { justify-self: end; font-weight: 800; font-size: 14px; }
.hof-suite { margin-top: 10px; }
.hof-ligne { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; font-size: 14px; }
.hof-rang { color: var(--couleur-texte-secondaire); font-weight: 800; }
.hof-moi .hof-nom { color: var(--accent-texte); }
.hof-vide { margin: 0; font-size: 14px; }
.cl-hof { margin-top: var(--espace-blocs); border-radius: 16px; background: var(--accent-fond-leger); }
.cl-hof summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 16px; cursor: pointer; list-style: none; }
.cl-hof summary::-webkit-details-marker { display: none; }
.cl-hof-texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cl-hof-texte strong { font-size: 15px; font-weight: 800; color: var(--accent-texte); }
.cl-hof-texte .texte-secondaire { font-size: 13px; }
.cl-hof[open] .cl-hof-fleche { transform: rotate(180deg); }
.cl-hof-saisons { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; }
.cl-hof-saison { font-weight: 800; }

/* === ACCUEIL « MA SEMAINE » (lot H1b, nouvelle navigation en essai) === */
.ma-semaine { max-width: 560px; margin: 0 auto; padding: 4px var(--marge-mobile) 120px; display: flex; flex-direction: column; gap: 10px; }
.ma-semaine > * { flex-shrink: 0; }
.carte-ms { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 28px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); color: var(--couleur-texte); text-decoration: none; }
.ms-section { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px -4px; }
.ms-section h2 { margin: 0; font-size: 19px; font-weight: 800; }
.ms-petit { font-size: 13px; }
.ms-lien { font-size: 14px; font-weight: 800; color: var(--accent-texte); text-decoration: none; }
/* Temps 1 (28 oct. 2026) : « Tout voir » atteint la zone tactile (44 px) par sa marge interne, compensee. */
.ms-section .ms-lien { display: inline-block; padding: 14px 8px; margin: -14px -8px; }
.ms-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ms-puce { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ms-puce-accent { background: var(--accent-fond-leger); color: var(--accent-texte); }
.ms-puce-direct { background: color-mix(in srgb, var(--couleur-negatif) 14%, transparent); color: var(--couleur-negatif); }
.ms-point-direct { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .ms-point-direct { animation: ms-clignote 1.4s ease-in-out infinite; } }
@keyframes ms-clignote { 50% { opacity: .3; } }
.ms-ecusson { width: 48px; height: 48px; border-radius: 16px; object-fit: contain; flex-shrink: 0; }
.ms-ecusson-texte { display: inline-flex; align-items: center; justify-content: center; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); font-size: 13px; font-weight: 800; color: var(--couleur-texte); }
.ms-nom { font-size: 15px; font-weight: 800; text-align: center; line-height: 1.2; overflow-wrap: anywhere; }

/* Pile « A pronostiquer » */
/* Les tuiles sont empilees dans la meme case : la suivante peut apparaitre sous celle qui s'en va. */
.ms-pile { position: relative; padding-bottom: 20px; display: grid; }
.ms-pile > .tuile { grid-area: 1 / 1; }
.ms-pile > .tuile.dessous { z-index: 1; }
.ms-pile[hidden] { display: none; }
.ms-fantome { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 80px; border-radius: 28px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); }
.ms-fantome.f2 { left: 30px; right: 30px; bottom: 0; opacity: .75; }
.ms-fantome[hidden] { display: none; }
.ms-pile .tuile { position: relative; z-index: 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ms-pile .tuile[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ms-pile .tuile { animation: ms-tuile-arrive .32s ease-out; }
  .ms-pile .tuile.part { transition: transform .38s cubic-bezier(.2,.7,.3,1), opacity .38s ease-out; transform: translateY(-28px) scale(.95); opacity: 0; }
}
@keyframes ms-tuile-arrive { from { transform: translateY(10px) scale(.98); opacity: .5; } }
.ms-equipes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ms-equipe { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ms-reglage { display: flex; align-items: center; gap: 4px; }
.ms-rond { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--couleur-surface-2); color: var(--couleur-texte); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.ms-rond:active { transform: scale(.92); }
.ms-chiffre { min-width: 40px; text-align: center; font-size: 44px; font-weight: 800; line-height: 1; }
.ms-valider { width: 100%; }
.ms-message { margin: -4px 0 0; font-size: 14px; font-weight: 800; color: var(--couleur-negatif); }
.ms-pied { margin: 0; padding-top: 12px; border-top: 1px solid var(--couleur-bordure); }
.ms-repere { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -12px; padding: 0 2px; }
.ms-repere[hidden] { display: none; }
.ms-repere strong { color: var(--couleur-texte); }
.ms-suivant { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ms-suivant[hidden] { display: none; }
.ms-fin { text-align: center; gap: 6px; }
.ms-fin[hidden] { display: none; }
.ms-fin strong { font-size: 20px; }

/* Match en direct */
.ms-direct { border-color: color-mix(in srgb, var(--couleur-negatif) 45%, var(--couleur-bordure)); }
.ms-direct-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ms-direct-equipe { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ms-direct-chiffres { font-size: 40px; font-weight: 800; white-space: nowrap; }
.ms-direct-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--couleur-bordure); font-size: 14px; }

/* Mes ligues */
.ms-defile { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--marge-mobile)); padding: 2px var(--marge-mobile); }
.ms-defile::-webkit-scrollbar { display: none; }
.ms-ligue { flex: none; width: 150px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 22px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); color: var(--couleur-texte); text-decoration: none; }
.ms-badge-ligue { width: 32px; height: 32px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--taille-min); font-weight: 800; object-fit: contain; box-shadow: inset 0 0 0 1px var(--couleur-bordure); }
.ms-rang { font-size: 26px; font-weight: 800; line-height: 1; }
.ms-rang small { font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.ms-ligue-nom { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-verrou { gap: 6px; }
.ms-verrou strong { font-size: 17px; }
/* Le fil Share sous « Ma semaine » garde sa propre mise en page (colonne Share) */
.ma-semaine .share-colonne { padding: 0; margin: 0; max-width: none; }

/* === ONGLET MATCHS (lot H1c, nouvelle navigation en essai) === */
.onglet-matchs { max-width: 720px; margin: 0 auto; padding: 4px var(--marge-mobile) 120px; }
.onglet-matchs .page-share-matchs { padding: 0 !important; }
.mm-segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 3px; margin: 0 0 10px; border-radius: 18px; background: var(--couleur-surface-2); }
.mm-segments a { display: flex; align-items: center; justify-content: center; min-height: var(--zone-tactile); border-radius: 14px; font-size: 14px; font-weight: 800; color: var(--couleur-texte-secondaire); text-decoration: none; }
.mm-segments a.actif { background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: var(--shadow-card); }
.mm-colonne { display: flex; flex-direction: column; gap: 12px; }
.mm-section h2 { margin: 0 0 8px 2px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--couleur-texte-secondaire); }
.mm-section h2 + .mm-match { margin-top: 0; }
.mm-section > .ms-live { margin-bottom: var(--espace-blocs); }
.ms-quand { margin: 0; }
.mm-match { margin-bottom: 8px; }
.mm-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 6px 4px; font-size: 12px; min-height: 28px; }
.mm-entete > span { min-width: 0; overflow-wrap: anywhere; }
.mm-entete .favori-match { margin: -8px -8px -8px 0; flex-shrink: 0; }
.mm-pied { margin: -2px 6px 0; }
.mm-puce { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); }
.mm-puce-accent { background: var(--accent-fond-leger); color: var(--accent-texte); }
.mm-puce-positif { background: var(--good-soft); color: var(--couleur-positif); }
.mm-vide { display: flex; flex-direction: column; gap: 6px; padding: 28px 18px; text-align: center; border-radius: 24px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.mm-vide strong { font-size: 18px; }

/* === ONGLET LIGUES ET RUBRIQUE INFOS (lot H1d, nouvelle navigation en essai) === */
.ligues-essai, .infos-ligue { max-width: 560px; margin: 0 auto; padding: 4px var(--marge-mobile) 120px; display: flex; flex-direction: column; gap: 8px; }
/* Point 5 de la revue produit (PC) : l'accueil « Ma semaine » sur deux colonnes (7/12 et 5/12), Mes ligues en grille,
   plus de colonne de telephone au milieu de l'ecran. Sous 900 px, les colonnes n'existent pas (display: contents). */
.ms-colonne { display: contents; }
@media (min-width: 900px) {
  .ma-semaine { max-width: 1120px; padding: 4px 0 40px; }
  .ms-segments { max-width: 420px; }
  .ms-panneau[data-panneau="ma-semaine"] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 10px 28px; align-items: start; }
  .ms-colonne { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ms-colonne .ms-defile { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
  .ms-colonne .ms-ligue { width: calc(50% - 5px); }
  .ligues-essai { max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; padding-bottom: 40px; }
  .ligues-essai > h1, .ligues-essai > .etat-vide, .ligues-essai > .lg-actions, .ligues-essai > .lg-supprimees, .ligues-essai > script { grid-column: 1 / -1; }
  .onglet-matchs, .profil-essai { padding-bottom: 40px; }
}
.lg-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 14px; font-size: 13px; font-weight: 800; object-fit: contain; box-shadow: inset 0 0 0 1px var(--couleur-bordure); }
.lg-carte { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 24px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card); color: var(--couleur-texte); text-decoration: none; }
.lg-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-texte strong { font-size: 16px; font-weight: 800; }
.lg-texte .texte-secondaire { font-size: 13px; }
.lg-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-negatif); vertical-align: middle; margin-left: 4px; }
.lg-puce { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); }
.lg-puce-accent { background: var(--accent-fond-leger); color: var(--accent-texte); }
.lg-puce-positif { background: var(--good-soft); color: var(--couleur-positif); }
.lg-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.lg-actions .bouton { width: 100%; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.lg-supprimees { text-align: center; font-size: 13px; margin: 4px 0 0; }
.lg-supprimees a { color: var(--couleur-texte-secondaire); }
.lg-vide { display: flex; flex-direction: column; gap: 6px; padding: 24px 18px; text-align: center; border-radius: 24px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.lg-vide strong { font-size: 18px; }

/* Rubrique Infos */
.lg-infos-tete { gap: 10px; }
.lg-infos-ligne { display: flex; align-items: center; gap: 14px; }
.lg-infos-ligne h2 { margin: 0; font-size: 20px; font-weight: 800; }
.lg-description { margin: 0; font-size: 15px; white-space: pre-line; }
/* Quitter une ligue (24 oct. 2026) : en bas des Infos, action rare, texte en couleur negative. */
.lg-quitter { margin-top: 8px; }
.lg-quitter .texte-secondaire { margin: 0; font-size: 14px; }
.lg-quitter-bouton { width: 100%; min-height: var(--zone-tactile); color: var(--couleur-negatif); }
.infos-ligue .lg-section h2 { margin: 6px 2px 8px; font-size: 19px; font-weight: 800; }
.lg-membres { list-style: none; margin: 0; padding: 6px 16px; gap: 0; }
.lg-membre { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--couleur-bordure); }
.lg-membre:last-child { border-bottom: 0; }
.lg-membre-nom { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-membre .lg-puce { margin-top: 0; align-self: center; }

/* === PROFIL (lot H1e, nouvelle navigation en essai) === */
.profil-essai { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.pe-passeport { padding: 20px; border-radius: 28px; background: #10193F; color: #FFFFFF; display: flex; flex-direction: column; gap: 14px; }
.pe-passeport-tete { display: flex; align-items: baseline; justify-content: space-between; }
.pe-passeport-tete strong { font-size: 18px; font-weight: 800; }
.pe-passeport-tete span { font-size: 13px; opacity: .8; }
.pe-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pe-chiffres div { background: rgba(255, 255, 255, .1); border-radius: 16px; padding: 10px; }
.pe-chiffres strong { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.pe-chiffres span { font-size: 12px; opacity: .8; }
.pe-bouton { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 16px; background: #FFFFFF; color: #10193F; font-weight: 800; text-decoration: none; }
.pe-verrou { gap: 6px; }
.pe-verrou strong { font-size: 17px; }
.pe-titre { margin: 8px 2px -4px; font-size: 19px; font-weight: 800; }
.pe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.pe-stats strong { display: block; font-size: 24px; font-weight: 800; }
.pe-stats span { font-size: 13px; }
.pe-liste { padding: 6px 14px; gap: 0; }
.pe-ligne { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--couleur-bordure); background: none; color: var(--couleur-texte); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.pe-ligne:last-child { border-bottom: 0; }
.pe-ico { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--couleur-surface-2); }
.pe-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pe-txt strong { font-size: 15px; font-weight: 800; }
.pe-txt span { font-size: 13px; color: var(--couleur-texte-secondaire); }
.pe-ligne > .ic:last-child { color: var(--couleur-texte-secondaire); flex-shrink: 0; }
.pe-interrupteur .toggle-switch { flex-shrink: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pe-passeport { background: #1C2A5E; } }
:root[data-theme="dark"] .pe-passeport { background: #1C2A5E; }

/* === ACCUEIL A DEUX FILS (reseau unifie) : segments, panneaux, filtres de Mon cercle === */
.ms-segments { display: flex; gap: 6px; padding: 3px; border-radius: 18px; background: var(--couleur-surface-2); }
.ms-segments[hidden] { display: none; } /* lot 5 : Share ferme (l'attribut hidden perdait contre display: flex) */
/* Pages publiques (30 oct. 2026) : trois onglets (Ma semaine, Pour toi, Clubs), remontés sous l'en-tête ; le bandeau défilant juste dessous. */
.ma-semaine > .ms-segments-trois { margin-top: -4px; }
.ma-semaine > .pp-bandeau { margin: 8px 0 4px; border-radius: 12px; border: 1px solid var(--couleur-bordure); }
.ms-segments a { flex: 1; min-height: var(--zone-tactile); display: flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--couleur-texte-secondaire); text-decoration: none; font-weight: 800; font-size: 14px; }
.ms-segments a.actif { background: var(--couleur-surface); color: var(--accent-texte); box-shadow: var(--shadow-card); }
.ms-panneau { display: flex; flex-direction: column; gap: 10px; touch-action: pan-y pinch-zoom; }
.ms-panneau[hidden] { display: none; }
.ms-panneau > * { flex-shrink: 0; }
.ms-filtres { display: flex; gap: 8px; }
.ms-filtres button { min-height: 36px; padding: 0 18px; border: none; border-radius: 999px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.ms-filtres button.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
.ma-semaine [data-cercle-jeu][hidden], .ma-semaine [data-cercle-social][hidden] { display: none; }
.ms-suite { align-self: center; min-height: 44px; padding: 0 16px; border: none; background: none; color: var(--accent-texte); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.ms-suite:disabled { opacity: .5; }

/* === CHARTE, lot 3 : mention « 100 % gratuit », logo des invitations === */
.mention-gratuit { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--good-soft); color: var(--couleur-positif); font-size: 14px; font-weight: 500; align-self: center; }
.mention-gratuit strong { font-weight: 800; }
.mention-gratuit .ic { stroke-width: 2.2; flex-shrink: 0; }
.invit-marque { display: flex; justify-content: center; margin-bottom: 8px; }
.invit-marque svg { width: min(320px, 100%); height: auto; display: block; }
.connexion-formulaire .mention-gratuit { margin-top: 12px; }

/* === COMPOSANTS (charte, lot 3) : un seul jeu, des jetons, pas de style="..." dans les gabarits === */
:root { --hauteur-bouton: 54px; --hauteur-champ: 56px; }

/* Boutons : principal (fond accent), secondaire (surface 2), 52 a 56 px de haut, rayon 16 */
.bouton { min-height: var(--hauteur-bouton); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.bouton-large { display: flex; width: 100%; }
.bouton-compact { min-height: 44px; padding: 0 18px; font-size: 14px; }
.bouton-lien { min-height: var(--zone-tactile); padding: 0 4px; background: none; border: none; color: var(--accent-texte); cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; }
.bouton-lien-danger { min-height: 44px; padding: 0 4px; background: none; border: none; color: var(--couleur-negatif); cursor: pointer; font: inherit; font-size: 13px; flex-shrink: 0; }

/* Champs */
.champ { display: block; width: 100%; min-height: var(--hauteur-champ); padding: 0 16px; border-radius: var(--rayon-bouton); border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 16px; }
.champ-compact { min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: 16px; }
.champ-code { border-width: 2px; font-size: 20px; font-weight: 800; letter-spacing: .15em; text-align: center; text-transform: uppercase; }
.libelle-champ { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--couleur-texte); }
.libelle-champ-petit { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }

/* Textes d'aide et titres */
.aide { margin: 0 0 16px; font-size: 14px; color: var(--couleur-texte-secondaire); }
.aide-petite { margin: 0; font-size: 13px; }
.aide-page { margin: 0; font-size: 15px; color: var(--couleur-texte-secondaire); }
.note-bas { margin-top: 32px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.titre-section { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.titre-page { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.lien-accent { color: var(--accent-texte); font-weight: 800; }
.vide { padding: 40px 0; text-align: center; }

/* Cartes : rayon 24 a 32 (--rayon-carte), bordure fine, ombre legere */
.carte-section { padding: 18px 20px; margin-bottom: var(--espace-blocs); }
.carte-formulaire { padding: 28px; margin-bottom: var(--espace-blocs); }

/* Mise en page des formulaires */
.page-formulaire { max-width: 480px; width: 100%; padding: 40px 0 80px; }
.entete-formulaire { margin-bottom: 32px; text-align: center; }
.page-centree { max-width: 480px; margin: 60px auto; padding: 0 20px; text-align: center; }
.pastille-icone { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: var(--accent); color: var(--accent-encre); }
.formulaire-colonne { display: flex; flex-direction: column; gap: 14px; }
.connexion-form { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.zone-resultat { margin-top: 20px; font-size: 14px; }
.liste-colonne { display: flex; flex-direction: column; gap: 12px; }
.info-code { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--accent-fond-leger); }
.info-code-nom { font-weight: 800; color: var(--accent-texte); }
.info-code svg { flex-shrink: 0; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); }
.badge-accent { background: var(--accent-fond-leger); color: var(--accent-texte); }
.badge-positif { background: var(--good-soft); color: var(--couleur-positif); }
.badge-negatif { background: color-mix(in srgb, var(--couleur-negatif) 14%, transparent); color: var(--couleur-negatif); }

/* Barre de progression : --valeur (0 a 100 %) */
.progression { height: 10px; border-radius: 999px; background: var(--couleur-surface-2); overflow: hidden; }
.progression > i { display: block; height: 100%; width: var(--valeur, 0%); border-radius: inherit; background: var(--accent); }

/* Messages de confirmation et d'erreur (a annoncer avec aria-live) */
.message { padding: 12px 16px; border-radius: 16px; font-size: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); }
.message-ok { background: var(--good-soft); color: var(--couleur-positif); }
.message-erreur { background: color-mix(in srgb, var(--couleur-negatif) 12%, transparent); color: var(--couleur-negatif); }
.message-ok-plein { padding: 20px; text-align: center; background: var(--couleur-positif); color: var(--couleur-fond); border-color: var(--couleur-positif); }
.texte-fort { color: var(--couleur-texte); }

/* === CHARTE, lot 3 : en-tete (icone + nom) et largeur des ecrans sur telephone === */
.logo-app-essai.avec-nom { width: auto; gap: 8px; padding-right: 4px; }
.logo-app-essai .nom-marque { display: none; }
.logo-app-essai .nom-marque svg { height: 15px; width: auto; display: block; }
@media (min-width: 360px) { .logo-app-essai.avec-nom .nom-marque { display: block; } } /* 400 px avant que le titre de l'écran ne quitte l'en-tête (24 oct. 2026) */
.mobile-header.mobile-header-essai:has(.avec-nom) { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Ecrans plus larges sur telephone : le bord de .contenu-principal seulement (--bord-ecran), jamais une double marge. */
@media (max-width: 899px) {
  .ma-semaine, .onglet-matchs, .ligues-essai, .infos-ligue, .mobile-main { padding-left: 0; padding-right: 0; }
  .ms-defile { margin: 0 calc(-1 * var(--bord-ecran)); padding: 2px var(--bord-ecran); }
  .onglets-ligue-essai { margin-left: 0; margin-right: 0; }
}

/* === CHARTE, lot 4 : bascule « prono validé » de l'icone de l'en-tete === */
.bascule-marque { position: relative; display: inline-block; width: 30px; height: 30px; flex-shrink: 0; }
.bascule-marque .bm-etat { position: absolute; inset: 0; transition: opacity 300ms ease, transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.bascule-marque .bm-etat > span { display: block; width: 100%; height: 100%; }
.bascule-marque .bm-etat svg { display: block; width: 100%; height: 100%; }
.bascule-marque .bm-visible { opacity: 1; transform: scale(1) rotate(0deg); }
.bascule-marque .bm-cache { opacity: 0; transform: scale(.82) rotate(-12deg); }
.bascule-message {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 60;
  width: max-content; max-width: min(94vw, 480px); padding: 10px 16px; border-radius: 999px; text-align: center;
  background: var(--couleur-surface); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); box-shadow: var(--shadow-card);
  font-size: 14px; font-weight: 800; opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-6px); transition: opacity 300ms ease, transform 450ms cubic-bezier(.34, 1.56, .64, 1);
}
.bascule-message.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bascule-marque .bm-etat, .bascule-message { transition: none; }
}

/* === LOT F : evenements de jeu dans Mon cercle, cartes de resultat partageables === */
.evt-liste { display: flex; flex-direction: column; gap: 10px; }
.evt-jeu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0; border-radius: 20px; background: var(--accent-fond-leger); color: var(--couleur-texte); text-decoration: none; }
.evt-jeu[hidden], [data-cercle-social] [hidden] { display: none; }
.evt-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px; background: var(--couleur-surface); color: var(--accent-texte); }
.evt-trophee .evt-icone { color: var(--couleur-or); }
.evt-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evt-titre { font-size: 15px; line-height: 1.3; }
.evt-titre strong { font-weight: 800; }
.evt-detail { font-size: 13px; overflow-wrap: anywhere; }

/* Cartes de resultat partageables : bouton, feuille (apercu, format, actions) */
.carte-bouton { margin-top: 10px; }
.carte-dernier-actions { margin-top: 12px; }
.carte-feuille { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.carte-feuille[hidden] { display: none; }
.carte-voile { position: absolute; inset: 0; background: rgba(13, 14, 16, .6); }
.carte-panneau { position: relative; width: min(100%, 520px); max-height: 94vh; overflow-y: auto; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--couleur-surface); color: var(--couleur-texte); display: flex; flex-direction: column; gap: 14px; outline: none; }
@media (min-width: 600px) { .carte-feuille { align-items: center; } .carte-panneau { border-radius: 28px; } }
.carte-formats { display: flex; gap: 8px; }
.carte-formats button { flex: 1; min-height: 44px; border: none; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.carte-formats button.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
.carte-apercu { display: flex; justify-content: center; }
.carte-apercu canvas { width: auto; height: auto; max-width: 100%; max-height: 52vh; border-radius: 18px; box-shadow: var(--shadow-card); }
.carte-actions { display: flex; gap: 10px; }
.carte-actions .bouton { flex: 1; }
.carte-actions [hidden] { display: none; }
.carte-fermer { align-self: center; min-height: 44px; padding: 0 16px; border: none; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-weight: 800; cursor: pointer; }

/* === LOT 2 : posts du fil (en-tete, menu), vignettes de Mon cercle en banniere, aide de la pile === */
.post-fil { padding: 12px 0 10px; border-bottom: 1px solid var(--couleur-bordure); }
.post-entete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.post-auteur { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.post-auteur-texte { min-width: 0; }
.post-date { font-size: 12px; line-height: 1.3; margin: 0; }
.post-entete .btn-suivre-post { height: 32px; padding: 0 14px; font-size: 13px; flex-shrink: 0; }
.nom-alias { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 15px; line-height: 1.25; margin: 0; }
.nom-alias strong { font-weight: 800; }
.nom-alias .texte-secondaire { font-size: 13px; font-weight: 500; }
.nom-alias-petit { font-size: 13px; }
.nom-alias-petit .texte-secondaire { font-size: var(--taille-min); }
.menu-post-bloc { position: relative; flex-shrink: 0; }
.btn-menu-post { width: 32px; height: 32px; border-radius: 50%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--couleur-texte-secondaire); }
.menu-post { display: none; position: absolute; right: 0; top: 100%; z-index: 20; min-width: 220px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.item-menu-post { display: block; width: 100%; text-align: left; background: none; border: none; padding: 12px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; color: var(--couleur-texte); }
.item-menu-post.item-menu-danger { color: var(--couleur-negatif); }

/* Aide de la pile : une seule fois par appareil. */
.ms-aide { display: flex; align-items: center; gap: 8px; margin-top: -12px; padding: 0 2px; font-size: 13px; }
.ms-aide[hidden] { display: none; }
.ms-aide .ms-aide-fleche { display: inline-block; animation: ms-aide-glisse 1.6s ease-in-out 3; }
@keyframes ms-aide-glisse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) { .ms-aide .ms-aide-fleche { animation: none; } }
/* Bouton « Suivant » : ordinateur seulement (clavier et souris). */
.ms-repere { display: none; }
@media (hover: hover) and (pointer: fine) { .ms-repere:not([hidden]) { display: flex; justify-content: flex-end; } }

/* Vignettes d'evenements de jeu : format banniere. */
.evt-jeu { width: 100%; box-sizing: border-box; min-height: 84px; gap: 14px; padding: 16px 18px; border-radius: 22px; background: color-mix(in srgb, var(--evt-couleur, var(--accent)) 12%, var(--couleur-surface)); border: 1px solid color-mix(in srgb, var(--evt-couleur, var(--accent)) 25%, var(--couleur-bordure)); }
.evt-visuel { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: var(--couleur-surface); color: var(--accent-texte); overflow: hidden; }
.evt-visuel img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.evt-visuel.evt-initiales { font-weight: 800; font-size: 17px; }
.evt-trophee .evt-visuel { color: var(--couleur-or); }
.evt-visuel.evt-pastille-exact { background: var(--resultat-exact); color: var(--sur-resultat-exact); }
.evt-visuel.evt-pastille-seul { background: var(--accent); color: var(--accent-encre); }

/* === LOT 3 : galerie de photos, visionneuse plein ecran, filtres de « Trouver une ligue » === */
.post-contenu { white-space: pre-wrap; font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
.post-contenu.avec-clubs { margin-bottom: 6px; }
.post-video { width: 100%; border-radius: 16px; margin-bottom: 12px; max-height: 480px; background: #000; }
.galerie-photos { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 12px; border-radius: 16px; overflow: hidden; }
.galerie-photos.galerie-duo { grid-template-columns: 1fr 1fr; }
.galerie-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; }
.photo-vis { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; outline: none; }
.photo-vis[hidden] { display: none; }
.photo-vis-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: pinch-zoom; }
.photo-vis-scene img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.photo-vis-fermer { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; z-index: 2; }
.photo-vis-enregistrer { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 0 22px; border: 0; border-radius: 22px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; z-index: 2; }
.photo-vis-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: 14px; background: rgba(0,0,0,.4); color: #fff; font-size: 38px; line-height: 1; cursor: pointer; z-index: 2; }
.photo-vis-nav[hidden] { display: none; }
.photo-vis-prec { left: 12px; }
.photo-vis-suiv { right: 12px; }
@media (hover: hover) and (pointer: fine) { .photo-vis-nav:not([hidden]) { display: block; } }
.photo-vis-compteur { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.7); z-index: 2; }
.ligue-filtres { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 18px; }
.ligue-filtres .bouton { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; font-size: 13px; white-space: nowrap; }

/* === LOT 1 : carrousel des matchs des 7 prochains jours (onglet Matchs d'une ligue, nouvelle navigation) === */
.carrousel-semaine { min-width: 0; }
.carrousel-tete { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.carrousel-titre { margin: 0; font-size: 15px; font-weight: 800; }
.carrousel-compte { font-size: 13px; }
.carrousel-rangee { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; max-width: 100%; scrollbar-width: none; }
.carrousel-rangee::-webkit-scrollbar { display: none; }
.carrousel-slide { flex: 0 0 92%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--espace-blocs, 20px); }
.carrousel-rangee[data-seul] .carrousel-slide { flex-basis: 100%; }
.carrousel-points { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.carrousel-points span { width: 7px; height: 7px; border-radius: 50%; background: var(--couleur-bordure); transition: background .2s; }
.carrousel-points span.actif { width: 18px; border-radius: 4px; background: var(--accent); }

/* === LOT 5 : profil de la nouvelle navigation, menu Reglages et sous-pages === */
.profil-barre { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; margin-bottom: 12px; }
.profil-barre-titre { flex: 1; margin: 0; font-size: 20px; font-weight: 800; }
.profil-roue, .profil-retour { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface); color: var(--couleur-texte); text-decoration: none; }
.profil-roue .ic, .profil-retour .ic { stroke-width: 1.8; }
/* Sur mobile, la roue de /profil est dans l'en-tete (a la place de recherche, messages et notifications). */
@media (max-width: 899px) { .profil-barre-pc { display: none; } }

/* === PAQUET C : etat du systeme (admin) et pages d'erreur === */
.sante-titre { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.sante-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sante-ligne { display: flex; align-items: flex-start; gap: 12px; }
.voyant { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; background: var(--couleur-texte-secondaire); }
.voyant-vert { background: var(--couleur-positif); }
.voyant-orange { background: var(--couleur-or); }
.voyant-rouge { background: var(--couleur-negatif); }
.sante-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sante-detail { font-size: 13px; color: var(--couleur-texte-secondaire); }
.sante-erreur { font-size: 13px; color: var(--couleur-negatif); overflow-wrap: anywhere; }
.page-erreur { display: flex; justify-content: center; padding: 48px 20px 80px; }
.page-erreur-carte { max-width: 420px; width: 100%; text-align: center; }
.page-erreur-code { margin: 0; font-size: 72px; font-weight: 800; line-height: 1; color: var(--couleur-texte-secondaire); }
.page-erreur-titre { margin: 12px 0 8px; font-size: 24px; font-weight: 800; }
.page-erreur-texte { margin: 0 0 24px; color: var(--couleur-texte-secondaire); }
.page-erreur-carte .bouton { display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; text-decoration: none; }

/* === PAQUET D : lisibilite et accessibilite === */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.champ:focus-visible, .champ-dm:focus-visible, .exp-recherche input[type="search"]:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* === PAQUET 1 DE FLUIDITE : listes repetees des stats du classement (avant : style="..." sur chaque ligne) === */
/* Memes declarations qu'avant, a l'identique ; seules les valeurs propres a une ligne (largeur d'une barre,
   couleur d'un joueur) restent dans l'attribut style. */
.st-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.st-legende-point { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.st-barre-ligne { display: flex; align-items: center; gap: 10px; }
.st-barre-nom { font-weight: 800; width: 80px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-barre-fond { flex: 1; background: var(--couleur-surface-2); border-radius: 8px; height: 24px; overflow: hidden; }
.st-barre { height: 100%; border-radius: 8px; min-width: 0; transition: width .3s; }
.st-barre-accent { background: var(--accent); }
.st-barre-or { background: var(--couleur-or); }
.st-barre-min { min-width: 2px; }
.st-barre-val { font-size: 14px; width: 40px; text-align: right; }
.st-barre-val-court { width: 30px; }
.st-joueur { display: flex; gap: 12px; align-items: flex-start; }
.st-joueur-moi { background: var(--accent-fond-leger); margin: -12px; padding: 12px; border-radius: 20px; }
.st-joueur-corps { flex: 1; min-width: 0; }
.st-joueur-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.st-joueur-nom { font-size: 15px; }
.st-joueur-pts { font-size: 15px; color: var(--accent-texte); }
.st-joueur-pills { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.st-forme { display: flex; gap: 3px; margin-top: 8px; }
.st-forme-case { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.st-forme-bon { background: var(--resultat-bon); color: var(--sur-resultat-bon); }
.st-forme-rate { background: var(--resultat-rate); color: var(--sur-resultat-rate); }
.st-forme-legende { font-size: var(--taille-min); align-self: center; margin-left: 4px; color: var(--couleur-texte-secondaire); }
.cm-ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cm-rang { font-size: 12px; width: 16px; text-align: center; color: var(--couleur-texte-secondaire); }
.cm-nom { font-weight: 800; width: 72px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fond { flex: 1; background: var(--couleur-surface-2); border-radius: 6px; height: 18px; overflow: hidden; }
.cm-barre { height: 100%; background: var(--accent); border-radius: 6px; transition: width .3s; }
.cm-pts { font-size: 13px; width: 32px; text-align: right; }
.rj-table { width: 100%; border-collapse: collapse; border: 1px solid var(--couleur-bordure); border-radius: 10px; overflow: hidden; }
.rj-table thead tr { background: var(--couleur-surface-2); }
.rj-table th { padding: 6px 8px; font-size: 12px; text-align: left; font-weight: 800; }
.rj-table th.rj-centre { text-align: center; }
.rj-table th.rj-droite { text-align: right; }
.rj-table td { padding: 5px 8px; font-size: 13px; }
.rj-table td.rj-prono { text-align: center; font-variant-numeric: tabular-nums; }
.rj-table td.rj-bonus { text-align: center; color: var(--accent-texte); }
.rj-table td.rj-pts { text-align: right; font-weight: 800; }
.rj-exact { background: var(--resultat-exact); color: var(--sur-resultat-exact); }
.rj-bon { background: var(--resultat-bon); color: var(--sur-resultat-bon); }
.rj-exact td, .rj-bon td { color: inherit; }
.rj-exact td:first-child::before, .rj-bon td:first-child::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: var(--ico-m) center / contain no-repeat; mask: var(--ico-m) center / contain no-repeat; }
.rj-exact { --ico-m: var(--ico-exact); }
.rj-bon { --ico-m: var(--ico-bon); }
.rj-moi { font-weight: 800; }
.rj-cumul { font-size: 12px; color: var(--couleur-texte-secondaire); }
.rj-cumul strong { color: var(--couleur-texte); }
.rj-cumul-sep { color: var(--couleur-bordure); margin: 0 4px; }
.cl-voir-grand { width: 100%; margin-top: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--couleur-bordure); background: transparent; color: var(--couleur-texte-secondaire); font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Boutons d'action d'un post (J'aime, Commenter, Republier, Partager) */
.post-action { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; border: none; border-radius: 12px; padding: 8px; cursor: pointer; font-weight: 800; font-size: 13.5px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); }
.post-action.btn-like.actif { background: var(--accent-fond-leger); color: var(--couleur-negatif); }
.post-action.btn-repost.actif { background: var(--accent-fond-leger); color: var(--couleur-positif); }

/* Lot S3 : saisie du code de confirmation des actions admin irreversibles (scripts-communs.js, CONFIRMATION_ADMIN). */
.confirmation-admin { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); }
.confirmation-admin-carte { width: 100%; max-width: 400px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.confirmation-admin-champ { font-size: 24px; font-weight: 800; letter-spacing: 0.3em; text-align: center; }
.confirmation-admin-actions { display: flex; gap: 10px; }
.confirmation-admin-actions .bouton { flex: 1; }
.dialogue-texte { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.dialogue-danger { background: var(--couleur-negatif); color: var(--couleur-fond); }
.confirmation-admin-renvoyer { align-self: center; min-height: 44px; padding: 0 12px; border: none; background: none; font: inherit; font-size: 14px; cursor: pointer; }

/* Tuiles du direct de l'accueil (lot 1) : carrousel a accroche, prono colore, barres de repartition. */
:root { --rep-dom: #10193F; --rep-dom-encre: #FFFFFF; }
.ms-live-defile { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--marge-mobile)); padding: 2px var(--marge-mobile); }
.ms-live-defile::-webkit-scrollbar { display: none; }
.ms-live-defile > .ms-live { flex: none; width: calc(100% - 28px); scroll-snap-align: center; }
.ms-live-defile:only-child > .ms-live:only-child { width: 100%; }
.ms-points { display: flex; justify-content: center; gap: 6px; margin: -4px 0 6px; }
.ms-points span { width: 7px; height: 7px; border-radius: 50%; background: var(--couleur-bordure); }
.ms-points span.actif { background: var(--accent); }
.ms-live-ligue { text-decoration: none; }
.ms-live-prono { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 12px 16px; border-radius: 18px; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); font-size: 15px; font-weight: 500; }
.ms-live-prono strong { font-size: 28px; font-weight: 800; white-space: nowrap; }
.ms-live-prono .ms-live-just { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ms-reps { display: flex; flex-direction: column; gap: 10px; }
.ms-rep-titre { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
/* Lot 3 de la revue produit : saisie du score par qui gere les matchs, dans la tuile du direct (match saisi a la main). */
.ms-saisie { margin-top: 14px; padding: 14px; border-radius: var(--rayon-tuile, 20px); background: var(--couleur-surface-2); display: flex; flex-direction: column; gap: 10px; }
.ms-saisie-ligne { display: flex; gap: 12px; justify-content: space-between; }
.ms-saisie-equipe { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ms-saisie-nom { text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-saisie-boutons { display: flex; align-items: center; gap: 10px; }
.ms-saisie-boutons .btn-live-score { width: var(--zone-tactile, 44px); height: var(--zone-tactile, 44px); border-radius: 50%; border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface); color: var(--couleur-texte); font-size: 22px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ms-saisie-boutons .live-home-val, .ms-saisie-boutons .live-away-val { font-size: 28px; font-weight: 800; min-width: 32px; text-align: center; }
.ms-saisie .btn-live-terminer { width: 100%; }
.ms-barre { display: flex; height: 30px; border-radius: 12px; overflow: hidden; background: var(--couleur-surface-2); }
.ms-seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ms-seg-dom { background: var(--rep-dom); color: var(--rep-dom-encre); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rep-dom: #8DA2FF; --rep-dom-encre: #0D0E10; } }
:root[data-theme="dark"] { --rep-dom: #8DA2FF; --rep-dom-encre: #0D0E10; }
.ms-seg-nul { background: color-mix(in srgb, var(--couleur-texte-secondaire) 40%, var(--couleur-surface-2)); color: var(--couleur-texte); }
.ms-seg-ext { background: var(--couleur-or); color: var(--couleur-fond); }
.ms-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ms-legende span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ms-legende i { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.ms-scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-scores li { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); }
.ms-scores strong { font-size: 20px; font-weight: 800; }

/* Tuile du direct dans la ligue (lot 2) : pronos des joueurs sur deux colonnes, colores selon leur justesse.
   Finitions demo A5 (bilan du 25 oct. 2026) : pendant un match, le direct passe en tete de la page, sur PC
   (premier bloc de .grille-gauche) comme sur telephone (order 0, avant le prochain match en order 1). */
.ordre-direct:empty { display: none; }
.ordre-direct { min-width: 0; }
.ms-joueurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ms-joueur { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-radius: 14px; background: var(--resultat-rate); color: var(--sur-resultat-rate); border: 1px solid transparent; }
.ms-joueur strong { margin-left: auto; font-size: 18px; font-weight: 800; white-space: nowrap; }
.ms-joueur .pd-avatar { width: 30px; height: 30px; }
.ms-joueur-pts { font-size: 12px; font-weight: 800; opacity: .9; }
.carte-dernier-tuile > .dernier-sub { margin: 0 0 10px; font-weight: 500; }
.carte-dernier-tuile > .ms-live { width: 100%; }
/* ===== LISTE DU DIRECT (lot 2, au-dela de 5 matchs en direct avec prono : listeDirect de src/pages/ma-semaine.js) ===== */
.ms-ld { display: flex; flex-direction: column; gap: 12px; }
.ms-ld [data-vue-liste] { display: flex; flex-direction: column; gap: 12px; }
.ms-ld [hidden] { display: none; }
.ms-ld-lignes { list-style: none; margin: 0; padding: 4px 14px; gap: 0; }
.ms-ld-lignes li + li { border-top: 1px solid var(--couleur-bordure); }
.ms-ld-ligne { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 64px; padding: 10px 0; border: 0; background: none; color: var(--couleur-texte); font: inherit; text-align: left; cursor: pointer; }
.ms-ld-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.ms-ld-min { font-size: 13px; font-weight: 800; color: var(--couleur-negatif); white-space: nowrap; }
.ms-ld-equipes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-ld-equipe { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ms-ld-equipe .ms-ecusson { width: 22px; height: 22px; border-radius: 6px; font-size: var(--taille-min); }
.ms-ld-nom { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ld-equipe strong { font-size: 16px; font-weight: 800; }
.ms-ld-prono { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 6px 10px; border-radius: 14px; background: var(--couleur-surface-2); border: 1px solid var(--couleur-bordure); }
.ms-ld-prono-titre { font-size: var(--taille-min); font-weight: 500; opacity: .92; }
.ms-ld-prono strong { font-size: 17px; font-weight: 800; white-space: nowrap; }
/* Justesse d'un prono (charte 2026, lot B) : 5 niveaux calculés (src/justesse.js), 3 états visibles. Fort et juste = bon résultat ;
   partiel et faux = neutre (jamais de rouge pour un raté). Chaque état porte une icône (cible, coche, trait) et un mot. */
.ms-live-prono.j-exact, .ms-joueur.j-exact, .ms-ld-prono.j-exact { background: var(--resultat-exact); color: var(--sur-resultat-exact); border-color: transparent; }
.ms-live-prono.j-fort, .ms-live-prono.j-juste, .ms-joueur.j-fort, .ms-joueur.j-juste, .ms-ld-prono.j-fort, .ms-ld-prono.j-juste { background: var(--resultat-bon); color: var(--sur-resultat-bon); border-color: transparent; }
.ms-live-prono.j-partiel, .ms-live-prono.j-faux, .ms-ld-prono.j-partiel, .ms-ld-prono.j-faux { background: var(--resultat-rate); color: var(--sur-resultat-rate); }
.ms-couleurs i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.ms-ld-detail { display: flex; flex-direction: column; gap: 10px; }
.ms-ld-retour { align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--couleur-bordure); background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.ms-ld-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-couleurs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ms-couleurs li { display: inline-flex; align-items: center; gap: 6px; }
.ms-couleurs i { width: 10px; height: 10px; border-radius: 4px; flex: none; }
.ms-compte { margin: 8px 0 0; }

/* Carrousel des pronos a poser (lot 3) : defilement natif a accroche, remplace la pile a swiper. */
.ms-rail-bloc { display: flex; flex-direction: column; gap: 8px; }
.ms-rail-bloc[hidden] { display: none; }
.ms-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--marge-mobile)); padding: 2px var(--marge-mobile) 6px; }
.ms-rail::-webkit-scrollbar { display: none; }
.ms-rail > .tuile { flex: none; width: calc(100% - 28px); scroll-snap-align: center; }
.ms-rail > .tuile:only-child { width: 100%; }
.tuile.valide { border-color: var(--couleur-positif); }
.ms-enregistre { margin: 0; font-size: 13px; font-weight: 500; color: var(--couleur-positif); }
.ms-enregistre[hidden] { display: none; }
.tuile.valide .ms-valider { background: var(--couleur-surface-2); color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); box-shadow: none; }

/* Icônes de résultat : un seul élément, dessiné par un masque (couleur = celle du texte). Tracés de la charte (composants.md). */
:root {
  --ico-exact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --ico-bon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-rate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --ico-seul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
}
.ico-res { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico-m) center / contain no-repeat; mask: var(--ico-m) center / contain no-repeat; vertical-align: middle; }
.ico-res-exact { --ico-m: var(--ico-exact); }
.ico-res-bon { --ico-m: var(--ico-bon); }
.ico-res-rate { --ico-m: var(--ico-rate); }
.ico-res-seul { --ico-m: var(--ico-seul); }
.ico-res-t14 { width: 14px; height: 14px; }
.ico-res-t16 { width: 16px; height: 16px; }
.ico-res-t18 { width: 18px; height: 18px; }

/* === CHARTE 2026, lot C : la liaison légère (le « & » du logo, le tiret d'un score) et l'affiche === */
/* Seulement 500 et 800 (les deux fichiers Outfit). La liaison est en 500 à --opacite-liaison, entre des mots ou des chiffres en 800. */
.liaison { font-weight: 500; opacity: var(--opacite-liaison); }
/* L'affiche : le chiffre ou le rang d'un moment fort et des cartes de partage (lot E). Pas pour le texte courant. */
.affiche { font-size: 120px; font-weight: 800; line-height: .88; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }

/* === CHARTE 2026, lot B : pastille de résultat (toujours une icône ET un mot : l'or et le vert se confondent pour un daltonien) === */
.pastille-resultat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--rayon-pastille); font-size: 13px; line-height: 18px; font-weight: 800; white-space: nowrap; }
.pastille-exact { background: var(--resultat-exact); color: var(--sur-resultat-exact); }
.pastille-bon { background: var(--resultat-bon); color: var(--sur-resultat-bon); }
.pastille-rate { background: var(--resultat-rate); color: var(--sur-resultat-rate); }
.pastille-seul { background: var(--accent); color: var(--accent-encre); }

/* === CHARTE 2026, lot D : les bulles de fond === */
/* Deux grands ronds en --bulle, coupés par le bord du conteneur. Pour les états vides, les moments forts, l'accueil public,
   la connexion et l'invitation. Jamais sur une carte ordinaire (prochain match, classement…). .bulles-claires sur un aplat de couleur. */
.bulles-fond { position: relative; overflow: hidden; isolation: isolate; }
.bulles-fond::before, .bulles-fond::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--bulle); pointer-events: none; }
.bulles-fond::before { width: 300px; height: 300px; right: -110px; top: -90px; }
.bulles-fond::after { width: 220px; height: 220px; left: -90px; bottom: -80px; }
.bulles-claires::before, .bulles-claires::after { background: var(--bulle-claire); }

/* === CHARTE 2026, lot G : l'état vide (src/pages/etat-vide.js) === */
.etat-vide { align-items: center; text-align: center; gap: 12px; padding: 32px 20px; }
.etat-vide[hidden] { display: none; }
.etat-vide-icone svg { width: 56px; height: 56px; display: block; }
.etat-vide-titre { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; }
.etat-vide-texte { margin: 0; max-width: 300px; font-size: 15px; line-height: 22px; color: var(--couleur-texte-secondaire); }
.etat-vide-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-top: 4px; }
.etat-vide-actions .bouton { width: 100%; text-decoration: none; }
/* Lot S5 de la revue de Share : variante compacte (sans carte ni bulles). */
.etat-vide-compact { display: flex; flex-direction: column; padding: 20px 12px; }
.etat-vide-compact .etat-vide-icone svg { width: 32px; height: 32px; }
.etat-vide-compact .etat-vide-titre { font-size: 15px; }
.etat-vide-compact .etat-vide-texte { font-size: 14px; line-height: 20px; }
.share-suggestions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.share-suggestion { display: flex; align-items: center; gap: 12px; min-height: var(--zone-tactile); text-align: left; }
.share-suggestion-lien { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--couleur-texte); }
.share-suggestion-nom { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-suggestion .bouton { flex-shrink: 0; width: auto; min-height: var(--zone-tactile); padding: 0 16px; }
.share-suis-ton-club { margin-bottom: 16px; }
.share-suis-ton-club .etat-vide-actions { max-width: 360px; }
.commentaires-vide { margin: 8px 0 0; font-size: 14px; color: var(--couleur-texte-secondaire); }
.liste-commentaires:not(:empty) + .commentaires-vide { display: none; }

/* Lot S6 de la revue de Share : zones tactiles a --zone-tactile (44 px) et composants. */
.post-action { min-height: var(--zone-tactile); }
.btn-menu-post { width: var(--zone-tactile); height: var(--zone-tactile); }
.exp-chip, .exp-chip.petit { min-height: var(--zone-tactile); }
.exp-voir-tout { display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 4px; }
.fil-bascule a { min-height: var(--zone-tactile); }
.exp-suivre { min-height: var(--zone-tactile); }
.pulse-plus::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
@media (max-width: 899px) {
  .exp-chips { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
.commentaire-item { display: flex; gap: 8px; padding: 6px 0; }
.commentaire-bulle { flex: 1; min-width: 0; background: var(--couleur-surface-2); border-radius: 14px; padding: 8px 12px 0; }
.commentaire-tete { margin-bottom: 2px; }
.commentaire-date { font-size: var(--taille-min); line-height: 1.3; margin: 0; }
.commentaire-contenu { font-size: 14px; }
.commentaire-actions { display: flex; gap: 12px; }
.btn-commentaire { display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 2px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.btn-commentaire.danger { color: var(--couleur-negatif); }
.form-commentaire { display: flex; gap: 8px; margin-top: 10px; }
.champ-commentaire { flex: 1; min-width: 0; height: var(--zone-tactile); border-radius: 12px; border: 1px solid var(--couleur-bordure-controle); padding: 0 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 14px; }
.form-commentaire .bouton { height: var(--zone-tactile); min-height: var(--zone-tactile); padding: 0 16px; }
.profil-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.profil-boutons .bouton { min-height: var(--zone-tactile); padding: 0 10px; line-height: 1.15; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.profil-note-message { margin: 10px 0 0; font-size: 13px; text-align: center; color: var(--couleur-texte-secondaire); }
.profil-liens-discrets { display: flex; justify-content: center; gap: 8px; margin: -8px 0 16px; }
.profil-lien-discret { display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 10px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
#champ-post:focus-visible { outline: 2px solid var(--couleur-bordure-controle); outline-offset: 1px; }
.lien-externe { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-texte); font-weight: 800; }
.officiel-ligne { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--couleur-bordure); }
.officiel-lien { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.officiel-texte { min-width: 0; display: flex; flex-direction: column; }
.officiel-nom { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.officiel-sous { font-size: 13px; }
.officiel-ligne .bouton { min-height: var(--zone-tactile); padding: 0 16px; font-size: 13px; flex-shrink: 0; }
.officiels-groupe { font-size: 15px; margin: 20px 0 4px; }
.exp-etat-suivi { font-size: 12px; font-weight: 800; }
.club-pays-niveau { font-size: 13px; }
.btn-suivre-club { margin-left: auto; min-height: var(--zone-tactile); padding: 0 18px; font-size: 13px; flex-shrink: 0; }

/* Lot S7 de la revue de Share : la page Publier (compositeur sans style en ligne, suggestion, apercu avant envoi). */
.cmp-titre { margin-bottom: 12px; }
.cmp { padding: 14px 16px; margin-bottom: 20px; }
.cmp-en-tant-que { width: 100%; margin-bottom: 10px; }
.cmp-ligne { display: flex; gap: 12px; align-items: flex-start; }
.cmp-zone { position: relative; flex: 1; min-width: 0; }
.cmp-champ { width: 100%; min-height: 72px; padding: 9px 0 0; border: none; resize: none; background: transparent; color: var(--couleur-texte); font: inherit; font-size: 15px; }
.cmp-mentions { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; z-index: 10; }
.cmp-mention { display: block; width: 100%; min-height: var(--zone-tactile); text-align: left; background: none; border: none; padding: 0 14px; cursor: pointer; color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; }
.cmp-suggestion { display: inline-flex; align-items: center; min-height: var(--zone-tactile); margin-top: 10px; padding: 0 16px; border-radius: 999px; border: 1px dashed var(--accent); background: var(--accent-fond-leger); color: var(--accent-texte); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.cmp-contexte { margin-top: 10px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; background: var(--accent-fond-leger); border: 1px solid var(--accent); color: var(--accent-texte); border-radius: 20px; padding: 0 6px 0 14px; font-size: 13px; font-weight: 800; }
.cmp-apercu-clubs .cmp-chip { padding-right: 14px; }
.cmp-retirer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--couleur-surface); color: var(--couleur-texte-secondaire); border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; line-height: 1; }
.cmp-match { position: relative; background: var(--accent-fond-leger); border: 1px solid var(--accent); border-radius: 16px; padding: 14px 16px; margin-bottom: 8px; }
.cmp-match .cmp-retirer { position: absolute; top: 8px; right: 8px; }
.cmp-match-sur { font-size: 12px; margin: 0 0 4px; }
.cmp-match-equipes { margin: 0; padding-right: 32px; font-size: 16px; font-weight: 800; }
.cmp-panneau { border: 1px solid var(--couleur-bordure); border-radius: 12px; padding: 10px; margin-top: 10px; }
.cmp-recherche { width: 100%; height: 40px; margin-bottom: 8px; }
.cmp-resultats { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.cmp-resultat { min-height: var(--zone-tactile); text-align: left; background: none; border: none; padding: 8px; cursor: pointer; border-radius: 10px; color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; }
.cmp-resultat:hover { background: var(--couleur-surface-2); }
.cmp-aucun { padding: 8px; margin: 0; }
.cmp-medias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cmp-media { position: relative; }
.cmp-vignette { display: block; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; }
.cmp-vignette-video { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font-size: var(--taille-min); font-weight: 800; }
.cmp-retirer-media { position: absolute; top: -8px; right: -8px; background: var(--couleur-negatif); color: var(--couleur-surface); }
.cmp-outils { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--couleur-bordure); }
.cmp-boutons { display: flex; }
.cmp-outil { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 56px; min-height: var(--zone-tactile); background: none; border: none; cursor: pointer; color: var(--couleur-texte-secondaire); font: inherit; }
.cmp-pastille { width: 38px; height: 38px; border-radius: 50%; background: var(--couleur-surface-2); display: flex; align-items: center; justify-content: center; color: var(--couleur-texte); }
.cmp-outil-principal .cmp-pastille { background: var(--accent); color: var(--accent-encre); }
.cmp-outil-libelle { font-size: var(--taille-min); font-weight: 800; }
.cmp-compteur { font-size: 13px; flex-shrink: 0; }
#resultat-post { margin-top: 10px; }
.cmp-apercu { margin-bottom: 24px; }
.cmp-apercu .titre-section { margin-bottom: 10px; }
.cmp-apercu-carte { pointer-events: none; }
.cmp-apercu-match { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--couleur-surface-2); font-size: 14px; }
.cmp-apercu-match .texte-secondaire { font-size: 12px; }
.cmp-apercu-medias { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-bottom: 8px; }
.cmp-apercu-medias img, .cmp-apercu-medias .cmp-vignette { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.cmp-apercu-clubs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.cmp-apercu [data-apercu-texte] { white-space: pre-wrap; }
.cmp-mentions[hidden], .cmp-contexte[hidden], .cmp-panneau[hidden], .cmp-medias[hidden], .cmp-apercu[hidden], .cmp-apercu-medias[hidden], .cmp-apercu-clubs[hidden], .cmp-suggestion[hidden], #resultat-post[hidden], .cmp-apercu [data-apercu-texte][hidden] { display: none; }
.cmp-publie { margin-bottom: 12px; }
.ms-partage-prono { display: flex; justify-content: flex-end; margin-top: 10px; }
.ms-partage-prono .bouton { min-height: var(--zone-tactile); text-decoration: none; }

/* Lot S9 de la revue de Share (D10) : Share sur PC en deux colonnes. Sous 900 px, les colonnes n'existent pas
   (display: contents) et l'ordre reste celui du telephone ; ce qui ne sert que sur PC est cache. */
.deux-col-g, .deux-col-d, .exp-col { display: contents; }
.exp-grille { display: flex; flex-direction: column; }
.exp-o1 { order: 1; } .exp-o2 { order: 2; } .exp-o3 { order: 3; } .exp-o4 { order: 4; } .exp-o5 { order: 5; } .exp-o6 { order: 6; } .exp-o7 { order: 7; }
.exp-titre { margin-bottom: 12px; }
.pt-cote, .msg-detail-vide, .msg-page-conv .msg-liste { display: none; }
.msg-badge { margin-left: 0; }
.msg-badge-onglet { margin-left: 4px; }
.msg-reglage-titre { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; }
.msg-reglage-texte { margin-bottom: 10px; font-size: 13px; }
.msg-reglage-etat { margin-left: 8px; font-size: 13px; }
.menu-conv-danger { color: var(--couleur-negatif); }
.bandeau-dm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ligne-conversation.actif { background: var(--couleur-surface-2); border-radius: 12px; }
.profil-page { max-width: 480px; width: 100%; padding-bottom: 100px; }
.profil-moderation { display: block; margin-bottom: 16px; padding: 14px 18px; border-radius: 16px; background: var(--couleur-surface-2); text-decoration: none; color: inherit; }
.profil-moderation strong { font-size: 15px; }
.profil-moderation .texte-secondaire { display: block; margin-top: 2px; font-size: 13px; }
.profil-raccourcis { padding: 8px 28px; margin: 8px 0 48px; }
.profil-raccourci { display: flex; align-items: center; justify-content: space-between; min-height: var(--zone-tactile); padding: 10px 0; text-decoration: none; color: inherit; font-size: 16px; font-weight: 800; }
.profil-raccourci .ic { color: var(--couleur-texte-secondaire); }
.profil-bloques { border-top: 1px solid var(--couleur-bordure); padding: 14px 0; }
.profil-bloques-titre { margin-bottom: 8px; font-size: 16px; font-weight: 800; }
.profil-bloque { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-weight: 800; }
.pp-titre { margin-bottom: 6px; }
.pp-intro { margin-bottom: 20px; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-bottom: 16px; }
.pp-stat { padding: 14px 8px; text-align: center; }
.pp-stat .chiffre { display: block; font-size: 26px; }
.pp-stat .texte-secondaire { font-size: 12px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pp-actions .bouton { flex: 1; min-width: 160px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; text-decoration: none; }
.pp-visibilite { padding: 16px 20px; margin-bottom: 20px; }
.pp-visibilite-titre { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; }
.pp-visibilite-texte { margin-bottom: 10px; font-size: 13px; }
.pp-visibilite-etat { margin-left: 8px; font-size: 13px; }
.pp-suite { font-size: 13px; text-align: center; }
.pp-retour { margin-top: 8px; }
.pf-post { padding: 18px 0; border-bottom: 1px solid var(--couleur-bordure); }
.pf-post-date { margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.pf-post-medias { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; border-radius: 14px; overflow: hidden; }
.pf-post-medias.pf-un { grid-template-columns: 1fr; }
.pf-post-medias img, .pf-post-medias video, .pf-medias img, .pf-medias video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pf-post-texte { white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.pf-onglets { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--couleur-bordure); }
.onglet-profil { flex: 1; min-height: var(--zone-tactile); padding: 12px 4px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--couleur-texte-secondaire); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.onglet-profil.actif { border-bottom-color: var(--accent); color: var(--couleur-texte); }
.pf-tout { display: block; margin-top: 12px; text-align: center; }
.pf-medias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pf-medias img, .pf-medias video { border-radius: 8px; }
[data-panel-profil][hidden] { display: none; }
@media (min-width: 900px) {
  .deux-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 28px; align-items: start; }
  .share-colonne.deux-col { max-width: 1120px; }
  .profil-page-large { max-width: 1120px; }
  .deux-col-g, .deux-col-d { display: flex; flex-direction: column; min-width: 0; }
  .pt-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 28px; align-items: start; }
  .pt-fil { max-width: none; margin: 0; }
  .pt-cote:not([hidden]) { display: flex; flex-direction: column; padding-top: 8px; }
  .exp-page { max-width: 1120px; }
  .exp-page .exp-recherche, .exp-page #exp-resultats { max-width: 720px; }
  .exp-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 28px; align-items: start; }
  .exp-col { display: flex; flex-direction: column; min-width: 0; }
  .msg-page { max-width: 1120px; }
  .msg-deux { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); gap: 0 28px; align-items: start; }
  .msg-liste { min-width: 0; }
  .msg-page-conv .msg-liste, .msg-detail-vide { display: block; }
  .msg-page-conv .msg-liste { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
  .msg-detail { min-width: 0; }
  .msg-detail-vide { padding-top: 56px; }
  .msg-page-conv .retour-messages { display: none; }
}

/* === CHARTE 2026, lot F : icône des anniversaires et de la forme (Stats), à la place d'un emoji ou d'un caractère === */
.anniv-icone { display: block; margin-bottom: 12px; }
.st-forme-bon::before, .st-forme-rate::before { content: ""; display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ico-m) center / contain no-repeat; mask: var(--ico-m) center / contain no-repeat; }
.st-forme-bon { --ico-m: var(--ico-bon); }
.st-forme-rate { --ico-m: var(--ico-rate); }

/* === CHARTE 2026, lot E : les moments forts === */
/* Niveau 3 (src/pages/moment-fort.js) : carte pleine. Marine, ou la couleur de la ligue (--moment-fond et --moment-encre,
   posées en ligne et validées côté serveur). Un seul qui joue par ouverture ; jamais en boucle. */
.moment-fort { background: var(--moment-fond, var(--marque)); color: var(--moment-encre, #FFFFFF); display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--rayon-carte); margin-bottom: var(--espace-blocs); }
.moment-fort[hidden] { display: none; }
.moment-fort-surtitre { margin: 0; font-size: 14px; font-weight: 800; color: color-mix(in srgb, var(--moment-encre, #FFFFFF) 78%, transparent); }
.moment-fort-affiche { margin: 0; font-size: clamp(72px, 24vw, 120px); color: inherit; }
.moment-fort-legende { margin: -8px 0 0; font-size: 15px; font-weight: 800; opacity: .8; }
.moment-fort-phrase { margin: 0; max-width: 34ch; font-size: 17px; line-height: 1.35; font-weight: 500; }
.moment-fort-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.moment-fort-bouton { min-height: var(--zone-tactile); padding: 0 22px; border: 0; border-radius: var(--rayon-bouton); background: var(--moment-encre, #FFFFFF); color: var(--moment-fond, var(--marque)); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.moment-fort-fermer { min-height: var(--zone-tactile); padding: 0 14px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; opacity: .8; cursor: pointer; }
.moment-fort:focus-within .moment-fort-bouton:focus-visible, .moment-fort-bouton:focus-visible, .moment-fort-fermer:focus-visible { outline: 2px solid var(--moment-encre, #FFFFFF); outline-offset: 2px; }
.moment-fort.avant { opacity: 0; transform: translateY(24px); }
.moment-fort.entre { transition: opacity .4s ease, transform .4s ease; }
.moment-fort.entre .moment-fort-affiche { animation: moment-rebond .45s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
@keyframes moment-rebond { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
/* Niveau 2 (réussite) : la pastille pleine rebondit, une fois par match. */
.reussite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reussite .pastille-resultat { padding: 6px 14px; font-size: 15px; }
.reussite.pop .pastille-resultat { animation: reussite-rebond .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes reussite-rebond { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .moment-fort.avant { opacity: 1; transform: none; }
  .moment-fort.entre, .moment-fort.entre .moment-fort-affiche { transition: none; animation: none; }
  .reussite.pop .pastille-resultat { animation: none; }
}

/* === CHARTE 2026, lot H : la page /admin/design (composants en clair et en sombre) === */
.dsg-intro { margin: 0 0 20px; max-width: 70ch; }
.dsg-cadres { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.dsg-colonne { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dsg-titre { margin: 0; font-size: 18px; }
.dsg-cadre { width: 100%; height: 80vh; min-height: 520px; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); background: var(--couleur-fond); }
.dsg-page { margin: 0; padding: 20px 16px 48px; background: var(--couleur-fond); color: var(--couleur-texte); }
.dsg-colonne-apercu { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.dsg-section { display: flex; flex-direction: column; gap: 12px; }
.dsg-h2 { margin: 0; font-size: 16px; font-weight: 800; }
.dsg-note { margin: -4px 0 0; font-size: 13px; }
.dsg-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dsg-pile { display: flex; flex-direction: column; gap: 10px; }
.dsg-jetons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dsg-jeton { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dsg-jeton code { font-size: 12px; color: var(--couleur-texte-secondaire); }
.dsg-pastille-jeton { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--couleur-bordure-controle); }
.dsg-60 { --valeur: 60%; }
.dsg-logo { display: inline-flex; width: 56px; height: 56px; }
.dsg-logo svg { width: 100%; height: 100%; }
.dsg-logo-large { max-width: 220px; }
.dsg-bulles { padding: 28px 20px; border-radius: var(--rayon-carte); background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.dsg-j-couleur-fond { background: var(--couleur-fond); }
.dsg-j-couleur-surface { background: var(--couleur-surface); }
.dsg-j-couleur-surface-2 { background: var(--couleur-surface-2); }
.dsg-j-couleur-texte { background: var(--couleur-texte); }
.dsg-j-couleur-texte-secondaire { background: var(--couleur-texte-secondaire); }
.dsg-j-couleur-bordure { background: var(--couleur-bordure); }
.dsg-j-couleur-bordure-controle { background: var(--couleur-bordure-controle); }
.dsg-j-couleur-or { background: var(--couleur-or); }
.dsg-j-couleur-positif { background: var(--couleur-positif); }
.dsg-j-good-soft { background: var(--good-soft); }
.dsg-j-couleur-negatif { background: var(--couleur-negatif); }
.dsg-j-accent { background: var(--accent); }
.dsg-j-resultat-exact { background: var(--resultat-exact); }
.dsg-j-resultat-bon { background: var(--resultat-bon); }
.dsg-j-resultat-rate { background: var(--resultat-rate); }

/* === ACCUEIL PUBLIC (`/` sans session, cahier du 20 oct. 2026) : classes ap-, aucun style="..." dans le gabarit === */
.ap-page { overflow-x: hidden; background: var(--couleur-fond); color: var(--couleur-texte); }
.ap-page a:focus-visible, .ap-page button:focus-visible, .ap-page summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-entete { max-width: 600px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; }
.ap-logo-entete { display: flex; align-items: center; }
.ap-logo-entete svg { height: 38px; width: auto; display: block; }
.ap-lien-connexion { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 14px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); color: var(--couleur-texte); text-decoration: none; font-size: 15px; font-weight: 800; }
.ap-section { position: relative; max-width: 600px; margin: 0 auto; padding: 0 20px 56px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.ap-section > .ap-surtitre { margin-bottom: -12px; }
.ap-accroche { align-items: flex-start; gap: 0; padding-top: 16px; padding-bottom: 8px; }
.ap-gratuit { align-self: flex-start; }
.ap-carte-inscription .ap-gratuit { align-self: center; }
.ap-h1 { margin: 22px 0 0; font-size: 44px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.ap-h2 { margin: 0; font-size: 30px; line-height: 1.08; font-weight: 800; letter-spacing: -0.025em; }
.ap-h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; }
.ap-h3-petit { font-size: 16px; }
.ap-surtitre { margin: 0; font-size: 14px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.ap-sous-titre { margin: 18px 0 0; font-size: 18px; line-height: 1.5; color: var(--couleur-texte-secondaire); }
.ap-texte { margin: 0; font-size: 15px; color: var(--couleur-texte-secondaire); }
.ap-texte-petit { font-size: 14px; line-height: 1.45; }
.ap-boutons { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.ap-bouton-grand, .ap-bouton-moyen { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; text-decoration: none; font-weight: 800; box-sizing: border-box; }
.ap-bouton-grand { min-height: 56px; font-size: 17px; }
.ap-bouton-moyen { min-height: 52px; font-size: 16px; }
.ap-note { margin: 14px 0 0; align-self: stretch; text-align: center; font-size: 13px; line-height: 18px; color: var(--couleur-texte-secondaire); }
.ap-apercu { padding-top: 36px; gap: 0; }
.ap-tuile { position: relative; z-index: 1; margin: 0; }
.ap-tuile.valide .ms-valider { display: none; }
.ap-bascule { position: relative; z-index: 2; width: fit-content; margin: -28px 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--ombre-flottante); transform: rotate(-2deg); }
.ap-bascule[hidden] { display: none; }
.ap-bascule-icone svg { width: 36px; height: 36px; display: block; }
.ap-bascule-texte { display: flex; flex-direction: column; line-height: 1.25; }
.ap-bascule-texte strong { font-size: 14px; font-weight: 800; }
.ap-bascule-texte span { font-size: 12px; color: var(--couleur-texte-secondaire); }
.ap-ont-pronostique { position: relative; z-index: 2; width: fit-content; margin: 16px auto 0 12px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); box-shadow: var(--ombre-flottante); font-size: 13px; line-height: 18px; }
.ap-ont-pronostique strong { font-weight: 800; }
.ap-avatars { display: flex; }
.ap-av { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--couleur-surface); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; box-sizing: border-box; }
.ap-av + .ap-av { margin-left: -8px; }
.ap-av-1 { background: #12327A; }
.ap-av-2 { background: #6D28D9; }
.ap-av-3 { background: #0E7C5A; }
.ap-etapes { margin: 0; padding: 0; list-style: none; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 28px; box-shadow: var(--shadow-card); overflow: hidden; }
.ap-etape { display: flex; gap: 16px; padding: 20px; }
.ap-etape + .ap-etape { border-top: 1px solid var(--couleur-bordure); }
.ap-pastille { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-encre); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; }
.ap-etape-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-puces { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ap-puces li { padding: 4px 10px; border-radius: 999px; background: var(--couleur-surface-2); font-size: 13px; line-height: 18px; }
.ap-puces-bareme li { padding: 6px 12px; }
.ap-puces-bareme li.actif { background: var(--accent); color: var(--accent-encre); font-weight: 800; }
.ap-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-tuile-jeu { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 24px; box-shadow: var(--shadow-card); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ap-large { grid-column: span 2; padding: 20px; gap: 14px; }
.ap-tuile-tete { display: flex; align-items: center; gap: 12px; }
.ap-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--couleur-surface-2); display: flex; align-items: center; justify-content: center; flex: none; }
.ap-icone-grand { width: 44px; height: 44px; border-radius: 14px; }
.ap-defs { margin: 0; display: flex; flex-direction: column; }
.ap-def { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--couleur-bordure); font-size: 15px; }
.ap-def:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-def dt { margin: 0; }
.ap-def dd { margin: 0; font-weight: 800; }
.ap-gages { margin: 0; padding: 16px 18px; box-shadow: none; }
.ap-gages-titre { margin: 0 0 12px; font-size: 18px; }
.ap-gages-liste { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ap-cartes { position: relative; height: 380px; }
.ap-carte { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px 12px; border-radius: 22px; background: var(--ap-fond-carte, #10193F); color: #FFFFFF; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--ombre-flottante); box-sizing: border-box; }
.ap-carte-devant { left: 50%; top: 8px; width: 240px; height: 300px; margin-left: -175px; transform: rotate(-4deg); }
.ap-carte-derriere { left: 50%; top: 22px; width: 228px; height: 285px; margin-left: -56px; transform: rotate(7deg); }
.ap-rond { position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.ap-rond-1 { width: 220px; height: 220px; right: -90px; top: -60px; }
.ap-rond-2 { width: 230px; height: 230px; right: -110px; top: -70px; }
.ap-rond-3 { width: 170px; height: 170px; left: -80px; bottom: -70px; }
.ap-carte > span { position: relative; }
.ap-carte > .ap-rond { position: absolute; }
.ap-carte-ligue { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; }
.ap-carte-initiales { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; color: var(--ap-fond-carte, #10193F); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ap-carte-titre { margin-top: 8px; font-size: 18px; font-weight: 800; }
.ap-carte-titre-grand { font-size: 20px; }
.ap-carte-equipe { margin-top: 8px; font-size: 14px; font-weight: 800; }
.ap-carte-score { margin-top: 22px; font-size: 40px; line-height: 1; font-weight: 800; }
.ap-carte-score-grand { margin-top: 0; font-size: 46px; line-height: 1.05; }
.ap-carte-prono { margin-top: 6px; font-size: 12px; opacity: .9; }
.ap-carte-points { margin-top: 8px; padding: 5px 14px; border-radius: 999px; background: #FFFFFF; color: var(--ap-fond-carte, #10193F); font-size: 15px; font-weight: 800; }
.ap-carte-logo { margin-top: auto; }
.ap-carte-logo svg { height: 22px; width: auto; display: block; }
.ap-carte-invit { margin-top: 4px; font-size: 12px; opacity: .8; }
/* Couleurs de ligue (src/couleurs.js) : une par carte. */
.ap-fond-rouge { --ap-fond-carte: #C8102E; }
.ap-fond-vert { --ap-fond-carte: #0E7C5A; }
.ap-fond-violet { --ap-fond-carte: #6D28D9; }
.ap-fond-bleu { --ap-fond-carte: #12327A; }
.ap-direct { margin: 0; }
.ap-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
.ap-rail::-webkit-scrollbar { display: none; }
.ap-rail .ap-carte-bilan { position: relative; flex: none; width: 236px; height: 300px; scroll-snap-align: start; transform: none; justify-content: center; gap: 4px; }
.ap-carte-bilan .ap-carte-ligue { position: absolute; top: 14px; left: 0; right: 0; justify-content: center; }
.ap-carte-bilan .ap-carte-score { margin-top: 14px; }
.ap-bande { background: var(--couleur-surface); border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); }
.ap-bande-contenu { padding-top: 48px; padding-bottom: 52px; }
.ap-marque-bascule { display: flex; align-items: center; gap: 10px; color: var(--couleur-texte-secondaire); }
.ap-icone-marque svg { width: 48px; height: 48px; display: block; }
.ap-icone-grande svg { width: 52px; height: 52px; }
.ap-note-gauche { margin: 0 0 0 4px; font-size: 13px; line-height: 1.35; color: var(--couleur-texte-secondaire); }
.ap-post { border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-fond); padding: 4px 16px; }
.ap-post .post-fil { border-bottom: 0; }
.ap-post .post-fil + .post-fil { border-top: 1px solid var(--couleur-bordure); }
.ap-cta-milieu { margin-top: 24px; display: flex; justify-content: center; }
.ap-passeport-zone { position: relative; }
.ap-carte-point { position: absolute; width: var(--zone-tactile, 44px); height: var(--zone-tactile, 44px); transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ap-carte-point::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 3px solid var(--marque); animation: ap-point 2s ease-out infinite; }
@keyframes ap-point { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ap-carte-point::after { animation: none; } }
.ap-carte-point-etihad { left: 34%; top: 23.5%; }
.ap-carte-point-san-siro { left: 69%; top: 54%; }
.ap-carte-point-bernabeu { left: 29.4%; top: 71%; }
.ap-pulse-voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--voile); }
.ap-pulse-voile[hidden] { display: none; }
.ap-pulse-ouvert { width: min(72vw, 320px); }
.ap-pulse-ouvert .pc-tampon { letter-spacing: .02em; }
.ap-passeport-carte { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--couleur-bordure); }
.ap-passeport { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--couleur-fond); box-shadow: none; }
.ap-passeport-titre { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ap-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ap-stat { padding: 14px 8px; text-align: center; box-shadow: none; }
.ap-stat .chiffre { display: block; font-size: 26px; }
.ap-stat .texte-secondaire { font-size: var(--taille-min); }
.ap-marine { background: #10193F; color: #FFFFFF; margin-bottom: 8px; }
.ap-marine-contenu { padding-top: 52px; padding-bottom: 56px; gap: 24px; }
.ap-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.ap-point { display: flex; gap: 14px; align-items: flex-start; }
.ap-point-icone { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.ap-point-titre { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; }
.ap-point-texte { margin: 2px 0 0; font-size: 15px; color: rgba(255,255,255,.78); }
.ap-section:has(> .ap-faq) { gap: 10px; padding-top: 48px; padding-bottom: 48px; }
.ap-section > #ap-faq { margin-bottom: 10px; }
.ap-faq { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 20px; }
.ap-faq summary { list-style: none; cursor: pointer; min-height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 800; }
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary .ic { flex: none; transition: transform .2s ease; }
.ap-faq[open] summary .ic { transform: rotate(180deg); }
.ap-faq > .ap-texte { padding: 0 18px 18px; }
.ap-inscription { padding-top: 8px; }
.ap-carte-inscription { position: relative; overflow: hidden; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 28px; box-shadow: var(--shadow-card); padding: 28px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.ap-carte-inscription > * { position: relative; }
.ap-form { margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ap-separateur { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.ap-separateur::before, .ap-separateur::after { content: ""; flex: 1; height: 1px; background: var(--couleur-bordure); }
.ap-code { display: flex; flex-direction: column; gap: 10px; }
.ap-code[hidden] { display: none; }
.ap-pied { border-top: 1px solid var(--couleur-bordure); }
.ap-pied-contenu { max-width: 600px; margin: 0 auto; padding: 36px 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; box-sizing: border-box; }
.ap-logo-pied svg { width: 220px; height: auto; display: block; }
.ap-liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; font-size: 14px; }
.ap-liens-legaux a { min-height: 44px; display: inline-flex; align-items: center; color: var(--couleur-texte-secondaire); }
/* Porte « Pour les pros » (27 oct. 2026) : un lien au-dessus des liens legaux. */
.ap-pied-pros { margin: 0; text-align: center; font-size: 15px; }
.ap-pied-pros a { display: inline-flex; align-items: center; min-height: var(--zone-tactile); font-weight: 800; color: var(--accent-texte); }
@media (prefers-reduced-motion: reduce) { .ap-bascule, .ap-carte-devant, .ap-carte-derriere { transform: none; } .ap-faq summary .ic { transition: none; } }

/* Lot 3 de la revue des parcours : recherche de ligues (bouton sous le texte sous 480 px) et demandes en attente. */
.tl-carte { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.tl-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tl-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tl-action .bouton { min-height: var(--zone-tactile); padding: 0 18px; }
.tl-attente { font-size: 13px; }
.tl-retour { display: inline-flex; align-items: center; gap: 4px; min-height: var(--zone-tactile); color: var(--couleur-texte-secondaire); text-decoration: none; font-weight: 800; font-size: 14px; }
@media (max-width: 479px) {
  .tl-carte { flex-wrap: wrap; }
  .tl-texte { flex-basis: calc(100% - 66px); }
  .tl-action { flex-basis: 100%; align-items: stretch; }
  .tl-action .bouton { width: 100%; }
}
.lg-demande { background: var(--couleur-surface-2); box-shadow: none; }
.lg-demande { flex-wrap: wrap; }
.lg-demande .lg-texte { flex-basis: calc(100% - 58px); }
.lg-demande .bouton { flex-basis: 100%; min-height: var(--zone-tactile); padding: 0 14px; background: var(--couleur-surface); }

/* Clôture des pronos réglable (23 oct. 2026) : choix dans l'assistant de création et dans la page de gestion. */
/* Bareme personnalise incoherent (B4 du bilan du 25 oct. 2026) : message sous l'apercu de l'editeur. */
.erreur-points { margin-top: 12px; }
.cloture-options, .cloture-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cloture-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; }
.cloture-option > input[type="radio"] { margin-top: 4px; flex-shrink: 0; }
.cloture-option > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cloture-option.cloture-choisie { background: var(--accent-fond-leger); border-color: var(--accent); }
.cloture-option.cloture-grisee { opacity: 0.55; cursor: default; }
.cloture-aide { display: block; font-size: 13px; }
/* Support (30 oct. 2026) : Profil › Support, amélioration ou bug avec une capture d'écran (src/pages/support.js). */
.support-form { display: flex; flex-direction: column; gap: 12px; }
.support-intro { margin: 0; }
.support-choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.support-label { font-weight: 800; font-size: 15px; }
.support-texte { min-height: 140px; padding: 12px 16px; resize: vertical; }
.support-fichier { min-height: var(--zone-tactile); font: inherit; font-size: 15px; }
.support-apercu[hidden] { display: none; }
.support-apercu { display: block; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 16px; border: 1px solid var(--couleur-bordure); }
.cloture-actuelle { font-size: 14px; margin: 0 0 4px; }
.cloture-delai { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.cloture-delai input[type="number"] {
  width: 72px; height: var(--zone-tactile); border-radius: 12px; border: 1px solid var(--couleur-bordure-controle);
  padding: 0 10px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 16px; font-weight: 800;
}
.cloture-enregistrer { min-height: var(--zone-tactile); }
.cloture-erreur { color: var(--couleur-negatif); }

/* === SHARE, revue produit du 24 oct. 2026 (lots S1 a S6) : classes communes des pages Share === */
.bouton-salon { width: 100%; margin-bottom: 20px; }
.lien-salon { font-weight: 800; color: var(--accent-texte); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--zone-tactile); }
.match-carte-actions { display: inline-flex; align-items: center; gap: 10px; }
.match-carte-ton-club { font-weight: 800; }
.profil-bouton-message { flex: 1; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.menu-pc-marque { border-radius: 14px; padding: 10px 14px; text-decoration: none; }
.feuille-plus-note { margin: 0; font-size: 13px; }
.feuille-plus-note a { color: var(--accent-texte); font-weight: 800; }
.lien-retour-profil { display: inline-flex; align-items: center; gap: 6px; min-height: var(--zone-tactile); text-decoration: none; color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.page-share-matchs-titre { margin: 0 0 16px; }
/* Filtre des competitions de « Tous les matchs » (26 oct. 2026) : puce Filtre, titres de competition, fenetre. */
.fc-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--couleur-texte); background: var(--couleur-surface); color: var(--couleur-texte); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.fc-chip-nombre { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--couleur-surface-2); font-size: 12px; }
.fc-compet { margin: 14px 6px 8px; font-size: 15px; font-weight: 800; }
.fc-compet:first-of-type { margin-top: 0; }
.fc-compet[hidden] { display: none; }
.fc-fenetre { width: calc(100% - 32px); max-width: 520px; max-height: 85vh; padding: 0; border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); color: var(--couleur-texte); box-shadow: var(--ombre-flottante); }
.fc-fenetre[open] { display: flex; flex-direction: column; }
.fc-fenetre::backdrop { background: var(--voile); }
.fc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.fc-tete h2 { margin: 0; font-size: 18px; font-weight: 800; }
.fc-fermer { min-height: var(--zone-tactile); padding: 0 12px; border: 0; border-radius: 12px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.fc-onglets { display: flex; gap: 8px; padding: 0 20px 8px; }
.fc-onglets button { flex: 1; min-height: var(--zone-tactile); border: 1px solid var(--couleur-bordure); border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.fc-onglets button[aria-selected="true"] { border-color: transparent; background: var(--accent); color: var(--accent-encre); }
.fc-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 8px; }
.fc-famille { margin: 0 0 14px; padding: 0; border: 0; }
.fc-famille legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); text-transform: uppercase; letter-spacing: .04em; }
.fc-liste, .fc-poules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-poules { padding-left: 28px; }
.fc-poules[hidden] { display: none; }
.fc-case { display: flex; align-items: center; gap: 12px; min-height: var(--zone-tactile); font-size: 15px; cursor: pointer; }
.fc-case input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--accent); }
.fc-compte { font-size: 13px; }
.fc-groupe-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-deplier { flex-shrink: 0; min-height: var(--zone-tactile); padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: var(--accent-texte); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.fc-aide { margin: 0 0 10px; font-size: 13px; }
.fc-ordre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fc-ordre-ligne { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 14px; background: var(--couleur-surface-2); }
.fc-ordre-ligne[hidden] { display: none; }
.fc-ordre-nom { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
/* Glisser comme sur iPhone : poignee a trois traits (dessinee en CSS, pas une icone de bouton), ligne soulevee pendant le
   glisser ; Monter et Descendre ne s'affichent qu'au clavier. */
.fc-poignee { flex-shrink: 0; width: var(--zone-tactile); height: var(--zone-tactile); border-radius: 12px; cursor: grab; touch-action: none;
  background: linear-gradient(var(--couleur-texte-secondaire), var(--couleur-texte-secondaire)) center calc(50% - 6px) / 18px 2px no-repeat,
    linear-gradient(var(--couleur-texte-secondaire), var(--couleur-texte-secondaire)) center / 18px 2px no-repeat,
    linear-gradient(var(--couleur-texte-secondaire), var(--couleur-texte-secondaire)) center calc(50% + 6px) / 18px 2px no-repeat; }
.fc-glisse { position: relative; z-index: 2; box-shadow: var(--ombre-flottante); background: var(--couleur-surface); }
.fc-glisse .fc-poignee { cursor: grabbing; }
.fc-clavier:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fc-ordre-ligne { position: relative; user-select: none; -webkit-user-select: none; }
.fc-fleche { min-height: var(--zone-tactile); padding: 0 10px; border: 1px solid var(--couleur-bordure); border-radius: 12px; background: var(--couleur-surface); color: var(--couleur-texte); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.fc-message { min-height: 0; margin: 0; padding: 0 20px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.fc-message:empty { display: none; }
.fc-pied { display: flex; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--couleur-bordure); }
.fc-pied .bouton { flex: 1; }
.page-message-joueur { max-width: 520px; margin: 60px auto; padding: 0 20px; text-align: center; }
.page-message-joueur p { margin-bottom: 20px; }
.bloc-demandes-abonnement { padding: 20px 24px; margin-bottom: 20px; scroll-margin-top: 80px; }
.bloc-demandes-titre { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.vestiaire-share-tete { padding-bottom: 0; }
.titre-page-share { margin: 0 0 16px; }
.bandeau-match-etiquette { font-size: var(--taille-min); font-weight: 800; color: var(--couleur-texte-secondaire); white-space: nowrap; }
h1.salon-titre { margin: 0; }
.vestiaire-share-tete h1 { margin: 0 0 16px; }
.share-colonne.vestiaire-share-corps { padding-top: 0; }

/* === PAGE MATCH (24 oct. 2026, lot 1 des cinq points UX, src/pages/match.js) : une colonne, jetons seulement === */
.mt-page { max-width: 720px; margin: 0 auto; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: var(--espace-blocs); }
@media (min-width: 900px) { .mt-page { padding: 24px 0 40px; } }
.mt-retour { align-self: flex-start; margin-bottom: 0; }
.mt-petit { font-size: 13px; }
.mt-ligues { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.mt-ligues a { flex: none; display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 16px; border-radius: var(--rayon-pastille, 999px); background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.mt-ligues a.actif { background: var(--accent); color: var(--accent-encre); }
.mt-carte { gap: 12px; }
.mt-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--zone-tactile); }
.mt-equipes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.mt-equipe { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.mt-nom { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.mt-centre { font-size: 22px; font-weight: 800; }
.mt-quand { margin: 0; text-align: center; font-size: 16px; font-weight: 800; }
.mt-cloture { margin: 0; text-align: center; }
.mt-section { display: flex; flex-direction: column; gap: 10px; }
.mt-section h2 { margin: 0; font-size: 18px; font-weight: 800; }
.mt-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-section-tete .bouton { min-height: var(--zone-tactile); }
.mt-tuile { margin: 0; }
.mt-prono-fixe { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.mt-prono-score { font-size: 28px; font-weight: 800; }
.mt-ligue { gap: 10px; }
.mt-ligue-compte { margin: 0; font-size: 15px; font-weight: 800; }
.mt-barre { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--couleur-surface-2); appearance: none; -webkit-appearance: none; }
.mt-barre::-webkit-progress-bar { background: var(--couleur-surface-2); border-radius: 999px; }
.mt-barre::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.mt-barre::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
/* Buteurs (26 oct. 2026) : chaque but du cote de l'equipe a qui il profite, la minute vers le centre de la carte. */
.mt-buts { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mt-but { display: flex; align-items: baseline; gap: 10px; width: 100%; }
.mt-but-ext { flex-direction: row-reverse; text-align: right; }
.mt-but-minute { flex-shrink: 0; min-width: 44px; font-weight: 800; font-size: 14px; color: var(--couleur-texte-secondaire); }
.mt-but-ext .mt-but-minute { text-align: right; }
.mt-but-texte { display: flex; flex-direction: column; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
/* Compositions (26 oct. 2026) : terrain dessine (domicile en bas), puis schema, entraineur et remplacants de chaque equipe. */
.mt-compos { gap: 16px; }
.mt-terrain { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.mt-terrain-fond { fill: var(--couleur-surface-2); }
.mt-terrain-ligne { stroke: var(--couleur-bordure-controle); stroke-width: 0.3; }
.mt-joueur-rond { stroke-width: 0.35; }
/* Liseré autour de chaque joueur : un maillot de la couleur du terrain reste visible (clair et sombre). */
.mt-joueur-halo { fill: var(--couleur-bordure-controle); }
.mt-joueur-dom { fill: var(--marque); stroke: var(--couleur-surface); }
.mt-joueur-ext { fill: var(--couleur-texte); stroke: var(--couleur-surface); }
/* Tailles des numeros et des noms : attributs font-size du SVG (unites du terrain, au moins 12 px a 375 px). */
.mt-joueur-num { font-weight: 800; text-anchor: middle; }
.mt-joueur-num-dom { fill: var(--accent-encre); }
.mt-joueur-num-ext { fill: var(--couleur-fond); }
.mt-joueur-nom { font-weight: 800; text-anchor: middle; fill: var(--couleur-texte); }
.mt-sorti { opacity: .45; }
.mt-compos-equipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mt-compo-equipe h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.mt-compo-equipe h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.mt-compo-equipe p { margin: 0; }
.mt-compo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mt-compo-liste li { display: flex; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.mt-compo-num { flex-shrink: 0; min-width: 22px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.mt-pronos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.mt-pronos li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-pronos-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mt-salon .bouton-salon { margin-bottom: 0; min-height: var(--zone-tactile); }
.ms-voir-match { align-self: flex-end; display: inline-flex; align-items: center; min-height: var(--zone-tactile); color: var(--accent-texte); font-size: 14px; font-weight: 800; text-decoration: none; }

/* === BORDS DE L'APPLI SUR TELEPHONE (28 oct. 2026, demande de JEL) ===
   Le jeu a --bord-ecran (4 px) du bord : .contenu-principal le pose, rien ne le double. Les carrousels debordent
   d'autant pour defiler jusqu'au bord ; l'en-tete aligne ses icones sur les tuiles. */
@media (max-width: 899px) {
  .ms-rail, .ms-live-defile { margin: 0 calc(-1 * var(--bord-ecran)); padding-left: var(--bord-ecran); padding-right: var(--bord-ecran); }
  .mobile-header { padding-left: 0; padding-right: 0; }
  .mobile-header-wrap.entete-flottant { padding-left: var(--bord-ecran); padding-right: var(--bord-ecran); }
  .mt-page { padding-left: 0; padding-right: 0; }
  .mt-ligues { margin: 0 calc(-1 * var(--bord-ecran)); padding-left: var(--bord-ecran); padding-right: var(--bord-ecran); }
  /* Grandes tuiles de match : memes dimensions a l'accueil, dans la ligue et sur la page Match (ecussons de 56 px,
     scores de prono de 44 px comme le veut la charte, bouton de validation sur toute la largeur). */
  .carte-prochain { padding: 18px; --tuile-retrait: 18px; }
  .equipe-logo, .ms-ecusson { width: 56px; height: 56px; border-radius: 18px; font-size: 14px; }
  img.equipe-logo { padding: 0; }
  .score-big { font-size: 44px; width: 48px; }
  .prochain-footer .prono-edit-state, .prochain-footer .prono-saved-state { flex: 1 1 100%; min-width: 0; }
  .prono-edit-state .btn-valider-prono { width: 100%; }
  .prono-saved button { margin-left: auto; }
}
/* « Dernier match » de la ligue : la tuile seule, sans une carte autour (double cadre), sur telephone comme sur PC ;
   les matchs precedents dans leur propre carte. */
.carte-dernier.carte-dernier-tuile { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.carte-dernier-tuile > .dernier-precedents { margin-top: var(--espace-blocs); padding: 14px 18px; border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); }
@media (max-width: 899px) {
  /* Titres et notes poses hors d'une carte : alignes sur le texte des cartes, jamais colles au bord. */
  .ms-section, .carrousel-tete, .carte-dernier-tuile > .dernier-sub, .info-club .pub-barre, .ligue-note-gestion,
  .titre-page-mobile, .infos-ligue .lg-section > h2, .lg-quitter .texte-secondaire, .gestion-type-ligue, .profil-note-centre { padding-left: var(--retrait-texte); padding-right: var(--retrait-texte); }
  .ms-section, .pe-titre { margin-left: 0; margin-right: 0; }
  .mm-section h2, .pe-titre { margin-left: 0; padding-left: var(--retrait-texte); }
  .mm-entete, .mm-pied { margin-left: var(--retrait-texte); margin-right: 6px; }
  .mt-section > h2, .mt-section-tete, .mt-retour { padding-left: var(--retrait-texte); padding-right: var(--retrait-texte); }
  .cll-onglet > .tl-retour, .cll-onglet > .cll-titre, .cll-onglet > .cll-competitions { padding-left: var(--retrait-texte); padding-right: var(--retrait-texte); }
}

.profil-social-entete { padding-left: 24px; padding-right: 24px; }
/* Partie sociale bord a bord (telephone) : une publication, une liste de Share ou une conversation prend toute la
   largeur de l'ecran (separateurs, photos et video d'un bord a l'autre), son texte a --bord-ecran + --retrait-texte du
   bord. --saillie : distance entre le bord du conteneur et celui de l'ecran (ce qu'un element plein ecran deborde). */
@media (max-width: 899px) {
  .contenu-principal { --saillie: var(--bord-ecran); --retrait-social: calc(var(--bord-ecran) + var(--retrait-texte)); }
  .share-colonne, .page-messages, .page-notifications { padding-left: var(--retrait-texte); padding-right: var(--retrait-texte); --saillie: var(--retrait-social); }
  .ma-semaine .share-colonne { --saillie: var(--bord-ecran); }
  .post-fil, .post-officiel, .exp-liste, .ligne-conversation, .carte-reglage-dm, .notif-ligne, .profil-social-entete {
    margin-left: calc(-1 * var(--saillie)); margin-right: calc(-1 * var(--saillie));
    padding-left: var(--retrait-social); padding-right: var(--retrait-social);
  }
  .post-officiel, .exp-liste, .carte-reglage-dm { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .post-fil .galerie-photos, .post-officiel .galerie-photos, .post-fil .post-video, .post-officiel .post-video {
    margin-left: calc(-1 * var(--retrait-social)); margin-right: calc(-1 * var(--retrait-social)); width: auto; border-radius: 0;
  }
  .pulse-rangee, .exp-chips, .exp-defile { margin-left: calc(-1 * var(--saillie)); margin-right: calc(-1 * var(--saillie)); padding-left: var(--retrait-social); padding-right: var(--retrait-social); }
  .exp-defile { scroll-padding: 0 var(--retrait-social); }
  /* Les onglets restent a --bord-ecran, comme partout. */
  .onglets-messages { margin-left: calc(var(--bord-ecran) - var(--saillie)); margin-right: calc(var(--bord-ecran) - var(--saillie)); }
  .etat-vide-compact.pulse-vide { padding-left: calc(var(--retrait-social) - var(--saillie)); padding-right: calc(var(--retrait-social) - var(--saillie)); }
}

/* ---- Gazette du vestiaire (28 oct. 2026, docs/gazette.md) : page /gazette, désabonnement, réglage, derbys de Gestion ---- */
.gazette-page { max-width: 640px; width: 100%; padding-bottom: 100px; }
.gazette-entete { padding: 24px; margin-bottom: var(--espace-blocs); border-radius: var(--rayon-carte); background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.gazette-semaine { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.gazette-titre { margin: 0 0 12px; font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
/* 29 oct. 2026 : logo (ou initiales) de la ligue en tête, ligues officielles des clubs. */
.gazette-titre-ligne { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.gazette-titre-ligne .gazette-titre { margin: 0; min-width: 0; }
.gazette-logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.gazette-logo-initiales { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; background: var(--accent); color: var(--accent-encre); }
.gazette-officielle { display: flex; flex-direction: column; gap: 2px; min-height: var(--zone-tactile); padding: 8px 0; color: var(--couleur-texte); text-decoration: none; }
.gazette-officielle + .gazette-officielle { border-top: 1px solid var(--couleur-bordure); }
.gazette-officielle-club { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.gazette-ecusson { flex-shrink: 0; width: 20px; height: 20px; object-fit: contain; }
.gazette-legende-inline { font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.gazette-officielle .gazette-ligne { margin: 0; }
.gazette-texte { margin: 0; font-size: 16px; line-height: 1.5; }
.gazette-bloc .titre-section { margin-bottom: 10px; }
.gazette-phrase { margin: 0 0 var(--espace-blocs); }
.gazette-legende { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.gazette-citation { margin: 0; padding-left: 14px; border-left: 3px solid var(--accent); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.gazette-auteur { margin: 8px 0 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.gazette-match { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.gazette-ligne { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.gazette-prochain + .gazette-prochain { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--couleur-bordure); }
.gazette-bouton { width: 100%; margin-top: 10px; }
.gazette-lien { display: inline-flex; align-items: center; min-height: var(--zone-tactile); color: var(--accent-texte); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.gazette-autres, .gazette-historique { margin: 0; padding: 0; list-style: none; }
.gazette-reglage { margin: 8px 0 0; padding: 0 var(--retrait-texte); }
.gazette-desabo { max-width: 480px; margin: 48px auto; padding: 32px 24px; }
.gazette-desabo-titre { margin: 0 0 12px; font-size: 26px; font-weight: 800; }
.gazette-desabo-texte { margin: 0 0 20px; font-size: 16px; line-height: 1.5; }
.reglage-gazette { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); }
.reglage-gazette-titre { font-size: 15px; font-weight: 800; }
.reglage-gazette-aide { margin: 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.reglage-gazette .champ { background: var(--couleur-surface); }
#bloc-derbys { margin-bottom: var(--espace-blocs); }
.derby-aide { margin: 16px 0 8px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.derby-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--zone-tactile); padding: 12px 0; border-top: 1px solid var(--couleur-bordure); cursor: pointer; }
.derby-texte { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.derby-quand { font-size: 13px; color: var(--couleur-texte-secondaire); }
.derby-statut { margin: 8px 0 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.derby-statut:empty { display: none; }

/* === GAGES PARAMÉTRABLES (29 oct. 2026, src/pages/gages-reglages.js) : réglages de la Gestion, page Fin de saison, Accueil === */
.gg-entete { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gg-titre { margin: 0; font-size: 18px; font-weight: 800; }
.gg-intro, .gg-texte { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--couleur-texte-secondaire); }
.gg-texte { color: var(--couleur-texte); }
.gg-alerte { margin: 0 0 14px; border: 1px solid var(--couleur-or); font-weight: 800; }
.gg-modeles { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.gg-modele { display: flex; align-items: flex-start; gap: 12px; min-height: var(--zone-tactile); padding: 12px 14px; border: 1px solid var(--couleur-bordure-controle); border-radius: 16px; cursor: pointer; }
.gg-modele:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.gg-modele input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.gg-modele-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-modele-nom { font-size: 15px; font-weight: 800; }
.gg-modele-texte { font-size: 13px; line-height: 1.4; color: var(--couleur-texte-secondaire); }
.gg-apercu { display: block; margin-top: 8px; font-size: 13px; }
.gg-apercu[hidden] { display: none; }
.gg-apercu-titre { display: block; margin-bottom: 4px; font-weight: 800; }
.gg-apercu .gg-regles { font-size: 13px; gap: 2px; }
.gg-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 12px; }
.gg-grille[hidden], .gg-perso[hidden], .gg-champ[hidden], .gg-case[hidden] { display: none; }
.gg-champ { display: flex; flex-direction: column; min-width: 0; }
.gg-champ-large { margin-bottom: 12px; }
.gg-champ-titre { display: block; margin-bottom: 4px; padding: 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.gg-zone { min-height: 72px; padding: 12px 16px; resize: vertical; }
.gg-case { display: flex; align-items: center; gap: 10px; min-height: var(--zone-tactile); margin-bottom: 12px; font-size: 14px; }
.gg-case input { width: 20px; height: 20px; accent-color: var(--accent); }
.gg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gg-statut { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--couleur-texte-secondaire); }
.gg-sous-bloc { margin: -8px 0 var(--espace-blocs); }
.gg-lien { color: var(--accent-texte); font-weight: 800; text-decoration: none; }
.gg-modele-actuel { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.gg-regles { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.gg-mon-gage { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--accent-fond-leger); color: var(--accent-texte); font-size: 15px; font-weight: 800; line-height: 1.4; }
.gg-historique { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.gg-historique li { display: flex; flex-direction: column; gap: 2px; }
.gg-historique-quoi { font-size: 14px; font-weight: 800; }
.gg-historique-quand { font-size: 12px; color: var(--couleur-texte-secondaire); }
.gg-bandeau, .gg-accueil { gap: 4px; margin-bottom: var(--espace-blocs); }
.gg-bandeau { border-color: var(--couleur-or); }
.gg-bandeau-titre, .gg-accueil-surtitre { font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.gg-bandeau-texte { font-size: 15px; font-weight: 800; line-height: 1.4; }
.gg-accueil-texte { font-size: 16px; line-height: 1.4; }
.gg-accueil-lien { font-size: 14px; font-weight: 800; color: var(--accent-texte); }
.ga-textes { display: flex; flex-direction: column; gap: 16px; }
.ga-texte-titre { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 800; }
.ga-texte-aide { display: block; margin-top: 4px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.ga-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; }
.ga-chiffre { padding: 12px 14px; border-radius: 16px; background: var(--couleur-surface-2); }
.ga-chiffre dt { font-size: 12px; color: var(--couleur-texte-secondaire); }
.ga-chiffre dd { margin: 4px 0 0; font-size: 22px; font-weight: 800; }
.ga-apercu { margin-top: 16px; padding: 16px; border: 1px solid var(--couleur-bordure); border-radius: 16px; }
.ga-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ga-ligne .gg-champ { flex: 1 1 220px; }

/* === PAGES PUBLIQUES (30 oct. 2026, docs/pages-publiques.md) : /club, /competition, /match, saison, fiche match ; classes pp- === */
.pp-page { min-height: 100vh; }
/* .ap-page coupe le débord par overflow-x: hidden, qui empêcherait la barre de rester collée en haut : clip coupe sans cela. */
.ap-page.pp-page { overflow-x: clip; }
/* Barre fixe des pages publiques : retour, logo au centre, « Mon appli » (src/pages/publiques.js, barreNavPublique). */
.pp-barre-nav { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: var(--zone-tactile) minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 56px; padding: env(safe-area-inset-top, 0) max(12px, calc((100% - 1040px) / 2 + 12px)) 0; background: var(--couleur-fond); border-bottom: 1px solid var(--couleur-bordure); }
.pp-nav-retour { display: inline-flex; align-items: center; justify-content: center; width: var(--zone-tactile); height: var(--zone-tactile); border-radius: 50%; color: var(--couleur-texte); }
.pp-nav-retour:hover { background: var(--couleur-surface-2); }
.pp-nav-logo { justify-self: center; display: inline-flex; align-items: center; min-height: var(--zone-tactile); color: var(--couleur-texte); }
.pp-nav-logo svg { display: block; height: 28px; width: auto; max-width: 100%; }
.pp-nav-appli { min-height: var(--zone-tactile); padding: 0 14px; border-radius: 14px; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
/* Un lien vers une section (#classement, #prochain…) arrive sur son titre, pas sous la barre fixe. */
.pp-contenu [id] { scroll-margin-top: 72px; }
html:has(.pp-barre-nav) { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html:has(.pp-barre-nav) { scroll-behavior: smooth; } }
.pp-contenu { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--espace-blocs); }
.pp-ariane ol { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pp-ariane li + li::before { content: "›"; margin-right: 8px; }
.pp-ariane a { color: inherit; }
.pp-club, .pp-competition, .pp-match-page { display: flex; flex-direction: column; gap: var(--espace-blocs); min-width: 0; }
.pp-h1 { margin: 0; font-size: 32px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.pp-h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.2; font-weight: 800; }
.pp-h3 { margin: 12px 0 8px; font-size: 15px; font-weight: 800; }
.pp-carte { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); padding: 18px 16px; box-shadow: var(--shadow-card); min-width: 0; }
.pp-carte > p:last-child { margin-bottom: 0; }
.pp-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; width: 100%; box-sizing: border-box; padding: 8px 16px; text-align: center; text-decoration: none; font-weight: 800; min-width: 0; }
/* Texte sur une ligne, coupé par des points de suspension (noms de clubs, de stades, libellés de boutons). */
.pp-tronque { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bouton .pp-tronque { max-width: 100%; }
.pp-lien-suite { margin: 12px 0 0; font-size: 14px; font-weight: 800; }
.pp-lien-suite a, .pp-club-infos a, .pp-match-quand a, .pp-ligue-publique a, .pp-case a, .pp-prono-apres a:not(.bouton), .pp-alerte-page a { color: var(--accent-texte); font-weight: 800; }
.pp-lien-club { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.pp-lien-club:hover span { text-decoration: underline; }
.pp-ecusson { object-fit: contain; flex-shrink: 0; display: inline-block; }
.pp-ecusson-texte { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font-weight: 800; font-size: 12px; }
.pp-t20 { width: 20px; height: 20px; } .pp-t22 { width: 22px; height: 22px; } .pp-t24 { width: 24px; height: 24px; } .pp-t32 { width: 32px; height: 32px; }
.pp-t40 { width: 40px; height: 40px; } .pp-t48 { width: 48px; height: 48px; } .pp-t64 { width: 64px; height: 64px; } .pp-t96 { width: 96px; height: 96px; }
.pp-textes p { margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--couleur-texte-secondaire); }

/* En-tête d'un club : aux couleurs du club quand elles sont connues (bande de la couleur principale). */
.pp-club-entete { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; padding: 20px 16px; border-radius: var(--rayon-carte); background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.pp-aux-couleurs { border-top: 8px solid var(--club-p); box-shadow: inset 0 -4px 0 var(--club-s); }
.pp-club-titre { min-width: 0; }
.pp-club-infos { margin: 6px 0 0; font-size: 14px; color: var(--couleur-texte-secondaire); display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.pp-club-compteur { margin: 8px 0 0; font-size: 14px; }
.pp-partage { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pp-comp-entete { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }

/* Affiche d'un match (deux écussons, score ou tiret). */
.pp-affiche { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: inherit; text-decoration: none; margin: 8px 0 12px; font-size: 16px; font-weight: 800; }
.pp-affiche-eq { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.pp-affiche-eq > span, .pp-affiche-eq .pp-lien-club > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pp-affiche-eq .pp-lien-club { flex-direction: column; }
.pp-affiche-vs { font-size: 28px; color: var(--couleur-texte-secondaire); }
.pp-affiche-score { font-size: 44px; font-weight: 800; }
.pp-affiche-titre { margin: 8px 0 0; }
.pp-match-quand { margin: 0; font-size: 14px; color: var(--couleur-texte-secondaire); }
.pp-match-entete { text-align: center; padding: 8px 0; }
.pp-match-stade { margin: 4px 0 0; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow-wrap: anywhere; }
.pp-rang-club { font-size: 13px; font-weight: 500; }

/* Barre de tendance : trois segments, le résultat final coché et cerclé d'or. Jamais rouge (pas un résultat de prono). */
.pp-tendance { margin: 4px 0 0; }
.pp-barre { display: flex; height: 36px; border-radius: 12px; overflow: hidden; gap: 2px; }
.pp-seg { flex: 1 1 0; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: 800; }
.pp-seg-dom { background: var(--tendance-dom); color: var(--sur-tendance-dom); }
.pp-seg-nul { background: var(--tendance-nul); color: var(--sur-tendance-nul); }
.pp-seg-ext { background: var(--tendance-ext); color: var(--sur-tendance-ext); }
.pp-seg-gagnant { box-shadow: inset 0 0 0 3px var(--couleur-or); }
.pp-legendes { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pp-leg { flex: 1; text-align: center; overflow-wrap: anywhere; }
.pp-leg-dom { text-align: left; } .pp-leg-ext { text-align: right; }
.pp-leg-gagnant { color: var(--couleur-texte); font-weight: 800; }
.pp-tendance-pied, .pp-sous-seuil, .pp-exacts { margin: 8px 0 0; font-size: 14px; }
.pp-verdict { margin: 10px 0 0; font-size: 16px; font-weight: 800; }
.pp-buts { margin: 0 0 8px; font-size: 13px; text-align: center; }

/* Prono du visiteur (mêmes boutons + et − que l'appli). */
.pp-prono { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--couleur-bordure); display: flex; flex-direction: column; gap: 12px; }
.pp-prono-titre { margin: 0; font-weight: 800; }
.pp-prono-apres { display: flex; flex-direction: column; gap: 10px; }
.pp-prono-apres[hidden], .pp-erreur[hidden], .pp-message[hidden] { display: none; }
.pp-prono-merci { margin: 0; }
.pp-erreur { margin: 0; color: var(--couleur-negatif); font-weight: 800; font-size: 14px; }
.pp-connecte { margin: 16px 0 0; }

/* Forme : pastilles V, N, D (couleurs des résultats d'un club, toujours avec la lettre ; le score au survol ou au toucher). */
.pp-forme-details { container-type: inline-size; min-width: 0; }
.pp-forme-resume { display: flex; align-items: center; min-height: var(--zone-tactile); list-style: none; cursor: pointer; border-radius: 12px; }
.pp-forme-resume::-webkit-details-marker { display: none; }
/* Cinq pastilles sur une ligne : taille calculée sur la largeur du bloc, de 18 à 28 px (40 px en pleine largeur). */
.pp-forme { --pastille: clamp(18px, calc((100cqi - 16px) / 5), 28px); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; }
.pp-forme-grande .pp-forme { --pastille: clamp(18px, calc((100cqi - 32px) / 5), 40px); gap: 8px; }
.pp-pastille { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--pastille); width: var(--pastille); height: var(--pastille); border-radius: 50%; font-weight: 800; font-size: clamp(12px, calc(var(--pastille) * 0.48), 18px); line-height: 1; color: var(--sur-forme); }
.pp-pastille-v { background: var(--forme-victoire); }
.pp-pastille-n { background: var(--forme-nul); }
.pp-pastille-d { background: var(--forme-defaite); }
.pp-pastille-mini { --pastille: 20px; font-size: 12px; }
.pp-forme-scores { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pp-forme-scores li { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 2px 8px; }
.pp-forme-score { font-weight: 800; }
.pp-forme-adv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-forme-date { grid-column: 2 / -1; font-size: 12px; }
.pp-forme-aide { margin: 8px 0 0; font-size: 12px; }

/* Tableaux et listes. */
.pp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pp-classement-table { table-layout: fixed; }
.pp-table th { font-size: 12px; color: var(--couleur-texte-secondaire); font-weight: 800; padding: 6px 4px; border-bottom: 1px solid var(--couleur-bordure); text-align: center; }
.pp-table th abbr { text-decoration: none; }
.pp-table td { height: var(--zone-tactile); padding: 0 4px; border-bottom: 1px solid var(--couleur-bordure); white-space: nowrap; text-align: center; }
.pp-table tbody tr:nth-child(even) td { background: var(--ligne-zebre); }
.pp-c-pos { width: 32px; } .pp-c-logo { width: 30px; } .pp-c-pts { width: 40px; font-weight: 800; }
.pp-classement-table th:nth-child(n+4), .pp-classement-table td:nth-child(n+4) { width: 34px; }
.pp-classement-table th:nth-child(8), .pp-classement-table td:nth-child(8) { width: 42px; }
.pp-table .pp-c-nom { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.pp-c-nom a, .pp-c-nom span { display: block; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; line-height: var(--zone-tactile); }
.pp-c-nom a:hover { text-decoration: underline; }
.pp-c-logo .pp-ecusson { vertical-align: middle; }
/* Zones : filet de couleur à gauche de la position (avec la légende sous le tableau). */
.pp-zone-haut td:first-child { box-shadow: inset 4px 0 0 var(--zone-haut); }
.pp-zone-europe td:first-child { box-shadow: inset 4px 0 0 var(--zone-europe); }
.pp-zone-barrage td:first-child { box-shadow: inset 4px 0 0 var(--zone-barrage); }
.pp-zone-bas td:first-child { box-shadow: inset 4px 0 0 var(--zone-bas); }
.pp-zones { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pp-zones li { display: inline-flex; align-items: center; gap: 6px; }
.pp-zone-filet { display: inline-block; width: 4px; height: 14px; border-radius: 2px; }
.pp-zone-filet.pp-zone-haut { background: var(--zone-haut); } .pp-zone-filet.pp-zone-europe { background: var(--zone-europe); }
.pp-zone-filet.pp-zone-barrage { background: var(--zone-barrage); } .pp-zone-filet.pp-zone-bas { background: var(--zone-bas); }
/* Le club de la page, aux couleurs du club (variables posées sur .pp-club), sinon à l'accent. */
.pp-table tbody tr.pp-ligne-club td { background: color-mix(in srgb, var(--club-p, var(--accent)) 16%, var(--couleur-surface)); font-weight: 800; }
@media (max-width: 599px) { .pp-c-vnd { display: none; } }
.pp-liste { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pp-h2h { list-style: none; padding: 0; }
.pp-h2h li { display: flex; flex-direction: column; gap: 2px; }
.pp-chiffres { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-chiffres div { display: flex; justify-content: space-between; gap: 12px; }
.pp-chiffres dt { color: var(--couleur-texte-secondaire); font-size: 14px; }
.pp-chiffres dd { margin: 0; text-align: right; }
.pp-chiffres-grille { display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pp-compo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.pp-numero { display: inline-block; min-width: 24px; color: var(--couleur-texte-secondaire); }
.pp-compo-systeme, .pp-compo-coach { margin: 0 0 6px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pp-matchs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-match { padding: 12px 0; border-bottom: 1px solid var(--couleur-bordure); }
.pp-match:last-child { border-bottom: 0; }
.pp-match-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 800; font-size: 14px; min-height: var(--zone-tactile); }
.pp-match-eq { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.pp-match-eq > span:not(.pp-ecusson) { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; }
.pp-match-eq-ext { justify-content: flex-end; text-align: right; }
.pp-match-centre { font-size: 18px; text-align: center; }
.pp-heure { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); white-space: nowrap; }
.pp-heure .num { font-size: 14px; font-weight: 800; color: var(--couleur-texte); }
.pp-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* Rang, nom (tronqué), écusson seul, chiffre aligné à droite : mêmes colonnes pour les quatre listes. */
.pp-top-grille li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px 36px; align-items: center; column-gap: 10px; min-height: 40px; padding-right: 8px; border-bottom: 1px solid var(--couleur-bordure); }
.pp-top-grille li:last-child { border-bottom: 0; }
.pp-top-grille li:nth-child(even) { background: var(--ligne-zebre); }
.pp-rang { text-align: right; color: var(--couleur-texte-secondaire); font-weight: 800; font-size: 14px; }
.pp-top-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.pp-top-double li { min-height: 52px; }
.pp-top-double .pp-top-nom { display: flex; flex-direction: column; white-space: normal; }
.pp-top-double .pp-top-nom > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-top-double .pp-top-nom span { font-size: 12px; }
.pp-top-valeur { text-align: right; font-weight: 800; font-size: 14px; }
.pp-tops-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; }
@media (min-width: 600px) { .pp-tops-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pp-clubs-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pp-clubs-grille a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--couleur-surface-2); color: inherit; text-decoration: none; font-size: 14px; font-weight: 800; min-height: var(--zone-tactile); min-width: 0; }
.pp-clubs-compacts a { font-size: 13px; }
/* Noms de clubs : deux lignes au plus (coupés en fin de seconde ligne), jamais deux noms identiques une fois coupés. */
.pp-clubs-grille a > .pp-tronque { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }

/* Statistiques d'un match : deux valeurs et une barre. */
.pp-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-stat { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 4px 8px; font-size: 14px; }
.pp-stat > span:last-of-type:not(.pp-stat-barre) { text-align: right; }
.pp-stat-nom { text-align: center; color: var(--couleur-texte-secondaire); font-size: 13px; }
.pp-stat-barre { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; }
.pp-stat-dom, .pp-stat-ext { flex: 1 1 0; border-radius: 3px; }
.pp-stat-dom { background: var(--tendance-dom); } .pp-stat-ext { background: var(--tendance-ext); }
.pp-stats-tete { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; font-weight: 800; }

/* Pulses partagés avec le club : grille de photos et de vidéos, sans nom d'auteur. */
.pp-pulses-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-pulse { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-pulse-media { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: var(--couleur-surface-2); display: block; }
.pp-pulse-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pp-badge-certifie { background: var(--good-soft); color: var(--couleur-positif); }
.pp-signaler { margin-left: auto; min-height: var(--zone-tactile); padding: 0 6px; border: 0; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

.pp-boutons { display: flex; flex-direction: column; gap: 8px; }
.pp-alerte-form { display: flex; flex-direction: column; gap: 10px; }
.pp-case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; min-height: var(--zone-tactile); }
.pp-case input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.pp-message { margin: 0; font-size: 14px; font-weight: 800; }
.pp-partenaire { display: flex; flex-direction: column; gap: 6px; }
.pp-partenaire-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.pp-partenaire-marque { margin: 0; font-size: 12px; color: var(--couleur-texte-secondaire); font-weight: 800; }
.pp-partenaire-titre { margin: 0; font-size: 18px; font-weight: 800; }
.pp-partenaire-texte, .pp-partenaire-adresse { margin: 0; font-size: 14px; }
.pp-stade, .pp-ligue-ss { position: relative; overflow: hidden; }
.pp-pied-texte { margin: 0; text-align: center; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pp-pied-inscription { margin: 12px auto 0; max-width: 320px; }
.pp-alerte-page { padding-top: 32px; }
.pp-accueil-comps { gap: 16px; }
.pp-recherche-club { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pp-recherche-club .champ { width: 100%; min-height: var(--zone-tactile); }
.pp-recherche-resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pp-recherche-resultats[hidden], .pp-tuiles-comps[hidden], [data-pp-recherche-vide][hidden], .pp-recherche-resultats li[hidden] { display: none; }
.pp-recherche-resultats .pp-tuile-texte > .pp-tronque:first-child { font-weight: 800; }
.pp-recherche-resultats a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 14px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); color: inherit; text-decoration: none; min-width: 0; }
.pp-tuiles-comps { display: flex; flex-direction: column; gap: 8px; }
.pp-tuile-comp { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-tuile); min-width: 0; }
.pp-tuile-tete { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; list-style: none; cursor: pointer; border-radius: var(--rayon-tuile); }
.pp-tuile-tete::-webkit-details-marker { display: none; }
.pp-tuile-texte { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pp-tuile-nom { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tuile-pays { font-size: 13px; }
.pp-tuile-chevron { flex-shrink: 0; color: var(--couleur-texte-secondaire); transition: transform .2s ease; }
.pp-tuile-comp[open] > .pp-tuile-tete .pp-tuile-chevron { transform: rotate(180deg); }
.pp-tuile-corps { padding: 0 12px 14px; }
.pp-tuile-corps .pp-lien-suite { margin: 0 0 10px; }
@media (prefers-reduced-motion: reduce) { .pp-tuile-chevron { transition: none; } }

/* Bandeau défilant des chiffres (accueil public et accueil de l'appli) : petit texte, arrêt au toucher. */
.pp-bandeau { overflow: hidden; border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); background: var(--couleur-surface); }
.pp-bandeau-piste { display: flex; width: max-content; }
.pp-bandeau-liste { list-style: none; margin: 0; padding: 6px 0; display: flex; gap: 32px; padding-right: 32px; font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); white-space: nowrap; }
.pp-bandeau-liste li::before { content: "·"; margin-right: 12px; color: var(--couleur-or); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .pp-bandeau-piste { animation: pp-defile 40s linear infinite; }
  .pp-bandeau:hover .pp-bandeau-piste, .pp-bandeau.pp-arret .pp-bandeau-piste { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-bandeau-piste { width: auto; }
  .pp-bandeau-liste { flex-wrap: wrap; white-space: normal; gap: 4px 20px; padding: 6px 16px; }
  .pp-bandeau-liste[aria-hidden="true"] { display: none; }
}
@keyframes pp-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Fiche match de l'appli : feuille en bas sur téléphone (deux tiers de l'écran), panneau à droite sur PC. */
.fm-voile { position: fixed; inset: 0; z-index: 30; background: var(--voile); }
.fm-voile[hidden] { display: none; }
.fm-feuille { position: fixed; left: 0; right: 0; bottom: 0; height: 67vh; z-index: 31; background: var(--couleur-fond); border-radius: 24px 24px 0 0; box-shadow: var(--ombre-flottante); display: flex; flex-direction: column; overflow: hidden; }
.fm-feuille[hidden] { display: none; }
.fm-tete { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0 16px; touch-action: none; }
.fm-poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--couleur-bordure-controle); margin: 6px auto 0; }
.fm-fermer { width: var(--zone-tactile); height: var(--zone-tactile); border: 0; background: none; color: var(--couleur-texte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.fm-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 24px; display: flex; flex-direction: column; gap: var(--espace-blocs); }
.fm-chargement { padding: 32px 0; text-align: center; color: var(--couleur-texte-secondaire); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .fm-feuille { transition: transform .22s ease-out; }
  .fm-feuille.fm-entre { transform: translateY(100%); }
}
@media (min-width: 900px) {
  .fm-feuille { left: auto; top: 0; width: 440px; height: 100vh; border-radius: 24px 0 0 24px; }
  .fm-poignee { display: none; }
  @media (prefers-reduced-motion: no-preference) { .fm-feuille.fm-entre { transform: translateX(100%); } }
}
/* Indice discret sur les écussons et l'heure qui ouvrent la fiche match. */
.fm-ouvrir { border: 0; background: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; flex-direction: inherit; align-items: center; gap: inherit; border-radius: 10px; text-decoration: underline dotted var(--couleur-bordure-controle); text-underline-offset: 4px; }
.fm-ouvrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm-ouvrir-ecusson { text-decoration: none; padding-bottom: 3px; border-bottom: 2px dotted var(--couleur-bordure-controle); border-radius: 0; }

@media (min-width: 900px) {
  .pp-contenu { padding: 0 24px 64px; }
  .pp-h1 { font-size: 38px; }
  .pp-club-entete { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; padding: 28px; }
  .pp-club-infos { justify-content: flex-start; }
  .pp-partage { width: 220px; }
  .pp-club { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pp-club > .pp-club-entete, .pp-club > .pp-textes, .pp-club > .pp-prochain, .pp-club > .pp-pulses, .pp-club > .pp-boutons { grid-column: 1 / -1; }
  .pp-boutons { flex-direction: row; }
  .pp-boutons .pp-bouton { flex: 1; }
  .pp-pulses-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-chiffres-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pp-chiffres-grille div { flex-direction: column; }
  .pp-chiffres-grille dd { text-align: left; font-size: 20px; font-weight: 800; }
  .pp-affiche-score { font-size: 72px; }
}

/* === CONSOLE ADMIN (reorganisation du 16 oct. 2026) : cadre commun de pages/admin-cadre.js ===
   Menu lateral sur PC, menu repliable (details) sur mobile, fil d'Ariane, un seul h1. Prefixe adm-. */
.adm-cadre { display: flex; min-height: 100vh; }
.adm-lateral { display: none; }
.adm-principal { flex: 1; min-width: 0; }
.adm-entete { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; }
.adm-entete-marque { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--couleur-texte); text-decoration: none; font-size: 17px; }
.adm-marque-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; }
.adm-marque-logo svg { display: block; width: 28px; height: auto; }
.adm-entete-retour { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 800; color: var(--couleur-texte-secondaire); text-decoration: none; }
.adm-menu-mobile { margin: 0 16px 12px; border: 1px solid var(--couleur-bordure); border-radius: 18px; background: var(--couleur-surface); }
.adm-menu-mobile > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer; }
.adm-menu-mobile > summary::-webkit-details-marker { display: none; }
.adm-menu-mobile[open] > summary { border-bottom: 1px solid var(--couleur-bordure); }
.adm-menu-mobile-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.adm-menu-mobile-label { font-size: 12px; color: var(--couleur-texte-secondaire); }
.adm-menu-mobile .adm-nav { padding: 12px 8px 16px; }
.adm-contenu { max-width: 980px; padding: 4px 16px 120px; }
.adm-contenu-large { max-width: 1320px; }
.adm-ariane ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-ariane li + li::before { content: "\203A"; margin-right: 4px; }
.adm-ariane a { color: inherit; }
.adm-titre { margin: 0 0 16px; font-size: 28px; overflow-wrap: anywhere; }
.adm-intro { max-width: 760px; margin: -6px 0 20px; font-size: 14px; color: var(--couleur-texte-secondaire); }

/* Menu (le meme sur PC et sur mobile) */
.adm-nav { display: flex; flex-direction: column; gap: 4px; }
/* Theme repliable (26 oct. 2026) : le titre est la zone a toucher, sa pastille (total du theme) n'apparait que replie. */
.adm-nav-titre { display: flex; align-items: center; gap: 8px; min-height: var(--zone-tactile); margin: 0; padding: 0 12px; border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--couleur-texte-secondaire); cursor: pointer; list-style: none; }
.adm-nav-titre::-webkit-details-marker { display: none; }
.adm-nav-titre:hover { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.adm-nav-titre-texte { flex: 1; min-width: 0; }
.adm-nav-chevron { flex-shrink: 0; transition: transform .2s ease; }
.adm-nav-theme[open] > .adm-nav-titre .adm-nav-chevron { transform: rotate(180deg); }
.adm-nav-theme[open] > .adm-nav-titre .adm-nav-total { display: none; }
.adm-nav-theme[open] > .adm-nav-liste { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .adm-nav-chevron { transition: none; } }
.adm-nav-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.adm-nav-lien { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 14px; color: var(--couleur-texte); text-decoration: none; }
.adm-nav-lien:hover { background: var(--couleur-surface-2); }
.adm-nav-lien.actif { background: var(--accent-fond-leger); color: var(--accent-texte); font-weight: 800; }
.adm-nav-libelle { flex: 1; min-width: 0; }
.adm-nav-externe { display: inline-flex; color: var(--couleur-texte-secondaire); }
.adm-identite-alias { margin: 0 0 4px; font-weight: 800; }
.adm-nav-sensible { padding-top: 14px; border-top: 1px dashed var(--couleur-bordure); }
.adm-pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--couleur-negatif); color: var(--couleur-fond); font-size: 12px; font-weight: 800; line-height: 1; flex-shrink: 0; }

@media (min-width: 900px) {
  .adm-lateral { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; width: 280px; min-width: 280px; height: 100vh; overflow-y: auto; padding: 24px 16px; border-right: 1px solid var(--couleur-bordure); background: var(--couleur-fond); }
  .adm-entete { justify-content: flex-end; padding: 20px 40px 0; }
  .adm-entete-marque, .adm-entete-retour, .adm-menu-mobile { display: none; }
  .adm-contenu { padding: 0 40px 64px; }
  .adm-titre { font-size: 34px; }
}
.adm-marque { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; color: var(--couleur-texte); text-decoration: none; }
.adm-marque-texte { display: flex; flex-direction: column; line-height: 1.2; }
.adm-marque-texte strong { font-size: 17px; }
.adm-marque-texte span { font-size: 12px; color: var(--couleur-texte-secondaire); }
.adm-retour-appli { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-top: auto; padding: 0 14px; border: 1px solid var(--couleur-bordure); border-radius: 14px; background: var(--couleur-surface); color: var(--couleur-texte); font-size: 14px; font-weight: 800; text-decoration: none; }
.adm-retour-appli:hover { background: var(--couleur-surface-2); }

/* Cartes, textes */
.adm-carte { margin: 0 0 20px; padding: 20px; border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); box-shadow: var(--shadow-card); }
.adm-carte-titre { margin: 0 0 12px; font-size: 18px; }
.adm-sous-titre { margin: 18px 0 8px; font-size: 15px; }
.adm-carte-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.adm-carte-entete .adm-carte-titre { flex: 1; margin: 0; }
.adm-carte-tableau { padding: 20px 0 6px; }
.adm-carte-tableau > .adm-carte-entete, .adm-carte-tableau > .adm-carte-titre, .adm-carte-tableau > .adm-note, .adm-carte-tableau > .adm-vide { padding: 0 20px; }
.adm-carte-tableau > .adm-vide { padding-bottom: 14px; }
.adm-note { margin: 0 0 12px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-vide { margin: 0; font-size: 14px; color: var(--couleur-texte-secondaire); }
.adm-secondaire { font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-bloc { display: block; }
.adm-lien-fort { color: var(--couleur-texte); font-weight: 800; text-decoration: none; }
.adm-lien-fort:hover { text-decoration: underline; }

/* Champs et boutons de la console (zones de 44 px) */
.adm-recherche, .adm-champ, .adm-select { min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-bordure-controle); border-radius: 12px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 16px; }
.adm-recherche { width: 100%; max-width: 320px; }
/* Regie maison (M2) : banque Score & Share */
.adm-banque-onglets { flex-wrap: wrap; }
.adm-banque-form { flex-direction: column; align-items: stretch; gap: 14px; }
.adm-banque-champ { display: flex; flex-direction: column; }
.adm-banque-ligne { align-items: flex-start; }
.adm-banque-visuel { display: block; width: 180px; max-width: 40%; border-radius: 12px; }
.adm-banque-vide { display: flex; align-items: center; justify-content: center; min-height: 60px; background: var(--couleur-surface-2); font-size: 12px; color: var(--couleur-texte-secondaire); }
.adm-partenaire-form { flex-direction: column; align-items: stretch; gap: 14px; }
.adm-partenaire-actuel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; }
.adm-partenaire-logo { width: 40px; height: 40px; object-fit: contain; }
.adm-infos-club-ligne { flex-direction: column; align-items: flex-start; }
.adm-infos-club-ligne .adm-liste-texte { flex: none; width: 100%; }
.adm-infos-club-apercus { display: grid; gap: 8px; width: 100%; max-width: 520px; }
.adm-infos-club-apercus .info-club { margin: 0; }
.adm-select { padding: 0 10px; font-size: 14px; }
.adm-champ { flex: 1; min-width: 180px; }
.adm-champ.adm-champ-court { flex: 0 0 auto; width: 80px; min-width: 0; }
.adm-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; }
.adm-form-ligne { margin-top: 16px; }
.adm-form-champs { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-resultat { margin: 8px 0 0; font-size: 13px; }
.adm-resultat:empty { display: none; }
.adm-ok { color: var(--couleur-positif); }
.adm-erreur { color: var(--couleur-negatif); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-table .adm-actions { flex-wrap: nowrap; }
.adm-liste { margin: 0; padding: 0; list-style: none; }
.adm-liste-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-liste-ligne:first-child { border-top: 0; }
.adm-liste-texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.adm-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-bordure); border-radius: 12px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none; cursor: pointer; }
.adm-bouton:hover { border-color: var(--couleur-texte-secondaire); }
.adm-bouton[aria-pressed="true"] { border-color: transparent; background: var(--accent-fond-leger); color: var(--accent-texte); }
.adm-bouton:disabled { opacity: .5; cursor: not-allowed; }
.adm-bouton-danger { border-color: color-mix(in srgb, var(--couleur-negatif) 45%, transparent); background: transparent; color: var(--couleur-negatif); }
.adm-bouton-danger:hover { border-color: var(--couleur-negatif); }
.adm-zone-sensible { border-color: color-mix(in srgb, var(--couleur-negatif) 40%, var(--couleur-bordure)); }
.adm-zone-sensible .adm-carte-titre { color: var(--couleur-negatif); }
.adm-replis > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-bordure); border-radius: 12px; font-size: 13px; font-weight: 800; list-style: none; cursor: pointer; }
.adm-replis > summary::-webkit-details-marker { display: none; }
.adm-replis[open] > summary { background: var(--couleur-surface-2); }
.adm-replis-corps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Tableaux */
.adm-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th, .adm-table td { padding: 8px 12px; border-top: 1px solid var(--couleur-bordure); text-align: left; vertical-align: middle; }
.adm-table thead th { border-top: 0; font-size: 12px; font-weight: 800; color: var(--couleur-texte-secondaire); white-space: nowrap; }
.adm-table th:first-child, .adm-table td:first-child { padding-left: 20px; }
.adm-table th:last-child, .adm-table td:last-child { padding-right: 20px; }
.adm-table tbody th { font-weight: 800; }
.adm-table tr[hidden] { display: none; }
.adm-table .adm-centre { text-align: center; }
.adm-table .adm-droite { text-align: right; }
.adm-nowrap { white-space: nowrap; }
.adm-ligne-bannie { opacity: .55; }
.adm-ligne-total th, .adm-ligne-total td { font-weight: 800; }
.adm-tri { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
th[aria-sort="descending"] .adm-tri::after { content: " \2193"; }
th[aria-sort="ascending"] .adm-tri::after { content: " \2191"; }

/* Tableau de bord */
.adm-grille-2 { display: grid; gap: 0 20px; }
@media (min-width: 1100px) { .adm-grille-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.adm-liste-liens { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adm-lien-ligne { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 14px; font-weight: 800; text-decoration: none; }
.adm-lien-ligne:hover { background: var(--couleur-bordure); }
.adm-lien-grave { background: color-mix(in srgb, var(--couleur-negatif) 12%, transparent); color: var(--couleur-negatif); }
.adm-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0 0 8px; }
.adm-chiffre { padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); }
.adm-chiffre dt { font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-chiffre dd { margin: 2px 0 0; font-size: 26px; font-weight: 800; line-height: 1.1; }
.adm-chiffres-petits .adm-chiffre dd { font-size: 20px; }

/* Usage et activite */
.adm-segments { display: inline-flex; gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 14px; background: var(--couleur-surface-2); }
.adm-segment { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 10px; color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 800; text-decoration: none; }
.adm-segment.actif { background: var(--couleur-surface); color: var(--couleur-texte); }
.adm-courbe { display: flex; align-items: flex-end; gap: 2px; height: 120px; margin: 12px 0 6px; border-bottom: 1px solid var(--couleur-bordure); }
.adm-courbe-barre { flex: 1; min-width: 2px; height: var(--valeur, 0%); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.adm-journal { margin: 0; padding: 0; list-style: none; }
.adm-journal li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--couleur-bordure); font-size: 14px; }
.adm-journal li:first-child { border-top: 0; }
.adm-journal-quand { flex: none; width: 92px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-journal-quoi { min-width: 0; overflow-wrap: anywhere; }

/* Lot 2 (16 oct. 2026) : fiches, recherche et pages de la liste des utilisateurs, onglets d'un lien du menu */
.adm-infos { display: grid; gap: 10px; margin: 0 0 12px; }
@media (min-width: 640px) { .adm-infos { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; } }
.adm-info dt { font-size: 13px; color: var(--couleur-texte-secondaire); }
.adm-info dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.adm-form-recherche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-form-recherche .adm-recherche { flex: 1; min-width: 200px; }
.adm-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px 8px; }
.adm-onglets { margin-top: -4px; }

/* Revue UX du back office, chantier A (24 oct. 2026). Lot BO1 : la carte d'un contenu a valider passe a la ligne
   sur telephone (image fluide, texte et motif sur leur propre ligne). */
.adm-contenu-valider { align-items: flex-start; }
.adm-contenu-vignette { display: block; width: 300px; max-width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 12px; background: var(--couleur-surface-2); }
.adm-contenu-valider .adm-liste-texte { flex: 1 1 260px; }
.adm-contenu-valider .adm-champ { flex: 1 1 100%; }
/* Lot BO3 : « À traiter » dit depuis quand et colore selon l'echeance (neutre, proche a 4 h, depassee) ; l'etat du
   systeme replie en un voyant. */
.adm-tache-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 0; }
.adm-tache-meta { font-size: 12px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.adm-pastille-neutre { background: var(--couleur-texte); color: var(--couleur-fond); }
.adm-pastille-proche { background: var(--couleur-or); color: var(--couleur-sur-or); }
.adm-pastille-depassee { background: var(--couleur-negatif); color: var(--couleur-fond); }
.adm-tache-depassee .adm-tache-meta { color: var(--couleur-negatif); }
.adm-tache-proche .adm-tache-meta { color: var(--couleur-texte); }
.adm-sante > summary { list-style: none; cursor: pointer; }
.adm-sante > summary::-webkit-details-marker { display: none; }
.adm-sante-resume { display: flex; align-items: flex-start; gap: 12px; min-height: var(--zone-tactile); }
.adm-sante-resume::after { content: "Voir le détail"; margin-left: auto; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); white-space: nowrap; }
.adm-sante[open] .adm-sante-resume { margin-bottom: 14px; }
.adm-sante[open] .adm-sante-resume::after { content: "Replier"; }
/* Lot BO7 : formulaires de la console sans style en ligne (fiche createur, stades, grille de prix), filtres des
   utilisateurs, centre de moderation dans la console. */
.adm-form-pile { display: flex; flex-direction: column; gap: 12px; }
.adm-form-pile[hidden], .adm-stade[hidden] { display: none; }
.adm-form-grille { display: grid; gap: 12px 16px; margin: 0 0 12px; }
@media (min-width: 640px) { .adm-form-grille { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.adm-champ-bloc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-champ-bloc .adm-label { margin: 0; }
.adm-champ-bloc .adm-champ, .adm-champ-bloc .adm-select { width: 100%; min-width: 0; }
.adm-champ-bloc .adm-champ-court { width: 120px; }
.adm-case { display: flex; align-items: center; gap: 10px; min-height: var(--zone-tactile); margin: 0 0 8px; font-size: 14px; }
.adm-case input { width: 20px; height: 20px; flex-shrink: 0; }
.adm-actions-pied { padding: 12px 20px 8px; }
.adm-filtres { margin: 0 0 12px; padding: 0 20px; }
.adm-carte:not(.adm-carte-tableau) > .adm-filtres { padding: 0; }
.adm-filtres .adm-recherche { flex: 1 1 220px; max-width: none; }
.adm-suggestions { display: flex; flex-direction: column; gap: 2px; }
.adm-suggestions:empty { display: none; }
.adm-suggestion { min-height: var(--zone-tactile); padding: 0 12px; border: 0; border-radius: 12px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.adm-encart { margin: 0 0 20px; padding: 12px 16px; border-radius: 16px; background: var(--couleur-surface-2); font-size: 14px; }
/* Reglages en lignes (carte « Direct pendant les matchs », 26 oct. 2026) : libelle a gauche, champ de largeur fixe a droite ;
   sur un ecran etroit, le champ passe sous le libelle. */
.adm-reglages { display: flex; flex-direction: column; margin: 0 0 8px; }
.adm-reglage { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-reglage:first-child { border-top: 0; }
.adm-reglage-libelle { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; font-size: 14px; }
.adm-reglage-controle.adm-champ, .adm-reglage-controle.adm-select { flex: 0 0 180px; width: 180px; min-width: 0; box-sizing: border-box; }
@media (max-width: 480px) { .adm-reglage-controle.adm-champ, .adm-reglage-controle.adm-select { flex-basis: 100%; width: 100%; } }
.adm-reglages-pied { margin-top: 8px; }
/* Ajout d'une competition : le numero et « Verifier » sur la meme ligne ; competition desactivee estompee. */
.adm-ajout-verif { display: flex; gap: 8px; flex: 0 1 auto; }
.adm-ajout-verif .adm-reglage-controle.adm-champ { flex: 0 0 120px; width: 120px; }
.adm-competition-inactive strong { color: var(--couleur-texte-secondaire); }
.adm-grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.adm-champ.adm-champ-nombre { flex: 0 0 auto; width: 120px; min-width: 0; }
.adm-ligne-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.adm-ligne-champs .adm-liste-texte { flex: 1 1 200px; }
.adm-lignes-dynamiques { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.adm-palier-dernier { min-width: 120px; padding-bottom: 12px; }
.adm-version { padding: 10px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-version:first-child { border-top: 0; }
.adm-version .adm-liste-ligne { padding: 0; border: 0; }
.adm-version-note { margin: 4px 0 0; font-size: 14px; }
.adm-version-details { margin-top: 6px; font-size: 13px; }
.adm-version-details > summary { min-height: var(--zone-tactile); display: flex; align-items: center; color: var(--couleur-texte-secondaire); font-weight: 800; cursor: pointer; }
.adm-version-details p { margin: 4px 0 0; }
.adm-signalement { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-signalement:first-child { border-top: 0; }
.adm-signalement p { margin: 0; font-size: 14px; }
.adm-signalement-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.adm-citation { padding: 10px 14px; border-radius: 12px; background: var(--couleur-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-signalement-contexte > summary { min-height: var(--zone-tactile); display: flex; align-items: center; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); cursor: pointer; }
.adm-signalement-contexte p { padding: 3px 0; font-size: 13px; }
.adm-contexte-signale { font-weight: 800; }
.adm-actions-graves { padding-top: 8px; border-top: 1px dashed var(--couleur-bordure); }
/* Lot BO5 : composant de decision commun (Valider en principal, Refuser qui deplie les motifs et le texte envoye),
   message apres la decision, session de decision ouverte, cartes de demande. */
.adm-bouton.adm-bouton-principal { border-color: transparent; background: var(--accent); color: var(--accent-encre); }
.adm-bouton.adm-bouton-principal:hover { border-color: transparent; opacity: .92; }
.adm-decision { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.adm-decision-refus { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-surface-2); }
.adm-decision-refus[hidden], .adm-decision-boutons[hidden], .adm-decision-fait[hidden] { display: none; }
.adm-decision-motifs { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; }
.adm-decision-motifs legend { margin-bottom: 4px; }
.adm-decision-motifs .adm-case { margin: 0; align-items: flex-start; padding: 10px 0 0; min-height: var(--zone-tactile); }
.adm-decision-precision { min-height: 72px; padding: 10px 14px; resize: vertical; }
.adm-decision-apercu { padding: 10px 14px; border-left: 3px solid var(--couleur-bordure-controle); background: var(--couleur-surface); border-radius: 0 12px 12px 0; }
.adm-decision-apercu p { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.adm-decision-fait { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--good-soft); color: var(--couleur-positif); font-size: 14px; font-weight: 800; }
.adm-decision-faite > :not(.adm-decision):not(.adm-decision-fait) { opacity: .6; }
.adm-demande { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-demande:first-child { border-top: 0; }
.adm-demande p { margin: 0; font-size: 14px; }
/* Support (30 oct. 2026) : retours des joueurs (src/pages/admin-retours.js). */
.adm-demande .adm-retour-texte { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-retour-capture img { display: block; max-width: min(100%, 360px); height: auto; border-radius: 12px; border: 1px solid var(--couleur-bordure); }
.adm-retrait { margin-top: 4px; }
.adm-retrait > .adm-note { margin-top: 10px; }
.adm-collab-decision { width: 100%; margin: 4px 0 8px; }
.adm-motif { align-items: center; }
.adm-motif .adm-case { margin: 0; }
.adm-session-decision { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: var(--accent-fond-leger); color: var(--couleur-texte); font-size: 14px; }
.adm-session-decision[hidden] { display: none; }
.adm-secondaire a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Lot BO4 : la boite de travail (une ligne par tache, filtres par type, a la chaine). */
.adm-filtres-taches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.adm-filtre-tache { display: inline-flex; align-items: center; gap: 8px; min-height: var(--zone-tactile); padding: 0 14px; border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 13px; font-weight: 800; text-decoration: none; }
.adm-filtre-tache.actif { border-color: transparent; background: var(--accent-fond-leger); color: var(--accent-texte); }
.adm-taches { margin: 0; padding: 0; list-style: none; }
.adm-tache { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--couleur-bordure); }
.adm-tache:first-child { border-top: 0; }
.adm-tache p { margin: 0; font-size: 14px; }
.adm-tache-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.adm-tache-tete .adm-pastille { width: 12px; min-width: 12px; height: 12px; padding: 0; }
.adm-tache-objet { font-size: 15px; overflow-wrap: anywhere; }
.adm-tache-faite { opacity: .7; }
.adm-tache-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.adm-etat-vide { padding: 24px 16px; border-radius: 16px; background: var(--couleur-surface-2); text-align: center; }
.adm-etat-vide p { margin: 0; }
.adm-etat-vide-titre { margin-bottom: 4px; font-size: 17px; font-weight: 800; }
/* Onglets d'un lien du menu (Reglages de la regie : 5 onglets) : ils passent a la ligne au lieu de deborder. */
.adm-onglets { display: flex; flex-wrap: wrap; max-width: 100%; }
.adm-onglets .adm-segment { white-space: nowrap; }
.moderation-page { max-width: 900px; width: 100%; padding: 0 16px 80px; }
.moderation-titre { margin: 24px 0; font-size: 28px; }

/* ===== BILAN D'OUVERTURE (lot 3, src/pages/bilan.js) ===== */
.bilan { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background: var(--couleur-fond); color: var(--couleur-texte); outline: none; }
.bilan[hidden] { display: none; }
.bilan-barres { display: flex; gap: 4px; }
.bilan-barre { flex: 1; height: 3px; border-radius: 2px; background: var(--couleur-bordure); }
.bilan-barre.fait { background: var(--couleur-texte); }
.bilan-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bilan-compteur { font-size: 13px; color: var(--couleur-texte-secondaire); }
.bilan-passer { min-height: 44px; padding: 0 18px; border: none; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.bilan-scene { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.bilan-scene canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.bilan-zone { position: absolute; top: 0; bottom: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bilan-zone.gauche { left: 0; width: 35%; }
.bilan-zone.droite { right: 0; width: 65%; }
.bilan-formats { display: flex; gap: 8px; }
.bilan-formats[hidden] { display: none; }
.bilan-formats button { flex: 1; min-height: 44px; border: none; border-radius: 14px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.bilan-formats button.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
.bilan-erreur { margin: 0; font-size: 14px; color: var(--couleur-negatif); text-align: center; }
.bilan-erreur[hidden] { display: none; }
.bilan-actions { display: flex; gap: 10px; }
.bilan-actions .bouton { flex: 1; }
.bilan-actions .bouton[hidden] { display: none; }
@media (min-width: 768px) { .bilan { padding-left: max(32px, calc((100% - 560px) / 2)); padding-right: max(32px, calc((100% - 560px) / 2)); } }

/* PAGES JURIDIQUES */
.page-legale { padding-top: 20px; padding-bottom: 40px; }
.page-legale-retour { margin: 0 0 12px; }
.page-legale-corps { line-height: 1.6; }
.page-legale-corps h2 { font-size: 18px; margin: 24px 0 8px; }
.page-legale-corps ul { padding-left: 20px; margin: 8px 0; }
.page-legale-corps li { margin-bottom: 6px; }
.page-legale-liens { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--couleur-bordure); font-size: 14px; }
.liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 12px 0 0; font-size: 13px; }
.liens-legaux a { color: var(--couleur-texte-secondaire); min-height: 24px; }

/* Audit du 20 oct. 2026 (A1) : lien d'evitement, invisible tant qu'il n'a pas le focus clavier. */
.lien-evitement { position: absolute; left: 8px; top: -100px; z-index: 10000; padding: 10px 16px; border-radius: 12px; background: var(--couleur-surface); color: var(--couleur-texte); border: 2px solid var(--accent); font-weight: 800; text-decoration: none; }
.lien-evitement:focus, .lien-evitement:focus-visible { top: calc(8px + env(safe-area-inset-top, 0px)); }
#contenu:focus { outline: none; }

/* ===== ESPACE PRO : portail annonceur et console club (lots A a 7, 20 oct. 2026) =====
   Gabarits de src/pages/annonceur.js, src/pages/club-console.js, src/pages/editeur-visuel.js. Prefixe pro-,
   variables de couleur seulement (theme clair et sombre), zones cliquables de 44 px au moins. */
.pro-cadre { max-width: 1040px; margin: 0 auto; padding: 0 16px 96px; }
.pro-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--couleur-bordure); margin-bottom: 20px; }
.pro-marque { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--couleur-texte); text-decoration: none; }
.pro-marque strong { font-size: 17px; }
.pro-marque span { display: block; font-size: 12px; color: var(--couleur-texte-secondaire); }
.pro-marque img { width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; border-radius: 8px; }
/* Chantier B (BO11) : en-tete pro commun ; sans ecusson ni logo d'espace, l'icone de la marque (kit). */
.pro-marque-logo { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; }
.pro-marque-logo svg { display: block; width: 30px; height: auto; }
/* Chantier B (BO8, BO11) : le menu sur sa propre ligne sous la marque, le retour et le theme, a toutes les largeurs
   (la console du club a huit entrees : sur la meme ligne, le bouton de theme passait seul a la ligne a 1366 px). */
.pro-nav { display: flex; flex-wrap: wrap; gap: 4px; order: 3; flex: 1 0 100%; }
.pro-nav a, .pro-nav button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; }
.pro-nav a:hover, .pro-nav button:hover { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.pro-nav a.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
@media (max-width: 640px) { .pro-entete { flex-wrap: wrap; } .pro-nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; } .pro-nav a, .pro-nav button { flex-shrink: 0; white-space: nowrap; } }
/* Chantier B (BO2) : « Retour a l'appli » hors du menu qui defile, toujours visible a cote du bouton de theme. */
.pro-retour-appli { display: inline-flex; align-items: center; min-height: var(--zone-tactile); padding: 0 12px; border-radius: 12px; color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.pro-retour-appli:hover { background: var(--couleur-surface-2); color: var(--couleur-texte); }
.pro-retour-form { display: inline-flex; margin: 0; }
button.pro-retour-appli { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
@media (max-width: 640px) { .pro-entete { column-gap: 8px; } .pro-marque { flex: 1 1 auto; min-width: 0; } .pro-marque > span { min-width: 0; } .pro-marque strong, .pro-marque > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pro-retour-appli { padding: 0 8px; } }
.pro-titre { margin: 0 0 6px; font-size: 28px; }
.pro-intro { margin: 0 0 20px; color: var(--couleur-texte-secondaire); font-size: 15px; max-width: 720px; }
.pro-carte { margin: 0 0 16px; padding: 20px; border: 1px solid var(--couleur-bordure); border-radius: 24px; background: var(--couleur-surface); box-shadow: var(--shadow-card); }
.pro-carte h2 { margin: 0 0 12px; font-size: 18px; }
.pro-carte h3 { margin: 16px 0 8px; font-size: 15px; }
.pro-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .pro-grille { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } .pro-collant { position: sticky; top: 16px; } }
.pro-champs { display: grid; gap: 14px; }
.pro-champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; }
.pro-champ .champ, .pro-champ select { font-weight: 500; }
.pro-champ select { min-height: var(--hauteur-champ, 52px); padding: 0 14px; border-radius: var(--rayon-bouton); border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 16px; }
.pro-aide { margin: 0; font-size: 13px; font-weight: 500; color: var(--couleur-texte-secondaire); }
.pro-deux { display: grid; gap: 14px; }
@media (min-width: 640px) { .pro-deux { grid-template-columns: 1fr 1fr; } }
.pro-contenu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--couleur-bordure); }
.pro-contenu-vignette { width: 150px; max-width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 10px; background: var(--couleur-surface-2); }
.pro-sous-titre { margin: 8px 0 0; font-size: 16px; font-weight: 800; }
.pro-cases { display: flex; flex-direction: column; gap: 6px; }
.pro-case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; }
.pro-case input { width: 20px; height: 20px; flex-shrink: 0; }
.pro-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
/* Console club, onglet Scores (point 4 de la revue produit). */
.sc-score { font-size: 22px; font-weight: 800; }
.sc-boutons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.sc-boutons .bouton { min-height: var(--zone-tactile); padding: 0 14px; }
.sc-champ { width: 72px; min-height: var(--zone-tactile); text-align: center; }
.sc-dialog { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); background: var(--couleur-surface); color: var(--couleur-texte); padding: 20px; }
.sc-dialog::backdrop { background: var(--voile); }
.pro-resultat { margin: 8px 0 0; font-size: 14px; }
.pro-resultat:empty { display: none; }
.pro-erreur { color: var(--couleur-negatif); }
.pro-ok { color: var(--couleur-positif); }
.pro-retour { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--couleur-texte-secondaire); font-weight: 800; text-decoration: none; }
.pro-retour:hover { color: var(--couleur-texte); }
.pro-retour svg { width: 18px; height: 18px; }
.pro-note { margin: 0 0 12px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-prix { margin: 4px 0; font-size: 32px; font-weight: 800; line-height: 1.1; }
.pro-prix-ttc { font-size: 15px; color: var(--couleur-texte-secondaire); }
.pro-lignes { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--couleur-bordure); }
.pro-lignes li:first-child { border-top: 0; }
.pro-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.pro-suggestions:empty { display: none; }
.pro-puce { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--couleur-bordure); border-radius: 999px; background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.pro-puce-choisie { background: var(--accent-fond-leger); color: var(--accent-texte); border-color: transparent; }
.pro-liste { margin: 0; padding: 0; list-style: none; }
.pro-liste > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--couleur-bordure); }
.pro-liste > li:first-child { border-top: 0; }
.pro-liste-texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pro-liste-texte a { color: var(--couleur-texte); font-weight: 800; text-decoration: none; }
.pro-liste-texte a:hover { text-decoration: underline; }
.pro-secondaire { font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-secondaire a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Chantier B (BO10) : la frise d'etat se lit comme un parcours (numero et trait), sans air d'onglet cliquable. */
.pro-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: etape; }
.pro-etapes li { display: inline-flex; align-items: center; gap: 6px; color: var(--couleur-texte-secondaire); font-size: 13px; font-weight: 500; cursor: default; counter-increment: etape; }
.pro-etapes li::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--couleur-bordure-controle); border-radius: 50%; font-size: 12px; font-weight: 800; }
.pro-etapes li:not(:last-child)::after { content: ""; width: 14px; height: 1px; margin: 0 6px; background: var(--couleur-bordure-controle); }
.pro-etapes li.fait { color: var(--couleur-texte); }
.pro-etapes li.fait::before { border-color: transparent; background: var(--good-soft); color: var(--couleur-positif); }
.pro-etapes li.actuelle { color: var(--couleur-texte); font-weight: 800; }
.pro-etapes li.actuelle::before { border-color: transparent; background: var(--accent); color: var(--accent-encre); }
/* BO10 : « Fin » seulement pour « Dates libres » (la classe .pro-champ en flex l'emportait sur hidden) ; ou apparait
   chaque emplacement. */
.pro-champ[hidden] { display: none; }
.pro-details { font-size: 13px; }
.pro-details summary { display: inline-flex; align-items: center; min-height: var(--zone-tactile); color: var(--accent-texte); font-weight: 800; cursor: pointer; }
.pro-emplacements { display: grid; gap: 8px; margin: 4px 0 0; }
.pro-emplacements dt { font-weight: 800; color: var(--couleur-texte); }
.pro-emplacements dd { margin: 0; color: var(--couleur-texte-secondaire); }
/* Chantier « Match présenté par », lot 4 : parcours en étapes du portail annonceur (mobile d'abord) */
.pro-etape[hidden] { display: none; }
.pro-etape h2 { margin: 0 0 12px; font-size: 18px; }
.pro-etape h2:focus { outline: none; }
.pro-etape h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pro-produits, .pro-emplacements-cartes, .pro-matchs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .pro-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pro-emplacements-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-produit, .pro-emplacement-carte, .pro-match { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--couleur-bordure-controle); border-radius: 20px; background: var(--couleur-surface); cursor: pointer; }
.pro-produit input, .pro-emplacement-carte input, .pro-match input { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; }
.pro-produit:has(input:checked), .pro-emplacement-carte:has(input:checked), .pro-match:has(input:checked) { border: 2px solid var(--accent); }
.pro-produit:has(input:focus-visible), .pro-emplacement-carte:has(input:focus-visible), .pro-match:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pro-produit-titre, .pro-emplacement-titre, .pro-match-equipes { padding-right: 32px; font-size: 16px; font-weight: 800; }
.pro-produit-prix, .pro-match-prix { font-weight: 800; color: var(--couleur-texte); }
.pro-produit-discret { margin-top: 12px; background: var(--couleur-surface-2); }
.pro-match-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pro-match-pris { cursor: not-allowed; background: var(--couleur-surface-2); }
.pro-match-pris .pro-match-equipes { color: var(--couleur-texte-secondaire); }
.pro-emplacement-carte .pro-apercu-cadre { pointer-events: none; }
.pro-devis-simple { display: grid; gap: 6px; margin: 8px 0; font-size: 14px; }
.pro-devis-simple div { display: flex; justify-content: space-between; gap: 12px; }
.pro-devis-simple dt { color: var(--couleur-texte-secondaire); }
.pro-devis-simple dd { margin: 0; font-weight: 800; }
.pro-navigation-etapes { justify-content: space-between; }
.pro-alerte { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--couleur-negatif) 12%, transparent); color: var(--couleur-texte); font-size: 14px; }
.pro-info { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: var(--accent-fond-leger); color: var(--couleur-texte); font-size: 14px; }
.pro-info a, .pro-avertissement a { color: var(--accent-texte); font-weight: 800; }
.pro-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0 0 12px; }
.pro-chiffre { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); }
.pro-chiffre dt { font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-chiffre dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; }
.pro-chiffre dd.pro-secondaire { font-size: 13px; font-weight: 500; }
/* Chantier B (BO9) : tuiles de chiffres lisibles a 375 px (deux colonnes serrees, chiffre plus petit) ; une tuile qui
   porte un texte (date, nom du club, « moins de 10 ») passe en .pro-chiffre-texte. */
.pro-chiffre-texte dd { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pro-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pro-chiffre { padding: 12px; }
  .pro-chiffre dd { font-size: 20px; }
  .pro-chiffre-texte dd { font-size: 15px; }
}
.pro-liste > li[hidden] { display: none; }
/* Chantier B (BO8) : une carte repliee (« Vos droits » de la console du club), son titre est la zone a toucher. */
.pro-replie summary { display: flex; align-items: center; min-height: var(--zone-tactile); font-size: 18px; font-weight: 800; cursor: pointer; }
.pro-replie[open] summary { margin-bottom: 8px; }
/* Les quatre rubriques d'une ligue de l'espace createur tiennent a l'ecran sur telephone (deux par ligne). */
@media (max-width: 480px) { .pro-onglets.pro-rubriques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-demande { flex: 1; min-width: 0; }
.pro-pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-encre); font-size: 12px; font-weight: 800; }
/* Audience d'une ligue dans l'espace createur (point 3 de la revue produit) : arrivees par jour sur 30 jours. */
.aud-arrivees { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin: 0 0 12px; padding: 0 2px; border-bottom: 1px solid var(--couleur-bordure); }
.aud-barre { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent); }
.aud-h-0 { height: 2px; background: var(--couleur-bordure); }
.aud-h-1 { height: 10%; } .aud-h-2 { height: 20%; } .aud-h-3 { height: 30%; } .aud-h-4 { height: 40%; } .aud-h-5 { height: 50%; }
.aud-h-6 { height: 60%; } .aud-h-7 { height: 70%; } .aud-h-8 { height: 80%; } .aud-h-9 { height: 90%; } .aud-h-10 { height: 100%; }
.pro-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pro-table th, .pro-table td { padding: 8px 10px; border-top: 1px solid var(--couleur-bordure); text-align: left; }
.pro-table thead th { border-top: 0; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-table .pro-droite { text-align: right; }
.pro-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pro-coordonnees { margin: 8px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); font-size: 14px; }
.pro-coordonnees dt { font-size: 12px; color: var(--couleur-texte-secondaire); }
.pro-coordonnees dd { margin: 0 0 8px; font-weight: 800; overflow-wrap: anywhere; }
.pro-visuel { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.pro-visuel img { width: 200px; max-width: 100%; border-radius: 12px; }
.pro-pied { margin-top: 32px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.pro-pied a { color: var(--couleur-texte-secondaire); }
/* Points d'entree des pros (27 oct. 2026) : vitrine /pros et demande d'un club /pros/club (src/pages/pros.js). */
.pros-haut { margin: 0 0 20px; padding: 24px 0 8px; border-radius: 24px; }
.pros-titre { font-size: 32px; }
@media (min-width: 900px) { .pros-titre { font-size: 38px; } }
.pros-portes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .pros-portes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pros-porte { margin: 0; display: flex; flex-direction: column; scroll-margin-top: 16px; }
.pros-porte .pro-actions { margin-top: auto; padding-top: 16px; }
.pros-points { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.pros-champs { grid-template-columns: minmax(0, 1fr); }
.pros-champs select, .pros-champs .champ { width: 100%; min-width: 0; font-weight: 500; }
.pros-champs .pro-note { margin: 0; font-weight: 500; }
.pros-cases { margin: 0; padding: 0; border: 0; min-width: 0; }
.pros-pied-liens { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pros-pied-liens a { display: inline-flex; align-items: center; min-height: var(--zone-tactile); }
/* Kit du promoteur (point 2 de la revue produit) : rubriques d'une ligue, lien et QR code, textes a coller. */
.pro-onglets { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; border-radius: 16px; background: var(--couleur-surface-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pro-onglets a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.pro-onglets a:hover { color: var(--couleur-texte); }
.pro-onglets a.actif { background: var(--couleur-surface); color: var(--accent-texte); box-shadow: var(--shadow-card); }
.promo-lien { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.promo-qr { flex-shrink: 0; padding: 8px; border-radius: 16px; background: var(--couleur-surface-2); }
.promo-qr svg { display: block; width: 164px; height: 164px; border-radius: 10px; }
.promo-lien-texte { flex: 1; min-width: min(100%, 240px); }
.promo-adresse { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.promo-textes { display: grid; gap: 20px; }
@media (min-width: 900px) { .promo-textes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.promo-texte h3 { margin: 0 0 4px; }
.promo-pre { margin: 8px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--couleur-surface-2); font: inherit; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.promo-texte .pro-actions { margin-top: 10px; }
.promo-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
/* Un bouton cache par l'attribut hidden : la classe .bouton (inline-flex) l'emporterait sinon. */
.promo-texte .bouton[hidden], .pro-actions .bouton[hidden], .carte-actions .bouton[hidden] { display: none; }
/* PR 4 : textes modifiables par le promoteur (zone de texte au contour de champ), formulaire du visuel dans la feuille. */
.promo-zone { display: block; width: 100%; min-height: 160px; margin: 8px 0 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--couleur-bordure-controle); background: var(--couleur-surface-2); color: var(--couleur-texte); font: inherit; font-size: 14px; line-height: 1.45; resize: vertical; }
.promo-zone[readonly] { border-color: transparent; resize: none; }
.promo-modifie { margin: 6px 0 0; font-size: 12px; font-weight: 800; color: var(--accent-texte); }
.promo-modifie:empty { display: none; }
.promo-formulaire { display: grid; gap: 10px; }
.promo-formulaire[hidden] { display: none; }
.promo-formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 800; }
.promo-formulaire .champ { font-weight: 500; }
/* Regie, lot 4 : page d'apercu exact (cadre) et editeur de visuel. */
.apercu-pub-page { margin: 0; background: var(--couleur-fond); }
.apercu-pub-colonne { padding: 12px 16px; }
@media (min-width: 900px) { .apercu-pub-colonne { max-width: 720px; margin: 0 auto; padding: 24px 0; } }
.apercu-pub-contexte { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.pro-apercus { display: grid; gap: 12px; }
/* Chantier B (BO1) : une colonne 1fr ne descend pas sous la largeur de son contenu (cadre de 1 280 px) : minmax(0, 1fr)
   et min-width: 0, sinon la page de la campagne defile en largeur (2 768 px a 1366 px). */
@media (min-width: 720px) { .pro-apercus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-apercu { margin: 0; min-width: 0; }
.pro-apercu figcaption { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--couleur-texte-secondaire); }
.pro-apercu-cadre { overflow: hidden; border: 1px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-fond); height: var(--hauteur-cadre, 220px); }
.pro-apercu-cadre iframe { display: block; border: 0; width: var(--largeur-cadre, 390px); height: var(--hauteur-interne, 600px); transform: scale(var(--echelle, 1)); transform-origin: 0 0; }
.ev-zone { display: flex; flex-direction: column; gap: 10px; }
.ev-depot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; padding: 16px; border: 2px dashed var(--couleur-bordure); border-radius: 16px; background: var(--couleur-surface-2); text-align: center; font-size: 14px; cursor: pointer; }
.ev-depot.survol { border-color: var(--accent); }
.ev-cadre { position: relative; overflow: hidden; width: 100%; background: var(--couleur-surface-2); border-radius: 12px; touch-action: none; cursor: grab; aspect-ratio: var(--ratio, 3 / 1); max-width: var(--largeur-max, 520px); }
.ev-cadre img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.ev-cadre[hidden] { display: none; }
/* Lot 6 du plan « Match présenté par » : zones de sécurité du Pulse sponsorisé, grisées dans le cadre */
.ev-zone-securite { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: color-mix(in srgb, var(--couleur-texte) 35%, transparent); }
.ev-zone-haut { top: 0; height: var(--zone-haut, 15%); }
.ev-zone-bas { bottom: 0; height: var(--zone-bas, 20%); }
.ev-reglages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: var(--largeur-max, 520px); font-size: 14px; }
.ev-reglages input[type="range"] { flex: 1; min-width: 160px; }
.ev-controles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ev-controles li { display: flex; gap: 8px; align-items: baseline; }
.ev-controles .ev-etat { flex-shrink: 0; min-width: 84px; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ev-controles .ev-ok { color: var(--couleur-positif); }
.ev-controles .ev-ko { color: var(--couleur-negatif); }
.ev-controles .ev-attention { color: var(--couleur-or); }
.pro-logo { width: 96px; height: 96px; object-fit: contain; border-radius: 16px; background: var(--couleur-surface-2); }
.pro-banniere { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 16px; }

/* Console › Pages publiques (30 oct. 2026) : mise en page des widgets, données d'API-Football, Pulses partagés signalés. */
.ppa-liste { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ppa-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border: 1px solid var(--couleur-bordure); border-radius: 16px; background: var(--couleur-surface); }
.ppa-actif { display: flex; align-items: center; gap: 10px; font-weight: 800; min-height: var(--zone-tactile); }
.ppa-actif input { width: 22px; height: 22px; }
.ppa-reglages { display: flex; flex-wrap: wrap; gap: 8px; }
.ppa-option { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--couleur-texte-secondaire); }
.ppa-option input[type=number] { width: 90px; }
.ppa-titre { flex: 1; min-width: 180px; }
.ppa-ordre { display: flex; gap: 6px; }
.ppa-defile { overflow-x: auto; }
.ppa-brut pre { max-height: 360px; overflow: auto; font-size: 12px; background: var(--couleur-surface-2); padding: 12px; border-radius: 12px; white-space: pre-wrap; }
.ppa-h3 { margin: 16px 0 8px; font-size: 15px; font-weight: 800; }
.ppa-journal { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ppa-clubs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.ppa-clubs a { display: inline-flex; min-height: var(--zone-tactile); align-items: center; }
.ppa-pulses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ppa-pulse { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.ppa-pulse .gg-actions { grid-column: 1 / -1; }
.ppa-pulse-media { width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: var(--couleur-surface-2); }
@media (min-width: 900px) { .ppa-ligne { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; } }
/* Onglet « Clubs » de l'accueil de l'appli. */
.pp-onglet-clubs { display: flex; flex-direction: column; gap: var(--espace-blocs); }
.pp-onglet-comp h2 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.pp-onglet-comp h2 a { color: inherit; }