:root {
    /* Typography — base 16px = 1rem */
    --font-serif: 'DM Serif Display', Georgia, serif;
    --font-sans: 'Lato', Helvetica, Arial, sans-serif;

    --font-size-body: 0.9375rem; /* 15px */
    --line-height-body: 1.533; /* ≈23px @ 15px */
    --font-weight-body: 400;
    --font-size-hero-text: 1.125rem; /* 18px */
    --line-height-hero-text: 1.45; /* légèrement resserré */

    /* Nav fluide : JS ajuste entre min et max selon la place dispo */
    --font-size-nav-max: 1.0625rem; /* 17px */
    --font-size-nav-min: 0.8125rem; /* 13px */
    --font-size-nav: var(--font-size-nav-max);
    --font-weight-nav: 700;
    --nav-item-pad-x-max: 14px;
    --nav-item-pad-x-min: 6px;
    --nav-item-pad-x: var(--nav-item-pad-x-max);
    --nav-item-gap-max: 8px;
    --nav-item-gap-min: 4px;
    --nav-item-gap: var(--nav-item-gap-max);

    /* Colors — Charte maquette */
    --color-white: #FFFFFF;
    --color-offwhite: #F8F7F6;
    --color-gold-light: #DEC690;
    --color-gold: #D9B778;
    --color-gold-hover: #C4A056;
    --color-red-light: #E06560;
    --color-red: #C43A35;
    --color-red-hover: #B53530;
    --color-cnj: #5B8FA3; /* accent Conseil National des jeunes */
    --color-cnj-hover: #4A7A8C;
    --color-grey: #353433;
    --color-black: #282726;

    --bg-light: var(--color-offwhite);
    --bg-dark: var(--color-black);

    /* Text */
    --text-dark: var(--color-black);
    --text-muted: #666666;
    --text-light: var(--color-white);

    /* Header / logo — maquette 1920 */
    --header-height: 130px;
    --header-height-mobile: 85px;
    --logo-width: 240px;
    --logo-height: 70px;
    --logo-margin: 30px;
    --header-cta-margin-inline: 45px;

    /* Header sticky — état réduit après scroll */
    --header-height-sticky: 90px;
    --logo-width-sticky: 165px;
    --logo-height-sticky: 48px;
    --logo-margin-sticky: 18px;
    --header-cta-margin-inline-sticky: 28px;
    --header-shrink-duration: 0.34s;
    --header-border-color: rgba(255, 255, 255, 0.35);
    --header-border-color-solid: rgba(40, 40, 40, 0.15); /* header sur fond blanc */
    --header-border-width: 1px;

    /* Home top (menu + hero) */
    --home-top-height: 860px;

    /* Hero — mesures maquette */
    --hero-title-size: 4.5rem; /* 80px */
    --hero-subtitle-size: 3rem; /* 50px */
    --hero-text-max-width: 780px;
    --hero-title-to-text: 40px;
    --hero-text-to-search: 48px;
    --hero-search-width: 475px;
    --hero-search-height: 52px;
    --hero-cards-width: 926px; /* 826 + 50 (quick) + 50 (spotlight body) */
    --hero-cards-left-width: 310px; /* 260 + 50 */
    --hero-cards-gap: 24px;
    --hero-quick-card-height: 100px;
    --hero-quick-cards-gap: 14px;
    --hero-cards-padding-bottom: 66px;
    --hero-liseret-color: #D0D0D0;
    --hero-liseret-width: 1px;

    /* UI */
    --placeholder-bg: #D9D9D9;
    --radius-sm: 4px;
    --radius-md: 4px; /* standard projet */
    --radius-pill: 50px; /* search, CTA pill — exception */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.14);

    /* Motion */
    --mega-anim-duration: 0.28s;
    --mega-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mega-delay-open: 180ms;
    --mega-delay-close: 280ms;
    --mega-delay-panel: 160ms;

    /* Mega-menu tints — variante claire (header solide / sticky) */
    --mega-bg-intro: var(--color-white);
    --mega-bg-level1: var(--color-offwhite);
    --mega-bg-level2: #F2F1F0;
    --mega-border: #E8E7E6;

    /* Mega-menu — variante verre clair (accueil, header transparent sur vidéo) */
    --mega-glass-panel: rgba(255, 255, 255, 0.62);
    --mega-glass-blur: blur(28px) saturate(125%);
    --mega-glass-border: rgba(255, 255, 255, 0.5);
    --mega-glass-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
    /* Voiles blancs dégressifs : trois zones lisibles, sans voile gris qui ternit */
    --mega-glass-intro: rgba(255, 255, 255, 0.3);
    --mega-glass-level1: rgba(255, 255, 255, 0.14);
    --mega-glass-level2: rgba(255, 255, 255, 0.04);
    --mega-glass-text: var(--color-grey);
    --mega-glass-hover-bg: rgba(255, 255, 255, 0.45);
    --mega-glass-active-bg: rgba(196, 58, 53, 0.1);

    /* Mega-menu tints — variante sombre (accueil, header transparent sur vidéo) */
    --mega-dark-bg-panel: rgba(28, 27, 26, 0.90);
    --mega-dark-bg-intro: rgba(28, 27, 26, 0.62);
    --mega-dark-bg-level1: rgba(40, 39, 38, 0.55);
    --mega-dark-bg-level2: rgba(53, 52, 51, 0.45);
    --mega-dark-border: rgba(255, 255, 255, 0.14);
    --mega-dark-title: var(--color-white);
    --mega-dark-text: rgba(255, 255, 255, 0.70);
    --mega-dark-link: rgba(255, 255, 255, 0.88);
    --mega-dark-accent: var(--color-gold);
    --mega-dark-hover-bg: rgba(255, 255, 255, 0.07);
    --mega-dark-active-bg: rgba(217, 183, 120, 0.12);
    --mega-dark-blur: blur(16px) saturate(115%);

    /* Legacy aliases */
    --main-font-family: var(--font-sans);
    --main-font-color: var(--text-dark);
}