/* ==========================================================================
   tokens.css — Variables CSS globales + reset + ::selection + dual theme
   Source : new-template/index.html (inline <style>)
   Scope  : global (chargé dans inc_header.cfm avant tout autre CSS)

   Thème :
     :root (sans data-theme) = thème sombre par défaut
     [data-theme="dark"]     = thème sombre explicite (identique à :root)
     [data-theme="light"]    = thème clair

   HSL components :
     --bgh/s/l  → background (pour hsla() transparents partout)
     --fgh/s/l  → foreground / texte
     --ph/s/l   → primary / accent
   ========================================================================== */

/* ===== RESET MINIMAL ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   THÈME SOMBRE (par défaut — :root)
   ========================================================================== */
:root {
  /* HSL components pour usage hsla() dynamique */
  --bgh: 30;    --bgs: 10%;   --bgl: 12%;
  --fgh: 35;    --fgs: 20%;   --fgl: 90%;
  --ph:  35;    --ps:  40%;   --pl:  55%;

  /* Palette */
  --bg:              hsl(30, 10%, 12%);
  --fg:              hsl(35, 20%, 90%);
  --card:            hsl(30, 8%,  16%);
  --card-2:          hsl(30, 8%,  20%);
  --primary:         hsl(35, 40%, 55%);
  --primary-fg:      hsl(30, 10%, 8%);
  --primary-light:   hsl(35, 60%, 70%);
  --secondary:       hsl(30, 8%,  20%);
  --muted:           hsl(30, 10%, 55%);
  --muted-2:         hsl(30, 8%,  35%);
  --border:          hsl(30, 8%,  25%);

  /* Surface légèrement décalée du fond (sections, footer, dropdown) */
  --surface-dim:     hsla(30, 8%, 20%, 0.3);

  /* HSL lightness de la surface décalée (pour hsla avec opacités variées) */
  --surface-l: 20%;

  /* Typographie */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Karla', sans-serif;

  /* Ombres (reste sombre dans les deux thèmes) */
  --shadow-sm:    rgba(0, 0, 0, 0.2);
  --shadow-md:    rgba(0, 0, 0, 0.4);
  --shadow-lg:    rgba(0, 0, 0, 0.5);
  --shadow-xl:    rgba(0, 0, 0, 0.6);

  /* Transitions thème */
  --theme-transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ==========================================================================
   THÈME SOMBRE explicite (identité — override si :root a été overridé)
   ========================================================================== */
[data-theme="dark"] {
  --bgh: 30;    --bgs: 10%;   --bgl: 12%;
  --fgh: 35;    --fgs: 20%;   --fgl: 90%;
  --ph:  35;    --ps:  40%;   --pl:  55%;

  --bg:              hsl(30, 10%, 12%);
  --fg:              hsl(35, 20%, 90%);
  --card:            hsl(30, 8%,  16%);
  --card-2:          hsl(30, 8%,  20%);
  --primary:         hsl(35, 40%, 55%);
  --primary-fg:      hsl(30, 10%, 8%);
  --primary-light:   hsl(35, 60%, 70%);
  --secondary:       hsl(30, 8%,  20%);
  --muted:           hsl(30, 10%, 55%);
  --muted-2:         hsl(30, 8%,  35%);
  --border:          hsl(30, 8%,  25%);

  --surface-dim:     hsla(30, 8%, 20%, 0.3);
  --surface-l:       20%;

  --shadow-sm:    rgba(0, 0, 0, 0.2);
  --shadow-md:    rgba(0, 0, 0, 0.4);
  --shadow-lg:    rgba(0, 0, 0, 0.5);
  --shadow-xl:    rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   THÈME CLAIR
   Inspiré d'un papier vélin chaud, sobre, littéraire.
   Contraste AA assuré sur texte, liens, boutons.
   ========================================================================== */
[data-theme="light"] {
  /* HSL components — papier chaud, encre brune */
  --bgh: 38;    --bgs: 28%;   --bgl: 95%;
  --fgh: 32;    --fgs: 12%;   --fgl: 14%;
  --ph:  32;    --ps:  50%;   --pl:  38%;

  /* Palette */
  --bg:              hsl(38, 28%, 95%);
  --fg:              hsl(32, 12%, 14%);
  --card:            hsl(35, 18%, 90%);
  --card-2:          hsl(35, 15%, 84%);
  --primary:         hsl(32, 50%, 38%);
  --primary-fg:      hsl(40, 30%, 96%);
  --primary-light:   hsl(32, 55%, 54%);
  --secondary:       hsl(35, 15%, 84%);
  --muted:           hsl(30, 8%,  42%);
  --muted-2:         hsl(30, 6%,  58%);
  --border:          hsl(35, 14%,  76%);

  /* Surface légèrement décalée (plus sombre que le fond en mode clair) */
  --surface-dim:     hsla(35, 14%, 86%, 0.4);
  --surface-l:       86%;

  /* Ombres — plus douces en mode clair */
  --shadow-sm:    rgba(0, 0, 0, 0.06);
  --shadow-md:    rgba(0, 0, 0, 0.10);
  --shadow-lg:    rgba(0, 0, 0, 0.14);
  --shadow-xl:    rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   SÉLECTION TEXTE
   ========================================================================== */
::selection {
  background: hsla(var(--ph), var(--ps), var(--pl), 0.3);
  color: var(--fg);
}

/* ==========================================================================
   ZOOM UTILISATEUR (boutons A− / A+ de la navbar)
   --zoom-mult est posé en inline par js/zoom.js (localStorage 'ees-zoom').
   Valeur par défaut : 1 (= 100 %, comportement navigateur standard).
   ========================================================================== */
:root {
  --zoom-mult: 1;
}

html {
  font-size: calc(100% * var(--zoom-mult));
}

/* ==========================================================================
   BASE TYPOGRAPHIE
   ========================================================================== */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--theme-transition);
}

img {
  max-width: 100%;
  display: block;
}

/* ===== CONTENEURS ===== */
.max-w {
  max-width: 1280px;
  margin: 0 auto;
}

.section {
  padding: 6rem 1.5rem;
}

.section-header {
  margin-bottom: 4rem;
}

.section-header .tag {
  color: var(--primary);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.section-header h2 {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.section-header .line {
  margin-top: 1.5rem;
  width: 6rem;
  height: 1px;
  background: hsla(var(--ph), var(--ps), var(--pl), 0.4);
}

.section-center .section-header {
  text-align: center;
}

.section-center .line {
  margin-left: auto;
  margin-right: auto;
}

/* ===== UTILITAIRE GRADIENT TEXTE ===== */
.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== LARGE SCREENS ===== */
@media (min-width: 1440px) {
  html { font-size: calc(112% * var(--zoom-mult)); }
  .max-w { max-width: 1600px; }
}

@media (min-width: 1920px) {
  html { font-size: calc(125% * var(--zoom-mult)); }
  .max-w { max-width: 1800px; }
}

.container{margin:0 auto;padding:0 1.5rem}