/* ==========================================================================
   Le Meilleur Produit — Palette de référence
   Fichier unique de définition des couleurs, typographies et espacements.
   Toute nouvelle page doit charger ce fichier AVANT style.css et n'utiliser
   que ces variables (aucune couleur en dur dans les autres feuilles).
   ========================================================================== */

:root {
  /* --- Couleurs de marque -------------------------------------------------
     Accent unique, bleu ardoise : sobre, lisible, contraste AA sur fond clair. */
  --couleur-accent-900: #0f2b46;
  --couleur-accent-700: #16456f;
  --couleur-accent-500: #1d5d94;   /* accent principal */
  --couleur-accent-300: #7aa6c6;
  --couleur-accent-100: #e7eff6;   /* fonds discrets, surlignages */

  /* --- Neutres ------------------------------------------------------------ */
  --couleur-neutre-900: #16181c;   /* texte principal */
  --couleur-neutre-700: #3b4048;
  --couleur-neutre-500: #6b7280;   /* texte secondaire */
  --couleur-neutre-300: #d7dae0;   /* bordures */
  --couleur-neutre-200: #e8eaee;
  --couleur-neutre-100: #f4f5f7;   /* fonds de section */
  --couleur-neutre-000: #ffffff;

  /* --- Couleurs d'état ---------------------------------------------------- */
  --couleur-succes: #1f6b4a;       /* points forts, « oui » */
  --couleur-alerte: #8a5a00;       /* réserves, « à noter » */
  --couleur-erreur: #8c2f2f;       /* points faibles, « non » */
  --couleur-note: #b8860b;         /* étoiles de notation */

  /* --- Rôles sémantiques (à utiliser dans style.css) ---------------------- */
  --fond-page: var(--couleur-neutre-000);
  --fond-alt: var(--couleur-neutre-100);
  --fond-carte: var(--couleur-neutre-000);
  --texte-principal: var(--couleur-neutre-900);
  --texte-secondaire: var(--couleur-neutre-500);
  --texte-inverse: var(--couleur-neutre-000);
  --bordure: var(--couleur-neutre-300);
  --lien: var(--couleur-accent-700);
  --lien-survol: var(--couleur-accent-900);
  --focus: var(--couleur-accent-500);
  --fond-pictogramme: var(--couleur-accent-100);
  --trait-pictogramme: var(--couleur-accent-500);

  /* --- Typographie : polices système des principaux OS --------------------- */
  --police-texte:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --police-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --echelle-xs: 0.8125rem;
  --echelle-s: 0.9375rem;
  --echelle-m: 1rem;
  --echelle-l: 1.25rem;
  --echelle-xl: 1.625rem;
  --echelle-2xl: 2.25rem;

  /* --- Espacements, rayons, ombres ---------------------------------------- */
  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;
  --espace-7: 3rem;
  --espace-8: 4rem;

  --rayon-s: 3px;
  --rayon-m: 6px;
  --largeur-contenu: 68rem;

  --ombre-carte: 0 1px 2px rgba(22, 24, 28, 0.06);

  /* --- Impression (couleurs absolues, non inversées en mode sombre) -------- */
  --impression-texte: #000000;
  --impression-fond: #ffffff;
}

/* --- Mode sombre : respect du réglage système du visiteur ------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --fond-page: #14161a;
    --fond-alt: #1b1e24;
    --fond-carte: #1b1e24;
    --texte-principal: #e9eaed;
    --texte-secondaire: #a2a8b3;
    --texte-inverse: #14161a;
    --bordure: #2f343c;
    --lien: #8fbfe3;
    --lien-survol: #bcd9ef;
    --focus: #8fbfe3;
    --trait-pictogramme: #8fbfe3;
    --couleur-accent-100: #1e2a36;
    --couleur-succes: #6bbf95;
    --couleur-alerte: #d6a44c;
    --couleur-erreur: #d98080;
    --couleur-note: #d9b45b;
    --ombre-carte: none;
  }
}