/* Setwise · apparence « sombre » de l'application. Mêmes règles que le mode clair (app.css + app-look.css) :
   seuls les jetons changent, plus quelques fonds écrits en dur. --white reste le fond des cartes, --on-accent le
   texte posé sur le vert ou le court (toujours blanc). Active quand <html data-look="sombre">. */

html[data-look="sombre"] {
  color-scheme: dark;
  --page: #0c1210;
  --white: #141c18;
  --paper: #1b2520;
  --ink: #eef3ef;
  --ink-2: #c8d2cc;
  --muted: #8d9b93;
  --faint: #65726b;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --green-50: rgba(40, 180, 106, 0.12);
  --green-100: rgba(40, 180, 106, 0.2);
  --green-200: rgba(40, 180, 106, 0.34);
  --green-500: #1c9a5a;
  --green-600: #20ad66;
  --green-700: #7fdcab;
  --court: #0f4a30;

  --pa: #2fbf74;
  --pb: #b7c7bd;
  --pa-soft: rgba(47, 191, 116, 0.14);
  --pb-soft: rgba(183, 199, 189, 0.12);
  --bad: #ef8a70;

  --shadow-sm: var(--ring), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: var(--ring), 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: var(--ring), 0 4px 8px rgba(0, 0, 0, 0.25), 0 24px 64px -12px rgba(0, 0, 0, 0.55);
}

/* ---------- Coquille ---------- */
html[data-look="sombre"] body,
html[data-look="sombre"] .app-body { background: var(--page); }
html[data-look="sombre"] .app-nav { background: rgba(12, 18, 16, 0.9); }
html[data-look="sombre"] .side { background: #101714; }
html[data-look="sombre"] .tabbar { background: #141c18; box-shadow: 0 0 0 1px var(--line), 0 20px 44px -16px rgba(0, 0, 0, 0.7); }
html[data-look="sombre"] .tabbar a.is-active { background: #1c9a5a; }
html[data-look="sombre"] .rep-nav,
html[data-look="sombre"] .t-tabs { background: var(--page); }
html[data-look="sombre"] .skel__row { background: linear-gradient(90deg, var(--paper) 0%, #222e28 50%, var(--paper) 100%); background-size: 200% 100%; }

/* ---------- Pastilles et boutons écrits en dur pour le fond blanc ---------- */
html[data-look="sombre"] .tone--warn { background: rgba(230, 140, 80, 0.14); color: #f0b27f; }
html[data-look="sombre"] .status--upcoming { background: rgba(110, 150, 210, 0.14); color: #9fbbe3; }
html[data-look="sombre"] .verdict--ko,
html[data-look="sombre"] .btn--danger,
html[data-look="sombre"] .icon-btn--danger:hover { background: rgba(239, 138, 112, 0.14); color: var(--bad); }
html[data-look="sombre"] .btn--danger:hover { background: rgba(239, 138, 112, 0.22); }

/* ---------- Analyse et rapport ---------- */
html[data-look="sombre"] .board { background: rgba(20, 28, 24, 0.97); }
html[data-look="sombre"] .rep-hero,
html[data-look="sombre"] .rep-hero[data-surface] { --deep: #10201a; background: #10201a; }
html[data-look="sombre"] .rep-hero__court { stroke: rgba(127, 220, 171, 0.18); }
html[data-look="sombre"] .rep-who .avatar { box-shadow: 0 0 0 2px var(--page), var(--shadow-sm); }
html[data-look="sombre"] .rep-bar { background: rgba(255, 255, 255, 0.1); }
html[data-look="sombre"] .t-hero__court .court { stroke: var(--logo-court-s, var(--surf)); stroke-opacity: 0.9; }

/* Bouton « Lancer l'analyse » : vert plus vif, halo, balle sur un rond clair */
html[data-look="sombre"] .ready__btn > span { background: #22b36a; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 28px -8px rgba(34, 179, 106, 0.7); }
html[data-look="sombre"] .ready__btn:hover > span { background: #27c476; }
html[data-look="sombre"] .ready__ball { background: #eef3ef; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px -8px rgba(0, 0, 0, 0.6); }

/* Verdict : fond de page, la terre battue garde ses couleurs */
html[data-look="sombre"] .vd:not(.vd--terre) { --v-bg: var(--page); --v-logo: #fff; }

/* Listes déroulantes */
html[data-look="sombre"] .menu__list { background: #18221d; box-shadow: 0 0 0 1px var(--line-2), 0 18px 44px -14px rgba(0, 0, 0, 0.7); }
html[data-look="sombre"] .menu__opt.is-active { background: rgba(255, 255, 255, 0.06); }
html[data-look="sombre"] .menu__opt[aria-selected="true"], html[data-look="sombre"] .menu__check { color: #7fdcab; }

/* Forfaits : Lifetime garde son jaune sur un fond olive ; encoches du ticket couleur de la page */
html[data-look="sombre"] .plan--lifetime { --l-bg: color-mix(in srgb, var(--ball) 7%, #121a15); box-shadow: 0 0 0 1.5px var(--ball), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
html[data-look="sombre"] .plans-group--once .plans-label { color: var(--ball); }