/* NouEcom — jetons de direction artistique partagés par la coque et les onglets.
   Modèle : la barre latérale de WiMark (bleu nuit, rubriques en petites capitales, icônes au trait Lucide,
   item actif en pastille bleu marine). Le contenu des onglets reste clair, façon Notion.
   À charger avec <link rel="stylesheet" href="/theme.css"> puis utiliser les variables ci-dessous. */
:root {
  /* Barre latérale (identique en clair et en sombre) */
  --pe-side-bg: #0f1524;
  --pe-side-fg: #eef0f5;
  --pe-side-muted: #8b93a7;
  --pe-side-label: #6b7389;
  --pe-side-line: rgba(255, 255, 255, .08);
  --pe-side-hover: rgba(255, 255, 255, .05);
  --pe-side-active: #1e2a4a;
  --pe-side-badge-bg: #232b3d;
  --pe-side-badge-fg: #8b93a7;
  /* Panneau « Ressources » de toutes les pages (/shared/ressources.js) : gris neutre, cartes presque blanches (choix d'Hugo, pas de mauve) ; et étape en cours d'Analyse produits */
  --pe-res-bg: #f1f2f4;
  --pe-res-surface: #fbfbfc;
  --pe-res-hover: #e9ebef;
  --pe-res-fg: #1b1f2a;
  --pe-res-muted: #4b5263;
  --pe-res-faint: #5f6673;   /* libellés de section : #6b7280 ne donnait que 4,3:1 sur le fond */
  --pe-res-code: #e7e9ed;
  --pe-res-link: #2383e2;    /* icônes et contour de focus, le bleu de la plateforme */
  --pe-res-line: rgba(27, 31, 42, .08);
  --pe-step-now: #eaf3fd;

  /* Accent de marque (boutons principaux, liens, focus) */
  --pe-accent: #1e2a4a;
  --pe-accent-strong: #2383e2;

  /* Typo et formes */
  --pe-font: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pe-radius: 8px;
  --pe-icon-stroke: 1.75;   /* icônes Lucide au trait fin, 16 px */
}

/* Mode sombre : le panneau gris en version sombre (jamais de fond clair éblouissant), étape en cours en bleu discret. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pe-res-bg: #23262d; --pe-res-surface: #2d3139; --pe-res-hover: #363a44; --pe-res-fg: #eceef2;
    --pe-res-muted: #c3c8d1; --pe-res-faint: #9aa1ad; --pe-res-code: #3a3f4a; --pe-res-link: #6aa8ef;
    --pe-res-line: rgba(255, 255, 255, .08); --pe-step-now: rgba(82, 156, 202, .2);
  }
}
:root[data-theme="dark"] {
  --pe-res-bg: #23262d; --pe-res-surface: #2d3139; --pe-res-hover: #363a44; --pe-res-fg: #eceef2;
  --pe-res-muted: #c3c8d1; --pe-res-faint: #9aa1ad; --pe-res-code: #3a3f4a; --pe-res-link: #6aa8ef;
  --pe-res-line: rgba(255, 255, 255, .08); --pe-step-now: rgba(82, 156, 202, .2);
}