/* Avenir Next LT Pro — la typographie du groupe Serviceplan, embarquée avec
   l'extension : elle n'est pas sur Google Fonts, et c'est une fonte sous
   licence commerciale (Monotype). Ne pas rediffuser hors périmètre Plan.Net.
   Trois graisses suffisent ici : le corps, les titres, les logotypes. */
@font-face { font-family: "Avenir Next LT Pro"; font-style: normal; font-display: swap; font-weight: 400; src: url("../assets/fonts/AvenirNextLTPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next LT Pro"; font-style: normal; font-display: swap; font-weight: 600; src: url("../assets/fonts/AvenirNextLTPro-Demi.woff2")    format("woff2"); }
@font-face { font-family: "Avenir Next LT Pro"; font-style: normal; font-display: swap; font-weight: 700; src: url("../assets/fonts/AvenirNextLTPro-Bold.woff2")    format("woff2"); }

/* Thèmes Césium — un thème = un bloc de variables.
   Pour en créer un nouveau : copier un bloc, changer l'identifiant
   [data-theme="…"] et les valeurs, puis l'ajouter à THEMES dans js/storage.js. */

/* ⚛️ Césium (défaut) — charte Plan.Net / House of Communication :
   rouge digital, gris chaud, encre anthracite, angles droits, ombres sobres.
   Source : @pnfr/design-system (tokens.css). */
body, body[data-theme="cesium"] {
  --alerte: #b06a00;
  --bg: #e8e5de;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #363636;
  --muted: #6e6e6e;
  --line: rgba(54, 54, 54, .16);
  --border-w: 1.5px;
  --radius: 0;        /* contenants : angles vifs (charte) */
  --radius-sm: 2px;   /* contrôles : boutons, champs, puces */
  --input-bg: #ffffff;

  --topbar-bg: #363636;
  --topbar-ink: #ffffff;

  --accent: #ff4b4f;
  --accent-ink: #ffffff;
  --accent-soft: #fde7e7;
  --success: #e3ede8;

  --cta-bg: #ff4b4f;
  --cta-ink: #ffffff;

  --chip-bg: #e8e5de;
  --chip-ink: #363636;

  --shadow-card: none; /* le relief se fait au filet avant l'ombre */
  --shadow-pop: 0 8px 20px rgba(0, 0, 0, .08);
  --shadow-chip: none;
  --glow: none;

  --w-bold: 600;
  --w-heavy: 600;      /* Demi partout ; le Bold n'appartient qu'au logotype */

  --font-sans: "Avenir Next LT Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  /* ---- Jetons du kit, hérités par les neuf thèmes (tokens.css) ----
     Six tailles de texte, pas seize : eyebrow, libellé, corps compact, corps
     large, titre, chiffre clé. Les thèmes-récompenses n'en redéfinissent
     aucun : l'échelle et le mouvement sont les mêmes dans toutes les peaux. */
  --fs-eyebrow: 12px;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-body: 16px;
  --fs-titre: 18px;
  --fs-stat: 28px;
  --lh: 1.45;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --ease-out: cubic-bezier(.2, .6, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --h-control: 40px;

  --fg-subtle: #9a9a9a;
  --success-ink: #2a654a;
  --danger: #e63a3e;
  --danger-soft: #fde7e7;
  --warning-soft: #f7eedc;
}

/* ⚛️ Césium sombre — variante charte (tokens.dark.css) */
body[data-theme="cesium-dark"] {
  --alerte: #e8a13a;
  --bg: #000000;
  --surface: #1a1a1a;
  --card: #1a1a1a;
  --ink: #e8e5de;
  --muted: #a8a49b;
  --line: rgba(232, 229, 222, .16);
  --border-w: 1.5px;
  --radius: 0;
  --radius-sm: 2px;
  --input-bg: #1a1a1a;

  --topbar-bg: #1a1a1a;
  --topbar-ink: #e8e5de;

  --accent: #ff4b4f;
  --accent-ink: #ffffff;
  --accent-soft: #3a1e1f;
  --success: #22352b;

  --cta-bg: #ff4b4f;
  --cta-ink: #ffffff;

  --chip-bg: #262626;
  --chip-ink: #e8e5de;

  --shadow-card: none;
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-chip: none;
  --glow: none;

  --w-bold: 600;
  --w-heavy: 600;

  --font-sans: "Avenir Next LT Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  /* Couleurs d'état du sombre (tokens.dark.css). L'échelle et le mouvement
     viennent du bloc de base. Pas de point-virgule dans ce commentaire :
     check-drift remonte au point-virgule précédent pour reconnaître un jeton. */
  --fg-subtle: #757168;
  --success-ink: #94c29d;
  --danger: #ff4b4f;
  --danger-soft: rgba(255, 75, 79, .16);
  --warning-soft: rgba(232, 161, 58, .14);
}

/* 🎨 Cartoon — contours épais, couleurs franches, ombres décalées */
body[data-theme="cartoon"] {
  --alerte: #b06a00;
  --bg: #fff7ed;
  --surface: #fffdf9;
  --card: #ffffff;
  --ink: #1c2333;
  --muted: #78716c;
  --line: #1c2333;
  --border-w: 2px;
  --radius: 12px;
  --radius-sm: 9px;
  --input-bg: #ffffff;

  --topbar-bg: #ffd166;
  --topbar-ink: #1c2333;

  --accent: #ef476f;
  --accent-ink: #ffffff;
  --accent-soft: #ffe3ea;
  --success: #8ce99a;

  --cta-bg: #ef476f;
  --cta-ink: #ffffff;

  --chip-bg: #ffffff;
  --chip-ink: #1c2333;

  --shadow-card: 2px 2px 0 rgba(54, 54, 54, .15);
  --shadow-pop: 3px 3px 0 #1c2333;
  --shadow-chip: 2px 2px 0 #1c2333;
  --glow: none;

  --w-bold: 800;
  --w-heavy: 900;
}

/* 🤍 Épuré — blanc, aéré, accent vert discret */
body[data-theme="epure"] {
  --alerte: #b06a00;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e3e6eb;
  --border-w: 1px;
  --radius: 10px;
  --radius-sm: 7px;
  --input-bg: #ffffff;

  --topbar-bg: #ffffff;
  --topbar-ink: #111827;

  --accent: #0f7b5f;
  --accent-ink: #ffffff;
  --accent-soft: #e2f3ee;
  --success: #e2f3ee;

  --cta-bg: #0f7b5f;
  --cta-ink: #ffffff;

  --chip-bg: #e2f3ee;
  --chip-ink: #0f7b5f;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .05);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .08);
  --shadow-chip: none;
  --glow: none;

  --w-bold: 600;
  --w-heavy: 700;
}

/* 👑 Or — le thème de prestige (niveau 12) : luxe sombre et doré */
body[data-theme="or"] {
  --alerte: #e8a13a;
  --bg: #1a1409;
  --surface: #241c0d;
  --card: #2d2412;
  --ink: #f5e8c8;
  --muted: #a89468;
  --line: #8a6d1a;
  --border-w: 2px;
  --radius: 10px;
  --radius-sm: 8px;
  --input-bg: #1a1409;

  --topbar-bg: linear-gradient(135deg, #2d2412, #241c0d);
  --topbar-ink: #e3b341;

  --accent: #e3b341;
  --accent-ink: #1a1409;
  --accent-soft: rgba(227, 179, 65, .14);
  --success: rgba(227, 179, 65, .28);

  --cta-bg: linear-gradient(135deg, #e3b341, #b8860b);
  --cta-ink: #1a1409;

  --chip-bg: rgba(227, 179, 65, .12);
  --chip-ink: #e3b341;

  --shadow-card: 0 1px 5px rgba(0, 0, 0, .5);
  --shadow-pop: 0 0 18px rgba(227, 179, 65, .35);
  --shadow-chip: 0 0 10px rgba(227, 179, 65, .25);
  --glow: 0 0 8px rgba(227, 179, 65, .45);

  --w-bold: 700;
  --w-heavy: 800;
}

/* 🎄 Noël — saisonnier (décembre) : sapin, rouge et crème */
body[data-theme="noel"] {
  --alerte: #b06a00;
  --bg: #fdf6ec;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #1e2f23;
  --muted: #6b7a6e;
  --line: #14532d;
  --border-w: 2px;
  --radius: 12px;
  --radius-sm: 9px;
  --input-bg: #ffffff;

  --topbar-bg: #14532d;
  --topbar-ink: #fdf6ec;

  --accent: #c1121f;
  --accent-ink: #ffffff;
  --accent-soft: #fde8e9;
  --success: #b7e4c7;

  --cta-bg: #c1121f;
  --cta-ink: #ffffff;

  --chip-bg: #fdf6ec;
  --chip-ink: #14532d;

  --shadow-card: 2px 2px 0 rgba(20, 83, 45, .18);
  --shadow-pop: 3px 3px 0 #14532d;
  --shadow-chip: 2px 2px 0 #14532d;
  --glow: none;

  --w-bold: 700;
  --w-heavy: 800;
}

/* 🏝️ Été — saisonnier (juillet-août) : ciel, sable et soleil */
body[data-theme="ete"] {
  --alerte: #b06a00;
  --bg: #fef9ef;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #173753;
  --muted: #7d8ca3;
  --line: #173753;
  --border-w: 2px;
  --radius: 14px;
  --radius-sm: 10px;
  --input-bg: #ffffff;

  --topbar-bg: linear-gradient(135deg, #0ea5e9, #38bdf8);
  --topbar-ink: #ffffff;

  --accent: #f77f00;
  --accent-ink: #ffffff;
  --accent-soft: #ffedd8;
  --success: #99e2b4;

  --cta-bg: #f77f00;
  --cta-ink: #ffffff;

  --chip-bg: #ffffff;
  --chip-ink: #0284c7;

  --shadow-card: 2px 3px 0 rgba(23, 55, 83, .15);
  --shadow-pop: 3px 4px 0 rgba(23, 55, 83, .8);
  --shadow-chip: 2px 2px 0 rgba(23, 55, 83, .8);
  --glow: none;

  --w-bold: 700;
  --w-heavy: 800;
}

/* 🕹️ Pixel — arcade rétro 8-bit, coins carrés, or & indigo, sprites animés */
body[data-theme="pixel"] {
  --alerte: #e8a13a;
  --bg: #14172a;
  --surface: #1e2340;
  --card: #262c4d;
  --ink: #f4f6ff;
  --muted: #8b93bd;
  --line: #3a4270;
  --border-w: 2px;
  --radius: 0px;
  --radius-sm: 0px;
  --input-bg: #14172a;

  --topbar-bg: #1e2340;
  --topbar-ink: #ffce3a;

  --accent: #ffce3a;
  --accent-ink: #14172a;
  --accent-soft: rgba(255, 206, 58, .16);
  --success: #5ce27a;

  --cta-bg: #ef476f;
  --cta-ink: #ffffff;

  --chip-bg: #14172a;
  --chip-ink: #ffce3a;

  --shadow-card: 3px 3px 0 #0d1020;
  --shadow-pop: 3px 3px 0 #0d1020;
  --shadow-chip: 2px 2px 0 #0d1020;
  --glow: 0 0 6px rgba(255, 206, 58, .4);

  --w-bold: 700;
  --w-heavy: 700;

  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  letter-spacing: .3px;
}
body[data-theme="pixel"] h1,
body[data-theme="pixel"] h2,
body[data-theme="pixel"] .game-status,
body[data-theme="pixel"] .quest-title,
body[data-theme="pixel"] .field > span,
body[data-theme="pixel"] .day-header h2 { text-transform: uppercase; }

/* 🌑 Arcade — dark néon, le mode jeu vidéo assumé */
body[data-theme="arcade"] {
  --alerte: #e8a13a;
  --bg: #0d1117;
  --surface: #161b26;
  --card: #1c2333;
  --ink: #e6edf3;
  --muted: #8b95a8;
  --line: #2a3245;
  --border-w: 1px;
  --radius: 10px;
  --radius-sm: 8px;
  --input-bg: #0d1117;

  --topbar-bg: linear-gradient(135deg, #1c2333, #161b26);
  --topbar-ink: #e6edf3;

  --accent: #7ee2b8;
  --accent-ink: #04111d;
  --accent-soft: rgba(126, 226, 184, .12);
  --success: rgba(126, 226, 184, .18);

  --cta-bg: linear-gradient(135deg, #10b981, #0ea5e9);
  --cta-ink: #04111d;

  --chip-bg: rgba(126, 226, 184, .12);
  --chip-ink: #7ee2b8;

  --shadow-card: 0 1px 4px rgba(0, 0, 0, .4);
  --shadow-pop: 0 0 16px rgba(16, 185, 129, .35);
  --shadow-chip: 0 0 12px rgba(126, 226, 184, .25);
  --glow: 0 0 8px rgba(126, 226, 184, .3);

  --w-bold: 700;
  --w-heavy: 800;
}

/* ---- Alignement charte ----
   Les deux thèmes Césium n'ont ni filet de carte ni filet sous la barre : la
   surface blanche sur le gris chaud suffit. app.css écrit
   `border: var(--carte-filet, var(--border-w)) solid var(--line)` ; les sept
   récompenses (Cartoon, Noël, Été… vivent de leur contour) ne définissent pas
   ces variables et gardent leurs filets sans être retouchées. */
body:not([data-theme]), body[data-theme="cesium"], body[data-theme="cesium-dark"] {
  --carte-filet: 0;
  --barre-filet: 0;
}