/* ============================================================
   LANTHEAUME.FR — Design Tokens M3
   Police : Playfair Display (titres) + DM Sans (corps)
   Thème défaut : Terracotta
   ============================================================ */

:root {
    /* ── Terracotta (défaut) ─────────────────────────────── */
    --md-primary:               #B5470A;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #FFDBC8;
    --md-on-primary-container:  #3A0D00;

    --md-secondary:              #765848;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #FFECE4;
    --md-on-secondary-container: #2B160A;

    --md-error:              #BA1A1A;
    --md-on-error:           #FFFFFF;
    --md-error-container:    #FFDAD6;
    --md-on-error-container: #410002;

    --md-success:              #2E7D32;
    --md-on-success:           #FFFFFF;
    --md-success-container:    #D4EDDA;
    --md-on-success-container: #0A3D0F;

    /* Tokens sémantiques data-viz — couleurs universelles
       indépendantes du thème (bleu info, orange warning).
       Utilisés pour role badges, stat-cards, statuts, etc. */
    --md-info:                 #1A73E8;
    --md-on-info:              #FFFFFF;
    --md-info-container:       #E8F0FE;
    --md-on-info-container:    #002E69;

    --md-warning:              #E37400;
    --md-on-warning:           #FFFFFF;
    --md-warning-container:    #FEF3E2;
    --md-on-warning-container: #3F1700;

    /* Tertiary : 3e accent M3 (utilisé pour badges spécifiques type backup, audit) */
    --md-tertiary:             #7B1FA2;
    --md-on-tertiary:          #FFFFFF;
    --md-tertiary-container:   #F3E8FD;
    --md-on-tertiary-container: #2A0042;

    --md-surface:            #FFF8F6;
    --md-surface-dim:        #EDD8D0;
    --md-surface-variant:    #F4DED6;
    --md-on-surface:         #211208;
    --md-on-surface-variant: #52443D;
    --md-outline:            #85736C;
    --md-outline-variant:    #D7C2BB;
    --md-inverse-surface:    #372319;
    --md-inverse-on-surface: #FFEEE8;

    /* Conteneurs de surface M3 (élévation tonale). Définis via color-mix sur les tokens
       themés : --md-primary s'inverse clair↔sombre et --md-surface aussi, donc le mélange
       nudge la surface dans le BON sens d'élévation dans les deux modes (plus sombre en
       clair, plus clair en sombre). surface-container = 6 % = surface « papier crème »
       (cf hero accueil). Une seule définition en :root → cascade à tous les thèmes + dark
       (var() résolus à l'usage, jamais besoin de redéclarer par thème). */
    --md-surface-container-lowest:  color-mix(in srgb, var(--md-primary) 2%,  var(--md-surface));
    --md-surface-container-low:     color-mix(in srgb, var(--md-primary) 4%,  var(--md-surface));
    --md-surface-container:         color-mix(in srgb, var(--md-primary) 6%,  var(--md-surface));
    --md-surface-container-high:    color-mix(in srgb, var(--md-primary) 8%,  var(--md-surface));
    --md-surface-container-highest: color-mix(in srgb, var(--md-primary) 11%, var(--md-surface));

    /* Tokens neutres complémentaires (M3 extension 2026-05-11 — cf backlog Design §10).
       Pour absorber les hex génériques (#fff, #ddd, #F9A825) sans casser la sémantique
       M3 par rôle. Dark-mode ready : à overrider en [data-theme="dark"] si jamais. */
    --md-white:       #FFFFFF;
    --md-gray-light:  #DDDDDD;
    --md-yellow-soft: #F9A825;

    --md-primary-rgb: 181, 71, 10;
    --md-elev-1: rgba(var(--md-primary-rgb), 0.05);
    --md-elev-2: rgba(var(--md-primary-rgb), 0.08);
    --md-elev-3: rgba(var(--md-primary-rgb), 0.11);

    /* ── Typographie ─────────────────────────────────────── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-script:  'Caveat', cursive;

    /* ── Formes ──────────────────────────────────────────── */
    --shape-xs:   4px;
    --shape-sm:   8px;
    --shape-md:   12px;
    --shape-lg:   16px;
    --shape-xl:   28px;
    --shape-full: 9999px;

    /* ── Ombres ──────────────────────────────────────────── */
    --md-shadow:    0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    --md-shadow-lg: 0 4px 12px rgba(0,0,0,.15);

    /* ── Aliases rétro-compatibilité ─────────────────────── */
    --md-text:           var(--md-on-surface);
    --md-text-secondary: var(--md-on-surface-variant);
    --md-surface-var:    var(--md-surface-variant);
    --md-radius:         var(--shape-lg);
    --md-primary-dark:   #872E00;

    /* ── Z-index hierarchy ───────────────────────────────── */
    --md-z-form-toolbar:     40;    /* barres flottantes de contenu (sticky-form-toolbar, coll-bulk-bar, arbre-add-fab) : SOUS navbar/banner pour ne pas masquer le dropdown navbar */
    --md-z-banner:           50;    /* contact-from-banner sticky top */
    --md-z-sticky-toolbar:   100;   /* navbar sticky top (+ dropdowns de contenu) */
    --md-z-dropdown:         500;   /* dropdowns, autocompletes */
    --md-z-back-top:         999;   /* bouton « retour en haut » (#mod-back-top / #btn-top recettes) : juste sous le modal */
    --md-z-modal:            1000;  /* dialogs (m3-dialog auto) */
    --md-z-snackbar:         1100;  /* flash messages */
    --md-z-tooltip:          1200;  /* tooltips */
    --md-z-overlay-top:      9999;  /* skip-link a11y, datepicker popup, autocomplete au-dessus tout */

    /* ── Palette sépia (collections mini-hero, arbre, polaroid) ──
       Couleurs sémantiques propres au projet (sépia papier/photo vintage).
       Indépendantes du theme/dark mode car contexte visuel volontairement figé. */
    --lf-sepia-50:           #faf6f1;  /* hero recettes papier vintage */
    --lf-sepia-100:          #f5efe8;  /* recettes background subtle */
    --lf-sepia-300:          #8a6a3f;  /* hub mini-hero kicker */
    --lf-sepia-400:          #8b5a2b;  /* hub mini-hero accent warm */
    --lf-sepia-500:          #8a6442;  /* hub/arbre mini-hero label/meta */
    --lf-sepia-600:          #6b4a2e;  /* hub italic small */
    --lf-sepia-700:          #5b3a1c;  /* hub/arbre mini-hero title/strong */
    --lf-sepia-900:          #4a2c0e;  /* hub mini-hero Caveat headline */
    --lf-polaroid-cream:     #f7eedb;  /* polaroid background arbre */
    --lf-arbre-homme:        #5E83B0;  /* anneau genre homme — ardoise (light) */
    --lf-arbre-femme:        #C96F4A;  /* anneau genre femme — terracotta (light) */
    --lf-arbre-homme-dark:   #7CA0CC;  /* anneau genre homme (dark mode) */
    --lf-arbre-femme-dark:   #E08A63;  /* anneau genre femme (dark mode) */
    --lf-arbre-ring-autre:   #b0a69a;  /* anneau genre inconnu — muted */

    /* ── Motion : durations + easings M3 (2026-05-27) ────────────────────
       Spec : https://m3.material.io/styles/motion/easing-and-duration/tokens-specs
       Granularité projet : 3 paliers de durée + 4 easings. Suffit pour absorber
       les ~700 transitions ad hoc hardcodées (.12s/.15s/.2s/.3s ease-out/ease/etc.). */
    --md-duration-short:     150ms;  /* micro-feedback : hover, focus, click */
    --md-duration-medium:    250ms;  /* transitions standard : toggle, fade */
    --md-duration-long:      400ms;  /* éléments larges : modale, drawer */

    --md-easing-standard:    cubic-bezier(0.2, 0, 0, 1);     /* défaut M3 */
    --md-easing-emphasized:  cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --md-easing-decelerated: cubic-bezier(0, 0, 0.2, 1);     /* entrée écran */
    --md-easing-accelerated: cubic-bezier(0.4, 0, 1, 1);     /* sortie écran */

    /* ── Tailles d'icônes Material Symbols (grille M3, 2026-06-16) ─────────
       Échelle de-facto du monorepo tokenisée. base = 20px (--md-icon-lg).
       Snap des valeurs hors-grille (17/22/32 → 16/24/24). Cf module-base.css. */
    --md-icon-sm:   16px;  /* dense : chips, badges, source-mini */
    --md-icon-md:   18px;  /* boutons compacts, toggles, navbar dropdown */
    --md-icon-lg:   20px;  /* défaut .material-symbols-rounded */
    --md-icon-xl:   24px;  /* affordances d'action (M3 24/opsz) */
    --md-icon-2xl:  40px;  /* gros placeholder (= classe .lg) */
    --md-icon-3xl:  64px;  /* placeholder illustratif plein cadre (= 404) */
}

/* ── Océan ───────────────────────────────────────────────── */
[data-theme="ocean"] {
    --md-primary:               #0061A4;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #D1E4FF;
    --md-on-primary-container:  #001D36;
    --md-secondary:              #535F70;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #EBF1F9;
    --md-on-secondary-container: #101C2B;
    --md-surface:            #F8FAFB;
    --md-surface-dim:        #D8DAE0;
    --md-surface-variant:    #DFE2EB;
    --md-on-surface:         #191C20;
    --md-on-surface-variant: #43474E;
    --md-outline:            #73777F;
    --md-outline-variant:    #C3C7CF;
    --md-inverse-surface:    #2E3135;
    --md-inverse-on-surface: #F0F0F7;
    --md-primary-rgb:        0, 97, 164;
    --md-elev-1: rgba(0,97,164,0.05);
    --md-elev-2: rgba(0,97,164,0.08);
    --md-elev-3: rgba(0,97,164,0.11);
    --md-primary-dark: #004888;
}

/* ── Forêt ───────────────────────────────────────────────── */
[data-theme="foret"] {
    --md-primary:               #386A20;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #B7F397;
    --md-on-primary-container:  #042100;
    --md-secondary:              #54634D;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #EBF3E4;
    --md-on-secondary-container: #121F0E;
    --md-surface:            #F8FAF4;
    --md-surface-dim:        #D8DAD2;
    --md-surface-variant:    #DEE5D8;
    --md-on-surface:         #1A1C18;
    --md-on-surface-variant: #424940;
    --md-outline:            #72796F;
    --md-outline-variant:    #C2C9BD;
    --md-inverse-surface:    #2F312C;
    --md-inverse-on-surface: #F1F2EB;
    --md-primary-rgb:        56, 106, 32;
    --md-elev-1: rgba(56,106,32,0.05);
    --md-elev-2: rgba(56,106,32,0.08);
    --md-elev-3: rgba(56,106,32,0.11);
    --md-primary-dark: #1F5200;
}

/* ── Lavande ─────────────────────────────────────────────── */
[data-theme="lavande"] {
    --md-primary:               #6750A4;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #EADDFF;
    --md-on-primary-container:  #21005D;
    --md-secondary:              #625B71;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #F8F7FD;
    --md-on-secondary-container: #1D192B;
    --md-surface:            #FFFBFE;
    --md-surface-dim:        #DED8E1;
    --md-surface-variant:    #E7E0EC;
    --md-on-surface:         #1C1B1F;
    --md-on-surface-variant: #49454F;
    --md-outline:            #79747E;
    --md-outline-variant:    #CAC4D0;
    --md-inverse-surface:    #313033;
    --md-inverse-on-surface: #F4EFF4;
    --md-primary-rgb:        103, 80, 164;
    --md-elev-1: rgba(103,80,164,0.05);
    --md-elev-2: rgba(103,80,164,0.08);
    --md-elev-3: rgba(103,80,164,0.11);
    --md-primary-dark: #4E378B;
}

/* ── Ardoise ─────────────────────────────────────────────── */
[data-theme="ardoise"] {
    --md-primary:               #445E91;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #D8E2FF;
    --md-on-primary-container:  #001A41;
    --md-secondary:              #585E71;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #F0F3FF;
    --md-on-secondary-container: #151B2C;
    --md-surface:            #F9F9FF;
    --md-surface-dim:        #D9D9E4;
    --md-surface-variant:    #E2E2EC;
    --md-on-surface:         #1A1B20;
    --md-on-surface-variant: #45464F;
    --md-outline:            #75767F;
    --md-outline-variant:    #C5C6D0;
    --md-inverse-surface:    #2F3036;
    --md-inverse-on-surface: #F1F0F7;
    --md-primary-rgb:        68, 94, 145;
    --md-elev-1: rgba(68,94,145,0.05);
    --md-elev-2: rgba(68,94,145,0.08);
    --md-elev-3: rgba(68,94,145,0.11);
    --md-primary-dark: #2B4678;
}


/* ── Bordeaux ─────────────────────────────────────────────── */
[data-theme="bordeaux"] {
    --md-primary:               #8B1A4D;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #FFD9E4;
    --md-on-primary-container:  #3A0020;
    --md-secondary:              #74565E;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #FFF0F7;
    --md-on-secondary-container: #2B1520;
    --md-surface:            #FFF8F9;
    --md-surface-dim:        #EAD6DB;
    --md-surface-variant:    #F3DEE3;
    --md-on-surface:         #211318;
    --md-on-surface-variant: #524247;
    --md-outline:            #847076;
    --md-outline-variant:    #D6C2C6;
    --md-inverse-surface:    #372128;
    --md-inverse-on-surface: #FFEEF1;
    --md-primary-rgb:        139, 26, 77;
    --md-elev-1: rgba(139,26,77,0.05);
    --md-elev-2: rgba(139,26,77,0.08);
    --md-elev-3: rgba(139,26,77,0.11);
    --md-primary-dark: #68003C;
}

/* ── Sable ───────────────────────────────────────────────── */
[data-theme="sable"] {
    --md-primary:               #7D5700;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #FFDEA8;
    --md-on-primary-container:  #281800;
    --md-secondary:              #6C5B2F;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #FBF0D4;
    --md-on-secondary-container: #231B00;
    --md-surface:            #FFF8ED;
    --md-surface-dim:        #EEE0CB;
    --md-surface-variant:    #F3E4CE;
    --md-on-surface:         #1F1B11;
    --md-on-surface-variant: #4E4433;
    --md-outline:            #7F7160;
    --md-outline-variant:    #D2C5AC;
    --md-inverse-surface:    #352F1E;
    --md-inverse-on-surface: #FAF1E0;
    --md-primary-rgb:        125, 87, 0;
    --md-elev-1: rgba(125,87,0,0.05);
    --md-elev-2: rgba(125,87,0,0.08);
    --md-elev-3: rgba(125,87,0,0.11);
    --md-primary-dark: #5C3F00;
}

/* ── Sauge ───────────────────────────────────────────────── */
[data-theme="sauge"] {
    --md-primary:               #4E6B4C;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #D0EAC9;
    --md-on-primary-container:  #092200;
    --md-secondary:              #566454;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #EBF3E5;
    --md-on-secondary-container: #132011;
    --md-surface:            #F6FAF3;
    --md-surface-dim:        #D6DAD3;
    --md-surface-variant:    #DAE6D5;
    --md-on-surface:         #191D18;
    --md-on-surface-variant: #404840;
    --md-outline:            #707868;
    --md-outline-variant:    #BFC8B9;
    --md-inverse-surface:    #2D312C;
    --md-inverse-on-surface: #EEF2E8;
    --md-primary-rgb:        78, 107, 76;
    --md-elev-1: rgba(78,107,76,0.05);
    --md-elev-2: rgba(78,107,76,0.08);
    --md-elev-3: rgba(78,107,76,0.11);
    --md-primary-dark: #2E5231;
}

/* ── Marine ──────────────────────────────────────────────── */
[data-theme="marine"] {
    --md-primary:               #00516D;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #C2E8FF;
    --md-on-primary-container:  #001F2A;
    --md-secondary:              #4E616B;
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #E8F2FB;
    --md-on-secondary-container: #0A1E28;
    --md-surface:            #F5FAFE;
    --md-surface-dim:        #D5DADE;
    --md-surface-variant:    #DBE4EA;
    --md-on-surface:         #171C1F;
    --md-on-surface-variant: #3F474D;
    --md-outline:            #6F777D;
    --md-outline-variant:    #BFC7CD;
    --md-inverse-surface:    #2B3135;
    --md-inverse-on-surface: #ECF2F5;
    --md-primary-rgb:        0, 81, 109;
    --md-elev-1: rgba(0,81,109,0.05);
    --md-elev-2: rgba(0,81,109,0.08);
    --md-elev-3: rgba(0,81,109,0.11);
    --md-primary-dark: #003349;
}

/* ============================================================
   MODE SOMBRE
   ============================================================ */

[data-dark="1"],
[data-dark="1"][data-theme="terracotta"] {
    --md-primary:               #FFB59A;
    --md-on-primary:            #5F1700;
    --md-primary-container:     #872E00;
    --md-on-primary-container:  #FFDBC8;
    --md-secondary:              #E7BDA7;
    --md-on-secondary:           #442A1C;
    --md-secondary-container:    #5D4031;
    --md-on-secondary-container: #FFDBC8;
    --md-surface:            #1A0F0A;
    --md-surface-dim:        #1A0F0A;
    --md-surface-variant:    #2E1F18;
    --md-on-surface:         #F0DDD6;
    --md-on-surface-variant: #D9C2BA;
    --md-outline:            #A48D85;
    --md-outline-variant:    #52443D;
    --md-primary-rgb:        255, 181, 154;
    --md-elev-1: rgba(255,181,154,0.05);
    --md-elev-2: rgba(255,181,154,0.08);
    --md-elev-3: rgba(255,181,154,0.11);
    --md-primary-dark: #FFB59A;
}

[data-dark="1"][data-theme="ocean"] {
    --md-primary:               #A0C9FF;
    --md-on-primary:            #003060;
    --md-primary-container:     #004888;
    --md-on-primary-container:  #D1E4FF;
    --md-secondary:              #BBC7DB;
    --md-on-secondary:           #253141;
    --md-secondary-container:    #3C4858;
    --md-on-secondary-container: #D7E3F7;
    --md-surface:            #0E1317;
    --md-surface-dim:        #0E1317;
    --md-surface-variant:    #1C2530;
    --md-on-surface:         #E2E8F0;
    --md-on-surface-variant: #BBC7D4;
    --md-outline:            #8C96A2;
    --md-outline-variant:    #3A4450;
    --md-primary-rgb:        160, 201, 255;
    --md-primary-dark: #A0C9FF;
}

[data-dark="1"][data-theme="foret"] {
    --md-primary:               #9CD67D;
    --md-on-primary:            #0A3800;
    --md-primary-container:     #1F5200;
    --md-on-primary-container:  #B7F397;
    --md-secondary:              #BBCBB3;
    --md-on-secondary:           #273420;
    --md-secondary-container:    #3D4B35;
    --md-on-secondary-container: #D7EACD;
    --md-surface:            #0F130C;
    --md-surface-dim:        #0F130C;
    --md-surface-variant:    #1D2619;
    --md-on-surface:         #E2EBD9;
    --md-on-surface-variant: #BEC8B8;
    --md-outline:            #899082;
    --md-outline-variant:    #37402F;
    --md-primary-rgb:        156, 214, 125;
    --md-primary-dark: #9CD67D;
}

[data-dark="1"][data-theme="lavande"] {
    --md-primary:               #CFBDFF;
    --md-on-primary:            #371E73;
    --md-primary-container:     #4E378B;
    --md-on-primary-container:  #EADDFF;
    --md-secondary:              #CCC2DC;
    --md-on-secondary:           #332D41;
    --md-secondary-container:    #4A4458;
    --md-on-secondary-container: #E8DEF8;
    --md-surface:            #131218;
    --md-surface-dim:        #131218;
    --md-surface-variant:    #211F26;
    --md-on-surface:         #E6E1E5;
    --md-on-surface-variant: #CAC4D0;
    --md-outline:            #938F99;
    --md-outline-variant:    #49454F;
    --md-primary-rgb:        207, 189, 255;
    --md-primary-dark: #CFBDFF;
}

[data-dark="1"][data-theme="ardoise"] {
    --md-primary:               #ADC6FF;
    --md-on-primary:            #102F60;
    --md-primary-container:     #2B4678;
    --md-on-primary-container:  #D8E2FF;
    --md-secondary:              #BEC6DC;
    --md-on-secondary:           #283041;
    --md-secondary-container:    #3E4759;
    --md-on-secondary-container: #DCE2F9;
    --md-surface:            #111318;
    --md-surface-dim:        #111318;
    --md-surface-variant:    #1E2128;
    --md-on-surface:         #E3E2E9;
    --md-on-surface-variant: #C5C6D0;
    --md-outline:            #8F909A;
    --md-outline-variant:    #44464F;
    --md-primary-rgb:        173, 198, 255;
    --md-primary-dark: #ADC6FF;
}

/* ── Aliases dark (mise à jour des backward compat) ──────── */

[data-dark="1"][data-theme="bordeaux"] {
    --md-primary:               #FFB1C8;
    --md-on-primary:            #5E1133;
    --md-primary-container:     #780040;
    --md-on-primary-container:  #FFD9E4;
    --md-secondary:              #E5BDBF;
    --md-on-secondary:           #432730;
    --md-secondary-container:    #5C3C44;
    --md-on-secondary-container: #FFD9E4;
    --md-surface:            #1A1011;
    --md-surface-dim:        #1A1011;
    --md-surface-variant:    #2B1A1E;
    --md-on-surface:         #F1DDE2;
    --md-on-surface-variant: #D4C1C5;
    --md-outline:            #A48C90;
    --md-outline-variant:    #52454A;
    --md-primary-rgb:        255, 177, 200;
    --md-primary-dark: #FFB1C8;
}

[data-dark="1"][data-theme="sable"] {
    --md-primary:               #F2C150;
    --md-on-primary:            #422D00;
    --md-primary-container:     #5B3C00;
    --md-on-primary-container:  #FFDEA8;
    --md-secondary:              #D9C68C;
    --md-on-secondary:           #3A2E00;
    --md-secondary-container:    #514400;
    --md-on-secondary-container: #F6DEA6;
    --md-surface:            #1C1908;
    --md-surface-dim:        #1C1908;
    --md-surface-variant:    #2A2410;
    --md-on-surface:         #EFE1C7;
    --md-on-surface-variant: #D2C5A2;
    --md-outline:            #9C8E75;
    --md-outline-variant:    #4E4433;
    --md-primary-rgb:        242, 193, 80;
    --md-primary-dark: #F2C150;
}

[data-dark="1"][data-theme="sauge"] {
    --md-primary:               #B4CC9F;
    --md-on-primary:            #1C3A1B;
    --md-primary-container:     #345231;
    --md-on-primary-container:  #D0EAC9;
    --md-secondary:              #BCCAB8;
    --md-on-secondary:           #29392A;
    --md-secondary-container:    #3F4F3D;
    --md-on-secondary-container: #D8E9D3;
    --md-surface:            #101410;
    --md-surface-dim:        #101410;
    --md-surface-variant:    #1C251B;
    --md-on-surface:         #E0E5DC;
    --md-on-surface-variant: #BFC8B9;
    --md-outline:            #8A9285;
    --md-outline-variant:    #404840;
    --md-primary-rgb:        180, 204, 159;
    --md-primary-dark: #B4CC9F;
}

[data-dark="1"][data-theme="marine"] {
    --md-primary:               #7ECEF0;
    --md-on-primary:            #003548;
    --md-primary-container:     #004D68;
    --md-on-primary-container:  #C2E8FF;
    --md-secondary:              #B3C8D4;
    --md-on-secondary:           #1D3340;
    --md-secondary-container:    #344A57;
    --md-on-secondary-container: #D1E5F3;
    --md-surface:            #0D1419;
    --md-surface-dim:        #0D1419;
    --md-surface-variant:    #1A2530;
    --md-on-surface:         #E0E8ED;
    --md-on-surface-variant: #B3C8D4;
    --md-outline:            #899298;
    --md-outline-variant:    #3F474D;
    --md-primary-rgb:        126, 206, 240;
    --md-primary-dark: #7ECEF0;
}

[data-dark="1"] {
    --md-text:           var(--md-on-surface);
    --md-text-secondary: var(--md-on-surface-variant);
    --md-surface-var:    var(--md-surface-variant);
}

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
    /* Le site ne charge que « Material Symbols Rounded » : sans cette police,
       la classe outlined affichait le nom de l'icône en texte (ex « save »). */
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}
.material-symbols-outlined.filled,
.material-symbols-rounded.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.sm,
.material-symbols-rounded.sm {
    font-size: 16px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-outlined.lg,
.material-symbols-rounded.lg {
    font-size: 40px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}