/* ==========================================================================
   Couleurs et ambiances
   - :root              → valeurs par défaut (= ambiance « moderne »)
   - [data-theme=...]   → les 3 ambiances prédéfinies
   - Toutes les couleurs du site passent par ces variables (styles.css n'a
     aucune couleur en dur). Pour ajuster une couleur, utiliser
     reglages.couleurs dans content.js : inutile de toucher à ce fichier.
   ========================================================================== */

:root{
  /* polices */
  --font-title:'Manrope',Arial,sans-serif;
  --font-body:'DM Sans',Arial,sans-serif;

  /* couleurs de base (celles qu'on règle le plus souvent) */
  --navy:#0b203b;      /* fond sombre : section expériences, cartes sombres */
  --blue:#244fe6;      /* couleur principale : boutons, nom, bloc contact */
  --orange:#ee7943;    /* accent : point du logo, soulignements, focus */
  --text:#152944;      /* texte courant */
  --muted:#647083;     /* texte secondaire */
  --line:#dce1e9;      /* filets et bordures */
  --paper:#f6f8fc;     /* fonds clairs secondaires */
  --surface:#fff;      /* fond de page et des cartes claires */
  --on-dark:#fff;      /* texte sur fond sombre ou principal */

  /* nuances dérivées : calculées à partir des couleurs de base */
  --blue-dark:color-mix(in srgb,var(--blue) 80%,#000);
  --tag-ink:color-mix(in srgb,var(--blue) 82%,#000);
  --tag-bg:color-mix(in srgb,var(--blue) 8%,var(--surface));
  --tag-line:color-mix(in srgb,var(--blue) 16%,var(--surface));
  --paper-hover:color-mix(in srgb,var(--blue) 10%,var(--paper));
  --faint:color-mix(in srgb,var(--muted) 55%,var(--surface));
  --faint-2:color-mix(in srgb,var(--muted) 45%,var(--surface));
  /* textes sur fond sombre (--navy) */
  --dk-1:color-mix(in srgb,var(--on-dark) 84%,var(--navy));
  --dk-2:color-mix(in srgb,var(--on-dark) 72%,var(--navy));
  --dk-3:color-mix(in srgb,var(--on-dark) 68%,var(--navy));
  --dk-4:color-mix(in srgb,var(--on-dark) 68%,var(--navy));
  --dk-5:color-mix(in srgb,var(--on-dark) 65%,var(--navy));
  --dk-6:color-mix(in srgb,var(--on-dark) 70%,var(--navy));
  --dk-7:color-mix(in srgb,var(--on-dark) 67%,var(--navy));
  --dk-8:color-mix(in srgb,var(--on-dark) 45%,var(--navy));
  /* textes sur fond principal (--blue) */
  --bl-1:color-mix(in srgb,var(--on-dark) 90%,var(--blue));
  --bl-2:color-mix(in srgb,var(--on-dark) 86%,var(--blue));
  --bl-3:color-mix(in srgb,var(--on-dark) 82%,var(--blue));
  /* filets et survols translucides sur fond coloré */
  --ol-1:color-mix(in srgb,var(--on-dark) 15%,transparent);
  --ol-2:color-mix(in srgb,var(--on-dark) 21%,transparent);
  --ol-3:color-mix(in srgb,var(--on-dark) 27%,transparent);
  --ol-4:color-mix(in srgb,var(--on-dark) 31%,transparent);
  --ol-5:color-mix(in srgb,var(--on-dark) 50%,transparent);
  --ol-6:color-mix(in srgb,var(--on-dark) 52%,transparent);
  --ol-7:color-mix(in srgb,var(--on-dark) 9%,transparent);
}

/* --------------------------------------------------------------------------
   MODERNE : reproduit exactement le portfolio d'origine (bleu marine / bleu / orange)
   Quand reglages.couleurs est vide, les valeurs exactes ci-dessous s'appliquent ;
   dès qu'une couleur est personnalisée, les nuances sont recalculées (cf. render.js).
   -------------------------------------------------------------------------- */
:root[data-theme="moderne"]:not([data-custom]){
  --blue-dark:#183bc4;
  --tag-ink:#2445a8;--tag-bg:#eef2ff;--tag-line:#dce4ff;--paper-hover:#e8edf8;
  --faint:#a6b1c2;--faint-2:#bac2ce;
  --dk-1:#d2dae6;--dk-2:#b9c7da;--dk-3:#adbbcd;--dk-4:#aebfde;--dk-5:#a6b9d8;--dk-6:#b1bfd2;--dk-7:#acb9cc;--dk-8:#7790b2;
  --bl-1:#e0e8ff;--bl-2:#dce5ff;--bl-3:#d5dfff;
  --ol-1:#ffffff25;--ol-2:#ffffff35;--ol-3:#ffffff45;--ol-4:#ffffff50;--ol-5:#ffffff80;--ol-6:#ffffff85;--ol-7:#ffffff18;
}

/* --------------------------------------------------------------------------
   SOBRE : noir, gris et blanc, un seul accent discret
   -------------------------------------------------------------------------- */
:root[data-theme="sobre"]{
  --navy:#16181c;
  --blue:#2e333b;
  --orange:#a8845a;
  --text:#1c1f24;
  --muted:#6a7079;
  --line:#e2e4e8;
  --paper:#f6f6f7;
  --surface:#fff;
  --on-dark:#fff;
}

/* --------------------------------------------------------------------------
   CHALEUREUSE : crème, brun chaud, terracotta et ambre
   -------------------------------------------------------------------------- */
:root[data-theme="chaleureuse"]{
  --navy:#3b2417;
  --blue:#bf4f27;
  --orange:#e0a030;
  --text:#3a2a20;
  --muted:#7b6858;
  --line:#ead9c4;
  --paper:#f8eee0;
  --surface:#fffaf2;
  --on-dark:#fffaf2;
}