/* ==========================================================================
   Variables CSS — Design system conseil.peccini.fr
   ========================================================================== */

:root {
  /* --- Couleurs principales --- */
  --couleur-primaire: #1a2a4a;
  --couleur-primaire-clair: #2c6fbb;
  --couleur-accent: #650303;

  /* --- Couleurs de surface --- */
  --couleur-fond: #ffffff;
  --couleur-fond-secondaire: #f5f6f8;
  --couleur-fond-code: #f0f2f5;
  --couleur-fond-encart: #f8f9fb;

  /* --- Couleurs de texte --- */
  --couleur-texte: #1a1a1a;
  --couleur-texte-secondaire: #4a4a4a;
  --couleur-texte-leger: #6a6a6a;
  --couleur-texte-inverse: #ffffff;

  /* --- Couleurs de lien --- */
  --couleur-lien: #2c6fbb;
  --couleur-lien-visite: #1a2a4a;
  --couleur-lien-survol: #650303;
  --couleur-lien-focus: #2c6fbb;

  /* --- Couleurs de bordure --- */
  --couleur-bordure: #d0d4da;
  --couleur-bordure-legere: #e8eaed;

  /* --- Couleurs des encarts --- */
  --couleur-encart-info: #2c6fbb;
  --couleur-encart-important: #c0392b;
  --couleur-encart-attention: #b35900;
  --couleur-encart-exemple: #27ae60;
  --couleur-encart-citation: #7f8c8d;

  /* --- Couleurs header/footer --- */
  --couleur-header-fond: #1a2a4a;
  --couleur-header-texte: #ffffff;
  --couleur-footer-fond: #1a2a4a;
  --couleur-footer-texte: #d0d4da;
  --couleur-footer-lien: #8ab4e8;

  /* --- Couleurs tags --- */
  --couleur-tag-fond: #e8eef6;
  --couleur-tag-texte: #1a2a4a;
  --couleur-tag-fond-survol: #2c6fbb;
  --couleur-tag-texte-survol: #ffffff;

  /* --- Couleurs carte --- */
  --couleur-carte-fond: #ffffff;
  --couleur-carte-bordure: #e8eaed;
  --couleur-carte-ombre: rgba(0, 0, 0, 0.08);

  /* --- Typographie --- */
  --police-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-serif: Georgia, "Times New Roman", Times, serif;
  --police-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --taille-base: 1rem;
  --taille-petite: 0.875rem;
  --taille-tres-petite: 0.8125rem;
  --taille-grande: 1.125rem;
  --taille-h1: 2rem;
  --taille-h2: 1.5rem;
  --taille-h3: 1.25rem;
  --taille-h4: 1.125rem;

  --hauteur-ligne: 1.7;
  --hauteur-ligne-titre: 1.3;

  /* --- Espacement --- */
  --espacement-xs: 0.25rem;
  --espacement-sm: 0.5rem;
  --espacement-md: 1rem;
  --espacement-lg: 1.5rem;
  --espacement-xl: 2rem;
  --espacement-2xl: 3rem;
  --espacement-3xl: 4rem;

  /* --- Mise en page --- */
  --largeur-max: 48rem;
  --largeur-max-large: 64rem;
  --marge-laterale: 1.5rem;

  /* --- Bordures --- */
  --rayon-bordure: 0.25rem;
  --rayon-bordure-grand: 0.5rem;
  --largeur-bordure-encart: 4px;

  /* --- Transitions --- */
  --transition-rapide: 150ms ease;
  --transition-normale: 250ms ease;

  /* --- Ombres --- */
  --ombre-legere: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ombre-moyenne: 0 2px 8px rgba(0, 0, 0, 0.12);

  /* --- Breakpoint --- */
  --breakpoint-mobile: 768px;
}

/* ==========================================================================
   Mode sombre — détection automatique
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --couleur-fond: #121820;
    --couleur-fond-secondaire: #1a2230;
    --couleur-fond-code: #1e2738;
    --couleur-fond-encart: #1a2230;

    --couleur-texte: #e0e0e0;
    --couleur-texte-secondaire: #b0b0b0;
    --couleur-texte-leger: #909090;

    --couleur-lien: #6fa8e0;
    --couleur-lien-visite: #8ab4e8;
    --couleur-lien-survol: #e07070;
    --couleur-lien-focus: #6fa8e0;

    --couleur-bordure: #2a3545;
    --couleur-bordure-legere: #1e2a3a;

    --couleur-header-fond: #0d1520;
    --couleur-footer-fond: #0d1520;

    --couleur-encart-attention: #e8a060;

    --couleur-tag-fond: #1e2a3a;
    --couleur-tag-texte: #8ab4e8;
    --couleur-tag-fond-survol: #2c6fbb;
    --couleur-tag-texte-survol: #ffffff;

    --couleur-carte-fond: #1a2230;
    --couleur-carte-bordure: #2a3545;
    --couleur-carte-ombre: rgba(0, 0, 0, 0.3);

    --ombre-legere: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ombre-moyenne: 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Onglets univers */
    --couleur-tab-portail: #8ab4e8;
    --couleur-tab-portail-25: rgba(138, 180, 232, 0.25);
    --couleur-tab-fabnum: #e8a0a0;
    --couleur-tab-fabnum-25: rgba(232, 160, 160, 0.25);
    --couleur-tab-musia: #a0d0a0;
    --couleur-tab-musia-25: rgba(160, 208, 160, 0.25);
    --couleur-tab-iron: #a0b0c0;
    --couleur-tab-iron-25: rgba(160, 176, 192, 0.25);

    /* Activité univers */
    --couleur-activite-fabnum-fond: #1a1215;
    --couleur-activite-fabnum-bordure: #e8a0a0;
    --couleur-activite-musia-fond: #121a12;
    --couleur-activite-musia-bordure: #a0d0a0;
    --couleur-activite-iron-fond: #141a20;
    --couleur-activite-iron-bordure: #a0b0c0;
  }
}

/* ==========================================================================
   Mode sombre — activation manuelle
   ========================================================================== */

[data-theme="sombre"] {
  --couleur-fond: #121820;
  --couleur-fond-secondaire: #1a2230;
  --couleur-fond-code: #1e2738;
  --couleur-fond-encart: #1a2230;

  --couleur-texte: #e0e0e0;
  --couleur-texte-secondaire: #b0b0b0;
  --couleur-texte-leger: #909090;

  --couleur-lien: #6fa8e0;
  --couleur-lien-visite: #8ab4e8;
  --couleur-lien-survol: #e07070;
  --couleur-lien-focus: #6fa8e0;

  --couleur-bordure: #2a3545;
  --couleur-bordure-legere: #1e2a3a;

  --couleur-header-fond: #0d1520;
  --couleur-footer-fond: #0d1520;

  --couleur-encart-attention: #e8a060;

  --couleur-tag-fond: #1e2a3a;
  --couleur-tag-texte: #8ab4e8;
  --couleur-tag-fond-survol: #2c6fbb;
  --couleur-tag-texte-survol: #ffffff;

  --couleur-carte-fond: #1a2230;
  --couleur-carte-bordure: #2a3545;
  --couleur-carte-ombre: rgba(0, 0, 0, 0.3);

  --ombre-legere: 0 1px 3px rgba(0, 0, 0, 0.3);
  --ombre-moyenne: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* Onglets univers */
  --couleur-tab-portail: #8ab4e8;
  --couleur-tab-portail-25: rgba(138, 180, 232, 0.25);
  --couleur-tab-fabnum: #e8a0a0;
  --couleur-tab-fabnum-25: rgba(232, 160, 160, 0.25);
  --couleur-tab-musia: #a0d0a0;
  --couleur-tab-musia-25: rgba(160, 208, 160, 0.25);
  --couleur-tab-iron: #a0b0c0;
  --couleur-tab-iron-25: rgba(160, 176, 192, 0.25);

  /* Activité univers */
  --couleur-activite-fabnum-fond: #1a1215;
  --couleur-activite-fabnum-bordure: #e8a0a0;
  --couleur-activite-musia-fond: #121a12;
  --couleur-activite-musia-bordure: #a0d0a0;
  --couleur-activite-iron-fond: #141a20;
  --couleur-activite-iron-bordure: #a0b0c0;
}

/* ==========================================================================
   Mode clair — activation manuelle (réinitialisation)
   ========================================================================== */

[data-theme="clair"] {
  --couleur-fond: #ffffff;
  --couleur-fond-secondaire: #f5f6f8;
  --couleur-fond-code: #f0f2f5;
  --couleur-fond-encart: #f8f9fb;

  --couleur-texte: #1a1a1a;
  --couleur-texte-secondaire: #4a4a4a;
  --couleur-texte-leger: #6a6a6a;

  --couleur-lien: #2c6fbb;
  --couleur-lien-visite: #1a2a4a;
  --couleur-lien-survol: #650303;
  --couleur-lien-focus: #2c6fbb;

  --couleur-bordure: #d0d4da;
  --couleur-bordure-legere: #e8eaed;

  --couleur-header-fond: #1a2a4a;
  --couleur-footer-fond: #1a2a4a;

  --couleur-tag-fond: #e8eef6;
  --couleur-tag-texte: #1a2a4a;
  --couleur-tag-fond-survol: #2c6fbb;
  --couleur-tag-texte-survol: #ffffff;

  --couleur-carte-fond: #ffffff;
  --couleur-carte-bordure: #e8eaed;
  --couleur-carte-ombre: rgba(0, 0, 0, 0.08);

  --ombre-legere: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ombre-moyenne: 0 2px 8px rgba(0, 0, 0, 0.12);
}