/* 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 */
  --good-soft: color-mix(in srgb, var(--couleur-positif) 14%, transparent);
  --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: 20px; /* ecart unique entre deux blocs (cartes) en Score */
  --marge-mobile: 20px;
  --marge-pc: 36px;
}

@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: color-mix(in srgb, var(--couleur-positif) 14%, transparent);
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  }
}

: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: color-mix(in srgb, var(--couleur-positif) 14%, transparent);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
}

* { 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; }
button, a { cursor: pointer; }
input::placeholder { color: var(--couleur-texte-secondaire); }

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: 24px; } }

.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: 700;
  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: 700;
  width: 40px;
  height: 40px;
}

.nav-bas {
  position: fixed;
  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: 700; }
.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: 700;
  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: 700; }
.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: 600; }

.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: 600;
  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: 700;
}
.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: 700;
  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: 700;
  flex-shrink: 0;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sidebar-user-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-sub { font-size: 12px; color: var(--couleur-texte-secondaire); }
.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: 700;
  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: 700;
  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: 700; 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: 40px;
  height: 40px;
  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: 700;
  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: 700;
  cursor: pointer;
}
.prono-saved {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 8px 0 16px;
  border-radius: 16px;
  background: var(--good-soft);
}
.prono-saved svg { width: 20px; height: 20px; color: var(--couleur-positif); }
.prono-saved span { font-size: 15px; font-weight: 700; }
.prono-saved button {
  background: none;
  border: 0;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  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: 700;
  flex-shrink: 0;
}
.prono-name { flex: 1; font-size: 15px; font-weight: 600; }
.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: transparent; color: var(--couleur-texte-secondaire); }

/* --- 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: 700;
  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: 700;
  flex-shrink: 0;
}
.classement-name { flex: 1; font-size: 15px; font-weight: 600; }
.classement-mv { font-size: 12px; font-weight: 700; }
.classement-pts {
  width: 36px;
  text-align: right;
  font-size: 17px;
  font-weight: 700;
}

/* --- 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: 22px 10px 18px;
  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: 14px; }
.cl-podium-tete { font-size: var(--taille-min); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--couleur-or); margin-bottom: 10px; }
.cl-medaillon { position: relative; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--cl-medaille); display: flex; align-items: center; justify-content: center; }
.cl-podium-premier .cl-medaillon { width: 86px; height: 86px; }
.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: 28px; }
.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: 15px; 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: 22px; font-weight: 800; line-height: 1.15; margin-top: 2px; }
.cl-podium-premier .cl-podium-pts { font-size: 30px; 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: 700;
  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); }

/* --- TCHAT (mockup) --- */
.carte-tchat {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: 28px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.carte-tchat h2 { margin: 0; font-size: 20px; font-weight: 800; }
.tchat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tchat-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 999px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--taille-min);
  font-weight: 700;
}
.tchat-bulle {
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  background: var(--couleur-surface-2);
  font-size: 14px;
  line-height: 1.4;
}
.tchat-input-row {
  display: flex;
  gap: 10px;
}
.tchat-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-fond);
  font-size: 14px;
  outline: none;
}
.tchat-send {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 0;
  background: var(--accent);
  color: var(--accent-encre);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* --- 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 .emoji-trophee { font-size: 28px; flex-shrink: 0; }
.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: 700;
  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: 700;
  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: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.qui-a-parie .avatar-mini.pas-parie { opacity: 0.25; }

/* 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: 700; 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: 600;
  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-tchat, .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-season { font-size: var(--taille-min); color: var(--couleur-texte-secondaire); line-height: 1.2; }
.mobile-header .league-name-col .league-title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; 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: 700; 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; }
.mobile-header-brand { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.mobile-header-brand svg { width: 22px; height: auto; }

/* 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: 600; gap: 4px; padding: 6px 0; }
  .nav-bas a.actif { font-weight: 700; }
  .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; }
}
@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; }
  .carte-dernier { padding: 18px 20px 8px; border-radius: 24px; }
  .carte-classement { padding: 18px 20px 8px; border-radius: 24px; }
  .carte-tchat { padding: 18px 20px; 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 16px 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 16px side padding, 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: 700; }

/* === 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: 700; }
.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: 700;
}
.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; }
.mobile-header-cloche { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; text-decoration: none; justify-self: end; }
.mobile-header-cloche .badge-notif { position: absolute; top: 4px; right: 2px; margin-left: 0; }
.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: 12px; }
.onglets-messages a { flex: 1; min-height: 44px; 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); 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: 700; color: var(--couleur-texte); }
.bandeau-dm { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: var(--accent-fond-leger); font-size: 14px; }
.fil-messages { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; }
.rang-bulle { display: flex; }
.rang-bulle.mien { justify-content: flex-end; }
.bulle { max-width: 82%; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--couleur-surface-2); color: var(--couleur-texte); font-size: 15px; line-height: 1.4; }
.bulle-mienne { border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--accent-encre); }
.bulle-supprimee { font-style: italic; font-size: 14px; background: transparent; border: 1px dashed var(--couleur-bordure); }
.bulle-heure { display: block; margin-top: 4px; font-size: var(--taille-min); opacity: .75; }
.btn-suppr-dm { background: none; border: 0; padding: 0 0 0 6px; cursor: pointer; font-family: inherit; font-size: var(--taille-min); font-weight: 700; color: inherit; text-decoration: underline; }
.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; }
.composer-dm { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 84px; padding: 10px 0; background: var(--couleur-fond); }
@media (min-width: 900px) { .composer-dm { bottom: 0; } }
@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;
}

/* Mobile : on publie depuis le bouton central de la barre du bas, le compositeur
   du fil est masque pour gagner de la place (il reste sur PC). */
@media (max-width: 899px) { .compositeur-feed { display: none; } }

/* 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; }

/* 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 14px; padding: 2px 20px 4px; scrollbar-width: none; }
.exp-chips::-webkit-scrollbar, .exp-defile::-webkit-scrollbar { display: none; }
.exp-chip { flex-shrink: 0; min-height: 40px; 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: 600; cursor: pointer; }
.exp-chip.actif { border-color: var(--accent); color: var(--accent-texte); }
.exp-chip.petit { min-height: 34px; 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: 700; 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: 700; }
.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: 700; 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: 700; 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; text-transform: uppercase; letter-spacing: .03em; color: var(--couleur-texte-secondaire); }
.exp-mini-etat { font-size: var(--taille-min); font-weight: 700; 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: 700; }
.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: 700; 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: 700; 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); 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 16px; 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: 10px 2px; font-size: 16px; font-weight: 600; 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: 700; 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: 700; 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: 700; }
.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: 700; 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); 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); 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: 700; 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: 700; 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: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--couleur-texte-secondaire); }
.pulse-vide { font-size: 13px; margin: 0 0 8px; }
.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: 700; }
.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: 700; 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: 4px 0 14px; }
.fil-bascule a { flex: 1; min-height: 44px; 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: 700; 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: 600; }
.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: 700; color: var(--couleur-texte-secondaire); }
.pulse-erreur { margin: 12px 0 0; color: var(--couleur-negatif); font-size: 14px; font-weight: 700; }
.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: 700; 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: 700; 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: 700; 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: 700; 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: 700; }
.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: 700; }
.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 14px; }
.passeport-ligne { margin: 0 0 4px; font-size: 13px; color: var(--couleur-texte-secondaire); }
.passeport-ligne a { color: var(--accent-texte); font-weight: 700; }
.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: 700; }
.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: 700; }
.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: 700; 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: 700; }
.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, ecran d'ouverture ---- */
.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-ouverture { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: #000; }
.pub-ouverture-cadre { position: relative; width: 100%; height: 100%; }
.pub-ouverture-lien { display: block; width: 100%; height: 100%; }
.pub-ouverture-image { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .pub-ouverture { background: rgba(0,0,0,.82); } .pub-ouverture-cadre { width: auto; height: 100%; max-height: 100vh; aspect-ratio: 9 / 16; } }
.pub-ouverture-fermer { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 24px; background: rgba(0,0,0,.5); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
.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: 700; }
.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); }
@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: 600; 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: 700; 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-retour { margin-left: auto; font-size: 12px; font-weight: 700; 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: 700; 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: 600; }
.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: 700; 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: 700; }
.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: 700; 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-ligne.bon.pd-pct::before { background: color-mix(in srgb, var(--couleur-positif) 20%, transparent); }
.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 : vert plein pour le score exact, vert leger pour le bon resultat. */
.pd-ligne.bon { background: var(--good-soft); }
.pd-ligne.bon .pd-score { color: var(--couleur-positif); }
.pd-ligne.exact { background: var(--couleur-positif); color: #fff; }
.pd-ligne.exact .pd-score, .pd-ligne.exact .pd-valeur { color: #fff; }
.pd-ligne.exact.pd-pct::before { background: rgba(255, 255, 255, .18); }
/* Mode sombre : le vert du « score exact » est clair, le texte passe en fonce pour rester lisible. */
:root[data-theme="dark"] .pd-ligne.exact,
:root[data-theme="dark"] .pd-ligne.exact .pd-score,
:root[data-theme="dark"] .pd-ligne.exact .pd-valeur { color: #0D0E10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pd-ligne.exact,
  :root:not([data-theme="light"]) .pd-ligne.exact .pd-score,
  :root:not([data-theme="light"]) .pd-ligne.exact .pd-valeur { color: #0D0E10; }
}
.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-pastille { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pd-pastille.exact { background: var(--couleur-positif); }
.pd-pastille.bon { background: var(--good-soft); border: 1px solid var(--couleur-positif); }
.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); 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: 600; 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: 600; 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: 600; 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: 700; color: var(--couleur-texte-secondaire); }
.ind-table tbody th { font-weight: 600; }
.ind-date { display: block; font-size: 12px; font-weight: 400; 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: 700; }
.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: 700; }
.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: 700; 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: 700; 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: 600; color: var(--couleur-texte-secondaire); padding: 8px; }
.invit-note { margin: 0; text-align: center; font-size: 13px; }
.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; }
.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: 600; 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: 700; }
.alias-champ-zone { position: relative; }
.alias-arobase { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--couleur-texte-secondaire); font-weight: 700; }
.alias-champ { width: 100%; height: 52px; border-radius: 16px; border: 1px solid var(--couleur-bordure); 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: 700; }
.express-champ { width: 100%; height: 52px; border-radius: 16px; border: 1px solid var(--couleur-bordure); 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: 600; }
.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: 700; }
.express-club-choisi[hidden] { display: none; }
.express-lien { border: 0; background: none; color: var(--couleur-texte-secondaire); font: inherit; font-weight: 600; 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: 600; 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; }

/* === NOUVELLE NAVIGATION EN ESSAI (lot H1a, testeurs : users.nav_essai = 1) ===
   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 (Matchs, Classement, Vestiaire, Gages, reglages) : provisoire jusqu'au paquet H1d */
.onglets-ligue-essai { display: flex; gap: 6px; padding: 0 20px 10px; overflow-x: auto; scrollbar-width: none; }
.onglets-ligue-essai::-webkit-scrollbar { display: none; }
.onglets-ligue-essai a { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--couleur-surface-2); color: var(--couleur-texte-secondaire); font-size: 14px; font-weight: 700; text-decoration: none; }
.onglets-ligue-essai a.actif { background: var(--accent-fond-leger); color: var(--accent-texte); }
@media (min-width: 900px) { .onglets-ligue-essai { display: none; } }

/* === 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: 16px; }
.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: 6px 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; }
.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: 700; 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-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 16px; background: var(--couleur-surface-2); }
.mm-segments a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-size: 15px; 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: 18px; }
.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-match { margin-bottom: 12px; }
.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: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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: 12px; }
.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; }

/* Bandeau en haut d'une ligue et point du vestiaire */
.bandeau-ligue-essai { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 var(--marge-mobile) 10px; padding: 12px 14px; border-radius: 20px; background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); }
.bandeau-ligue-essai[hidden] { display: none; }
/* Place reservee avant les premieres valeurs (pas de saut de la page) ; contenu invisible jusque-la. */
.bandeau-ligue-essai[data-blg-attente] > * { visibility: hidden; }
.blg-texte { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.blg-texte strong { font-size: 24px; font-weight: 800; line-height: 1; }
.blg-texte .texte-secondaire { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blg-action { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 14px; background: var(--accent); color: var(--accent-encre); font-size: 14px; font-weight: 800; text-decoration: none; }
.blg-action[hidden], .blg-a-jour[hidden] { display: none; }
.blg-a-jour { flex-shrink: 0; padding: 5px 11px; border-radius: 999px; background: var(--good-soft); color: var(--couleur-positif); font-size: 13px; font-weight: 800; }
.onglets-ligue-essai a { position: relative; }
.olg-point { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-negatif); }
.olg-point[hidden] { display: none; }
@media (min-width: 900px) { .bandeau-ligue-essai { display: none; } }

/* 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; }
.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: 700; 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 a { flex: 1; min-height: 36px; 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: 16px; }
.ms-panneau[hidden] { display: none; }
.ms-panneau > * { flex-shrink: 0; }
.ms-filtres { display: flex; gap: 8px; }
.ms-filtres button { min-height: 44px; 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-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); 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: 600; color: var(--couleur-texte); }
.libelle-champ-petit { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; 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: 700; }
.vide { padding: 40px 0; text-align: center; }

/* Cartes : rayon 24 a 32 (--rayon-carte), bordure fine, ombre legere */
.carte-section { padding: 24px 28px; 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: 600; 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: 400px) { .logo-app-essai.avec-nom .nom-marque { display: block; } }
.mobile-header.mobile-header-essai:has(.avec-nom) { grid-template-columns: auto minmax(0, 1fr) auto; }

/* Ecrans plus larges sur telephone (sauf le profil) : 16 px de bord, comme le profil, au lieu de 36 (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 -16px; padding: 2px 16px; }
  .bandeau-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: 700; 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: 600; 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); }

/* === 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-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: 700; 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, width .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: 600; 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: 700; color: white; }
.st-forme-bon { background: var(--couleur-positif); }
.st-forme-rate { background: var(--couleur-negatif); }
.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: 600; 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: 600; }
.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: 700; }
.rj-exact { background: rgba(var(--couleur-positif-rgb,34,197,94),.15); }
.rj-bon { background: rgba(var(--accent-rgb,99,102,241),.1); }
.rj-moi { font-weight: 700; }
.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: 600; 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: 700; 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; }
.confirmation-admin-renvoyer { align-self: center; min-height: 44px; padding: 0 12px; border: none; background: none; font: inherit; font-size: 14px; cursor: pointer; }