/* Setwise · couleurs communes aux deux apparences de l'application (clair et sombre) : blanc et vert, comme la page
   d'accueil. Le jaune ne reste que pour la balle ; les courts de l'analyse gardent leurs couleurs de surface.
   S'applique dès que <html> porte data-look (posé avant le premier affichage) ; app-sombre.css change ensuite les jetons. */

html[data-look] {
  --pb: #223a2e; /* joueur B : encre vert-noir, bien distincte du vert de A */
  --pb-soft: rgba(34, 58, 46, 0.1);
}

/* ---------- Boutons « balle + pilule » : pilule verte ---------- */
html[data-look] .ready__btn > span { background: var(--green-500); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 16px -6px rgba(18, 128, 74, 0.55); }
html[data-look] .ready__btn:hover > span { background: var(--green-600); }
html[data-look] .ready__ball { box-shadow: var(--shadow-md); }

/* ---------- Analyse : le court garde ses couleurs de surface (app.css), le jaune ne reste que pour la balle ---------- */
html[data-look] .pick__input:focus { box-shadow: 0 0 0 3px var(--white), 0 10px 26px -10px rgba(11, 31, 21, 0.45); }

/* Tableau d'affichage : carte blanche, valeur en tête en vert */
html[data-look] .board { background: rgba(255, 255, 255, 0.97); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -20px rgba(11, 31, 21, 0.35); }
html[data-look] .board__head { color: var(--muted); }
html[data-look] .board__live i { background: var(--green-500); }
html[data-look] .board__name { color: var(--ink-2); }
html[data-look] .board__val { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
html[data-look] .board__val.is-lead { background: var(--green-500); color: var(--on-accent); box-shadow: none; }
html[data-look] .board__label { color: var(--ink-2); }
html[data-look] .board__bar { background: var(--green-100); }
html[data-look] .board__bar i { background: var(--green-500); }

/* ---------- Rapport : en-tête blanc et vert ---------- */
html[data-look] .rep-hero,
html[data-look] .rep-hero[data-surface] { --deep: var(--green-50); background: var(--green-50); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
html[data-look] .rep-hero__court { stroke: var(--green-200); opacity: 0.75; }
html[data-look] .rep-back { color: var(--muted); }
html[data-look] .rep-back:hover { color: var(--ink); }
html[data-look] .eyebrow--light { color: var(--green-600); }
html[data-look] .rep-title { color: var(--ink); }
html[data-look] .rep-title i { color: var(--faint); }
html[data-look] .rep-num { color: var(--ink); }
html[data-look] .rep-side.is-fav .rep-num { color: var(--green-500); }
html[data-look] .rep-who small { color: var(--muted); }
html[data-look] .rep-who .avatar { box-shadow: 0 0 0 2px var(--white), var(--shadow-sm); }
html[data-look] .rep-bar { background: rgba(11, 31, 21, 0.09); }
html[data-look] .rep-bar i { background: var(--green-500); }
html[data-look] .rep-verdict { color: var(--ink-2); }
html[data-look] .rep-badge { background: var(--green-100); color: var(--green-700); }
html[data-look] .rep-ghost { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
html[data-look] .rep-ghost:hover { background: var(--green-50); }

/* ---------- Compétitions et tournoi ---------- */
html[data-look] .tcard--big .status--live { background: var(--white); color: var(--green-700); }
html[data-look] .tcard--big .status--live::before { background: var(--green-500); }
html[data-look] .fc-bar:first-child .fc-bar__track i { background: var(--green-700); box-shadow: none; }
html[data-look] .path__item--champ b { color: var(--on-accent); }

/* ---------- Profil ---------- */
html[data-look] .prof-card__avatar { background: var(--white); color: var(--green-700); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14); }
html[data-look] .prof-card__fav b { color: var(--on-accent); }