/* ============================================================
   STUD'ÉVAL — DESIGN TOKENS v1.0
   Source unique de vérité. Aucun composant ne doit contenir
   une valeur hexadécimale, une taille de police ou un
   espacement en dur : tout passe par ces variables.

   Fichier à importer AVANT tout autre CSS de l'application.
   ============================================================ */

/* --- Polices -------------------------------------------------
   À placer dans le <head> du document (ou en @import ici) :

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Lexend:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=block" rel="stylesheet">

   En production : auto-héberger les 3 familles en woff2 (RGPD /
   pas d'appel tiers depuis un ENT). Sous-ensemble latin + latin-ext.
------------------------------------------------------------- */

:root {
  /* ═══════════ 1. PRIMITIVES — ne jamais utiliser directement
     dans un composant. Uniquement référencées par les alias. */

  /* Bleu Stud'Éval — couleur de marque */
  --se-blue-50:  #EEF4FF;
  --se-blue-100: #DBE6FE;
  --se-blue-200: #BFD2FE;
  --se-blue-300: #93B4FD;
  --se-blue-400: #6091FA;
  --se-blue-500: #3B72F6;
  --se-blue-600: #2F63F5;   /* couleur du site vitrine */
  --se-blue-700: #1E4AD1;
  --se-blue-800: #1E40AF;
  --se-blue-900: #1E3A8A;

  /* Violet — la teinte de la REMÉDIATION, et d'elle seule (accueil v2,
     7 août 2026). Le vert reste réservé à « acquis » : une carte de
     remédiation verte laisserait croire à une réussite, alors qu'elle
     mesure un reste à faire. Aucune autre signification ailleurs. */
  --se-violet:        #534AB7;
  --se-violet-hover:  #3C3489;
  --se-violet-bg:     #EEEDFE;
  --se-violet-border: #CECBF6;
  /* L'ENCRE violette, sur fond clair — même valeur que -hover aujourd'hui,
     mais ce n'est pas le même jeton : -hover nomme un ÉTAT (le survol d'un
     bouton), -text nomme une couleur de texte, comme --se-success-text ou
     --se-danger-text. Employer -hover pour de l'encre ferait mentir le nom.
     DETTE CONNUE : l'espace professeur écrit encore var(--se-violet-hover)
     à cinq endroits qui sont du TEXTE (index.html:109, 119, 133, 386, 387) ;
     ce renommage est un geste à part, pas encore fait. */
  --se-violet-text:   #3C3489;

  /* Neutres froids (bleutés) — aucun gris pur dans le produit */
  --se-neutral-0:   #FFFFFF;
  --se-neutral-25:  #FAFBFD;
  --se-neutral-50:  #F5F7FB;
  --se-neutral-100: #EDF1F8;
  --se-neutral-200: #DDE3ED;
  --se-neutral-300: #C3CCDA;
  --se-neutral-400: #94A1B5;
  --se-neutral-500: #6B7A91;
  --se-neutral-600: #4E5B70;
  --se-neutral-700: #37435A;
  --se-neutral-800: #23304A;
  --se-neutral-900: #16224A;
  --se-neutral-950: #0B1526;

  /* Teal — phase « s'entraîner » + réussite */
  --se-teal-50:  #ECFDF7;
  --se-teal-100: #CCFBEF;
  --se-teal-200: #A7F3D0;
  --se-teal-400: #2DD4BF;
  --se-teal-600: #0D9488;
  --se-teal-700: #0F766E;
  --se-teal-800: #115E59;

  /* Violet — phase « valider » + annotations professeur */
  --se-violet-50:  #F5F3FF;
  --se-violet-100: #EDE9FE;
  --se-violet-200: #DDD6FE;
  --se-violet-400: #A78BFA;
  --se-violet-600: #7C3AED;
  --se-violet-700: #6D28D9;
  --se-violet-800: #5B21B6;

  /* Ambre — « pas encore », compétence fragile */
  --se-amber-50:  #FEF9EE;
  --se-amber-100: #FEF3E2;
  --se-amber-200: #FDE0AA;
  --se-amber-400: #FBBF24;
  --se-amber-600: #D97706;
  --se-amber-700: #B45309;

  /* Rose — erreur système, suppression (JAMAIS côté élève) */
  --se-rose-50:  #FFF1F3;
  --se-rose-100: #FFE4E8;
  --se-rose-200: #FECDD5;
  --se-rose-400: #FB7185;
  --se-rose-600: #E11D48;
  --se-rose-700: #BE123C;


  /* ═══════════ 2. ALIAS SÉMANTIQUES — à utiliser partout.
     C'est cette couche qui rendra un thème sombre gratuit. */

  /* Fonds */
  --se-bg-app:      var(--se-neutral-50);
  --se-bg-surface:  var(--se-neutral-0);
  --se-bg-subtle:   var(--se-neutral-25);
  --se-bg-muted:    var(--se-neutral-100);
  --se-bg-inverse:  var(--se-neutral-800);
  --se-bg-overlay:  rgba(11, 21, 38, .5);

  /* Bords */
  --se-border:        var(--se-neutral-200);
  --se-border-strong: var(--se-neutral-300);
  --se-border-focus:  var(--se-blue-500);

  /* Texte */
  --se-text:        var(--se-neutral-900);  /* titres */
  --se-text-body:   var(--se-neutral-700);  /* prose pédagogique */
  --se-text-muted:  var(--se-neutral-500);  /* légendes — dernier niveau AA */
  --se-text-faint:  var(--se-neutral-400);  /* désactivé / décoratif SEULEMENT */
  --se-text-invert: var(--se-neutral-0);
  --se-text-link:   var(--se-blue-700);

  /* Action */
  --se-action:         var(--se-blue-600);
  --se-action-hover:   var(--se-blue-700);
  --se-action-active:  var(--se-blue-800);
  --se-action-subtle:  var(--se-blue-50);
  --se-action-on:      var(--se-neutral-0);
  --se-focus-ring:     var(--se-blue-300);

  /* Statuts */
  --se-success:        var(--se-teal-600);
  --se-success-bg:     var(--se-teal-50);
  --se-success-border: var(--se-teal-200);
  --se-success-text:   var(--se-teal-700);

  --se-attention:        var(--se-amber-600);
  --se-attention-bg:     var(--se-amber-50);
  --se-attention-border: var(--se-amber-200);
  --se-attention-text:   var(--se-amber-700);

  --se-danger:        var(--se-rose-600);
  --se-danger-bg:     var(--se-rose-50);
  --se-danger-border: var(--se-rose-200);
  --se-danger-text:   var(--se-rose-700);

  --se-info:        var(--se-blue-600);
  --se-info-bg:     var(--se-blue-50);
  --se-info-border: var(--se-blue-200);
  --se-info-text:   var(--se-blue-700);

  /* ══ LES QUATRE PALIERS D'ACQUISITION ═══════════════════════════════════
   *
   * L'ÉCHELLE UNIQUE, arrêtée par Jean-Louis et Arnaud le 8 septembre 2026.
   * Deux règles d'origine ont été levées DÉLIBÉRÉMENT ce jour-là : « le rouge
   * n'existe pas » et « le vert est réservé à l'acquis ». Le sommet de
   * l'échelle est désormais le BLEU, et le rouge dit un ÉTAT — un palier, un
   * verdict, une erreur — jamais une ACTION.
   *
   *   Acquis insuffisants   score < 30        rouge
   *   Acquis partiels       30 ≤ score < 50   orange
   *   Acquis satisfaisants  50 ≤ score < 70   vert
   *   Acquis solides        score ≥ 70        bleu
   *
   * CES VINGT VALEURS SONT DÉFINIES ICI, UNE FOIS, ET NULLE PART AILLEURS.
   * Une garde éprouve qu'aucune d'elles n'apparaît en dur hors de ce fichier.
   *
   * ET ELLES SONT DISTINCTES DES FAMILLES --se-blue-* / --se-teal-* / etc.,
   * délibérément. Celles-là servent aussi à dire des états de DÉROULEMENT —
   * « Passation en cours », « Pas distribué », « Terminé » — qui n'ont rien à
   * voir avec l'acquisition. Les aliaser ferait changer « Passation en cours »
   * le jour où le bleu des solides bouge, sans que personne l'ait voulu.
   *
   * Cinq valeurs par palier : deux pour le dégradé de la pastille, puis le
   * fond, le bord et le texte de la carte de légende.
   */
  --se-palier-insuffisants-a:      #C62B1C;
  --se-palier-insuffisants-b:      #E86A5C;
  --se-palier-insuffisants-bg:     #FDF3F2;
  --se-palier-insuffisants-border: #F3CFCB;
  --se-palier-insuffisants-text:   #A32E22;

  --se-palier-partiels-a:      #D9901F;
  --se-palier-partiels-b:      #F0B860;
  --se-palier-partiels-bg:     #FEF8EC;
  --se-palier-partiels-border: #F2DCB2;
  --se-palier-partiels-text:   #8A5A10;

  --se-palier-satisfaisants-a:      #2E9E3A;
  --se-palier-satisfaisants-b:      #6FCB72;
  --se-palier-satisfaisants-bg:     #EFF8F0;
  --se-palier-satisfaisants-border: #C4E3C6;
  --se-palier-satisfaisants-text:   #1E6B2A;

  --se-palier-solides-a:      #1F49B8;
  --se-palier-solides-b:      #5E86E8;
  --se-palier-solides-bg:     #EEF3FD;
  --se-palier-solides-border: #C6D5F2;
  --se-palier-solides-text:   #1D3F9C;

  /* Phases pédagogiques — la triade structurante du produit */
  --se-phase-explain:  var(--se-blue-600);    /* 1. on te réexplique  */
  --se-phase-explain-bg:     var(--se-blue-50);
  --se-phase-explain-border: var(--se-blue-200);
  --se-phase-practice: var(--se-teal-600);    /* 2. tu t'entraînes    */
  --se-phase-practice-bg:     var(--se-teal-50);
  --se-phase-practice-border: var(--se-teal-200);
  --se-phase-validate: var(--se-violet-600);  /* 3. un petit quiz     */
  --se-phase-validate-bg:     var(--se-violet-50);
  --se-phase-validate-border: var(--se-violet-200);

  /* Échelle de maîtrise — 4 niveaux, jamais plus.
     TOUJOURS accompagnée d'une icône + d'un libellé. */
  --se-mastery-0: var(--se-rose-600);    /* Non acquis  · icône remove         */
  --se-mastery-1: var(--se-amber-600);   /* Fragile     · icône change_history */
  --se-mastery-2: var(--se-teal-600);    /* Acquis      · icône check          */
  --se-mastery-3: var(--se-blue-700);    /* Maîtrisé    · icône done_all       */
  --se-mastery-0-bg: var(--se-rose-50);
  --se-mastery-1-bg: var(--se-amber-100);
  --se-mastery-2-bg: var(--se-teal-50);
  --se-mastery-3-bg: var(--se-blue-50);
  --se-mastery-0-text: var(--se-rose-700);
  --se-mastery-1-text: var(--se-amber-700);
  --se-mastery-2-text: var(--se-teal-700);
  --se-mastery-3-text: var(--se-blue-700);


  /* ═══════════ 3. TYPOGRAPHIE */

  --se-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --se-font-dys:  'Lexend', var(--se-font-sans);
  --se-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --se-font-body: var(--se-font-sans);   /* redéfini par [data-dys] */

  /* Tailles (rem, base 16px) */
  --se-size-2xs: 0.6875rem;  /* 11   — eyebrow                */
  --se-size-xs:  0.78125rem; /* 12.5 — légende                */
  --se-size-sm:  0.84375rem; /* 13.5 — libellé de champ       */
  --se-size-base:0.9375rem;  /* 15   — corps interface prof   */
  --se-size-md:  1.0625rem;  /* 17   — corps élève (MINIMUM)  */
  --se-size-lg:  1.1875rem;  /* 19   — chapô                  */
  --se-size-xl:  1.25rem;    /* 20   — h3                     */
  --se-size-2xl: 1.5rem;     /* 24   — objectif de fiche      */
  --se-size-3xl: 1.6875rem;  /* 27   — h2                     */
  --se-size-4xl: 2.25rem;    /* 36   — h1                     */
  --se-size-5xl: 3.25rem;    /* 52   — display                */

  /* Graisses */
  --se-weight-regular: 400;
  --se-weight-medium:  500;
  --se-weight-semibold:600;
  --se-weight-bold:    700;
  --se-weight-black:   800;   /* titres ≥ 20px uniquement */

  /* Interlignage */
  --se-leading-tight:   1.15;
  --se-leading-snug:    1.35;
  --se-leading-normal:  1.55;
  --se-leading-relaxed: 1.7;
  --se-leading-prose:   1.75;  /* prose pédagogique */

  /* Interlettrage */
  --se-tracking-display: -0.035em;
  --se-tracking-h1:      -0.03em;
  --se-tracking-h2:      -0.02em;
  --se-tracking-h3:      -0.015em;
  --se-tracking-normal:   0;
  --se-tracking-eyebrow:  0.16em;

  /* Mesure de lecture */
  --se-measure: 68ch;


  /* ═══════════ 4. ESPACEMENTS — base 4px, aucune autre valeur */
  --se-space-0:  0;
  --se-space-1:  0.25rem;  /*  4 */
  --se-space-2:  0.5rem;   /*  8 */
  --se-space-3:  0.75rem;  /* 12 */
  --se-space-4:  1rem;     /* 16 */
  --se-space-5:  1.25rem;  /* 20 */
  --se-space-6:  1.5rem;   /* 24 */
  --se-space-8:  2rem;     /* 32 */
  --se-space-10: 2.5rem;   /* 40 */
  --se-space-12: 3rem;     /* 48 */
  --se-space-16: 4rem;     /* 64 */
  --se-space-20: 5rem;     /* 80 */


  /* ═══════════ 5. RAYONS */
  --se-radius-sm:   7px;    /* pastilles, badges              */
  --se-radius-md:   10px;   /* champs, boutons d'icône        */
  --se-radius-lg:   14px;   /* alertes, menus                 */
  --se-radius-xl:   16px;   /* carte standard — le défaut     */
  --se-radius-2xl:  22px;   /* blocs de fiche, modales        */
  --se-radius-full: 999px;  /* boutons d'action, progressions */


  /* ═══════════ 6. OMBRES — bleutées, jamais noires */
  --se-shadow-xs: 0 1px 2px rgba(20, 32, 56, .05);
  --se-shadow-sm: 0 2px 6px rgba(37, 99, 235, .28);   /* bouton principal */
  --se-shadow-md: 0 6px 20px rgba(20, 32, 56, .08);   /* carte survolée   */
  --se-shadow-lg: 0 12px 32px rgba(20, 32, 56, .13);  /* menu, tooltip    */
  --se-shadow-xl: 0 24px 60px rgba(11, 21, 38, .20);  /* modale           */


  /* ═══════════ 7. GABARIT */
  --se-container:      1320px;
  --se-container-read: 820px;   /* fiche pédagogique */
  --se-sidebar:        248px;
  --se-gutter:         var(--se-space-6);
  --se-page-x:         var(--se-space-4);   /* mobile  */
  --se-page-x-lg:      var(--se-space-10);  /* desktop */
  --se-tap-min:        44px;

  /* Points de rupture (pour référence JS / container queries) */
  --se-bp-sm: 640px;
  --se-bp-md: 768px;
  --se-bp-lg: 1024px;
  --se-bp-xl: 1280px;


  /* ═══════════ 8. MOUVEMENT */
  --se-duration-fast: 120ms;
  --se-duration-base: 160ms;
  --se-duration-slow: 220ms;
  --se-ease: cubic-bezier(.4, 0, .2, 1);
  --se-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Focus — ne jamais supprimer */
  --se-focus-width: 3px;
  --se-focus-offset: 2px;

  /* Couches */
  --se-z-dropdown: 40;
  --se-z-toast:    60;
  --se-z-modal:    70;
}


/* ============================================================
   MODE DYS
   Un seul attribut sur <html> pilote tout le produit.
   Aucun composant n'a besoin de connaître le mode.
   ============================================================ */
[data-dys='true'] {
  --se-font-body: var(--se-font-dys);
  --se-leading-prose: 1.9;
  --se-leading-relaxed: 1.85;
  --se-tracking-normal: 0.02em;
  --se-size-base: 1.0625rem;  /* le corps prof passe au minimum élève */
}

[data-dys='true'] body {
  word-spacing: 0.16em;
}

[data-dys='true'] em,
[data-dys='true'] i {
  font-style: normal;
  font-weight: var(--se-weight-bold);
}

[data-dys='true'] * {
  text-align: left;   /* jamais de texte justifié */
}


/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--se-bg-app);
  color: var(--se-text);
  font-family: var(--se-font-body);
  font-size: var(--se-size-base);
  line-height: var(--se-leading-normal);
  letter-spacing: var(--se-tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--se-weight-bold); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

a {
  color: var(--se-text-link);
  text-decoration: none;
  font-weight: var(--se-weight-semibold);
}
a:hover { color: var(--se-text); text-decoration: underline; }

:focus-visible {
  outline: var(--se-focus-width) solid var(--se-focus-ring);
  outline-offset: var(--se-focus-offset);
  border-radius: var(--se-radius-sm);
}

::selection { background: var(--se-blue-200); color: var(--se-neutral-900); }

/* Chiffres de données : toujours tabulaires */
.se-data,
table td[data-numeric],
table th[data-numeric] {
  font-family: var(--se-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Icônes — Material Symbols Rounded, contour, 400, opsz 24.
   FILL 1 réservé à l'élément de navigation actif. */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
  flex: none;
}
.material-symbols-rounded[data-filled='true'] {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Lien d'évitement (RGAA obligatoire) */
.se-skip-link {
  position: absolute;
  left: var(--se-space-4);
  top: calc(-1 * var(--se-space-16));
  z-index: 100;
  padding: var(--se-space-3) var(--se-space-5);
  background: var(--se-bg-surface);
  border-radius: var(--se-radius-md);
  box-shadow: var(--se-shadow-lg);
  transition: top var(--se-duration-base) var(--se-ease);
}
.se-skip-link:focus { top: var(--se-space-4); }


/* ============================================================
   IMPRESSION — une fiche de remédiation doit sortir propre en A4
   ============================================================ */
@media print {
  :root { --se-bg-app: #FFFFFF; }
  body { background: #FFFFFF; font-size: 11pt; }
  [data-print='hide'],
  nav, aside, .se-toast, .se-modal { display: none !important; }
  [class*='card'], [data-card] {
    background: #FFFFFF !important;
    box-shadow: none !important;
    border: 1px solid #999999 !important;
    break-inside: avoid;
  }
  a { color: inherit; text-decoration: none; }
}