/* ==========================================================================
   ClimaScore Design Tokens (palette éditoriale unifiée)
   --------------------------------------------------------------------------
   Source de vérité pour toute la charte graphique. Ne pas dupliquer
   ces variables ailleurs dans le code. Tous les composants et pages
   référencent --ed-* et --cs-*.
   ========================================================================== */

:root {
    /* --- Palette papier / encre ---------------------------------------- */
    --ed-paper:        #FAF7F1;  /* fond principal, papier vélin */
    --ed-paper-2:      #F1ECE0;  /* sections alternées */
    --ed-paper-3:      #E8E2D4;  /* surfaces enfoncées */
    --ed-line:         #E6E1D8;  /* filets sobres */
    --ed-line-strong:  #D6CFBF;  /* séparateurs marqués */

    --ed-ink-deep:     #0E0F12;  /* chiffres-héros, classes A-F */
    --ed-graphite:     #1A1B1F;  /* titres */
    --ed-ink:          #2A2D33;  /* corps de texte */
    --ed-mute:         #5C6068;  /* secondaire */
    --ed-mute-2:       #888c92;  /* tertiaire */
    --ed-slate:        #4A5260;  /* axes, légendes data */

    /* --- Couleurs sémantiques (contraste AA/AAA garanti) -------------- */
    --ed-forest:       #1F5A3D;  /* CTA, validation, AAA sur paper */
    --ed-forest-deep:  #143F2A;  /* hover */
    --ed-forest-soft:  #E6F0EA;  /* fond doux */

    --ed-saffron:      #9A5F1F;  /* accent éditorial, alerte attention AA */
    --ed-saffron-soft: #F3E8D5;
    --ed-saffron-line: #E5C896;

    --ed-terracotta:      #8E2F2F;  /* alerte critique AAA */
    --ed-terracotta-soft: #F4E0DC;
    --ed-terracotta-line: #DDA89D;

    --ed-amber:        #B8860B;  /* mise en garde modérée */
    --ed-amber-soft:   #F8E9C7;

    /* --- Échelle DPE ADEME (intacte) ---------------------------------- */
    --dpe-a: #319c41;
    --dpe-b: #50b153;
    --dpe-c: #c8d645;
    --dpe-d: #fff200;
    --dpe-e: #f7a92b;
    --dpe-f: #e96f29;
    --dpe-g: #d7221c;

    /* --- Typographie -------------------------------------------------- */
    --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

    --text-display: clamp(2.25rem, 4.5vw, 3.25rem);
    --text-h1:      clamp(1.875rem, 4vw, 2.5rem);
    --text-h2:      clamp(1.5rem, 3vw, 1.875rem);
    --text-h3:      1.25rem;
    --text-lead:    1.0625rem;
    --text-body:    0.9375rem;
    --text-small:   0.8125rem;
    --text-eyebrow: 0.6875rem;

    --text-data-xl: clamp(2.5rem, 6vw, 3.75rem);
    --text-data-l:  2rem;
    --text-data-m:  1.5rem;

    --leading-tight:    1.05;
    --leading-snug:     1.2;
    --leading-normal:   1.5;
    --leading-relaxed:  1.6;

    --tracking-display:  -0.03em;
    --tracking-tight:    -0.025em;
    --tracking-eyebrow:  0.14em;

    /* --- Rayons / ombres / spacings ----------------------------------- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 2px rgba(14, 15, 18, 0.04);
    --shadow:    0 4px 16px rgba(14, 15, 18, 0.06);
    --shadow-md: 0 8px 24px rgba(14, 15, 18, 0.08);
    --shadow-lg: 0 16px 48px rgba(14, 15, 18, 0.12);

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* --- Filigrane papier (signature) ---------------------------------- */
    --ed-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");

    /* --- Compatibilité avec l'ancienne palette (à retirer progressivement) --- */
    --primary:         var(--ed-forest);
    --primary-dark:    var(--ed-forest-deep);
    --accent:          var(--ed-saffron);
    --text:            var(--ed-ink);
    --text-light:      var(--ed-mute);
    --bg:              var(--ed-paper);
    --bg-alt:          var(--ed-paper-2);
    --border:          var(--ed-line);

    /* Alias legacy --color-* utilisés par les pages annexes (about, methodologie,
       professionnels, actualites, classement, departements). Pointent vers
       --ed-* pour migration automatique sans toucher chaque page. */
    --color-primary:        var(--ed-forest);
    --color-primary-dark:   var(--ed-forest-deep);
    --color-primary-light:  var(--ed-forest-soft);
    --color-accent:         var(--ed-saffron);
    --color-text:           var(--ed-ink);
    --color-text-secondary: var(--ed-mute);
    --color-text-muted:     var(--ed-mute);
    --color-text-light:     var(--ed-mute-2);
    --color-bg:             var(--ed-paper);
    --color-bg-alt:         var(--ed-paper-2);
    --color-bg-secondary:   var(--ed-paper-2);
    --color-border:         var(--ed-line);
    --color-border-light:   var(--ed-line);
    --color-border-strong:  var(--ed-line-strong);
    --color-success:        var(--ed-forest);
    --color-warning:        var(--ed-saffron);
    --color-danger:         var(--ed-terracotta);
}

/* --------------------------------------------------------------------------
   Typographie globale (applique automatiquement les bonnes familles)
   -------------------------------------------------------------------------- */

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--ed-ink);
    background: var(--ed-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

h1, h2, h3, h4, h5, h6,
.cs-display, .cs-h1, .cs-h2, .cs-h3 {
    font-family: var(--font-display);
    color: var(--ed-graphite);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    font-weight: 700;
}

h1, .cs-h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2, .cs-h2 { font-size: var(--text-h2); font-weight: 600; }
h3, .cs-h3 { font-size: var(--text-h3); font-weight: 600; }

.cs-display {
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
}

.cs-lead {
    font-size: var(--text-lead);
    line-height: var(--leading-normal);
    color: var(--ed-mute);
    max-width: 64ch;
}

.cs-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ed-saffron);
    display: inline-block;
}

.cs-small,
small {
    font-size: var(--text-small);
    color: var(--ed-mute);
}

/* Tabular nums systématique sur tout chiffre dans la grammaire data */
.cs-stat,
.cs-data,
.cs-num,
[data-num] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'kern' 1;
}

/* Filet horizontal entre sections (signature white-paper) */
.cs-rule {
    border: 0;
    border-top: 1px solid var(--ed-line);
    margin: var(--space-12) 0;
}

.cs-rule-strong {
    border-top-color: var(--ed-line-strong);
}