/* Statsmaker — thème "Broadcast" : bleu de retransmission en couleur principale,
   vert pelouse en couleur d'appui. Deux modes complets (clair / sombre). */
/* @import Google Fonts RETIRÉ — refonte front v2.
   Anton et Archivo sont auto-hébergées : voir fonts.css, chargé avant ce
   fichier. Objectif : aucune requête réseau externe (3G, mode hors-ligne). */

:root {
  --font-heading: "Anton", "Arial Narrow", sans-serif;
  --font-heading-weight: 400;
  --font-body: "Archivo", system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* panneaux de retransmission (scores, héros) : bleu nuit dans les deux modes */
  --sm-board-a: #0c1d3d;
  --sm-board-b: #1a3f7a;
  --sm-on-board: #eaf0f9;
  /* diagrammes de terrain : vert pelouse dans les deux modes */
  --sm-pitch-a: #0f2c22;
  --sm-pitch-b: #1b4a36;

  /* ---------- MODE CLAIR ---------- */
  --color-bg: #f3f6fb;
  --color-surface: #ffffff;
  --color-text: #101722;
  --color-accent: #1b4fd8;
  --color-accent-2: #10805a;
  --color-divider: color-mix(in srgb, #101722 13%, transparent);

  --color-neutral-100: #f7f9fc;
  --color-neutral-200: #edf1f7;
  --color-neutral-300: #dbe1eb;
  --color-neutral-400: #bcc5d4;
  --color-neutral-500: #8f99ab;
  --color-neutral-600: #67707f;
  --color-neutral-700: #48505d;
  --color-neutral-800: #2e3540;
  --color-neutral-900: #161b23;

  --color-accent-100: #eef3ff;
  --color-accent-200: #d8e3ff;
  --color-accent-300: #b4c8ff;
  --color-accent-400: #7f9dfa;
  --color-accent-500: #4b72ec;
  --color-accent-600: #1b4fd8;
  --color-accent-700: #143caa;
  --color-accent-800: #0f2c7c;
  --color-accent-900: #0a1d52;

  --color-accent-2-100: #e6f6ef;
  --color-accent-2-200: #c4ead9;
  --color-accent-2-300: #95d7bb;
  --color-accent-2-400: #4fb994;
  --color-accent-2-500: #199a70;
  --color-accent-2-600: #10805a;
  --color-accent-2-700: #0c6446;
  --color-accent-2-800: #084832;
  --color-accent-2-900: #052e20;

  --shadow-sm: 0 1px 2px rgba(16,23,34,.10);
  --shadow-md: 0 4px 14px rgba(16,23,34,.12);
  --shadow-lg: 0 18px 40px rgba(16,23,34,.16);
}

/* ---------- MODE SOMBRE ---------- rampes inversées (100 = le plus sombre) ---------- */
html[data-sm-theme="dark"] {
  --color-bg: #080d16;
  --color-surface: #111a28;
  --color-text: #eaf0f9;
  --color-accent: #6c96ff;
  --color-accent-2: #3ec793;
  --color-divider: color-mix(in srgb, #eaf0f9 15%, transparent);

  --color-neutral-100: #0d1420;
  --color-neutral-200: #141d2b;
  --color-neutral-300: #1e2938;
  --color-neutral-400: #2f3d50;
  --color-neutral-500: #5a6879;
  --color-neutral-600: #8b98a9;
  --color-neutral-700: #b4bfcd;
  --color-neutral-800: #d6dee8;
  --color-neutral-900: #eff4fa;

  --color-accent-100: #0b1836;
  --color-accent-200: #10214b;
  --color-accent-300: #163069;
  --color-accent-400: #1f4595;
  --color-accent-500: #2f61c4;
  --color-accent-600: #4576e6;
  --color-accent-700: #6c96ff;
  --color-accent-800: #a0bcff;
  --color-accent-900: #cfdcff;

  --color-accent-2-100: #05211a;
  --color-accent-2-200: #082e24;
  --color-accent-2-300: #0d4535;
  --color-accent-2-400: #14634c;
  --color-accent-2-500: #1d8767;
  --color-accent-2-600: #28a67e;
  --color-accent-2-700: #3ec793;
  --color-accent-2-800: #7fdcb6;
  --color-accent-2-900: #bceed6;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.55);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 46px rgba(0,0,0,.65);
}

html { color-scheme: light; }
html[data-sm-theme="dark"] { color-scheme: dark; }
html, body { background: var(--color-bg); color: var(--color-text); }
button, select, input, textarea { color: inherit; }
body { font-variant-numeric: tabular-nums; }
h1, h2 { letter-spacing: .005em; }
h3 { letter-spacing: .005em; }
.btn { white-space: nowrap; }
::selection { background: var(--color-accent); color: var(--color-bg); }
::placeholder { color: var(--color-neutral-500); }


/* bascule clair / sombre */
#sm-theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border: 1px solid var(--sm-border-field);
  border-radius: 999px; cursor: pointer;
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-heading); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; box-shadow: var(--shadow-md);
}
#sm-theme-toggle:hover { background: var(--color-neutral-200); }
#sm-theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#sm-theme-toggle svg { display: block; }

/* repli mobile des grilles à deux colonnes (les colonnes sont posées en style inline) */
/* colonne d'identite : figee sur grand ecran, jamais sur mobile */
/* ⚠️ Valait `top:70px` — la TROISIÈME écriture de la hauteur de l'en-tête,
   et la troisième valeur différente (58 dans le jeton, 70 ici, 52 dans le
   glossaire), pour un en-tête qui en fait 67. Aucun gabarit ne porte encore
   `.sm-aside` : la règle est corrigée AVANT d'avoir un usager, parce que
   c'est le seul moment où ça ne coûte rien. */
/* ⚠️ Et le `top` lit maintenant `--sm-collant-top`, pas `--sm-shell-h` : les
   trois écrans qui portent `.sm-aside` (Accueil, Équipe, Joueur) n'ont pas de
   seconde barre collante AUJOURD'HUI, donc le jeton vaut exactement la même
   chose. Le jour où l'un en gagne une, il déclare `--sm-collant-h` et la
   colonne descend d'elle-même — c'est ce que Match n'a pas su faire. */
.sm-aside{position:sticky;top:var(--sm-collant-top);}
@media (max-width: 900px){
  .sm-grid{grid-template-columns:minmax(0,1fr) !important;}
  .sm-aside{position:static !important;top:auto !important;}
}
@media (max-width: 720px){
  .sm-grid2{grid-template-columns:minmax(0,1fr) !important;}
}

/* ============================================================
   BANDEAU D'IDENTITE — carte de joueur, façon jeu vidéo.
   Trois zones : le PORTRAIT (grand, c'est la page de cette
   personne ou de ce club, donc c'est lui la vedette), l'identité,
   et le chiffre-clé. Le fond prend la couleur de l'entité.
   Sans photo, le cadre reste dessiné : monogramme sur dégradé et
   filigrane de silhouette — jamais une zone grise vide.
   ============================================================ */
.sm-hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:24px; align-items:center;
  border-radius:24px; padding:22px 26px; margin-bottom:18px;
  border:1px solid color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 26%, var(--color-divider));
  background:
    radial-gradient(135% 155% at 4% -14%, color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 46%, transparent) 0%, transparent 56%),
    linear-gradient(115deg, color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 17%, var(--color-surface)) 0%, var(--color-surface) 60%);
  box-shadow:var(--shadow-md);
}
/* biseau diagonal : ce qui donne l'allure « carte » sans surcharger */
.sm-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%,
    color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 13%, transparent) 41%,
    transparent 43%, transparent 57%,
    color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 9%, transparent) 58%, transparent 60%);
}

/* ---- le portrait ----
   🛑 LA GÉOMÉTRIE PASSE PAR DEUX JETONS, jamais par un littéral recopié.
   `--sm-portrait-cote` et `--sm-portrait-haut` sont redéclarés UNE fois au
   palier étroit ; toute variante les lit au lieu de reposer sa propre valeur.
   C'est le défaut réel de `.sm-comp-ecusson`, qui portait un 84 px à lui sous
   720 px alors que le socle disait déjà 88 px sous 760 px : deux paliers pour
   un même cadre, dont l'un ne suivait pas l'autre.

   ⚠️ Le cadre est COMMUN AUX CINQ FICHES d'entité (Compétition, Équipe,
   Joueur, Arbitre, Entraîneur, Agent — six écrans, cinq familles). Son balisage
   ne vit qu'à un endroit : `v2/partials/_hero_portrait.html`. */
.sm-portrait{
  --sm-portrait-cote:132px; --sm-portrait-haut:164px;
  /* La marge d'un blason contenu : un écusson collé aux bords du cadre se lit
     comme une image rognée. Un jeton, parce que la valeur sert deux fois. */
  --sm-portrait-marge-blason:8px;
  position:relative; flex:none;
  width:var(--sm-portrait-cote); height:var(--sm-portrait-haut);
  border-radius:20px; overflow:hidden;
  background-color:color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 78%, #1a1a17);
  background-size:cover; background-position:center 18%; background-repeat:no-repeat;
  box-shadow:0 8px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.16);
  display:grid; place-items:center;
}
/* Une ORGANISATION est carrée : son écusson l'est, et le cadre haut d'un
   portrait lui laisserait deux bandes de fond. Elle lit le même jeton de côté,
   donc elle suit le palier étroit toute seule. */
.sm-portrait--carre{height:var(--sm-portrait-cote);}

/* ---- l'image du cadre ----
   ⚠️ DEUX ajustements, opposés et voulus — la même règle qu'en vignette
   (`_vignette.html`), à l'échelle du bandeau : un visage se RECADRE (centré,
   il supporte de perdre ses bords), un blason est CONTENU (recadré, il n'est
   plus reconnaissable) et respire d'une marge. */
.sm-portrait-img{position:absolute; inset:0; width:100%; height:100%;}
.sm-portrait-img--visage{object-fit:cover; object-position:center 18%;}
.sm-portrait-img--blason{
  inset:var(--sm-portrait-marge-blason);
  width:calc(100% - 2 * var(--sm-portrait-marge-blason));
  height:calc(100% - 2 * var(--sm-portrait-marge-blason));
  object-fit:contain;
}
/* filigrane : buste stylisé pour une personne, écusson pour un club */
.sm-portrait .wm{position:absolute; inset:0; display:grid; place-items:end center; opacity:.22; color:#fff;}
.sm-portrait .wm svg{width:78%; height:78%; margin-bottom:-14%;}
.sm-portrait .mono{
  position:relative; font-family:var(--font-heading); font-size:42px; line-height:1;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); letter-spacing:.01em;
}
.sm-portrait .num{
  position:absolute; right:9px; bottom:5px; font-family:var(--font-heading);
  font-size:33px; line-height:1; color:#fff; opacity:.6; text-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* ---- identité ---- */
.sm-hero-id{min-width:0;}
.sm-hero-line{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.sm-hero-eyebrow{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:color-mix(in srgb, var(--sm-hero-tint, var(--color-accent)) 68%, var(--color-text));
  margin-bottom:3px;
}
.sm-hero-title{margin:0; font-size:31px; line-height:1.08; overflow-wrap:anywhere; letter-spacing:-.01em;}
.sm-hero-sub{font-size:13px; color:var(--color-neutral-700); margin-top:5px; text-wrap:pretty;}

/* ---- chiffre-clé ---- */
.sm-hero-side{display:flex; align-items:center; gap:12px; flex:none; flex-wrap:wrap; justify-content:flex-end;}
.sm-hero-metric{
  display:flex; align-items:center; gap:12px;
  background:color-mix(in srgb, var(--color-bg) 82%, transparent);
  border:1px solid var(--color-divider);
  border-radius:16px; padding:11px 16px; backdrop-filter:blur(4px);
}
.sm-hero-form{display:flex; gap:5px;}
/* La ligne de tags, sous la méta. 🔴 Le même blanc était écrit TROIS fois et
   ne valait pas la même chose : 11 px sur Équipe, 11 px sur Compétition, 10 px
   sur Joueur. Un écart de mise en page appartient au composant, pas à chacun de
   ses usagers. */
.sm-hero-line--tags{margin-top:11px;}

@media (max-width: 760px){
  .sm-hero{grid-template-columns:auto minmax(0,1fr); gap:15px; padding:16px 17px; border-radius:20px;}
  /* ⚠️ Les JETONS, pas `width`/`height` : les variantes du cadre (le carré
     d'une organisation) les lisent, et héritent donc de ce palier sans le
     recopier. Écrire `width` ici les laisserait à leur taille de bureau. */
  .sm-portrait{--sm-portrait-cote:88px; --sm-portrait-haut:110px; border-radius:16px;}
  .sm-portrait .mono{font-size:29px;}
  .sm-portrait .num{font-size:22px;}
  .sm-hero-title{font-size:22px;}
  .sm-hero-side{grid-column:1 / -1; justify-content:flex-start; width:100%;}
  .sm-hero-metric{padding:9px 13px; width:100%; box-sizing:border-box;}
  /* 🔴 **LE CHIFFRE-CLE PRENAIT TOUTE LA LARGEUR ET N'EN REMPLISSAIT QU'UN
   * TIERS.** Mesure a 390 px sur la fiche Equipe : le bloc fait 314 px, ses
   * deux moities en occupent 77 et 102, et **109 px restent vides a droite**.
   * `width: 100%` avait bien elargi la BOITE, mais ses enfants gardaient leur
   * largeur de contenu et se serraient a gauche — un encadre au tiers rempli se
   * lit comme une erreur de rendu.
   *
   * Les deux moities partagent desormais la place a egalite. `flex-basis: 0`
   * et non `auto` : avec `auto`, c'est le contenu qui decide, et « 1-4-4 »
   * face a « 9 matchs joues » redonne deux largeurs differentes — or ces deux
   * blocs sont de meme rang, et deux blocs de meme rang de largeurs
   * differentes se lisent comme une hierarchie.
   *
   * ⚠️ Vaut pour Equipe ET Joueur : les deux montent la meme structure — deux
   * blocs separes d'un filet dans un `.sm-hero-metric`. */
  .sm-hero-metric > *{flex:1 1 0; min-width:0;}
}

/* ============================================================
   FICHE D'IDENTITE — même grille partout : libellé au-dessus,
   valeur en dessous. Se lit en diagonale, sans lignes de tableau.
   ============================================================ */
.sm-idgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:13px 18px;}
.sm-idgrid dt{font-size:12px; color:var(--color-neutral-700); letter-spacing:.02em; margin:0;}
.sm-idgrid dd{margin:2px 0 0; font-size:14px; font-weight:600; text-wrap:pretty; overflow-wrap:anywhere;}
.sm-idgrid dd.muted{font-weight:500; color:var(--color-neutral-700);}

/* ============================================================
   EFFECTIF COMPLET — grille et non <table>. Le moteur de gabarit
   ne peut pas vivre dans un <table> : l'analyseur HTML en sort
   les balises et la table se vide. Grille CSS : en-tête collante,
   colonne du joueur collante, défilement horizontal maîtrisé.
   ============================================================ */
.sm-roster{
  background:var(--color-surface); border-radius:16px; box-shadow:var(--shadow-sm);
  /* La borne de hauteur n'est pas décorative : sans elle, ce cadre ne défile
     pas, et `.sm-roster-head{top:0}` ne colle à rien (le défaut de Compare). */
  overflow:auto; max-height:var(--sm-cadre-h); font-size:12.5px;
}
.sm-roster-row{
  display:grid; grid-template-columns:var(--sm-roster-cols);
  align-items:center; width:max-content; min-width:100%;
  border-bottom:1px solid var(--color-divider);
}
.sm-roster-head{position:sticky; top:0; z-index:3; background:var(--color-surface);}
.sm-roster-name{
  position:sticky; left:0; z-index:2; background:var(--color-surface);
  padding:9px 14px; text-align:left; white-space:nowrap; min-width:0;
}
.sm-roster-head .sm-roster-name{z-index:4;}
.sm-roster-th{
  border:none; background:none; cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--color-neutral-700);
  text-align:right; padding:11px 10px; white-space:nowrap;
}
.sm-roster-th:hover{text-decoration:underline;}
.sm-roster-td{
  padding:9px 10px; text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sm-roster-row:last-child{border-bottom:none;}


/* ============================================================
   BULLE D'AIDE — remplace l'infobulle native du navigateur, qui
   est lente, grise et hors charte. Le libellé complet s'écrit
   dans data-tip ; la bulle s'ouvre SOUS l'élément pour ne pas
   être rognée par les conteneurs à défilement.
   ============================================================ */
.sm-tip{position:relative;}
.sm-tip::after,
.sm-tip::before{
  opacity:0; pointer-events:none;
  transition:opacity .13s ease, transform .13s ease;
  position:absolute; z-index:60;
}
.sm-tip::after{
  content:attr(data-tip);
  top:calc(100% + 7px); left:50%;
  transform:translate(-50%,-3px);
  background:var(--color-text); color:var(--color-bg);
  font-family:var(--font-body); font-size:12px; font-weight:600;
  letter-spacing:0; text-transform:none; white-space:nowrap; text-align:left;
  padding:6px 11px; border-radius:9px; box-shadow:var(--shadow-md);
}
.sm-tip::before{
  content:''; top:calc(100% + 1px); left:50%;
  transform:translate(-50%,-3px);
  border:5px solid transparent; border-bottom-color:var(--color-text);
}
.sm-tip:hover::after, .sm-tip:hover::before,
.sm-tip:focus-visible::after, .sm-tip:focus-visible::before{opacity:1; transform:translate(-50%,0);}
/* dernière colonne : la bulle rentre vers l'intérieur */
.sm-tip.sm-tip-end::after{left:auto; right:0; transform:translate(0,-3px);}
.sm-tip.sm-tip-end:hover::after{transform:translate(0,0);}
.sm-tip.sm-tip-end::before{left:auto; right:14px; transform:translate(0,-3px);}
.sm-tip.sm-tip-end:hover::before{transform:translate(0,0);}

/* ============================================================
   CHAT — deux colonnes sur grand écran. Sur téléphone, la liste
   des salons passe au-dessus en barre horizontale : garder une
   colonne de 240 px écraserait la conversation.
   ============================================================ */
@media (max-width: 760px){
  .sm-chat{grid-template-columns:minmax(0,1fr) !important; gap:11px !important;}
  .sm-chat-rooms{padding:10px !important;}
  .sm-chat-roomlist{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:3px;
    scrollbar-width:thin;
  }
  .sm-chat-roomlist::-webkit-scrollbar{height:5px;}
  .sm-chat-roomlist::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:999px;}
  .sm-chat-room{width:auto !important; flex:0 0 auto; max-width:200px;}
  /* la bulle de message peut occuper presque toute la largeur */
  .sm-chat-msg{max-width:88% !important;}
}