/* ============================================================
TACTI — Design system (light par défaut, aligné sur la landing :
blanc, encre, hairlines, vert #10A05A, Inter partout)
============================================================ */
/* DM Sans (corps, Google Fonts) + Satoshi (titres, Fontshare) chargées via dans le de chaque page */
:root {
color-scheme: dark;
/* Surfaces */
--bg: #040B06;
--bg-elev: #08120A;
--surface: #0B1710;
--surface-2: rgba(255,255,255,0.04);
--surface-3: rgba(255,255,255,0.08);
--surface-hi: rgba(255,255,255,0.13);
/* Lines */
--border: rgba(255,255,255,0.07);
--border-2: rgba(255,255,255,0.11);
--border-strong: rgba(255,255,255,0.22);
/* Text */
--text: #E8F5EC;
--text-2: rgba(232,245,236,0.58);
--text-3: rgba(232,245,236,0.32);
--text-on-green: #FFFFFF;
/* Brand — vivid grass, tuned for dark bg */
--green: #22C55E;
--green-bright: #4ADE80;
--green-deep: #16A34A;
--green-700: #15803D;
--green-soft: rgba(34,197,94,0.13);
--green-soft-2: rgba(34,197,94,0.22);
--green-glow: rgba(34,197,94,0.24);
/* Étoiles de notation : pleines en vert, vides en vert atténué (jamais de gris,
jamais d'ambre). Une seule source de vérité pour toutes les pages. */
--star: var(--green);
--star-off: rgba(34,197,94,0.28);
/* Secondary accents */
--orange: #FB923C;
--orange-soft: rgba(251,146,60,0.18);
--red: #F87171;
--blue: #60A5FA;
--yellow: #FCD34D;
/* Pitch */
--pitch: #2f8f4e;
--pitch-2: #2b8649;
--pitch-line: rgba(255,255,255,1);
/* Radii */
--r-xs: 6px;
--r-sm: 8px;
--r: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,.45);
--shadow: 0 2px 8px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
--shadow-lg: 0 8px 24px rgba(0,0,0,.55), 0 32px 64px rgba(0,0,0,.65);
--ring: 0 0 0 3px var(--green-soft-2);
/* Chip neumorphique : surlignage interne en bas + halo doux */
--shadow-chip: inset 0 -2px 0 0 rgba(0,0,0,.28), 0 1.2px 6px 0 rgba(0,0,0,.32);
/* Type */
--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-title: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
--sidebar-w: 256px; /* largeur du volet de navigation */
--topbar-h: 70px;
}
/* ============================================================
Light theme
============================================================ */
[data-theme="light"] {
color-scheme: light;
/* Aligné sur la landing : fond blanc, encre quasi-noire, vert gazon en accent */
/* Aligné sur la nouvelle landing (2026-07) : blanc, encre #131416, hairlines, vert #10A05A */
--bg: #FFFFFF;
--bg-elev: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #F4F5F6;
--surface-3: #ECEEF0;
--surface-hi: #E4E6E9;
--border: #E9EAEC;
--border-2: #DFE1E4;
--border-strong: rgba(19,20,22,0.24);
--text: #131416;
--text-2: #63676E;
--text-3: #9A9EA5;
--text-on-green: #FFFFFF;
--green: #10A05A;
--green-bright: #0B7A44; /* utilisé comme texte/icône d'accent : volontairement foncé pour rester lisible sur clair */
--green-deep: #0B7A44;
--green-700: #085F35;
--green-soft: #EAF7F0;
--green-soft-2: rgba(16,160,90,0.16);
--green-glow: rgba(16,160,90,0.18);
--star: var(--green);
--star-off: #C3E7D6;
--pitch: #38A55E;
--pitch-2: #41AE67;
/* Anneau de focus clavier sur l'accent bleu de la DA (il était vert) */
--ring: 0 0 0 3px rgba(67,135,244,.35);
--shadow-sm: 0 1px 2px rgba(19,20,22,.04);
--shadow: 0 1px 2px rgba(19,20,22,.04), 0 12px 32px -12px rgba(19,20,22,.10);
--shadow-lg: 0 2px 6px rgba(19,20,22,.04), 0 30px 70px rgba(19,20,22,.12);
--shadow-chip: inset 0 -2px 0 0 rgba(19,20,22,.05), 0 1.2px 6.3px 0 rgba(19,20,22,.05);
}
[data-theme="light"] .sidebar {
background: #fff;
backdrop-filter: none;
}
[data-theme="light"] .sidebar::before { display: none; }
[data-theme="light"] .topbar { background: rgba(255,255,255,0.88); }
[data-theme="light"] .lp-nav { background: rgba(255,255,255,0.88); }
[data-theme="light"] .card,
[data-theme="light"] .pcard { background: #fff; border-color: #ededed; backdrop-filter: none; --pcard-fade: #fff; }
[data-theme="light"] .pcard:hover { border-color: #dcdcde; box-shadow: var(--shadow); background: #fff; }
/* Jauge de difficulté : niveau neutre. En vert elle se lisait comme un signal
« bon », alors qu'elle mesure une exigence. */
[data-theme="light"] .diff i { background: #ededed; }
[data-theme="light"] .diff[data-level="1"] i:nth-child(-n+1),
[data-theme="light"] .diff[data-level="2"] i:nth-child(-n+2),
[data-theme="light"] .diff[data-level="3"] i:nth-child(-n+3) { background: #18181b; }
[data-theme="light"] .btn-soft { background: #f5f5f5; color: #18181b; border-color: transparent; }
[data-theme="light"] .btn-soft:hover { background: #ececec; border-color: transparent; }
/* background-color (pas le raccourci background) : sinon on réinitialise
background-repeat/position et le chevron du