/* ============================================================================
   MyEureka Design System - TOKENS (v3.0.1)
   ----------------------------------------------------------------------------
   Source unique des couleurs, espacements, rayons, ombres et typographies
   partagés par le plugin MyEureka Premium Home et le thème enfant Geeks Child.

   Thèmes :
     - <html data-meph-theme="dark">   : sombre (défaut produit)
     - <html data-meph-theme="light">  : clair (ancienne identité conservée)
     - <html data-meph-theme="auto">   : suit prefers-color-scheme
   Les tokens sont déclarés sur :root pour être disponibles partout, y compris
   dans les écrans natifs Tutor LMS habillés par le thème enfant.
   Préfixe : --me-* (design system). Les anciens préfixes --meph-*, --mec-*,
   --mep-* sont mappés en bas de fichier pour compatibilité.
   ============================================================================ */

:root {
  /* ---- Typographie ---------------------------------------------------- */
  --me-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --me-font-display: var(--me-font);
  --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --me-text-xs: 11px;
  --me-text-sm: 13px;
  --me-text-md: 14px;
  --me-text-base: 15px;
  --me-text-lg: 17px;
  --me-text-xl: 20px;
  --me-text-2xl: 24px;
  --me-text-3xl: clamp(28px, 2.6vw, 36px);
  --me-text-4xl: clamp(32px, 3.4vw, 46px);
  --me-leading-tight: 1.15;
  --me-leading-snug: 1.3;
  --me-leading: 1.5;
  --me-leading-relaxed: 1.65;
  --me-weight-regular: 400;
  --me-weight-medium: 500;
  --me-weight-semibold: 600;
  --me-weight-bold: 700;
  --me-weight-black: 800;
  --me-tracking-tight: -0.02em;
  --me-tracking-wide: 0.08em;
  --me-tracking-caps: 0.14em;

  /* ---- Espacements (échelle 4 px) -------------------------------------- */
  --me-space-0: 0px;
  --me-space-1: 4px;
  --me-space-2: 8px;
  --me-space-3: 12px;
  --me-space-4: 16px;
  --me-space-5: 20px;
  --me-space-6: 24px;
  --me-space-7: 32px;
  --me-space-8: 40px;
  --me-space-9: 56px;
  --me-space-10: 72px;
  --me-gutter: clamp(16px, 3vw, 32px);
  --me-container: 1480px;
  --me-container-narrow: 1100px;

  /* ---- Rayons ------------------------------------------------------------ */
  --me-radius-xs: 6px;
  --me-radius-sm: 10px;
  --me-radius-md: 14px;
  --me-radius-lg: 18px;
  --me-radius-xl: 24px;
  --me-radius-2xl: 32px;
  --me-radius-pill: 999px;

  /* ---- Dimensions des composants ---------------------------------------- */
  --me-control-sm: 34px;
  --me-control-md: 42px;
  --me-control-lg: 50px;
  --me-icon-sm: 16px;
  --me-icon-md: 20px;
  --me-icon-lg: 24px;
  --me-avatar: 36px;
  --me-focus-ring: 0 0 0 3px var(--me-ring);

  /* ---- Mouvement ---------------------------------------------------------- */
  --me-dur-fast: 120ms;
  --me-dur: 200ms;
  --me-dur-slow: 320ms;
  --me-ease: cubic-bezier(.2, .7, .2, 1);
  --me-ease-spring: cubic-bezier(.34, 1.3, .64, 1);

  /* ---- Z-index -------------------------------------------------------------- */
  --me-z-raised: 10;
  --me-z-sticky: 100;
  --me-z-dropdown: 500;
  --me-z-overlay: 900;
  --me-z-modal: 1000;
  --me-z-toast: 1100;
  --me-z-tooltip: 1200;

  /* ---- Marque (identiques dans les deux thèmes) ----------------------------- */
  --me-brand: #3f48cb;
  --me-brand-strong: #333ba8;
  --me-brand-deep: #27275d;
  --me-brand-glow: #8b92ea;
  --me-accent-gold: #fec300;
  --me-accent-gold-soft: rgba(254, 195, 0, .16);
  --me-brand-rgb: 63, 72, 203;
  --me-brand-deep-rgb: 39, 39, 93;
  --me-on-brand: #ffffff;
  --me-gradient-brand: linear-gradient(135deg, #5a62d9 0%, #3f48cb 55%, #333ba8 100%);
  --me-gradient-hero: linear-gradient(120deg, #1e1e3a 0%, #27275d 45%, #3f48cb 100%);

  /* Couleurs de pastilles (parcours, catégories) : teintes de référence */
  --me-hue-lavender: 236;
  --me-hue-amber: 38;
  --me-hue-mint: 158;
  --me-hue-blue: 212;
  --me-hue-pink: 332;
}

/* ============================================================================
   THÈME SOMBRE (défaut)
   ============================================================================ */
:root,
:root[data-meph-theme="dark"] {
  color-scheme: dark;

  /* Fonds */
  --me-bg: #0e0e21;
  --me-bg-2: #12122a;
  --me-bg-3: #171736;
  --me-surface: #19193b;
  --me-surface-2: #1e1e48;
  --me-surface-3: #252556;
  --me-panel: #14142f;
  --me-card: var(--me-surface);
  --me-card-hover: #1d1d46;
  --me-inset: #101026;
  --me-glass: rgba(25, 25, 60, .62);
  --me-glass-rgb: 25, 25, 60;
  --me-glow-rgb: 90, 98, 217;
  --me-glass-border: rgba(255, 255, 255, .14);
  --me-overlay: rgba(7, 7, 22, .72);
  --me-scrim: linear-gradient(90deg, rgba(14, 14, 33, .96) 0%, rgba(14, 14, 33, .72) 38%, rgba(14, 14, 33, .18) 70%, rgba(14, 14, 33, 0) 100%);

  /* Bordures */
  --me-border: rgba(255, 255, 255, .08);
  --me-border-strong: rgba(255, 255, 255, .16);
  --me-border-brand: rgba(90, 98, 217, .32);
  --me-divider: rgba(255, 255, 255, .06);

  /* Textes */
  --me-text: #f3f4ff;
  --me-text-2: #b7b9d9;
  --me-text-3: #8a8db4;
  --me-text-4: #63668f;
  --me-text-inverse: #13132b;
  --me-link: #a4abff;
  --me-link-hover: #c0c5ff;
  --me-highlight: #fec300;

  /* Accent principal (indigo L’Akadémie) */
  --me-primary: #5a62d9;
  --me-primary-hover: #6a72e3;
  --me-primary-active: #3f48cb;
  --me-primary-soft: rgba(90, 98, 217, .16);
  --me-primary-soft-2: rgba(90, 98, 217, .28);
  --me-on-primary: #ffffff;
  --me-ring: rgba(122, 130, 240, .5);

  /* Sémantiques */
  --me-success: #3ddc97;
  --me-success-soft: rgba(61, 220, 151, .14);
  --me-success-text: #7cf0bd;
  --me-warning: #fec300;
  --me-warning-soft: rgba(254, 195, 0, .16);
  --me-warning-text: #ffda4d;
  --me-danger: #ff6b6b;
  --me-danger-soft: rgba(255, 107, 107, .14);
  --me-danger-text: #ff9b9b;
  --me-info: #5cc8ff;
  --me-info-soft: rgba(92, 200, 255, .14);
  --me-info-text: #9bdfff;

  /* Pastilles thématiques (fond, bordure, texte) */
  --me-lavender-bg: rgba(122, 130, 240, .18); --me-lavender-fg: #c0c5ff; --me-lavender-line: rgba(122, 130, 240, .4);
  --me-amber-bg: rgba(254, 195, 0, .16);    --me-amber-fg: #ffda4d;   --me-amber-line: rgba(254, 195, 0, .4);
  --me-mint-bg: rgba(61, 220, 151, .14);     --me-mint-fg: #8cf0c4;    --me-mint-line: rgba(61, 220, 151, .4);
  --me-blue-bg: rgba(92, 160, 255, .16);     --me-blue-fg: #a9ccff;    --me-blue-line: rgba(92, 160, 255, .4);
  --me-pink-bg: rgba(255, 110, 180, .16);    --me-pink-fg: #ffb3d6;    --me-pink-line: rgba(255, 110, 180, .4);

  /* Ombres */
  --me-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
  --me-shadow-2: 0 8px 28px rgba(0, 0, 0, .42);
  --me-shadow-3: 0 20px 60px rgba(0, 0, 0, .55);
  --me-shadow-brand: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(90, 98, 217, .14);
  --me-glow-brand: 0 0 0 1px rgba(90, 98, 217, .22), 0 0 18px rgba(90, 98, 217, .14);

  /* Composants spécifiques */
  --me-skeleton: linear-gradient(90deg, #1c1c42 0%, #28285e 50%, #1c1c42 100%);
  --me-progress-track: rgba(255, 255, 255, .1);
  --me-progress-fill: var(--me-gradient-brand);
  --me-kbd-bg: rgba(255, 255, 255, .08);
  --me-input-bg: #13132d;
  --me-input-border: rgba(255, 255, 255, .12);
  --me-input-placeholder: var(--me-text-4);
  --me-media-fallback: linear-gradient(135deg, #27275d, #1a1a40);
  --me-image-dim: brightness(.92);
  --me-inverse-bg: #2b2b66;
  --me-inverse-text: #f3f4ff;
}

/* ============================================================================
   THÈME CLAIR (identité d'origine conservée)
   ============================================================================ */
:root[data-meph-theme="light"] {
  color-scheme: light;

  --me-bg: #f5f6fc;
  --me-bg-2: #f0f1fa;
  --me-bg-3: #e9ebf7;
  --me-surface: #ffffff;
  --me-surface-2: #f8f8fd;
  --me-surface-3: #eef0fb;
  --me-panel: #ffffff;
  --me-card: #ffffff;
  --me-card-hover: #fafaff;
  --me-inset: #f2f3fa;
  --me-glass: rgba(255, 255, 255, .62);
  --me-glass-rgb: 255, 255, 255;
  --me-glow-rgb: 255, 255, 255;
  --me-glass-border: rgba(255, 255, 255, .7);
  --me-overlay: rgba(30, 30, 58, .5);
  --me-scrim: linear-gradient(90deg, rgba(245, 246, 252, .98) 0%, rgba(245, 246, 252, .86) 38%, rgba(245, 246, 252, .2) 70%, rgba(245, 246, 252, 0) 100%);

  --me-border: #e3e5f3;
  --me-border-strong: #cfd2ea;
  --me-border-brand: rgba(63, 72, 203, .35);
  --me-divider: #ecedf7;

  --me-text: #27275d;
  --me-text-2: #4a4b7a;
  --me-text-3: #6b6d93;
  --me-text-4: #9597b8;
  --me-text-inverse: #ffffff;
  --me-link: #3941b7;
  --me-link-hover: #2b3290;
  --me-highlight: #3f48cb;

  --me-primary: #3f48cb;
  --me-primary-hover: #333ba8;
  --me-primary-active: #2b3290;
  --me-primary-soft: #ebecfa;
  --me-primary-soft-2: #d9dbf5;
  --me-on-primary: #ffffff;
  --me-ring: rgba(63, 72, 203, .35);

  --me-success: #1f9d61;
  --me-success-soft: #e5f8ee;
  --me-success-text: #176340;
  --me-warning: #d19e00;
  --me-warning-soft: #fff6d6;
  --me-warning-text: #7a5c00;
  --me-danger: #d93c3c;
  --me-danger-soft: #fff0f0;
  --me-danger-text: #b42626;
  --me-info: #2b8fd8;
  --me-info-soft: #e8f4fd;
  --me-info-text: #1b5f94;

  --me-lavender-bg: #e8e9f9; --me-lavender-fg: #3139a0; --me-lavender-line: #c9ccef;
  --me-amber-bg: #fff6d6;    --me-amber-fg: #7a5c00;   --me-amber-line: #ffe58a;
  --me-mint-bg: #e3f8ee;     --me-mint-fg: #16633f;    --me-mint-line: #b7ebd1;
  --me-blue-bg: #e6f0ff;     --me-blue-fg: #1f4e9c;    --me-blue-line: #bfd6ff;
  --me-pink-bg: #ffe8f3;     --me-pink-fg: #a3285f;    --me-pink-line: #ffc4de;

  --me-shadow-1: 0 1px 2px rgba(39, 39, 93, .05), 0 4px 14px rgba(39, 39, 93, .06);
  --me-shadow-2: 0 10px 30px rgba(39, 39, 93, .1);
  --me-shadow-3: 0 24px 60px rgba(39, 39, 93, .16);
  --me-shadow-brand: 0 10px 28px rgba(63, 72, 203, .28);
  --me-glow-brand: 0 0 0 1px rgba(63, 72, 203, .2), 0 0 28px rgba(63, 72, 203, .22);

  --me-skeleton: linear-gradient(90deg, #edeef8 0%, #f7f8fd 50%, #edeef8 100%);
  --me-progress-track: #e5e7f4;
  --me-progress-fill: var(--me-gradient-brand);
  --me-kbd-bg: #eef0f9;
  --me-input-bg: #ffffff;
  --me-input-border: #d6d9ec;
  --me-input-placeholder: #989bb8;
  --me-media-fallback: linear-gradient(135deg, #e8e9f9, #d9dbf5);
  --me-image-dim: none;
  --me-inverse-bg: #27275d;
  --me-inverse-text: #ffffff;
}

/* Mode automatique : suit la préférence système. Les valeurs sombres sont
   celles de :root ; on ne redéclare que le clair quand le système l'exige. */
@media (prefers-color-scheme: light) {
  :root[data-meph-theme="auto"] {
    color-scheme: light;
    --me-bg: #f5f6fc; --me-bg-2: #f0f1fa; --me-bg-3: #e9ebf7;
    --me-surface: #ffffff; --me-surface-2: #f8f8fd; --me-surface-3: #eef0fb;
    --me-panel: #ffffff; --me-card: #ffffff; --me-card-hover: #fafaff; --me-inset: #f2f3fa;
    --me-glass: rgba(255, 255, 255, .62); --me-glass-rgb: 255, 255, 255; --me-glow-rgb: 255, 255, 255; --me-glass-border: rgba(255, 255, 255, .7);
    --me-overlay: rgba(30, 30, 58, .5);
    --me-scrim: linear-gradient(90deg, rgba(245, 246, 252, .98) 0%, rgba(245, 246, 252, .86) 38%, rgba(245, 246, 252, .2) 70%, rgba(245, 246, 252, 0) 100%);
    --me-border: #e3e5f3; --me-border-strong: #cfd2ea; --me-border-brand: rgba(63, 72, 203, .35); --me-divider: #ecedf7;
    --me-text: #27275d; --me-text-2: #4a4b7a; --me-text-3: #6b6d93; --me-text-4: #9597b8; --me-text-inverse: #ffffff;
    --me-link: #3941b7; --me-link-hover: #2b3290; --me-highlight: #3f48cb;
    --me-primary: #3f48cb; --me-primary-hover: #333ba8; --me-primary-active: #2b3290;
    --me-primary-soft: #ebecfa; --me-primary-soft-2: #d9dbf5; --me-on-primary: #ffffff; --me-ring: rgba(63, 72, 203, .35);
    --me-success: #1f9d61; --me-success-soft: #e5f8ee; --me-success-text: #176340;
    --me-warning: #d19e00; --me-warning-soft: #fff6d6; --me-warning-text: #7a5c00;
    --me-danger: #d93c3c; --me-danger-soft: #fff0f0; --me-danger-text: #b42626;
    --me-info: #2b8fd8; --me-info-soft: #e8f4fd; --me-info-text: #1b5f94;
    --me-lavender-bg: #e8e9f9; --me-lavender-fg: #3139a0; --me-lavender-line: #c9ccef;
    --me-amber-bg: #fff6d6; --me-amber-fg: #7a5c00; --me-amber-line: #ffe58a;
    --me-mint-bg: #e3f8ee; --me-mint-fg: #16633f; --me-mint-line: #b7ebd1;
    --me-blue-bg: #e6f0ff; --me-blue-fg: #1f4e9c; --me-blue-line: #bfd6ff;
    --me-pink-bg: #ffe8f3; --me-pink-fg: #a3285f; --me-pink-line: #ffc4de;
    --me-shadow-1: 0 1px 2px rgba(39, 39, 93, .05), 0 4px 14px rgba(39, 39, 93, .06);
    --me-shadow-2: 0 10px 30px rgba(39, 39, 93, .1);
    --me-shadow-3: 0 24px 60px rgba(39, 39, 93, .16);
    --me-shadow-brand: 0 10px 28px rgba(63, 72, 203, .28);
    --me-glow-brand: 0 0 0 1px rgba(63, 72, 203, .2), 0 0 28px rgba(63, 72, 203, .22);
    --me-skeleton: linear-gradient(90deg, #edeef8 0%, #f7f8fd 50%, #edeef8 100%);
    --me-progress-track: #e5e7f4; --me-kbd-bg: #eef0f9;
    --me-input-bg: #ffffff; --me-input-border: #d6d9ec; --me-input-placeholder: #989bb8;
    --me-media-fallback: linear-gradient(135deg, #e8e9f9, #d9dbf5); --me-image-dim: none;
    --me-inverse-bg: #27275d; --me-inverse-text: #ffffff;
  }
}

/* ============================================================================
   COMPATIBILITÉ : anciens préfixes utilisés par les feuilles historiques.
   Les valeurs saisies dans l'administration (couleur principale, encre, fond)
   restent prioritaires lorsqu'elles sont injectées en style inline sur .meph,
   .meph-directory ou .catalog-wrap ; ici on fournit uniquement les défauts.
   ============================================================================ */
:root {
  --meph-primary: var(--me-primary);
  --meph-primary-dark: var(--me-primary-active);
  --meph-ink: var(--me-text);
  --meph-bg: var(--me-bg);
  --meph-radius: var(--me-radius-lg);
  --meph-max: var(--me-container);
  --mec-primary: var(--me-primary);
  --mec-ink: var(--me-text);
  --mec-bg: var(--me-bg);
  --mec-hero: var(--me-surface-3);
  --meb-primary: var(--me-primary);
  --meb-ink: var(--me-text);
  --meb-surface: var(--me-bg);
  --meb-card: var(--me-surface);
  --mep-design-primary: var(--me-primary);
  --mep-design-ink: var(--me-text);
  --mep-design-soft: var(--me-surface-3);
  --acg-primary: var(--me-primary);
  --acg-bg: var(--me-surface-2);
  --acg-border: var(--me-border);
  --acg-text: var(--me-text);
  --acg-text-muted: var(--me-text-3);
  --acg-success: var(--me-success);
  --q-ink: var(--me-text);
  --q-purple: var(--me-primary);
  --q-subtle: var(--me-text-3);
  --q-border: var(--me-border);
  --q-shadow: var(--me-shadow-1);
}

/* Couleurs saisies dans l'administration (accueil, répertoire, parcours, blog).
   Mode clair : toutes les couleurs sont appliquées. Mode sombre : seule la couleur
   principale est conservée, les encres et fonds clairs casseraient le contraste. */
.meph, .meph-directory, .catalog-wrap, .meb-blog {
  --meph-primary: var(--meph-user-primary, var(--me-primary));
  --meph-primary-dark: var(--meph-user-primary-dark, var(--me-primary-active));
  --mec-primary: var(--mec-user-primary, var(--me-primary));
  --mep-design-primary: var(--mep-user-primary, var(--me-primary));
  --meb-primary: var(--meb-user-primary, var(--me-primary));
}
:root[data-meph-theme="light"] .meph { --meph-ink: var(--meph-user-ink, var(--me-text)); --meph-bg: var(--meph-user-bg, var(--me-bg)); }
:root[data-meph-theme="light"] .meph-directory { --mec-ink: var(--mec-user-ink, var(--me-text)); --mec-bg: var(--mec-user-bg, var(--me-bg)); --mec-hero: var(--mec-user-hero, var(--me-surface-3)); }
:root[data-meph-theme="light"] .catalog-wrap { --mep-design-ink: var(--mep-user-ink, var(--me-text)); --mep-design-soft: var(--mep-user-soft, var(--me-surface-3)); }
/* Actualités : en clair, pas de bande de fond (transparent = fond de page du thème), sauf couleur de fond saisie en administration. */
:root[data-meph-theme="light"] .meb-blog { --meb-ink: var(--meb-user-ink, var(--me-text)); --meb-surface: var(--meb-user-surface, transparent); --meb-card: var(--meb-user-card, var(--me-surface)); }
@media (prefers-color-scheme: light) {
  :root[data-meph-theme="auto"] .meph { --meph-ink: var(--meph-user-ink, var(--me-text)); --meph-bg: var(--meph-user-bg, var(--me-bg)); }
  :root[data-meph-theme="auto"] .meph-directory { --mec-ink: var(--mec-user-ink, var(--me-text)); --mec-bg: var(--mec-user-bg, var(--me-bg)); --mec-hero: var(--mec-user-hero, var(--me-surface-3)); }
  :root[data-meph-theme="auto"] .catalog-wrap { --mep-design-ink: var(--mep-user-ink, var(--me-text)); --mep-design-soft: var(--mep-user-soft, var(--me-surface-3)); }
  :root[data-meph-theme="auto"] .meb-blog { --meb-ink: var(--meb-user-ink, var(--me-text)); --meb-surface: var(--meb-user-surface, transparent); --meb-card: var(--meb-user-card, var(--me-surface)); }
}

/* Pont Bootstrap 5 (thème Geeks) : à l'intérieur des écrans MyEureka, les variables
   Bootstrap posées sur <body> (titres, texte, fonds, bordures) suivent les tokens.
   Sans cela, h1..h6 reçoivent --bs-heading-color (#27275d) et restent illisibles en sombre. */
.me-scope, .meph, .meph-paths, .meph-directory, .meb-blog, .meph-gains, .meph-module, .me-ui-screen {
  --bs-heading-color: var(--me-text);
  --bs-body-color: var(--me-text);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--me-text-2);
  --bs-tertiary-color: var(--me-text-3);
  --bs-border-color: var(--me-border);
  --bs-card-bg: var(--me-card);
  --bs-card-border-color: var(--me-border);
  --bs-link-color: var(--me-link);
  --bs-link-hover-color: var(--me-link-hover);
  color: var(--me-text);
}
.me-scope :is(h1, h2, h3, h4, h5, h6),
.meph :is(h1, h2, h3, h4, h5, h6),
.meph-paths :is(h1, h2, h3, h4, h5, h6),
.meph-directory :is(h1, h2, h3, h4, h5, h6),
.meb-blog :is(h1, h2, h3, h4, h5, h6),
.meph-gains :is(h1, h2, h3, h4, h5, h6),
.meph-module :is(h1, h2, h3, h4, h5, h6) { color: var(--me-text); }

/* Réduction des animations : respectée globalement par le design system. */
@media (prefers-reduced-motion: reduce) {
  :root { --me-dur-fast: 0ms; --me-dur: 0ms; --me-dur-slow: 0ms; }
}

/* ============================================================================
   VISUELS DES BANNIÈRES EN SOMBRE
   Sans variante sombre dédiée (réglage « visuel en mode sombre » du répertoire
   et des actualités), la photo claire est assombrie et désaturée pour s'intégrer
   au fond navy. Keyé sur le thème résolu (posé par MyEureka Theme ou design-system.js).
   ============================================================================ */
html[data-meph-theme-resolved="dark"] .mec-hero-image:not([data-src-dark]),
html[data-meph-theme-resolved="dark"] .meb-hero-photo img:not([data-src-dark]),
html[data-meph-theme-resolved="dark"] .meph-hero-visual:not([data-src-dark]) {
  filter: brightness(.74) saturate(.88) contrast(1.05);
}
html[data-meph-theme-resolved="dark"] .meb-hero-photo::after,
html[data-meph-theme-resolved="dark"] .mec-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(14, 14, 33, 0) 0%, rgba(39, 39, 93, .55) 100%);
}
html[data-meph-theme-resolved="dark"] .mec-hero { position: relative; }
html[data-meph-theme-resolved="dark"] .mec-hero::after { z-index: 0; width: auto; height: auto; border: 0; border-radius: inherit; right: 0; top: 0; }