@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;600;700&display=swap") screen and (max-width: 767px);
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap") screen and (max-width: 767px);

/* ═══════════════════════════════════════════════════════════════════
   mobile-theme.css — thème téléphone COMPOSÉ (téléphone uniquement)

   Trois directions, choisies vue par vue :
   - PRO LUDIQUE (base) : le cadre commun (fond, barre du haut, dock et
     son « + », menu, notification, fenêtres, Paramètres, champs), le
     premier écran de l'accueil (« Bien démarrer », titre, carte de
     bienvenue et ses compteurs), la partie tâches de l'accueil
     (évaluations, tâches prioritaires, « En retard »), le Simulateur,
     IA, Réseau et Ressources ;
   - CONSOLE : la suite de l'accueil (héros « Prochain cours »,
     « Progression semaine », « Prochains cours »), les Tâches
     (devoirs.html) et l'Agenda (cours.html) ;
   - PERFORMANCE : les Notes (notes.html).
   Chaque partie garde ses propres jetons (--m-*, --c-*, --pf-*) et
   son mode clair.

   Raccords : un seul cadre (fond, barre, dock, marges de <main>,
   menu, notification, fenêtres, Paramètres) sur toutes les pages. Sur
   l'accueil, les cartes Console gardent l'écart (16 px), le rayon
   (20 px) et la surface de fond des cartes Pro voisines ; leur
   liseré, leurs lumières, Manrope et leurs lignes restent Console.
   Toutes les cibles tactiles font au moins 40 px (case à cocher des
   Tâches : 32 px à l'œil, 50 px de zone de tap).

   Polices : Plus Jakarta Sans (chargée par les pages) partout ;
   Manrope (300, 600, 700) pour les titres et chiffres Console ;
   Barlow Semi Condensed (600, 700) pour les gros chiffres des Notes.
   Leurs fichiers ne se téléchargent que sur les pages qui les
   affichent.

   Ciblage par page : chaque page de l'app porte data-page="<nom>" sur
   <body> (sans effet sur PC : aucune règle PC ne le lit). Préfixes :
   - body:not(#st-m) : cadre commun et éléments propres à une page
     (ids) ; le poids d'un identifiant, sans en exiger un, pour passer
     devant les « body.light-mode .x { … !important } » des pages ;
   - body:not(#st-m, [data-page="devoirs"], [data-page="cours"],
     [data-page="notes"]) : contenu Pro ; même poids, jamais sur les
     pages Console / Performance ;
   - body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) :
     contenu Console des Tâches et de l'Agenda ;
   - body[data-page="notes"]:not(#st-m) : contenu Performance.

   TOUT est sous @media (max-width: 767px) : la version PC (≥ 768px)
   ne change pas d'un pixel (le <link> porte aussi ce media).

   Page publique et écran de connexion (index non connecté) : ils ne
   changent pas. Aucun « :has() » sur <body> :
   - les règles génériques (cartes, champs, textes…) portent
     :where(:not(#landingPage *, #sectionConnexion *)) ;
   - le fond (body), le padding de <main>, les calques décoratifs et
     la notification demandent body:not([data-st-public]) : index.html
     porte cet attribut (la page publique s'affiche d'abord) et
     mobile-enhance.js le retire/remet dès que la page publique ou
     l'écran de connexion se masque/s'affiche ;
   - le reste ne vise que des éléments de l'application.

   Coût : pas de :has() sur <body> ni de :has() qui cherche dans tout
   un sous-arbre (chemins d'enfants « > » précis), et le dernier
   composé d'un sélecteur commence par un id, une classe ou une balise.
   Mouvement : transform/opacity seulement, coupé sous
   prefers-reduced-motion et body.st-reduce-motion. Décor masqué sous
   body.st-no-bg.

   XP : la pastille du haut, la pièce de la carte de bienvenue et la
   carte du menu sont masquées ici (leur code est retiré à la source).

   Moins de défilement (§ I) : onglets internes, en-têtes compacts et
   listes denses, sur les éléments et attributs (data-st-*) que
   mobile-enhance.js pose sur téléphone seulement.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ═══════════════════════════════════════════════════════════════
       A. JETONS — Pro (--m-*), Console (--c-*), Performance (--pf-*)
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Jetons ─────────────────────────────────────────────────── */
    :root {
        --m-dock-h: 64px;
        --m-dock-gap: 12px;
        --m-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

        --m-bg: #0d0e11;
        --m-bg-glow: color-mix(in srgb, var(--color-accent, #f27b21) 11%, transparent);
        --m-surface: #15171b;
        --m-surface-2: #1b1d22;
        --m-surface-3: #25282e;
        --m-thumb: #343740;
        --m-well: #101114;
        --m-line: #25272d;
        --m-line-2: #32353c;
        --m-text: #f4f4f5;
        --m-text-2: #c8cad0;
        --m-text-3: #9b9ea7;
        --m-ink: #16120e;
        --m-hi: inset 0 1px 0 rgba(255, 255, 255, 0.035);
        --m-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
        --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -18px rgba(0, 0, 0, 0.75);
        --m-shadow-lg: 0 20px 48px -14px rgba(0, 0, 0, 0.7);
        --m-overlay: rgba(6, 7, 10, 0.7);

        --m-accent: var(--color-accent, #f27b21);
        --m-accent-face: color-mix(in srgb, var(--m-accent) 90%, #ffffff);
        --m-accent-deep: color-mix(in srgb, var(--m-accent) 80%, #000000);
        --m-accent-text: color-mix(in srgb, var(--m-accent) 66%, #ffffff);
        --m-accent-soft: color-mix(in srgb, var(--m-accent) 15%, transparent);
        --m-accent-line: color-mix(in srgb, var(--m-accent) 42%, transparent);
        /* Relief discret des boutons pleins (1 px de lumière, 1 px d'ombre) */
        --m-relief: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.28);
        --m-accent-glow: 0 8px 18px -10px color-mix(in srgb, var(--m-accent) 80%, transparent);

        --m-green: #34d399;
        --m-green-text: #4ade9b;
        --m-red: #f87171;
        --m-red-text: #ff8c8c;
        --m-red-strong: #d42e44;
        --m-amber: #fbbf24;
        --m-amber-text: #fcc94d;
        --m-blue: #60a5fa;
        --m-blue-text: #82b8ff;
        --m-violet: #a78bfa;
        --m-violet-text: #bba6ff;
        --m-cyan: #22d3ee;
        --m-cyan-text: #4fdcf1;
        --m-pink: #f472b6;
        --m-indigo: #818cf8;
        --m-slate: #94a3b8;

        --m-r-lg: 20px;
        --m-r-md: 16px;
        --m-r-sm: 12px;
        --m-ease: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.16s ease;
    }

    body.light-mode {
        --m-bg: #f6f4ef;
        --m-bg-glow: color-mix(in srgb, var(--color-accent, #f27b21) 8%, transparent);
        --m-surface: #ffffff;
        --m-surface-2: #faf9f6;
        --m-surface-3: #f0eee9;
        --m-thumb: #ffffff;
        --m-well: #ffffff;
        --m-line: #e8e5de;
        --m-line-2: #dbd7ce;
        --m-text: #18181b;
        --m-text-2: #3f3f46;
        --m-text-3: #676972;
        --m-hi: inset 0 0 0 transparent;
        --m-shadow-sm: 0 1px 2px rgba(40, 32, 18, 0.07);
        --m-shadow: 0 1px 2px rgba(40, 32, 18, 0.05), 0 10px 26px -18px rgba(40, 32, 18, 0.22);
        --m-shadow-lg: 0 20px 44px -14px rgba(40, 32, 18, 0.26);
        --m-overlay: rgba(28, 24, 16, 0.32);
        --m-relief: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(40, 32, 18, 0.16);
        --m-accent-text: color-mix(in srgb, var(--m-accent) 64%, #000000);
        --m-accent-soft: color-mix(in srgb, var(--m-accent) 12%, transparent);
        --m-accent-line: color-mix(in srgb, var(--m-accent) 38%, transparent);
        --m-green-text: #0d7a4a;
        --m-red-text: #c02637;
        --m-amber-text: #8a5200;
        --m-blue-text: #1d5fc4;
        --m-violet-text: #6b3fd4;
        --m-cyan-text: #0a6f82;
    }

    /* ─── Jetons Console (suite de l'accueil, Tâches, Agenda) ───────── */
    :root {
        --c-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
        --c-accent: var(--color-accent, #f27b21);
        --c-bg-2: #0d1017;

        /* Surfaces */
        --c-tile: rgba(19, 23, 33, 0.8);
        --c-tile-hi: rgba(255, 255, 255, 0.04);
        --c-item: rgba(255, 255, 255, 0.045);
        --c-item-2: rgba(255, 255, 255, 0.08);
        --c-line: rgba(255, 255, 255, 0.075);
        --c-line-2: rgba(255, 255, 255, 0.13);
        --c-well: rgba(0, 0, 0, 0.3);
        --c-scrim: rgba(3, 4, 8, 0.66);
        --c-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 26px 50px -30px rgba(0, 0, 0, 0.95), 0 6px 16px -8px rgba(0, 0, 0, 0.55);
        --c-shadow-sm: 0 12px 26px -18px rgba(0, 0, 0, 0.9);
        --c-shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 10px 24px -10px rgba(0, 0, 0, 0.5);

        /* Texte */
        --c-text: #f3f5fa;
        --c-text-2: #c5cbd9;
        --c-text-3: #9ca3b7;
        --c-ink: #0b0e15;

        /* Accent */
        --c-accent-face: color-mix(in srgb, var(--c-accent) 86%, #ffffff);
        --c-accent-end: color-mix(in srgb, var(--c-accent) 92%, #ffffff);
        --c-accent-text: color-mix(in srgb, var(--c-accent) 62%, #ffffff);
        --c-accent-soft: color-mix(in srgb, var(--c-accent) 17%, transparent);
        --c-accent-line: color-mix(in srgb, var(--c-accent) 52%, transparent);
        --c-halo: color-mix(in srgb, var(--c-accent) 36%, transparent);
        --c-ring-mix: #ffffff;
        --c-ring-pct: 74%;

        /* Couleurs de repère (matières, états) : pleine / texte */
        --c-blue: #6aa6ff;    --c-blue-t: #8cbaff;
        --c-green: #3fd09a;   --c-green-t: #5fdcaf;
        --c-red: #ff6680;     --c-red-t: #ff8c9e;
        --c-violet: #a58bff;  --c-violet-t: #bba8ff;
        --c-amber: #f2b04e;   --c-amber-t: #f6c470;
        --c-cyan: #45cde0;    --c-cyan-t: #6fd9e8;
        --c-pink: #f07ab8;    --c-pink-t: #f59cc9;
        --c-indigo: #8e96ff;  --c-indigo-t: #a9afff;
        --c-slate: #9aa3b8;   --c-slate-t: #b4bbcc;

        --c-r-xl: 24px;
        --c-r-lg: 20px;
        --c-r-md: 16px;
        --c-r-sm: 12px;
        --c-press: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    body.light-mode {
        --c-bg-2: #f6f7fa;
        --c-tile: rgba(255, 255, 255, 0.94);
        --c-tile-hi: rgba(255, 255, 255, 0);
        --c-item: #f4f5f8;
        --c-item-2: #eaecf1;
        --c-line: rgba(18, 24, 40, 0.075);
        --c-line-2: rgba(18, 24, 40, 0.13);
        --c-well: #f2f3f7;
        --c-scrim: rgba(22, 28, 44, 0.3);
        --c-shadow: 0 1px 2px rgba(18, 24, 40, 0.05), 0 24px 44px -28px rgba(18, 24, 40, 0.32);
        --c-shadow-sm: 0 10px 22px -16px rgba(18, 24, 40, 0.35);
        --c-shadow-lg: 0 40px 80px -34px rgba(18, 24, 40, 0.4), 0 8px 20px -10px rgba(18, 24, 40, 0.14);
        --c-text: #111522;
        --c-text-2: #363e51;
        --c-text-3: #576073;
        --c-accent-text: color-mix(in srgb, var(--c-accent) 58%, #000000);
        --c-accent-soft: color-mix(in srgb, var(--c-accent) 13%, transparent);
        --c-accent-line: color-mix(in srgb, var(--c-accent) 45%, transparent);
        --c-halo: color-mix(in srgb, var(--c-accent) 30%, transparent);
        --c-ring-mix: #000000;
        --c-ring-pct: 90%;
        --c-blue: #3b7ff0;    --c-blue-t: #1d5fc4;
        --c-green: #17a673;   --c-green-t: #0b7a4b;
        --c-red: #e5405e;     --c-red-t: #c0183f;
        --c-violet: #7c5cf0;  --c-violet-t: #6433d0;
        --c-amber: #e59a1c;   --c-amber-t: #8a5300;
        --c-cyan: #129fb4;    --c-cyan-t: #0a6f82;
        --c-pink: #d9468f;    --c-pink-t: #b3246e;
        --c-indigo: #5b63f0;  --c-indigo-t: #4146c7;
        --c-slate: #7b8499;   --c-slate-t: #4c5568;
    }

    /* ─── Jetons Performance (Notes) ──────────────────────────────── */
    :root {
        --pf-font: 'Plus Jakarta Sans', system-ui, sans-serif;
        --pf-num: 'Barlow Semi Condensed', 'Plus Jakarta Sans', system-ui, sans-serif;

        --pf-surface: #15161a;
        --pf-surface-2: #1c1d22;
        --pf-surface-3: #26282e;
        --pf-line: #25272d;
        --pf-line-2: #33353c;
        --pf-well: #101114;
        --pf-text: #f3f4f6;
        --pf-text-2: #bcc0c9;
        --pf-text-3: #8f939d;
        --pf-invert: #f3f4f6;
        --pf-on-invert: #0b0c0e;
        --pf-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 30px -20px rgba(0, 0, 0, 0.9);
        --pf-bar-track: rgba(255, 255, 255, 0.07);

        --pf-accent: var(--color-accent, #f27b21);
        --pf-accent-face: color-mix(in srgb, var(--pf-accent) 92%, #ffffff);
        --pf-on-accent: #0b0c0e;
        --pf-accent-text: color-mix(in srgb, var(--pf-accent) 72%, #ffffff);
        --pf-accent-soft: color-mix(in srgb, var(--pf-accent) 15%, transparent);
        --pf-accent-glow: color-mix(in srgb, var(--pf-accent) 38%, transparent);

        --pf-green: #34d27f;
        --pf-green-text: #4fe39a;
        --pf-red: #ff4f5e;
        --pf-red-text: #ff7a86;
        --pf-amber: #ffb03b;
        --pf-amber-text: #ffc163;
        --pf-blue-text: #7cb5ff;
        --pf-violet-text: #bba3ff;
        --pf-cyan-text: #62dcef;
        --pf-pink-text: #ff8cbf;
        --pf-indigo-text: #a9abff;
        --pf-slate: #8f939d;

        --pf-r-lg: 20px;
        --pf-r-md: 14px;
        --pf-press: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    /* Texte posé sur l'accent : encre ou blanc selon la clarté de
       l'accent choisi (tous les accents proposés donnent l'encre). */
    @supports (color: oklch(from red l c h)) {
        :root {
            --pf-on-accent: oklch(from var(--pf-accent-face) clamp(0.16, (0.565 - l) * 1000, 1) 0 0);
        }
    }

    body.light-mode {
        --pf-surface: #ffffff;
        --pf-surface-2: #f7f7f5;
        --pf-surface-3: #ececea;
        --pf-line: #e6e6e2;
        --pf-line-2: #d6d6d0;
        --pf-well: #f7f7f5;
        --pf-text: #101114;
        --pf-text-2: #3b3e46;
        --pf-text-3: #5e626b;
        --pf-invert: #101114;
        --pf-on-invert: #ffffff;
        --pf-shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 10px 26px -18px rgba(16, 17, 20, 0.22);
        --pf-bar-track: rgba(16, 17, 20, 0.07);
        --pf-accent-text: color-mix(in srgb, var(--pf-accent) 58%, #000000);
        --pf-accent-soft: color-mix(in srgb, var(--pf-accent) 11%, transparent);
        --pf-accent-glow: color-mix(in srgb, var(--pf-accent) 30%, transparent);

        --pf-green: #1fae5b;
        --pf-green-text: #0b6a33;
        --pf-red: #e5383f;
        --pf-red-text: #b8212c;
        --pf-amber: #eb9a0e;
        --pf-amber-text: #8a5300;
        --pf-blue-text: #1757bd;
        --pf-violet-text: #6431cc;
        --pf-cyan-text: #0a6a7b;
        --pf-pink-text: #a8246a;
        --pf-indigo-text: #4043c4;
        --pf-slate: #7c808a;
    }

    /* ═══════════════════════════════════════════════════════════════
       B. CADRE COMMUN (Pro ludique, toutes les pages)
       Fond, barre du haut, dock et « + », marges de <main>, champs.
       Menu, notification, fenêtres et Paramètres : plus bas (§ G).
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Fond : uni, un seul halo d'accent très léger en haut ────── */
    body:not(#st-m):not([data-st-public]) {
        background-color: var(--m-bg) !important;
        background-image: radial-gradient(130% 42% at 50% -6%, var(--m-bg-glow), transparent 72%) !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }
    body.st-no-bg:not(#st-m):not([data-st-public]) {
        background-image: none !important;
    }
    body:not(#st-m):not([data-st-public]) > .fixed.inset-0.pointer-events-none:is(.z-\[-1\], .z-\[-2\]) {
        display: none !important;
    }

    /* Plus de flou d'arrière-plan sur les cartes (surfaces opaques) :
       il ne reste que celui des fenêtres modales / du menu. */
    body:not(#st-m) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main .glass-card:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main .glass-item:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main .glass-dark:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main [class*="backdrop-blur"]:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) #mobileTopNav,
    body:not(#st-m) #mobileBottomNav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* Halos flous décoratifs dans les cartes : retirés */
    body:not(#st-m) main :is(.glass-panel, .glass-card) > div.absolute.pointer-events-none[class*="blur-"]:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main :is(.glass-panel, .glass-card) > div.absolute[class*="blur-\["]:where(:not(#landingPage *, #sectionConnexion *)) {
        display: none !important;
    }

    /* ═══ BARRE DU HAUT ═══════════════════════════════════════════ */
    body:not(#st-m) #mobileTopNav {
        height: 60px !important;
        padding-left: 16px !important;
        padding-right: 12px !important;
        background: var(--m-bg) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--m-line) !important;
        box-shadow: none !important;
    }
    body:not(#st-m) #mobileTopNav > :first-child {
        gap: 10px !important;
        min-height: 44px;
    }
    /* Logo « S » : tuile d'accent nette */
    body:not(#st-m) #mobileTopNav > :first-child > div:first-child {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        background: var(--m-accent-face) !important;
        border: 0 !important;
        box-shadow: var(--m-relief) !important;
        color: var(--m-ink) !important;
        font-family: var(--m-font) !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        text-shadow: none;
    }
    /* Nom de l'app : <h1> des pages, <span> de la barre partagée (IA) */
    body:not(#st-m) #mobileTopNav h1,
    body:not(#st-m) #mobileTopNav > a > span {
        font-family: var(--m-font) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.025em !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m) #mobileTopNav h1 > span,
    body:not(#st-m) #mobileTopNav > a > span > span {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m) #mobileTopNav > div:last-child {
        gap: 8px !important;
    }
    body:not(#st-m) #mobileTopNav #stSettingsBtnMob,
    body:not(#st-m) #mobileTopNav #mobileMenuBtn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-shadow-sm) !important;
        color: var(--m-text-2) !important;
        font-size: 15px !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #mobileTopNav #stSettingsBtnMob:active,
    body:not(#st-m) #mobileTopNav #mobileMenuBtn:active {
        transform: scale(0.94);
    }
    body:not(#st-m) #mobileMenuBtn .menu-dot {
        top: -3px !important;
        right: -3px !important;
        width: 11px !important;
        height: 11px !important;
        background: var(--m-red-strong) !important;
        border: 2px solid var(--m-bg) !important;
        box-shadow: none !important;
    }

    /* XP : retiré de l'application (pastille du haut, pièce de la carte
       de bienvenue, carte du menu). */
    body:not(#st-m) #mobileTopNav .xp-pill-mobile,
    body:not(#st-m) main .arc-coin,
    body:not(#st-m) #mobileMenuSheet .sheet-xp {
        display: none !important;
    }

    /* ═══ DOCK DU BAS (flottant) ══════════════════════════════════ */
    body:not(#st-m) #mobileBottomNav {
        left: var(--m-dock-gap) !important;
        right: var(--m-dock-gap) !important;
        bottom: calc(var(--m-dock-gap) + env(safe-area-inset-bottom, 0px)) !important;
        height: var(--m-dock-h) !important;
        padding: 0 6px !important;
        border-radius: 22px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-hi), var(--m-shadow-lg) !important;
        overflow: visible !important;
    }
    body:not(#st-m) #mobileBottomNav > a {
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
        justify-content: center;
        gap: 3px !important;
        padding: 6px 2px !important;
        color: var(--m-text-3) !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #mobileBottomNav > a > div {
        width: 48px;
        height: 28px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body:not(#st-m) #mobileBottomNav > a i {
        font-size: 17px !important;
        line-height: 1 !important;
    }
    body:not(#st-m) #mobileBottomNav > a > span:not(.badge-nav) {
        font-family: var(--m-font) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: none;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
    }
    body:not(#st-m) #mobileBottomNav > a:active {
        transform: scale(0.94);
    }
    /* Onglet actif : icône sur une gélule teintée d'accent */
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active > span:not(.badge-nav) {
        font-weight: 700 !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active::before {
        display: none !important;
    }
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active > div {
        color: var(--m-accent-text);
        isolation: isolate;
    }
    /* La gélule est un élément à part (shared.js) : au changement de page,
       elle glisse vers le nouvel onglet (tailwind.src.css, st-tab-pill). */
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active > div > .st-nav-pill {
        background: var(--m-accent-soft);
    }
    /* Règle à part : un navigateur sans :has() n'ignore qu'elle. */
    body:not(#st-m) #mobileBottomNav > a.mobile-nav-active > div:not(:has(> .st-nav-pill)) {
        background: var(--m-accent-soft);
    }
    body:not(#st-m) #mobileBottomNav .st-nav-pill {
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
    }
    /* Bouton central « + » : gros, plein, légèrement sorti du dock */
    body:not(#st-m) #mobileBottomNav > button:is(#mobileNavPlus, [onclick*="ouvrirModalAjout"]) {
        flex: 0 0 auto;
        width: 66px;
        transform: translateY(-12px) !important;
        --tw-translate-y: 0;
    }
    body:not(#st-m) #mobileBottomNav > button:is(#mobileNavPlus, [onclick*="ouvrirModalAjout"]) > div {
        width: 54px !important;
        height: 54px !important;
        border-radius: 18px !important;
        font-size: 22px !important;
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: 0 0 0 5px var(--m-surface), var(--m-relief), 0 12px 22px -8px color-mix(in srgb, var(--m-accent) 75%, transparent) !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #mobileBottomNav > button:is(#mobileNavPlus, [onclick*="ouvrirModalAjout"]) > div i {
        color: var(--m-ink) !important;
    }
    body:not(#st-m) #mobileBottomNav > button:is(#mobileNavPlus, [onclick*="ouvrirModalAjout"]):active > div {
        transform: scale(0.94);
    }
    /* Pastille « en retard » */
    body:not(#st-m) #mobileBottomNav .badge-nav {
        top: 2px !important;
        right: calc(50% - 28px) !important;
        width: auto !important;
        min-width: 18px;
        height: 18px !important;
        padding: 0 5px;
        border-radius: 999px !important;
        background: var(--m-red-strong) !important;
        color: #ffffff !important;
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        border: 2px solid var(--m-surface) !important;
        box-shadow: none;
        animation: none !important;
    }

    /* ═══ MARGES DE <main> (mêmes sur toutes les pages) ═══════════ */
    body:not(#st-m):not([data-st-public]) > main {
        color: var(--m-text-2);
        padding-top: 74px !important;
        padding-bottom: calc(var(--m-dock-h) + var(--m-dock-gap) + 34px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ─── Champs ─────────────────────────────────────────────────── */
    body:not(#st-m) .glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        background-color: var(--m-well) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: none !important;
        color: var(--m-text) !important;
        font-family: var(--m-font);
        font-weight: 500 !important;
    }
    body.light-mode:not(#st-m) .glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        box-shadow: inset 0 1px 2px rgba(40, 32, 18, 0.04) !important;
    }
    body:not(#st-m) .glass-input:where(:not(#landingPage *, #sectionConnexion *)):focus {
        border-color: var(--m-accent) !important;
        box-shadow: 0 0 0 3px var(--m-accent-soft) !important;
        outline: none !important;
    }
    body:not(#st-m) main input.glass-input:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m) main select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        min-height: 48px;
    }
    body:not(#st-m) .glass-input:where(:not(#landingPage *, #sectionConnexion *))::placeholder {
        color: var(--m-text-3) !important;
        opacity: 1;
    }
    /* Listes déroulantes : chevron dessiné, le texte ne passe pas dessous */
    body:not(#st-m) select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        -webkit-appearance: none;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%), linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%) !important;
        background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 38px !important;
        text-overflow: ellipsis;
    }

    /* ═══════════════════════════════════════════════════════════════
       C. CONTENU — PRO LUDIQUE
       Accueil (premier écran et partie tâches), Simulateur, IA,
       Réseau, Ressources. Préfixe « body:not(#st-m, [data-page=…]) » :
       même poids que body:not(#st-m), mais jamais sur Tâches, Agenda
       ni Notes (thèmes Console / Performance, § D à F).
       ═══════════════════════════════════════════════════════════════ */

    /* Titres de page : grands, graissés, en casse normale */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--m-font) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        text-transform: none !important;
        color: var(--m-text) !important;
        text-shadow: none !important;
        filter: none !important;
    }
    /* Sous-titre de page */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) + p {
        margin-top: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--m-text-3) !important;
    }

    /* Titres de cartes : graissés, en casse normale */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.glass-panel, .glass-card) h3:is(.text-lg, .text-base, .text-sm):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--m-font) !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        text-transform: none !important;
        color: var(--m-text) !important;
    }

    /* Icônes de titre de carte : neutres (la couleur est réservée à ce
       qui a du sens : matière, état, action) */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.glass-panel, .glass-card) h3 > i:first-child:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel > button > span.font-extrabold > i:first-child {
        color: var(--m-text-3) !important;
    }

    /* Textes « blancs » et secondaires : jetons du thème */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.text-white, :is(h1, h2, h3, h4):not([class*="-400"], [class*="-300"], [class*="accent"])):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-slate-300:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-slate-200:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-gray-300:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-slate-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-slate-500:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-gray-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-gray-500:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-slate-600:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--m-text-3) !important;
    }
    /* Texte couleur d'accent sur fond de carte : teinte lisible */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-\[color\:var\(--color-accent\)\]:not([class*="bg-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--m-accent-text) !important;
    }
    body.light-mode:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main p:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)),
    body.light-mode:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main span:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: inherit !important;
    }
    /* Teintes « -400 » (faites pour le fond sombre) : lisibles dans les
       deux modes (assombries sur le clair). */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-emerald-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-green-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-green-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-rose-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-red-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-red-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-amber-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-yellow-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-orange-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-amber-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-blue-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-sky-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-blue-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-purple-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-violet-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-violet-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-cyan-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--m-cyan-text) !important; }
    body.light-mode:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-indigo-400:where(:not(#landingPage *, #sectionConnexion *)) { color: #4b46c7 !important; }
    body.light-mode:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .text-pink-400:where(:not(#landingPage *, #sectionConnexion *)) { color: #b3246e !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-soon { color: var(--m-amber-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-urgent { color: var(--m-red-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-ok { color: var(--m-green-text) !important; }

    /* ─── Cartes : surface opaque, bord fin, ombre douce ──────────── */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-lg) !important;
        box-shadow: var(--m-hi), var(--m-shadow) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-card:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-md) !important;
        box-shadow: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
    }
    /* Boutons « glass » : boutons secondaires */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        border-color: var(--m-line-2) !important;
        box-shadow: var(--m-shadow-sm) !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* Boutons d'accent : pleins, texte encre, relief discret */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
        font-family: var(--m-font) !important;
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) i,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) span {
        color: var(--m-ink) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* ─── Couleur d'une matière ───────────────────────────────────────
       Les modèles JS colorent la matière avec text-X-400 bg-X-500/10 :
       on relit la couleur pour la pastille et le bord fin de la carte. */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-blue-500\/10.text-blue-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#60a5fa"] { --subj: var(--m-blue); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-emerald-500\/10.text-emerald-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#34d399"] { --subj: var(--m-green); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-rose-500\/10.text-rose-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#fb7185"] { --subj: var(--m-red); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-purple-500\/10.text-purple-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#c084fc"] { --subj: var(--m-violet); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-amber-500\/10.text-amber-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#fbbf24"] { --subj: var(--m-amber); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-cyan-500\/10.text-cyan-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#22d3ee"] { --subj: var(--m-cyan); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-pink-500\/10.text-pink-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#f472b6"] { --subj: var(--m-pink); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-indigo-500\/10.text-indigo-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#818cf8"] { --subj: var(--m-indigo); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .bg-slate-500\/10.text-slate-400,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [style*="#94a3b8"] { --subj: var(--m-slate); }

    /* Même couleur remontée sur la ligne entière (bord fin à gauche) :
       :has() à chemin d'enfants exact, sur les classes seulement. */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-blue-500\/10) { --subj: var(--m-blue); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-emerald-500\/10) { --subj: var(--m-green); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-rose-500\/10) { --subj: var(--m-red); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-purple-500\/10) { --subj: var(--m-violet); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-amber-500\/10) { --subj: var(--m-amber); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-cyan-500\/10) { --subj: var(--m-cyan); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-pink-500\/10) { --subj: var(--m-pink); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row:has(> div > div > div > span.bg-indigo-500\/10) { --subj: var(--m-indigo); }

    /* La pastille de matière : étiquette neutre + point de couleur
       (le point est dessiné en fond : les pseudo-éléments restent libres). */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main span[class*="tracking-widest"]:is(.bg-blue-500\/10, .bg-emerald-500\/10, .bg-rose-500\/10, .bg-purple-500\/10, .bg-amber-500\/10, .bg-cyan-500\/10, .bg-pink-500\/10, .bg-indigo-500\/10, .bg-slate-500\/10):where(:not(#landingPage *, #sectionConnexion *)) {
        background: radial-gradient(circle at 10px 50%, var(--subj) 0 3.5px, transparent 4px) no-repeat, var(--m-surface-3) !important;
        color: var(--m-text-2) !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        padding: 3px 9px 3px 19px !important;
        font-family: var(--m-font) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 1.3 !important;
    }

    /* ─── États vides : cadre pointillé fin, texte lisible ────────── */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) {
        border: 1px dashed var(--m-line-2);
        border-radius: var(--m-r-md);
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) p {
        font-size: 13px !important;
        color: var(--m-text-3) !important;
    }

    /* ═══ ACCUEIL — premier écran et partie tâches ═══════════════════
       (la suite, « Prochain cours » → « Prochains cours », est en § D).
       Un seul écart de 16 px entre toutes les cartes de l'accueil. */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #dashboardNormalContent {
        gap: 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #dashboardNormalContent > .flex.flex-col.lg\:flex-row {
        gap: 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #dashboardNormalContent > .grid {
        gap: 16px !important;
        margin-top: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > div + div {
        margin-top: 0 !important;
    }

    /* ─── Carte de bienvenue : la carte de profil, à la couleur d'accent
       Dégradé d'accent, deux anneaux fins dans le coin (décor, masqué
       sous « sans fond »), chiffres sur des tuiles claires. */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child {
        background:
            radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 62%),
            linear-gradient(155deg, var(--m-accent-face) 0%, var(--m-accent) 52%, var(--m-accent-deep) 100%) !important;
        border: 0 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 16px 34px -18px color-mix(in srgb, var(--m-accent) 80%, #000000) !important;
        padding: 20px 16px 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child::before {
        content: '';
        position: absolute;
        top: -64px;
        right: -52px;
        width: 168px;
        height: 168px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.34);
        outline: 1px solid rgba(255, 255, 255, 0.2);
        outline-offset: 26px;
        pointer-events: none;
    }
    body.st-no-bg:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child::before {
        display: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div:first-child {
        margin-bottom: 18px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #userInfoDisplay {
        display: inline-block !important;
        width: auto;
        max-width: 100%;
        padding: 4px 10px;
        margin-bottom: 10px !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.26);
        color: var(--m-ink) !important;
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        overflow-wrap: anywhere;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child h3 {
        font-family: var(--m-font) !important;
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
        color: var(--m-ink) !important;
        text-shadow: none;
        overflow-wrap: anywhere;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child h3 span {
        color: var(--m-ink) !important;
    }
    /* Compteurs : tuiles claires sur la carte d'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row {
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.34) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        padding: 11px 11px 12px !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card > div:first-child {
        margin-bottom: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card > div:first-child > span {
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        color: var(--m-ink) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card > div:first-child > div {
        display: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpiCours,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpiTasks,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpiExams {
        font-family: var(--m-font) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -0.03em !important;
        font-variant-numeric: tabular-nums;
        color: var(--m-ink) !important;
        text-shadow: none;
    }


    /* ─── Cartes de la grille : Cours / Évaluations / Tâches ──────── */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel {
        padding: 18px 16px 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel h3 {
        font-size: 19px !important;
        text-transform: none !important;
        letter-spacing: -0.02em !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel > div.mb-6.items-center {
        margin-bottom: 14px !important;
    }
    /* « Voir » (agenda) et « + » (tâches) : vraies cibles de 40 px */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel > div.mb-6 > a.glass-item {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: var(--m-r-sm) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel > div.mb-6 > button[onclick*="ouvrirModalAjout"] {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
        color: var(--m-text-2) !important;
    }
    /* Pastille d'icône du titre (Évaluations) */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsSection > div.items-center > .w-8 {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: color-mix(in srgb, var(--m-amber) 15%, transparent) !important;
        border: 0 !important;
        color: var(--m-amber-text) !important;
        box-shadow: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsSection > div.items-center > .w-8 i {
        color: var(--m-amber-text) !important;
    }

    /* Lignes de cours / évaluations : bord fin de la couleur du cours */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.schedule-row, .exam-row) > a {
        position: relative;
        overflow: hidden;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        padding: 11px 12px 11px 15px !important;
        min-height: 60px;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.schedule-row, .exam-row) > a:active {
        transform: scale(0.985);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.schedule-row, .exam-row, .deadline-row) h4 {
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.schedule-row, .exam-row) span.text-\[9px\] {
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    /* Évaluation : la matière en pastille neutre, sa couleur en bord fin
       (la couleur en ligne passe par currentColor) */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .exam-row span[class*="tracking-widest"][style] {
        background: radial-gradient(circle at 10px 50%, currentColor 0 3.5px, transparent 4px) no-repeat, var(--m-surface-3) !important;
        -webkit-text-fill-color: var(--m-text-2);
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        padding: 3px 9px 3px 19px !important;
        font-family: var(--m-font) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 1.3 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .exam-row span[class*="tracking-widest"][style]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: currentColor;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .exam-row > a > div:first-child {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: var(--m-surface-3) !important;
        border: 0 !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .exam-row > a > div:first-child i {
        color: var(--m-text-2) !important;
        font-size: 14px !important;
    }
    /* « Préparer avec mon IA » : bouton teinté d'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsList > a:last-child {
        min-height: 48px;
        margin-top: 12px !important;
        padding: 10px 14px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-accent-soft) !important;
        border: 1px solid var(--m-accent-line) !important;
        box-shadow: none !important;
        color: var(--m-accent-text) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3;
        text-align: center;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsList > a:last-child i,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsList > a:last-child span {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #examsList > a:last-child:active {
        transform: scale(0.98);
    }

    /* ─── Filtres d'échéance : contrôle segmenté ─────────────────── */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel:last-child > div:nth-child(2) {
        gap: 10px !important;
        border-bottom: 1px solid var(--m-line) !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel:last-child > div:nth-child(2) > div:first-child {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #priorityFilter {
        width: 100% !important;
        min-width: max-content;
        gap: 2px !important;
        padding: 3px;
        border-radius: 13px;
        background: var(--m-surface-3);
        border: 0;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #priorityFilter .prio-chip {
        flex: 1 1 auto;
        min-height: 40px;
        padding: 0 8px !important;
        border-radius: 10px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--m-text-3) !important;
        font-family: var(--m-font);
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #priorityFilter .prio-chip[aria-pressed="true"] {
        background: var(--m-thumb) !important;
        box-shadow: var(--m-shadow-sm), var(--m-hi) !important;
        color: var(--m-text) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #priorityFilter .prio-chip:active {
        transform: scale(0.96);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #dashboardNormalContent > .grid > .glass-panel:last-child > div:nth-child(2) > a[href="devoirs.html"] {
        min-height: 40px;
        padding: 0 !important;
        font-family: var(--m-font);
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #compteurDevoirsText {
        display: inline-block;
        min-width: 22px;
        padding: 2px 7px !important;
        border-radius: 999px !important;
        background: var(--m-accent-soft) !important;
        color: var(--m-accent-text) !important;
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 700;
        text-align: center;
        box-shadow: none !important;
    }

    /* Tâches prioritaires : bord fin de la couleur de la matière */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row {
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: 14px !important;
        box-shadow: inset 3px 0 0 var(--subj, var(--m-line-2)) !important;
        padding: 12px 10px 12px 6px !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row > div.absolute:first-child {
        display: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row span.text-\[9px\] {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(.deadline-row, #overdueList > div) h4.truncate {
        font-size: 15px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow-wrap: anywhere;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row button[onclick*="ouvrirModalOuvrirAvec"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row button[onclick*="supprimerTacheManuelle"] {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
    }

    /* Bandeau « En retard » : la seule carte rouge (urgence) */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueBanner {
        background: color-mix(in srgb, var(--m-red) 8%, var(--m-surface)) !important;
        border: 1px solid color-mix(in srgb, var(--m-red) 32%, transparent) !important;
        border-radius: var(--m-r-md) !important;
        box-shadow: none !important;
        padding: 12px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueBanner > div:first-child span {
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: none;
        letter-spacing: 0;
        color: var(--m-red-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueBanner > div:first-child i {
        color: var(--m-red-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList > div {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: inset 3px 0 0 var(--m-red) !important;
        padding: 10px 10px 10px 14px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList > div > div.rounded-full:first-child {
        display: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList h4 {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList span.text-\[9px\] {
        font-size: 13px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList > div > span.text-rose-400 {
        padding: 3px 8px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--m-red) 16%, transparent) !important;
        color: var(--m-red-text) !important;
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 700 !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #overdueList button[onclick*="toggleTaskCompletion"] {
        --subj: var(--m-red);
    }

    /* Cases à cocher : cercle fin de la couleur de la matière (26 px à
       l'œil), dessiné dans un bouton de 40 px (la zone de tap). */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"] {
        position: relative;
        width: 40px !important;
        height: 40px !important;
        margin: -7px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"]::after {
        content: '';
        position: absolute;
        inset: 7px;
        border-radius: 50%;
        border: 2px solid var(--subj, var(--m-text-3));
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"].bg-emerald-500 {
        color: var(--m-ink) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"].bg-emerald-500::after {
        background: var(--m-green);
        border-color: var(--m-green);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"]:active {
        transform: scale(0.88);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="toggleTaskCompletion"] i {
        position: relative;
        z-index: 1;
        font-size: 12px !important;
    }

    /* Boutons d'action des tâches : secondaires, discrets */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="ouvrirModalOuvrirAvec"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="supprimerTacheManuelle"] {
        background: var(--m-surface-3) !important;
        border: 0 !important;
        box-shadow: none !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="ouvrirModalOuvrirAvec"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="ouvrirModalOuvrirAvec"] i {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="supprimerTacheManuelle"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="supprimerTacheManuelle"] i {
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="ouvrirModalOuvrirAvec"]:active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick*="supprimerTacheManuelle"]:active {
        transform: scale(0.92);
    }

    /* Lien « Voir les N autres devoirs » */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #deadlinesList > div:last-child a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        font-family: var(--m-font);
        font-weight: 700 !important;
        font-size: 13px !important;
        letter-spacing: 0;
        text-transform: none;
        color: var(--m-accent-text) !important;
    }
    /* Actions de la ligne empilées : le titre respire */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .deadline-row > div.shrink-0:last-child:has(> button + button) {
        flex-direction: column;
        gap: 8px !important;
    }

    /* ─── Carte « Bien démarrer » ─────────────────────────────────
       Étapes restantes en grand ; étapes faites repliées côte à côte. */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard {
        padding: 18px 16px 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard > button[onclick*="_fermerOnboarding"] {
        top: 12px !important;
        right: 12px !important;
        width: 40px;
        height: 40px;
        border-radius: var(--m-r-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--m-surface-2);
        border: 1px solid var(--m-line-2);
        box-shadow: none;
        color: var(--m-text-2) !important;
        z-index: 20;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard h3 {
        font-size: 18px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard > div > div:first-child {
        padding-right: 44px;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard > div > p {
        font-size: 13px !important;
        margin-bottom: 14px !important;
        padding-right: 30px;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #onboardingCard .grid:has(> [id^="obStep"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row dense;
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"] {
        border-radius: 14px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"]:not(.opacity-60) {
        grid-column: 1 / -1;
        order: -1;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"] .ob-tick {
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0;
        border-radius: 8px !important;
        border: 0 !important;
        background: var(--m-accent-soft) !important;
        color: var(--m-accent-text) !important;
        font-family: var(--m-font);
        font-size: 13px !important;
        font-weight: 800 !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"] .ob-tick + span {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"]:not(.opacity-60) > p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    /* Étape faite : ligne repliée, lisible */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"].opacity-60 {
        opacity: 1 !important;
        min-height: 46px;
        display: flex !important;
        align-items: center;
        padding: 8px 10px !important;
        background: transparent !important;
        border: 1px solid var(--m-line) !important;
        box-shadow: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"].opacity-60 > div {
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"].opacity-60 .ob-tick {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: var(--m-green) !important;
        color: var(--m-ink) !important;
        font-size: 11px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main [id^="obStep"].opacity-60 .ob-tick + span {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--m-text-3) !important;
        text-decoration: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #obProgress {
        background: var(--m-accent-soft) !important;
        color: var(--m-accent-text) !important;
        border: 0 !important;
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 700 !important;
        box-shadow: none;
    }

    /* ═══ SIMULATEUR (simulateur.html) ════════════════════════════ */
    /* Boutons d'en-tête */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button:is([onclick^="ajouterMatiere"], [onclick^="importerDepuisNotes"], #btnCopierResume) {
        min-height: 46px;
        border-radius: var(--m-r-sm) !important;
        border: 0 !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    /* Action principale : pleine, à l'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick^="importerDepuisNotes"] {
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick^="importerDepuisNotes"] :is(i, span) {
        color: var(--m-ink) !important;
    }
    /* Actions secondaires : bordure fine */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button:is([onclick^="ajouterMatiere"], #btnCopierResume) {
        background: var(--m-surface) !important;
        color: var(--m-text) !important;
        box-shadow: inset 0 0 0 1px var(--m-line-2), var(--m-shadow-sm) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button:is([onclick^="ajouterMatiere"], #btnCopierResume) i {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button:is([onclick^="ajouterMatiere"], [onclick^="importerDepuisNotes"], #btnCopierResume):active {
        transform: scale(0.97);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #sectionGraphiqueSimu h3 {
        font-family: var(--m-font) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    /* Systèmes de notation, objectif, résultats, matières */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #grade-system-pills {
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #grade-system-pills > button {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none !important;
        color: var(--m-text-2) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #grade-system-pills > button.bg-\[color\:var\(--color-accent\)\] {
        background: var(--m-accent-soft) !important;
        border-color: var(--m-accent-line) !important;
        color: var(--m-accent-text) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #grade-system-pills > button:active {
        transform: scale(0.96);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel:has(> div > :is(#global-target, #kpi-actuelle, #kpi-visee)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-card,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #required-card {
        padding-top: 18px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #global-target,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-actuelle,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-visee {
        font-family: var(--m-font) !important;
        font-size: 38px !important;
        font-weight: 800 !important;
        letter-spacing: -0.04em !important;
        font-variant-numeric: tabular-nums;
        text-shadow: none;
    }
    /* Simulation finale : le chiffre héros, à l'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-visee {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #global-target {
        width: 2.6em !important;
    }
    @supports (field-sizing: content) {
        body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #global-target {
            field-sizing: content;
            width: auto !important;
            min-width: 1.2em;
        }
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main div.border-b:has(> button[onclick^="reinitialiserSimulateur"]) {
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px 14px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main div.border-b:has(> button[onclick^="reinitialiserSimulateur"]) h3 {
        font-size: 17px !important;
        white-space: nowrap;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick^="reinitialiserSimulateur"] {
        flex-shrink: 0;
        white-space: nowrap;
        text-transform: none !important;
        letter-spacing: 0 !important;
        min-height: 40px;
        padding: 0 12px !important;
        border-radius: var(--m-r-sm) !important;
        background: transparent !important;
        border: 1px solid color-mix(in srgb, var(--m-red) 36%, transparent) !important;
        box-shadow: none;
        color: var(--m-red-text) !important;
        font-family: var(--m-font);
        font-size: 13px !important;
        font-weight: 700 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick^="reinitialiserSimulateur"] i {
        color: var(--m-red-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-title {
        font-family: var(--m-font) !important;
        font-size: 22px !important;
        font-weight: 800 !important;
        letter-spacing: -0.025em !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-card.border-emerald-500\/20 { --st: var(--m-green); --st-text: var(--m-green-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-card.border-rose-500\/20 { --st: var(--m-red); --st-text: var(--m-red-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-card {
        background: linear-gradient(180deg, color-mix(in srgb, var(--st, var(--m-slate)) 9%, var(--m-surface)), var(--m-surface) 70%) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-icon-container {
        width: 56px !important;
        height: 56px !important;
        border-radius: 16px !important;
        border: 0 !important;
        font-size: 24px !important;
        margin-bottom: 12px !important;
        background: color-mix(in srgb, var(--st, var(--m-slate)) 16%, transparent) !important;
        color: var(--st-text, var(--m-text-2)) !important;
        box-shadow: none !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-icon-container i {
        color: var(--st-text, var(--m-text-2)) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-title.text-emerald-400 { color: var(--m-green-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #kpi-status-title.text-rose-400 { color: var(--m-red-text) !important; }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #required-card > div:first-child {
        width: 44px !important;
        height: 44px !important;
        border-radius: var(--m-r-sm) !important;
        border: 0 !important;
        background: var(--m-accent-soft) !important;
        color: var(--m-accent-text) !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #required-card > div:first-child i {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #required-card > div.min-w-0 > span.uppercase {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #required-text {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--m-text) !important;
    }
    /* Petites étiquettes des cartes (MOYENNE ACTUELLE…) : neutres */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel > .flex > span.uppercase:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel > span.uppercase:where(:not(#landingPage *, #sectionConnexion *)),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel .shrink-0 > span.uppercase:where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel span.uppercase > i:where(:not(#landingPage *, #sectionConnexion *)) {
        color: inherit !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container > div {
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-md) !important;
        box-shadow: inset 3px 0 0 var(--mat, var(--m-line-2)) !important;
        margin: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container > div.border-emerald-500 { --mat: var(--m-green); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container > div.border-rose-500 { --mat: var(--m-red); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container > div.border-blue-500 { --mat: var(--m-blue); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-name"] {
        min-height: 40px;
        font-family: var(--m-font);
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.015em;
        padding-left: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container label {
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[type="number"] {
        font-family: var(--m-font);
        font-size: 17px !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums;
        min-height: 44px;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container div.flex:has(> input[id^="subject-coef"]) {
        background: var(--m-well) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-real"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-target"] {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 17px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-real"] + span,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-target"] + span {
        flex: 0 0 auto;
        margin-left: 3px !important;
        font-size: 12px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container input[id^="subject-coef"] {
        padding-left: 2px !important;
        padding-right: 6px !important;
    }
    /* Badges d'état (Validé, Sous l'objectif…) : étiquettes teintées */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span[class*="bg-"] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        padding: 0 11px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--st, var(--m-slate)) 15%, transparent) !important;
        box-shadow: none !important;
        font-family: var(--m-font);
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--st-text, var(--m-text-2)) !important;
        letter-spacing: 0;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span.bg-emerald-500\/10 { --st: var(--m-green); --st-text: var(--m-green-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span.bg-rose-500\/10 { --st: var(--m-red); --st-text: var(--m-red-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span.bg-blue-500\/10 { --st: var(--m-blue); --st-text: var(--m-blue-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span.bg-amber-500\/10 { --st: var(--m-amber); --st-text: var(--m-amber-text); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span.bg-white\/5 { --st: var(--m-slate); --st-text: var(--m-text-2); }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child span[class*="bg-"] i {
        color: inherit !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child > button {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-surface-3) !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--m-text-3) !important;
        opacity: 1 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child > button:active {
        transform: scale(0.92);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #matieres-container .grid > div:last-child {
        border-top: 1px solid var(--m-line) !important;
    }

    /* ═══ AUTRES PAGES : titres ═══════════════════════════════════ */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main h2[data-i18n="ressources_title"] {
        font-family: var(--m-font) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em !important;
    }

    /* ═══ RÉVISE AVEC TON IA (ia.html) ════════════════════════════════ */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl.px-4 {
        padding: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > header {
        margin-bottom: 20px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > header > a[href="index.html"] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        background: var(--m-surface);
        border: 1px solid var(--m-line-2);
        box-shadow: var(--m-shadow-sm);
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > header > h1 {
        margin-top: 16px !important;
        font-family: var(--m-font) !important;
        font-size: 28px !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        letter-spacing: -0.03em !important;
        color: var(--m-text) !important;
        text-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > header > p {
        margin-top: 8px !important;
        font-size: 15px !important;
        font-weight: 500;
        line-height: 1.5;
        color: var(--m-text-3) !important;
    }
    /* Sections : cartes */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > section.rounded-2xl,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > details.rounded-2xl {
        padding: 18px 16px !important;
        margin-bottom: 16px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-lg) !important;
        box-shadow: var(--m-hi), var(--m-shadow) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > section > h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--m-font);
        font-size: 18px !important;
        font-weight: 800 !important;
        text-transform: none !important;
        letter-spacing: -0.02em !important;
        color: var(--m-text) !important;
    }
    /* Numéro d'étape : pastille teintée d'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > section > h2 > span.text-\[\#f27b21\] {
        flex-shrink: 0;
        min-width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--m-accent-soft);
        color: var(--m-accent-text) !important;
        font-size: 13px;
        font-weight: 800;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl label.text-xs,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl label.text-\[11px\] {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl p.text-xs,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl p.text-\[11px\],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl span.text-\[11px\],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl span.text-\[10px\]:not(.uppercase) {
        font-size: 13px !important;
        line-height: 1.45;
    }
    /* Listes et champs */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl :is(select, input[type="text"], input:not([type])).bg-slate-900 {
        min-height: 48px;
        padding-left: 14px !important;
        background-color: var(--m-well) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: none;
        color: var(--m-text) !important;
        font-size: 16px !important;
        font-weight: 500;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl select.bg-slate-900 {
        -webkit-appearance: none;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--m-text-3) 50%), linear-gradient(135deg, var(--m-text-3) 50%, transparent 50%) !important;
        background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 38px !important;
        text-overflow: ellipsis;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl :is(select, input[type="text"], input:not([type])).bg-slate-900:focus {
        border-color: var(--m-accent) !important;
        box-shadow: 0 0 0 3px var(--m-accent-soft);
        outline: none;
    }
    /* Raccourci « Préparer mon prochain examen » : teinté d'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnExamOn {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 10px 14px !important;
        border-radius: var(--m-r-sm);
        background: var(--m-accent-soft);
        border: 1px solid var(--m-accent-line);
        box-shadow: none;
        color: var(--m-accent-text) !important;
        font-size: 14px !important;
        line-height: 1.4;
        text-align: left;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnExamOn span {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnExamOn b {
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnExamOn:active {
        transform: scale(0.98);
    }
    /* L'orange écrit en dur de la page IA (boutons Drive / étape 1,
       icône, liens) suit l'accent choisi, comme le reste de l'app. */
    body[data-page="ia"]:not(#st-m) main button.bg-\[\#f27b21\] {
        min-height: 44px;
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
        font-family: var(--m-font);
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    body[data-page="ia"]:not(#st-m) main button.bg-\[\#f27b21\] :is(i, span) {
        color: var(--m-ink) !important;
    }
    body[data-page="ia"]:not(#st-m) main button.bg-\[\#f27b21\]:active {
        transform: scale(0.97);
    }
    body[data-page="ia"]:not(#st-m) main .text-\[\#f27b21\] {
        color: var(--m-accent-text) !important;
    }
    body[data-page="ia"]:not(#st-m) main div.bg-\[\#f27b21\]\/15 {
        background: var(--m-accent-soft) !important;
        border-color: var(--m-accent-line) !important;
    }
    /* Objectifs : gélules */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #objChips {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #objChips > * + * {
        margin-top: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #objChips > div {
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #objChips > div > span.uppercase {
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .chip {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
        color: var(--m-text-2) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .chip:active {
        transform: scale(0.96);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .chip.chip-sel {
        background: var(--m-accent-soft) !important;
        border-color: var(--m-accent-line) !important;
        color: var(--m-accent-text) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#profilBox > summary {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--m-text-2) !important;
    }
    /* Cartes des IA */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid {
        gap: 10px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card {
        padding: 14px 16px !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-md) !important;
        box-shadow: none !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card.border-emerald-500\/40,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card.border-violet-500\/40,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card.border-sky-500\/40 {
        border-color: var(--m-accent-line) !important;
        background: color-mix(in srgb, var(--m-accent) 5%, var(--m-surface-2)) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card:active {
        transform: scale(0.98);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card > span:first-child > span:first-child {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50% !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card > span:first-child > span:last-child {
        font-family: var(--m-font);
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.015em;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card > span.block {
        margin-top: 6px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card > span.block:nth-child(2) {
        font-weight: 600 !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #providerGrid > .prov-card a {
        color: var(--m-accent-text) !important;
        font-weight: 700;
    }
    /* Actions sous les cartes : petits boutons secondaires (40 px) */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnPreview,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnCopyOnly,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnBilanShow,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnMcpRetry {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 12px !important;
        border-radius: 10px;
        background: var(--m-surface);
        border: 1px solid var(--m-line-2);
        box-shadow: none;
        color: var(--m-text) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnPreview:active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnCopyOnly:active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnBilanShow:active,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnMcpRetry:active {
        transform: scale(0.97);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(#btnPreview, #btnCopyOnly, #btnBilanShow, #btnMcpRetry) i,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(#btnPreview, #btnCopyOnly, #btnBilanShow, #btnMcpRetry) span {
        font-size: 13px !important;
        color: inherit !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #previewFor {
        min-height: 44px;
        margin-left: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #mcpError {
        border: 1px solid color-mix(in srgb, var(--m-amber) 40%, transparent) !important;
        border-radius: var(--m-r-md) !important;
        background: color-mix(in srgb, var(--m-amber) 8%, var(--m-surface)) !important;
        font-size: 13px !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #mcpError > p.font-extrabold {
        font-size: 14px !important;
        color: var(--m-amber-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #mcpError > p:not(.font-extrabold) {
        font-size: 13px !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #btnMcpRetry {
        margin-top: 12px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#moreOptions > summary {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-family: var(--m-font);
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#moreOptions button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 14px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
        color: var(--m-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#moreOptions button:active {
        transform: scale(0.97);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#moreOptions h3 {
        font-family: var(--m-font);
        font-size: 15px !important;
        font-weight: 800 !important;
        text-transform: none !important;
    }

    /* ═══ RÉSEAU (chat.html) ═════════════════════════════════════════ */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer > div > div:first-child {
        flex-wrap: wrap;
        row-gap: 12px;
        align-items: center !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer > div > div:first-child > div:first-child {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer > div > div:first-child > div:last-child {
        gap: 8px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer > div > div:first-child > div:last-child > button:not(.hidden) {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--m-r-sm) !important;
        font-size: 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer > div > div:first-child > div:last-child > button i {
        font-size: 16px !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer h2[data-i18n="chat_title"] {
        font-size: 26px !important;
        line-height: 1.12 !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #searchContactsInput,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer input.bg-black\/40 {
        min-height: 48px;
        background-color: var(--m-well) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: none;
        color: var(--m-text) !important;
        font-size: 16px !important;
        font-weight: 500;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #searchContactsInput::placeholder {
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #friendsList,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #chatWindow {
        background: transparent !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #friendsList > div:first-child {
        border-bottom: 1px solid var(--m-line) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #friendsListContainer > div.text-center {
        margin: 16px 8px !important;
        padding: 32px 16px !important;
        border: 1px dashed var(--m-line-2);
        border-radius: var(--m-r-lg);
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #friendsListContainer > div.text-center span,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) #chatMainContainer #friendsListContainer > div.text-center p {
        font-size: 14px !important;
        font-weight: 600;
        color: var(--m-text-2) !important;
    }

    /* ═══ RESSOURCES (ressources.html) ═══════════════════════════════ */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick="ouvrirModalTutoExtension()"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick="ouvrirModalFichier()"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll a[href="extension.html"] {
        min-height: 48px;
        padding: 8px 14px !important;
        border-radius: var(--m-r-sm) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2;
        transition: var(--m-ease);
    }
    /* Installer l'extension : bouton secondaire */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick="ouvrirModalTutoExtension()"] {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-shadow-sm) !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick="ouvrirModalTutoExtension()"] span {
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main button[onclick="ouvrirModalTutoExtension()"] i {
        color: var(--m-text-2) !important;
    }
    /* Ajouter : action principale, à l'accent */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div > div:first-child button[onclick="ouvrirModalFichier()"],
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll a[href="extension.html"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--m-accent-face) !important;
        border: 0 !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
        color: var(--m-ink) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div > div:first-child button[onclick="ouvrirModalFichier()"] :is(i, span),
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll a[href="extension.html"] :is(i, span) {
        color: var(--m-ink) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll button[onclick="ouvrirModalFichier()"] {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-shadow-sm) !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll button[onclick="ouvrirModalFichier()"] i {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(button[onclick="ouvrirModalTutoExtension()"], button[onclick="ouvrirModalFichier()"], #emptyAll a[href="extension.html"]):active {
        transform: scale(0.97);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main span#matieresTitle,
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main h3:has(> #matieresTitle) {
        font-family: var(--m-font);
        font-size: 19px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    /* État vide : cadre pointillé fin, icône dans une tuile neutre */
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll {
        padding: 28px 16px !important;
        border: 1px dashed var(--m-line-2);
        border-radius: var(--m-r-lg);
        background: color-mix(in srgb, var(--m-surface) 60%, transparent);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll > div.rounded-full:first-child {
        width: 60px !important;
        height: 60px !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: var(--m-accent-soft) !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll > div.rounded-full:first-child i {
        color: var(--m-accent-text) !important;
        opacity: 1 !important;
        font-size: 24px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll h3 {
        font-family: var(--m-font);
        font-size: 19px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #emptyAll p {
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.5;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#sectionPopulaires > summary {
        min-height: 56px;
        padding: 0 16px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#sectionPopulaires > summary h3 {
        font-family: var(--m-font);
        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: -0.015em !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#sectionPopulaires > summary > i:first-child {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--m-surface-3);
        color: var(--m-text-2) !important;
        box-shadow: none;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#sectionPopulaires > summary > i:last-child {
        font-size: 13px !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main details#sectionPopulaires > div {
        border-top: 1px solid var(--m-line) !important;
        padding: 14px 12px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(#popularGrid, #viewMatieres) a.doc-row {
        min-height: 64px;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        transition: var(--m-ease);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main :is(#popularGrid, #viewMatieres) a.doc-row:active {
        transform: scale(0.98);
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #popularGrid a.doc-row > div:first-child {
        border-radius: 10px !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #popularGrid a.doc-row > div.flex-1 > :first-child {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main #popularGrid a.doc-row > div.flex-1 > :last-child {
        font-size: 13px !important;
        color: var(--m-text-3) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       D. ACCUEIL, EN DÉFILANT — CONSOLE
       Héros « Prochain cours » (#focusWidget), « Progression semaine »
       (#widgetProgression) et carte « Prochains cours » (#scheduleList).
       Ces trois cartes prennent les jetons Console (le contenu Pro qui
       les touche encore lit alors les couleurs Console) ; elles gardent
       l'écart (16 px) et le rayon (20 px) des cartes Pro qui les
       entourent, pour que l'accueil reste une seule colonne.
       ═══════════════════════════════════════════════════════════════ */
    body:not(#st-m) main :is(#focusWidget, #widgetProgression, #dashboardNormalContent > .grid > .glass-panel:first-child) {
        --m-text: var(--c-text);
        --m-text-2: var(--c-text-2);
        --m-text-3: var(--c-text-3);
        --m-line: var(--c-line);
        --m-line-2: var(--c-line-2);
        --m-surface-2: var(--c-item);
        --m-surface-3: var(--c-item-2);
        --m-accent-text: var(--c-accent-text);
        --m-green: var(--c-green);
        --m-green-text: var(--c-green-t);
        --m-amber-text: var(--c-amber-t);
        --m-red-text: var(--c-red-t);
        --m-blue-text: var(--c-blue-t);
        --m-violet-text: var(--c-violet-t);
        --m-cyan-text: var(--c-cyan-t);
        /* Fond de tuile : la surface des cartes Pro voisines (la tuile
           Console, translucide, prenait sinon une teinte froide sur le
           fond Pro) ; reflet, liseré et ombre restent ceux de Console. */
        --c-tile: var(--m-surface);
    }

    /* Tuiles : surface Console à peine translucide, liseré fin, grande
       ombre diffuse */
    body:not(#st-m) main :is(#widgetProgression, #dashboardNormalContent > .grid > .glass-panel:first-child) {
        background: linear-gradient(180deg, var(--c-tile-hi), transparent 140px), var(--c-tile) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--m-r-lg) !important;
        box-shadow: var(--c-shadow) !important;
    }
    /* Titres des cartes : Manrope, fins et nets */
    body:not(#st-m) main :is(#focusWidget, #widgetProgression, #dashboardNormalContent > .grid > .glass-panel:first-child) h3 {
        font-family: var(--c-display) !important;
        font-weight: 700 !important;
        letter-spacing: -0.015em !important;
        text-transform: none !important;
    }
    /* Chiffres de Manrope : proportionnels (ses chiffres par défaut sont
       à chasse fixe : « 1 7 » au lieu de « 17 »). */
    body:not(#st-m) main :is(#focusMainText, #focusProgressValue, #progressionPct),
    body:not(#st-m) main #scheduleList .schedule-row > a > div:first-child > span {
        font-variant-numeric: proportional-nums;
    }

    /* ─── Prochain cours : l'élément « sélectionné » de l'accueil ─────
       Liseré fin lumineux + halo, lumière d'accent venue du haut. */
    body:not(#st-m) main #focusWidget {
        padding: 22px 18px 18px !important;
        border-color: transparent !important;
        border-radius: var(--m-r-lg) !important;
        background:
            radial-gradient(130% 80% at 50% -20%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 62%),
            var(--c-tile) !important;
        box-shadow:
            0 0 0 1.5px color-mix(in srgb, var(--c-accent) var(--c-ring-pct), var(--c-ring-mix)),
            0 0 0 5px color-mix(in srgb, var(--c-accent) 10%, transparent),
            0 28px 60px -26px color-mix(in srgb, var(--c-accent) 40%, transparent),
            var(--c-shadow-sm) !important;
    }
    body:not(#st-m) main #focusWidget #focusGlow { display: none !important; }
    /* « Sans effets d'arrière-plan » : ni lumière ni halo, le liseré
       de sélection reste */
    body.st-no-bg:not(#st-m) main #focusWidget {
        background: var(--c-tile) !important;
        box-shadow:
            0 0 0 1.5px color-mix(in srgb, var(--c-accent) var(--c-ring-pct), var(--c-ring-mix)),
            0 0 0 5px color-mix(in srgb, var(--c-accent) 10%, transparent),
            var(--c-shadow-sm) !important;
    }
    body:not(#st-m) main #focusLabel {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        color: var(--c-accent-text) !important;
    }
    body:not(#st-m) main #focusLabel i {
        color: inherit !important;
    }
    /* Grande heure fine */
    body:not(#st-m) main #focusMainText {
        font-family: var(--c-display) !important;
        font-size: 52px !important;
        font-weight: 300 !important;
        letter-spacing: -0.045em !important;
        line-height: 1 !important;
        color: var(--c-text) !important;
        text-shadow: none !important;
        filter: none !important;
    }
    body:not(#st-m) main #focusSubText {
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--c-text) !important;
    }
    body:not(#st-m) main #focusWidget > div:last-child {
        border-top: 1px solid var(--c-line) !important;
        margin-top: 18px !important;
        padding-top: 14px !important;
    }
    body:not(#st-m) main #focusWidget > div:last-child > div:first-child {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        color: var(--c-text-3) !important;
    }
    body:not(#st-m) main #focusProgressValue {
        font-family: var(--c-display);
        font-size: 15px !important;
        font-weight: 700;
        color: var(--c-text) !important;
    }
    /* Barre de progression : fine et lumineuse */
    body:not(#st-m) main #focusWidget > div > div.h-2,
    body:not(#st-m) main #widgetProgression > div.h-2 {
        height: 6px !important;
        border-radius: 99px !important;
        background: var(--c-line) !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    body:not(#st-m) main #focusProgressBar,
    body:not(#st-m) main #progressionBar {
        border-radius: 99px !important;
    }
    body:not(#st-m) main #focusProgressBar {
        background: linear-gradient(90deg, var(--c-accent), var(--c-accent-face)) !important;
        box-shadow: 0 0 14px var(--c-halo) !important;
    }
    body:not(#st-m) main #progressionBar {
        background: linear-gradient(90deg, var(--c-green), color-mix(in srgb, var(--c-green) 70%, #ffffff)) !important;
        box-shadow: 0 0 12px color-mix(in srgb, var(--c-green) 45%, transparent) !important;
    }
    body:not(#st-m) main #progressionBar[style*="width: 0%"],
    body:not(#st-m) main #focusProgressBar[style*="width: 0%"] {
        box-shadow: none !important;
    }

    /* ─── Progression de la semaine ─────────────────────────────── */
    body:not(#st-m) main #widgetProgression {
        padding: 18px 16px 16px !important;
    }
    /* Icône dans un petit carré arrondi, teinté de vert */
    body:not(#st-m) main #widgetProgression > div.flex > div > div.w-8 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        background: color-mix(in srgb, var(--c-green) 16%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--c-green) 30%, transparent) !important;
        box-shadow: none !important;
        color: var(--c-green-t) !important;
    }
    body:not(#st-m) main #widgetProgression > div.flex > div > div.w-8 i {
        color: var(--c-green-t) !important;
        opacity: 1 !important;
    }
    body:not(#st-m) main #widgetProgression > div.flex span.uppercase {
        font-family: var(--c-display);
        font-size: 17px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        text-transform: none !important;
        color: var(--c-text) !important;
    }
    body:not(#st-m) main #progressionPct {
        font-family: var(--c-display);
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--c-green-t) !important;
    }

    /* ─── Prochains cours ──────────────────────────────────────────── */
    /* « Voir » : petite touche neutre (40 px de haut) */
    body:not(#st-m) main #dashboardNormalContent > .grid > .glass-panel:first-child > div.mb-6 > a.glass-item {
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
        transition: var(--c-press);
    }
    /* Lignes de cours : tuiles fines, heure à part, liseré de la couleur
       du cours (couleur posée en ligne) */
    body:not(#st-m) main #scheduleList .schedule-row > a {
        position: relative;
        overflow: hidden;
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-md) !important;
        box-shadow: none !important;
        padding: 12px 12px 12px 14px !important;
        min-height: 62px;
        transition: var(--c-press);
    }
    body:not(#st-m) main #scheduleList .schedule-row > a:active {
        transform: scale(0.98);
    }
    body:not(#st-m) main #scheduleList .schedule-row > a > div.w-0\.5 {
        width: 3px !important;
        height: 36px !important;
        border-radius: 99px !important;
        opacity: 1 !important;
        box-shadow: 0 0 10px -1px currentColor;
    }
    body:not(#st-m) main #scheduleList .schedule-row > a > div:first-child {
        width: 50px !important;
    }
    body:not(#st-m) main #scheduleList .schedule-row > a > div:first-child > span {
        font-family: var(--c-display);
        font-size: 17px !important;
        font-weight: 600 !important;
        letter-spacing: -0.02em;
        color: var(--c-text) !important;
    }
    body:not(#st-m) main #scheduleList .schedule-row > a > div:first-child > div {
        display: none !important;
    }
    body:not(#st-m) main #scheduleList .schedule-row h4 {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--c-text) !important;
    }
    body:not(#st-m) main #scheduleList .schedule-row span.text-\[9px\] {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    body:not(#st-m) main #scheduleList .schedule-row > a > i.fa-chevron-right {
        color: var(--c-text-3) !important;
        font-size: 11px !important;
    }
    /* Pas de cours aujourd'hui : tuile discrète */
    body:not(#st-m) main #scheduleList .empty-state {
        background: var(--c-item);
        border: 1px solid var(--c-line);
        border-radius: var(--c-r-md);
    }

    /* ═══════════════════════════════════════════════════════════════
       E. TÂCHES (devoirs.html) ET AGENDA (cours.html) — CONSOLE
       Préfixe « body:is([data-page="devoirs"], [data-page="cours"]) ».
       Grandes tuiles aux coins généreux, liseré de matière lumineux,
       segments et pastilles « allumés », Manrope pour les titres et
       les chiffres. Le cadre (barre, dock, marges, fenêtres) reste Pro.
       ═══════════════════════════════════════════════════════════════ */

    /* Couleur de texte de base de la page */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m):not([data-st-public]) > main {
        color: var(--c-text-2);
    }

    /* Titres de page : grands, fins, en casse normale */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--c-display) !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
        color: var(--c-text) !important;
        text-transform: none !important;
        text-shadow: none !important;
        filter: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) + p {
        margin-top: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--c-text-3) !important;
    }

    /* Chiffre clé des Tâches (à rendre) : tuile nette en haut à
       droite. Injectée par mobile-enhance.js ; le texte vient de la page. */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host {
        position: relative;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > div:first-child {
        padding-right: 104px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        min-width: 88px;
        max-width: 104px;
        padding: 10px 12px 11px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        border-radius: var(--c-r-md);
        background: linear-gradient(160deg, var(--c-accent-soft), transparent 90%), var(--c-tile);
        border: 1px solid var(--c-accent-line);
        box-shadow: 0 16px 34px -18px var(--c-halo), var(--c-shadow-sm);
        pointer-events: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level[hidden] {
        display: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > .arc-level > span.arc-level-num {
        font-family: var(--c-display);
        font-size: 28px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > .arc-level > span.arc-level-label {
        max-width: 100%;
        color: var(--c-accent-text) !important;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    /* Titres de cartes : fins et nets, casse normale */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(.glass-panel, .glass-card) h3:is(.text-lg, .text-base, .text-sm):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--c-display) !important;
        font-weight: 700 !important;
        letter-spacing: -0.015em !important;
        text-transform: none !important;
        color: var(--c-text) !important;
    }

    /* Textes « blancs » et secondaires : jetons du thème */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(.text-white, :is(h1, h2, h3, h4):not([class*="-400"], [class*="-300"], [class*="accent"])):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-slate-300:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-slate-200:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-gray-300:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--c-text-2) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-slate-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-slate-500:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-slate-600:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-gray-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-gray-500:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--c-text-3) !important;
    }
    /* Texte couleur d'accent : teinte lisible dans les deux modes */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-\[color\:var\(--color-accent\)\]:not([class*="bg-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--c-accent-text) !important;
    }
    body.light-mode:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main p:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)),
    body.light-mode:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main span:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: inherit !important;
    }
    /* Teintes « -400 » (faites pour le fond sombre) : version lisible
       dans les deux modes */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-emerald-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-green-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-green-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-rose-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-red-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-red-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-amber-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-yellow-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-amber-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-blue-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-blue-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-purple-400:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-violet-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-violet-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-cyan-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-cyan-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-indigo-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-indigo-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .text-pink-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--c-pink-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .deadline-soon { color: var(--c-amber-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .deadline-urgent { color: var(--c-red-t) !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .deadline-ok { color: var(--c-green-t) !important; }

    /* ─── Tuiles (cartes) ────────────────────────────────────────────
       Surface sombre à peine translucide (la lumière d'ambiance passe),
       liseré fin, grande ombre diffuse. Bord neutre : la couleur est
       réservée à ce qui a du sens (sélection, matière, urgence). */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        background: linear-gradient(180deg, var(--c-tile-hi), transparent 140px), var(--c-tile) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-xl) !important;
        box-shadow: var(--c-shadow) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-card:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-md) !important;
        box-shadow: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        box-shadow: none !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* Chiffres de Manrope : proportionnels (ses chiffres par défaut sont
       à chasse fixe : « 1 7 » au lieu de « 17 »). */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(.arc-level-num, #calendarGrid span),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.flex-1 > div:first-child {
        font-variant-numeric: proportional-nums;
    }

    /* ─── Icônes dans de petits carrés arrondis (« À rendre »,
       « Terminées ») ──────────────────────────────────────────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child > div.rounded-full {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px !important;
        height: 36px !important;
        border-radius: 11px !important;
        background: color-mix(in srgb, var(--ic, var(--c-accent)) 16%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--ic, var(--c-accent)) 30%, transparent) !important;
        box-shadow: none !important;
        color: var(--ic-t, var(--c-accent-text)) !important;
        transform: none !important;
    }

    /* Boutons d'accent : pleins, texte encre, lumière douce */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) {
        background: linear-gradient(150deg, var(--c-accent-face), var(--c-accent-end)) !important;
        color: var(--c-ink) !important;
        border: 0 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 26px -12px var(--c-halo) !important;
        font-weight: 700 !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) i,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) span {
        color: var(--c-ink) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* ─── Champs ─────────────────────────────────────────────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        background-color: var(--c-well) !important;
        border: 1px solid var(--c-line-2) !important;
        border-radius: var(--c-r-sm) !important;
        box-shadow: none !important;
        color: var(--c-text) !important;
        font-weight: 500 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)):focus {
        border-color: var(--c-accent) !important;
        box-shadow: 0 0 0 4px var(--c-accent-soft) !important;
        outline: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main input.glass-input:where(:not(#landingPage *, #sectionConnexion *)),
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        min-height: 48px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *))::placeholder {
        color: var(--c-text-3) !important;
        opacity: 1;
    }
    /* Listes déroulantes : flèche dessinée — le texte ne passe jamais dessous */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        -webkit-appearance: none;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%), linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%) !important;
        background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 38px !important;
        text-overflow: ellipsis;
    }

    /* ─── Couleur d'une matière (repérage) ───────────────────────────
       Les modèles JS colorent la matière avec les classes Tailwind
       text-X-400 bg-X-500/10 (ou une couleur en ligne) : on relit la
       couleur pour la pastille et le liseré de la carte. */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-blue-500\/10.text-blue-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#60a5fa"] { --subj: var(--c-blue); --subj-t: var(--c-blue-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-emerald-500\/10.text-emerald-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#34d399"] { --subj: var(--c-green); --subj-t: var(--c-green-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-rose-500\/10.text-rose-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#fb7185"] { --subj: var(--c-red); --subj-t: var(--c-red-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-purple-500\/10.text-purple-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#c084fc"] { --subj: var(--c-violet); --subj-t: var(--c-violet-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-amber-500\/10.text-amber-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#fbbf24"] { --subj: var(--c-amber); --subj-t: var(--c-amber-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-cyan-500\/10.text-cyan-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#22d3ee"] { --subj: var(--c-cyan); --subj-t: var(--c-cyan-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-pink-500\/10.text-pink-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#f472b6"] { --subj: var(--c-pink); --subj-t: var(--c-pink-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-indigo-500\/10.text-indigo-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#818cf8"] { --subj: var(--c-indigo); --subj-t: var(--c-indigo-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .bg-slate-500\/10.text-slate-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [style*="#94a3b8"] { --subj: var(--c-slate); --subj-t: var(--c-slate-t); }

    /* Même couleur remontée sur la carte entière (liseré) :
       :has() à chemin d'enfants exact, sur les classes seulement (léger). */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-blue-500\/10) { --subj: var(--c-blue); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-emerald-500\/10) { --subj: var(--c-green); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-rose-500\/10) { --subj: var(--c-red); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-purple-500\/10) { --subj: var(--c-violet); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-amber-500\/10) { --subj: var(--c-amber); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-cyan-500\/10) { --subj: var(--c-cyan); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-pink-500\/10) { --subj: var(--c-pink); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl:has(> div > div > span.bg-indigo-500\/10) { --subj: var(--c-indigo); }

    /* La matière elle-même : pastille de couleur + nom, sans étiquette */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main span[class*="tracking-widest"]:is(.bg-blue-500\/10, .bg-emerald-500\/10, .bg-rose-500\/10, .bg-purple-500\/10, .bg-amber-500\/10, .bg-cyan-500\/10, .bg-pink-500\/10, .bg-indigo-500\/10, .bg-slate-500\/10):where(:not(#landingPage *, #sectionConnexion *)) {
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        background: transparent !important;
        color: var(--subj-t, var(--c-text-2)) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        line-height: 1.3 !important;
        text-transform: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main span[class*="tracking-widest"]:is(.bg-blue-500\/10, .bg-emerald-500\/10, .bg-rose-500\/10, .bg-purple-500\/10, .bg-amber-500\/10, .bg-cyan-500\/10, .bg-pink-500\/10, .bg-indigo-500\/10, .bg-slate-500\/10):where(:not(#landingPage *, #sectionConnexion *))::before {
        content: '';
        flex-shrink: 0;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--subj, currentColor);
        box-shadow: 0 0 8px color-mix(in srgb, var(--subj, currentColor) 60%, transparent);
    }

    /* ─── États vides : discrets ──────────────────────────────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--c-item);
        border: 1px solid var(--c-line);
        border-radius: var(--c-r-md);
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) p {
        font-size: 13px !important;
        color: var(--c-text-3) !important;
    }

    /* Cases à cocher : anneaux fins de la couleur de la matière */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="toggleTaskCompletion"] {
        position: relative;
        width: 32px !important;
        height: 32px !important;
        border-width: 2px !important;
        border-color: var(--subj, var(--c-text-3)) !important;
        background: transparent !important;
        box-shadow: 0 0 10px -2px color-mix(in srgb, var(--subj, transparent) 50%, transparent);
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="toggleTaskCompletion"].bg-emerald-500 {
        background: var(--c-green) !important;
        border-color: var(--c-green) !important;
        color: var(--c-ink) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="toggleTaskCompletion"]:active {
        transform: scale(0.88);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="toggleTaskCompletion"]::before {
        content: '';
        position: absolute;
        inset: -9px;
        border-radius: 50%;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="toggleTaskCompletion"] i {
        font-size: 12px !important;
    }

    /* Boutons d'action des tâches : petites touches neutres */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="ouvrirModalOuvrirAvec"],
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="supprimerTacheManuelle"] {
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="ouvrirModalOuvrirAvec"],
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="ouvrirModalOuvrirAvec"] i {
        color: var(--c-accent-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="supprimerTacheManuelle"],
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="supprimerTacheManuelle"] i {
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="ouvrirModalOuvrirAvec"]:active,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main button[onclick*="supprimerTacheManuelle"]:active {
        transform: scale(0.94);
    }

    /* ═══ TÂCHES (devoirs.html) ═══════════════════════════════════ */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles {
        gap: 8px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles .fa-search {
        left: 16px !important;
        color: var(--c-text-3) !important;
        z-index: 1;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #searchTache {
        padding-left: 44px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles select {
        padding-left: 14px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #compteurResultats > span {
        display: inline-block;
        padding: 0;
        background: none;
        border: 0;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #nbResultats {
        color: var(--c-accent-text) !important;
    }
    /* En-têtes « À rendre » / « Terminées » */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div.mb-10:has(> #listeTachesAFaire) > div:first-child,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:not([class]):has(> #listeTachesTerminees) > div:first-child {
        gap: 12px !important;
        margin-bottom: 14px !important;
        opacity: 1 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:not([class]):has(> #listeTachesTerminees) > div:first-child {
        --ic: var(--c-green);
        --ic-t: var(--c-green-t);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child h3 {
        font-family: var(--c-display) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: -0.015em !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child > div.h-px {
        height: 1px !important;
        background: var(--c-line) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesAFaire,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesTerminees {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > * + * {
        margin-top: 0 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesTerminees {
        opacity: 1 !important;
    }
    /* La carte de tâche : grande tuile, liseré de matière à gauche */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex {
        background: linear-gradient(180deg, var(--c-tile-hi), transparent 90px), var(--c-tile) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-lg) !important;
        box-shadow: var(--c-shadow) !important;
        padding: 12px 6px 12px 4px !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex::before {
        content: '';
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 3px;
        border-radius: 0 99px 99px 0;
        background: var(--subj, var(--c-line-2));
        box-shadow: 0 0 12px color-mix(in srgb, var(--subj, transparent) 60%, transparent);
        pointer-events: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex:active {
        transform: scale(0.985);
    }
    /* Tâche en retard : sélectionnée en rouge (urgence) */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesAFaire > div.rounded-2xl.flex.border-rose-500\/30 {
        border-color: transparent !important;
        background: radial-gradient(130% 90% at 0% 0%, color-mix(in srgb, var(--c-red) 13%, transparent), transparent 60%), var(--c-tile) !important;
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--c-red) 70%, transparent),
            0 0 0 5px color-mix(in srgb, var(--c-red) 10%, transparent),
            0 24px 50px -26px color-mix(in srgb, var(--c-red) 45%, transparent) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin-top: 4px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div > div.flex-1 > div.truncate {
        overflow: visible !important;
    }
    /* Statuts (À rendre / Évaluation / Échéance dépassée) : pastilles
       teintées, casse normale */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span[class*="bg-"][class*="/15"] {
        border: 0 !important;
        border-radius: 99px !important;
        padding: 3px 9px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        background: color-mix(in srgb, var(--st, var(--c-slate)) 16%, transparent) !important;
        color: var(--st-t, var(--c-text-2)) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st, var(--c-slate)) 34%, transparent);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span.bg-blue-500\/15 { --st: var(--c-blue); --st-t: var(--c-blue-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span.bg-amber-500\/15 { --st: var(--c-amber); --st-t: var(--c-amber-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span.bg-rose-500\/15 { --st: var(--c-red); --st-t: var(--c-red-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span.bg-slate-500\/15 { --st: var(--c-slate); --st-t: var(--c-slate-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) span.text-\[10px\] {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div > div:last-child > button,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div > div:last-child > div {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div > div:last-child > div {
        background: var(--c-item) !important;
        border: 1px solid var(--c-line);
    }
    /* Actions empilées : le titre garde toute la largeur */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div:last-child {
        flex-direction: column;
        gap: 8px !important;
        padding-right: 8px !important;
        align-self: center;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesTerminees > div.rounded-2xl.flex {
        filter: none !important;
        opacity: 0.72 !important;
        box-shadow: none !important;
    }
    /* Listes vides */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div:not(.flex) {
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-lg) !important;
        background: var(--c-item) !important;
        color: var(--c-text-3) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* ═══ AGENDA (cours.html) ═════════════════════════════════════ */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main > div > div.justify-between:has(> div > h2[data-i18n="cours_title"]) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarContainer {
        padding: 14px 10px 12px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarContainer > div.absolute { display: none !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarContainer > div.justify-between:has(> #viewToggle) {
        padding-left: 4px !important;
        padding-right: 4px !important;
        row-gap: 12px !important;
    }
    /* Calendrier / Liste : segment */
    /* Calendrier / Liste : segment ; le segment choisi s'allume */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #viewToggle {
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 14px !important;
        background: var(--c-well) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #viewToggle > button.bg-\[color\:var\(--color-accent\)\] {
        background: color-mix(in srgb, var(--c-accent) 20%, transparent) !important;
        color: var(--c-accent-text) !important;
        box-shadow: inset 0 0 0 1px var(--c-accent-line), 0 8px 18px -10px var(--c-halo) !important;
        font-weight: 700 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #viewToggle > button {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 11px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--c-text-3) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #viewToggle > button.bg-\[color\:var\(--color-accent\)\] i,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #viewToggle > button.bg-\[color\:var\(--color-accent\)\] span {
        color: var(--c-accent-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #monthNav {
        gap: 6px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #monthNav > button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #currentMonthText {
        font-family: var(--c-display) !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em;
        text-transform: capitalize;
    }
    /* Filtres par matière : pastilles ; défilement avec fondu à droite */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #filtresMatieres {
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding: 4px 4px 8px !important;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #filtresMatieres > button {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 99px !important;
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
        color: var(--c-text-2) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        transition: var(--c-press);
    }
    /* Pastille choisie : allumée */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #filtresMatieres > button.bg-\[color\:var\(--color-accent\)\] {
        background: color-mix(in srgb, var(--c-accent) 20%, transparent) !important;
        border-color: var(--c-accent-line) !important;
        color: var(--c-accent-text) !important;
        box-shadow: 0 8px 18px -10px var(--c-halo) !important;
        font-weight: 700 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #filtresMatieres > button:active {
        transform: scale(0.95);
    }

    /* ─── Grille du mois ──────────────────────────────────────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid {
        gap: 4px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    /* En-tête L M M J V S D : collé à la grille */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div:nth-child(-n+7) {
        min-height: 0 !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 0 4px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em;
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div[onclick] {
        min-height: 60px !important;
        padding: 4px 4px 5px !important;
        border-radius: 12px !important;
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div[onclick]:active {
        transform: scale(0.95);
    }
    /* Jours passés : case effacée, numéro toujours lisible */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div.st-past-day {
        background: transparent !important;
        border-color: var(--c-line) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div[onclick] > div.justify-end {
        margin-bottom: 5px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div[onclick] > div.justify-end span {
        width: 22px !important;
        height: 22px !important;
        border-radius: 7px !important;
        font-family: var(--c-display);
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div.st-past-day > div.justify-end span {
        color: var(--c-text-3) !important;
    }
    /* Aujourd'hui / jour choisi : sélection console */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div.bg-\[color\:var\(--color-accent-light\)\] {
        background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 70%), var(--c-item) !important;
        border-color: transparent !important;
        box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-accent) var(--c-ring-pct), var(--c-ring-mix)), 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent), 0 10px 22px -8px var(--c-halo) !important;
        position: relative;
        z-index: 1;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div.bg-\[color\:var\(--color-accent-light\)\] > div.absolute { display: none !important; }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div[onclick] > div.justify-end span.bg-\[color\:var\(--color-accent\)\] {
        background: var(--c-accent-face) !important;
        color: var(--c-ink) !important;
        border: 0 !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }
    /* Cases hors du mois : vides */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid > div:not([onclick]):nth-child(n+8) {
        min-height: 60px !important;
        background: transparent !important;
        border: 0 !important;
        opacity: 1 !important;
    }
    /* Événements d'une case : barres de couleur de la matière (le détail
       s'ouvre au tap dans le panneau du jour). Le texte reste pour les
       lecteurs d'écran. */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll {
        overflow: hidden !important;
        padding: 0 1px !important;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div {
        height: 5px;
        min-height: 5px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 99px !important;
        background: var(--subj, var(--c-slate)) !important;
        box-shadow: 0 0 8px -1px color-mix(in srgb, var(--subj, transparent) 70%, transparent) !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        overflow: hidden;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div * {
        display: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-blue-500\/10 { --subj: var(--c-blue); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-emerald-500\/10 { --subj: var(--c-green); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-rose-500\/10 { --subj: var(--c-red); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-purple-500\/10 { --subj: var(--c-violet); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-amber-500\/10 { --subj: var(--c-amber); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-cyan-500\/10 { --subj: var(--c-cyan); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-pink-500\/10 { --subj: var(--c-pink); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.bg-indigo-500\/10 { --subj: var(--c-indigo); }
    /* Tâche / devoir à rendre : barre creuse (≠ cours plein) */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #calendarGrid .day-cell-scroll > div.border-dashed {
        background: transparent !important;
        box-shadow: inset 0 0 0 1.5px var(--c-text-2) !important;
    }

    /* ─── Vue Liste ───────────────────────────────────────────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer {
        gap: 14px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer > .glass-panel > div:first-child {
        padding: 14px 16px 10px !important;
        background: transparent !important;
        border-bottom: 1px solid var(--c-line) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer > .glass-panel > div:first-child span {
        font-family: var(--c-display);
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer > .glass-panel.st-past-list > div:first-child span {
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer > .glass-panel > div:last-child {
        gap: 10px !important;
        padding: 12px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item {
        gap: 12px !important;
        padding: 12px !important;
        border-radius: var(--c-r-md) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.w-1\.5 {
        width: 3px !important;
        align-self: stretch;
        height: auto !important;
        min-height: 40px;
        border: 0 !important;
        border-radius: 99px !important;
        background: var(--subj, var(--c-slate)) !important;
        box-shadow: 0 0 10px -1px color-mix(in srgb, var(--subj, transparent) 65%, transparent);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-blue-500\/30 { --subj: var(--c-blue); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-emerald-500\/30 { --subj: var(--c-green); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-rose-500\/30 { --subj: var(--c-red); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-purple-500\/30 { --subj: var(--c-violet); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-amber-500\/30 { --subj: var(--c-amber); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-cyan-500\/30 { --subj: var(--c-cyan); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-pink-500\/30 { --subj: var(--c-pink); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.bg-indigo-500\/30 { --subj: var(--c-indigo); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.flex-1 > div:first-child {
        font-family: var(--c-display);
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.flex-1 > div:nth-child(2) {
        margin-top: 2px;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item > div.flex-1 > div:nth-child(3) {
        font-size: 12px !important;
        font-weight: 600;
        color: var(--c-text-3) !important;
    }

    /* ─── Panneau du jour (s'ouvre au tap sur une case) ───────────── */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailOverlay {
        background: var(--c-scrim) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailPanel {
        background: var(--c-bg-2) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 0 !important;
        border-left: 1px solid var(--c-line) !important;
        box-shadow: var(--c-shadow-lg) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailPanel > div:first-child {
        padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px !important;
        background:
            radial-gradient(120% 120% at 0% 0%, var(--c-accent-soft), transparent 60%),
            var(--c-bg-2) !important;
        border-bottom: 1px solid var(--c-line) !important;
        box-shadow: none;
        position: relative;
        z-index: 1;
    }
    body.st-no-bg:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailPanel > div:first-child {
        background: var(--c-bg-2) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailTitle {
        font-family: var(--c-display) !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailSubtitle {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--c-accent-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailPanel > div:first-child > button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 13px !important;
        background: var(--c-item) !important;
        border: 1px solid var(--c-line) !important;
        box-shadow: none !important;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent {
        padding: 18px 14px 32px !important;
        background: transparent !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > * + * {
        margin-top: 12px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item {
        padding: 14px 14px 14px 18px !important;
        background: var(--c-tile) !important;
        border: 1px solid var(--c-line) !important;
        border-radius: var(--c-r-lg) !important;
        box-shadow: var(--c-shadow-sm) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item > div.absolute:first-child {
        width: 3px !important;
        top: 16px !important;
        bottom: 16px !important;
        height: auto !important;
        border-radius: 0 99px 99px 0 !important;
        opacity: 1 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.text-\[9px\] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--subj-t, var(--c-text-2)) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        text-transform: none !important;
        box-shadow: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.text-\[9px\]::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--subj, currentColor);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-blue-500\/10 { --subj: var(--c-blue); --subj-t: var(--c-blue-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-emerald-500\/10 { --subj: var(--c-green); --subj-t: var(--c-green-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-rose-500\/10 { --subj: var(--c-red); --subj-t: var(--c-red-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-purple-500\/10 { --subj: var(--c-violet); --subj-t: var(--c-violet-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-amber-500\/10 { --subj: var(--c-amber); --subj-t: var(--c-amber-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-cyan-500\/10 { --subj: var(--c-cyan); --subj-t: var(--c-cyan-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-pink-500\/10 { --subj: var(--c-pink); --subj-t: var(--c-pink-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item span.bg-indigo-500\/10 { --subj: var(--c-indigo); --subj-t: var(--c-indigo-t); }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > .glass-item div.text-\[9px\] {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent :is(.text-white, h3, h4) {
        color: var(--c-text) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent .text-slate-400,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent .text-slate-500 {
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > div:not(.glass-item) {
        border-radius: var(--c-r-lg);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > div.text-center {
        padding: 28px 16px !important;
        background: var(--c-item);
        border: 1px solid var(--c-line);
        border-radius: var(--c-r-lg);
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > div.text-center i {
        color: var(--c-text-3) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > div.text-center p,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) #dayDetailContent > div.text-center span {
        font-size: 14px !important;
        font-weight: 600;
        color: var(--c-text-2) !important;
    }
    /* Jours passés : pas de voile d'opacité (numéros lisibles) */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#calendarGrid > div.st-past-day, #listViewContainer > .glass-panel.st-past-list) {
        opacity: 1 !important;
        filter: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer > .glass-panel.st-past-list .glass-item {
        background: transparent !important;
        box-shadow: none !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       F. NOTES (notes.html) — PERFORMANCE
       Préfixe « body[data-page="notes"] ». Grande tuile « Moyenne »
       pleine largeur, tuiles 2 colonnes, gros chiffres en Barlow Semi
       Condensed ; pas de chiffre clé à droite du titre. Le cadre
       (barre, dock, marges, fenêtres) reste Pro.
       ═══════════════════════════════════════════════════════════════ */

    /* Couleur de texte de base de la page */
    body[data-page="notes"]:not(#st-m):not([data-st-public]) > main {
        color: var(--pf-text-2);
    }

    /* Titres de page : forts, serrés, en casse normale */
    body[data-page="notes"]:not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--pf-font) !important;
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.08 !important;
        letter-spacing: -0.022em !important;
        color: var(--pf-text) !important;
        text-shadow: none !important;
        filter: none !important;
    }
    /* Sous-titre de page */
    body[data-page="notes"]:not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) + p {
        margin-top: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--pf-text-3) !important;
    }

    /* La moyenne passe en tête, en grand : c'est le chiffre de la page
       (le chiffre clé à droite du titre ferait doublon). */
    body[data-page="notes"]:not(#st-m) main .arc-level-host > .arc-level {
        display: none;
    }
    body[data-page="notes"]:not(#st-m) main .arc-level-host > div:first-child {
        padding-right: 0;
    }
    /* Titres de cartes : casse normale, serrés */
    body[data-page="notes"]:not(#st-m) main :is(.glass-panel, .glass-card) h3:is(.text-lg, .text-base, .text-sm):where(:not(#landingPage *, #sectionConnexion *)) {
        font-family: var(--pf-font) !important;
        font-weight: 800 !important;
        letter-spacing: -0.012em !important;
        text-transform: none !important;
        color: var(--pf-text) !important;
    }

    /* Textes « blancs » et secondaires : jetons du thème */
    body[data-page="notes"]:not(#st-m) main :is(.text-white, :is(h1, h2, h3, h4):not([class*="-400"], [class*="-300"], [class*="accent"])):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main .text-slate-300:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-slate-200:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-gray-300:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--pf-text-2) !important;
    }
    body[data-page="notes"]:not(#st-m) main .text-slate-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-slate-500:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-slate-600:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-gray-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-gray-500:where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--pf-text-3) !important;
    }
    /* Texte couleur d'accent sur fond de carte : teinte lisible */
    body[data-page="notes"]:not(#st-m) main .text-\[color\:var\(--color-accent\)\]:not([class*="bg-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: var(--pf-accent-text) !important;
    }
    body.light-mode[data-page="notes"]:not(#st-m) main p:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)),
    body.light-mode[data-page="notes"]:not(#st-m) main span:not([class*="text-"]):where(:not(#landingPage *, #sectionConnexion *)) {
        color: inherit !important;
    }
    /* Teintes « -400 » (faites pour le fond sombre) : version lisible
       dans les deux modes. */
    body[data-page="notes"]:not(#st-m) main .text-emerald-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-green-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-green-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-rose-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-red-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-red-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-amber-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-yellow-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-amber-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-blue-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-blue-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-purple-400:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main .text-violet-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-violet-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-cyan-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-cyan-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-indigo-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-indigo-text) !important; }
    body[data-page="notes"]:not(#st-m) main .text-pink-400:where(:not(#landingPage *, #sectionConnexion *)) { color: var(--pf-pink-text) !important; }
    /* Pourcentages du graphique des moyennes (couleur posée en ligne) */
    body.light-mode[data-page="notes"]:not(#st-m) main #graphiqueContainer span[style*="#10b981"] { color: var(--pf-green-text) !important; }
    body.light-mode[data-page="notes"]:not(#st-m) main #graphiqueContainer span[style*="#f59e0b"] { color: var(--pf-amber-text) !important; }
    body.light-mode[data-page="notes"]:not(#st-m) main #graphiqueContainer span[style*="#f43f5e"] { color: var(--pf-red-text) !important; }

    /* ─── Cartes : surfaces plates, filet d'un pixel ─────────────── */
    body[data-page="notes"]:not(#st-m) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--pf-surface) !important;
        border: 1px solid var(--pf-line) !important;
        border-radius: var(--pf-r-lg) !important;
        box-shadow: var(--pf-shadow) !important;
    }
    body[data-page="notes"]:not(#st-m) main .glass-card:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--pf-surface-2) !important;
        border: 1px solid var(--pf-line) !important;
        border-radius: var(--pf-r-md) !important;
        box-shadow: none !important;
    }
    body[data-page="notes"]:not(#st-m) main .glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--pf-surface-2) !important;
        border: 1px solid var(--pf-line) !important;
        box-shadow: none !important;
    }
    body[data-page="notes"]:not(#st-m) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)) {
        transition: var(--pf-press);
    }
    body[data-page="notes"]:not(#st-m) main button.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active,
    body[data-page="notes"]:not(#st-m) main a.glass-item:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* Boutons d'accent : pleins, nets */
    body[data-page="notes"]:not(#st-m) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) {
        background: var(--pf-accent-face) !important;
        color: var(--pf-on-accent) !important;
        border: 0 !important;
        box-shadow: 0 10px 22px -14px var(--pf-accent-glow) !important;
        font-family: var(--pf-font) !important;
        font-weight: 700 !important;
        transition: var(--pf-press);
    }
    body[data-page="notes"]:not(#st-m) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) i,
    body[data-page="notes"]:not(#st-m) main :is(button, a).bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)) span {
        color: var(--pf-on-accent) !important;
    }
    body[data-page="notes"]:not(#st-m) main button.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active,
    body[data-page="notes"]:not(#st-m) main a.bg-\[color\:var\(--color-accent\)\]:where(:not(#landingPage *, #sectionConnexion *)):active {
        transform: scale(0.97);
    }

    /* ─── Champs ─────────────────────────────────────────────────── */
    body[data-page="notes"]:not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        background-color: var(--pf-well) !important;
        border: 1px solid var(--pf-line-2) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
        color: var(--pf-text) !important;
        font-weight: 600 !important;
    }
    body.light-mode[data-page="notes"]:not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        background-color: #ffffff !important;
    }
    body[data-page="notes"]:not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *)):focus {
        border-color: var(--pf-accent) !important;
        box-shadow: 0 0 0 3px var(--pf-accent-soft) !important;
        outline: none !important;
    }
    body[data-page="notes"]:not(#st-m) main input.glass-input:where(:not(#landingPage *, #sectionConnexion *)),
    body[data-page="notes"]:not(#st-m) main select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        min-height: 48px;
    }
    body[data-page="notes"]:not(#st-m) main .glass-input:where(:not(#landingPage *, #sectionConnexion *))::placeholder {
        color: var(--pf-text-3) !important;
        opacity: 1;
    }
    /* Listes déroulantes : flèche fine dessinée ; le texte ne passe
       jamais dessous */
    body[data-page="notes"]:not(#st-m) main select.glass-input:where(:not(#landingPage *, #sectionConnexion *)) {
        -webkit-appearance: none;
        appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, var(--pf-text-3) 50%), linear-gradient(135deg, var(--pf-text-3) 50%, transparent 50%) !important;
        background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52% !important;
        background-size: 5px 5px, 5px 5px !important;
        background-repeat: no-repeat !important;
        padding-right: 38px !important;
        text-overflow: ellipsis;
    }

    /* ─── États vides : cadre fin, texte lisible ────────────────────── */
    body[data-page="notes"]:not(#st-m) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) {
        border: 1px solid var(--pf-line);
        border-radius: 16px;
        background: color-mix(in srgb, var(--pf-surface-2) 60%, transparent);
        color: var(--pf-text-3) !important;
    }
    body[data-page="notes"]:not(#st-m) main .empty-state:where(:not(#landingPage *, #sectionConnexion *)) p {
        font-size: 13px !important;
        color: var(--pf-text-3) !important;
    }

    body[data-page="notes"]:not(#st-m) main #kpiSection {
        gap: 10px !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection > div {
        padding: 14px 14px 13px !important;
        border-radius: 16px !important;
        container-type: inline-size;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection > div:has(> #kpiMoyenne) {
        order: -1;
        grid-column: 1 / -1 !important;
        padding: 18px 18px 16px !important;
        background:
            radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pf-accent) 20%, transparent) 0%, transparent 62%),
            var(--pf-surface) !important;
        border-color: color-mix(in srgb, var(--pf-accent) 28%, var(--pf-line)) !important;
    }
    body.light-mode[data-page="notes"]:not(#st-m) main #kpiSection > div:has(> #kpiMoyenne) {
        background:
            radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pf-accent) 13%, transparent) 0%, transparent 62%),
            var(--pf-surface) !important;
    }
    body.st-no-bg[data-page="notes"]:not(#st-m) main #kpiSection > div:has(> #kpiMoyenne) {
        background: var(--pf-surface) !important;
    }
    /* « Points faibles » en dernier, sur toute la largeur : la grille
       reste pleine (moyenne / 2 × 2 / points faibles) */
    body[data-page="notes"]:not(#st-m) main #kpiSection > div.col-span-2 {
        grid-column: 1 / -1 !important;
    }
    /* Libellé : petites capitales neutres, l'icône garde la couleur */
    body[data-page="notes"]:not(#st-m) main #kpiSection > div > span:first-of-type {
        margin-bottom: 6px !important;
        font-family: var(--pf-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        -webkit-text-fill-color: var(--pf-text-3);
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection > div > span:first-of-type i {
        -webkit-text-fill-color: currentColor;
        font-size: 11px;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiNbNotes,
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiMeilleure,
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiCredits {
        font-family: var(--pf-num) !important;
        font-size: 34px !important;
        font-size: min(34px, 24cqi) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiMoyenne {
        font-family: var(--pf-num) !important;
        font-size: 64px !important;
        font-weight: 700 !important;
        line-height: 0.95 !important;
        letter-spacing: -0.015em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiMoyenne + p {
        margin-top: 6px !important;
        font-size: 13px !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiMoyennePct {
        font-family: var(--pf-num);
        font-size: 16px;
        font-weight: 700;
        color: var(--pf-accent-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiDernierScan,
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiPointFaible {
        font-family: var(--pf-font) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.015em;
        overflow-wrap: anywhere;
        color: var(--pf-text) !important;
    }
    /* Le nom de la matière est coupé à 18 caractères par la page ; son
       nom complet est dans title : on l'affiche en entier, sur 2 lignes. */
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiPointFaible[title]:not([title=""]) {
        font-size: 0 !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection #kpiPointFaible[title]:not([title=""])::before {
        content: attr(title);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 17px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection > div > p {
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    /* Boutons d'en-tête */
    body[data-page="notes"]:not(#st-m) main button[onclick*="ouvrirModalNote()"],
    body[data-page="notes"]:not(#st-m) main button[onclick*="importFileInput"],
    body[data-page="notes"]:not(#st-m) main #btnEffacerNotes {
        min-height: 46px;
        border-radius: 14px !important;
        border: 0 !important;
        font-family: var(--pf-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        transition: var(--pf-press);
    }
    /* Action principale : accent */
    body[data-page="notes"]:not(#st-m) main button[onclick*="ouvrirModalNote()"] {
        background: var(--pf-accent-face) !important;
        color: var(--pf-on-accent) !important;
        box-shadow: 0 10px 22px -14px var(--pf-accent-glow) !important;
    }
    body[data-page="notes"]:not(#st-m) main button[onclick*="ouvrirModalNote()"] :is(i, span) {
        color: var(--pf-on-accent) !important;
    }
    /* Secondaires : surface + filet */
    body[data-page="notes"]:not(#st-m) main button[onclick*="importFileInput"] {
        background: var(--pf-surface-2) !important;
        color: var(--pf-text) !important;
        box-shadow: inset 0 0 0 1px var(--pf-line-2) !important;
    }
    body[data-page="notes"]:not(#st-m) main button[onclick*="importFileInput"] :is(i, span) {
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #btnEffacerNotes {
        background: transparent !important;
        color: var(--pf-red-text) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-red) 35%, transparent) !important;
    }
    body[data-page="notes"]:not(#st-m) main #btnEffacerNotes :is(i, span) {
        color: var(--pf-red-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main :is(button[onclick*="ouvrirModalNote()"], button[onclick*="importFileInput"], #btnEffacerNotes):active {
        transform: scale(0.97);
    }
    /* Graphique : titres et segment « Par matière / Évolution » */
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > button {
        padding-top: 18px !important;
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique h3,
    body[data-page="notes"]:not(#st-m) main #tableauNotes h3 {
        font-family: var(--pf-font) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.012em !important;
    }
    /* Le HTML de la carte imbrique des <button> : le navigateur en sort
       le sélecteur et le graphique. On les recolle visuellement :
       en-tête (titre + segment) / sélecteur / carte du graphique. */
    body[data-page="notes"]:not(#st-m) main #sectionGraphique {
        padding: 4px 4px 16px !important;
        gap: 4px;
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > button:first-child {
        padding-bottom: 12px !important;
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > button:first-child > div:last-child:empty,
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > button:first-child > div.flex:last-child {
        display: none !important;
    }
    body[data-page="notes"]:not(#st-m) main #btnModeMatiere,
    body[data-page="notes"]:not(#st-m) main #btnModeEvolution {
        min-height: 40px;
        font-family: var(--pf-font);
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeMatiere,
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeEvolution {
        margin-left: 16px;
        margin-right: -8px;
        padding: 0 16px !important;
        background: var(--pf-surface-2) !important;
        border: 1px solid var(--pf-line) !important;
        border-radius: 99px !important;
        color: var(--pf-text-2) !important;
        box-shadow: none !important;
        transition: var(--pf-press);
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeMatiere.bg-emerald-500\/20,
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeEvolution.bg-emerald-500\/20 {
        background: var(--pf-invert) !important;
        border-color: var(--pf-invert) !important;
        color: var(--pf-on-invert) !important;
    }
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeMatiere:active,
    body[data-page="notes"]:not(#st-m) main #sectionGraphique > #btnModeEvolution:active {
        transform: scale(0.96);
    }
    body[data-page="notes"]:not(#st-m) main #selectGraphMatiere {
        display: block;
        width: 100%;
        margin-top: 12px;
        min-height: 48px;
        padding-left: 14px !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueChevron {
        display: none !important;
    }
    body[data-page="notes"]:not(#st-m) main > #graphiqueContent {
        margin: 12px 0 0 !important;
        padding: 16px 16px 12px !important;
        background: var(--pf-surface) !important;
        border: 1px solid var(--pf-line) !important;
        border-radius: var(--pf-r-lg) !important;
        box-shadow: var(--pf-shadow) !important;
    }
    body[data-page="notes"]:not(#st-m) main > #graphiqueContent.hidden {
        display: none !important;
    }
    body[data-page="notes"]:not(#st-m) main > #tableauNotes {
        margin: 20px 0 0 !important;
    }
    /* Barres des moyennes : fines, piste discrète */
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer {
        min-height: 0 !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer .flex-1.rounded-full {
        height: 8px !important;
        background: var(--pf-bar-track) !important;
        border: 0;
        box-shadow: none;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer .flex-1.rounded-full > div {
        box-shadow: none !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer span.text-xs {
        font-size: 13px !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer > div > div.flex:has(> span.truncate.shrink-0) {
        flex-wrap: wrap;
        column-gap: 12px !important;
        row-gap: 6px;
        padding: 7px 0 !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer > div > div.flex > span.truncate.shrink-0 {
        flex: 1 0 100%;
        width: auto !important;
        white-space: normal !important;
        overflow: visible !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.25;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #graphiqueContainer span.font-black {
        font-family: var(--pf-num);
        font-size: 17px !important;
        font-weight: 700 !important;
        font-variant-numeric: tabular-nums;
        width: 46px !important;
    }
    /* Tableau des notes (fiches) */
    body[data-page="notes"]:not(#st-m) main #tableauNotes > div:first-child {
        padding-top: 18px !important;
    }
    body[data-page="notes"]:not(#st-m) main #notesCountBadge {
        background: var(--pf-surface-3) !important;
        color: var(--pf-text-2) !important;
        border: 0 !important;
        font-family: var(--pf-font);
        font-size: 12px !important;
        font-weight: 700 !important;
        box-shadow: none;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes thead { display: none; }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr {
        border-bottom: 1px solid var(--pf-line) !important;
    }
    /* Bandeau de matière : barre fine de la couleur du niveau */
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan]) {
        position: relative;
        background: var(--pf-surface-2) !important;
        padding: 12px 16px !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan])::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--grp, var(--pf-slate));
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan] > div > span.text-emerald-400) { --grp: var(--pf-green); --grp-text: var(--pf-green-text); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan] > div > span.text-amber-400) { --grp: var(--pf-amber); --grp-text: var(--pf-amber-text); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan] > div > span.text-rose-400) { --grp: var(--pf-red); --grp-text: var(--pf-red-text); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td[colspan] i {
        display: none;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td[colspan] span.uppercase {
        min-width: 0;
        font-family: var(--pf-font);
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 0.1em !important;
        line-height: 1.2;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td[colspan] span.normal-case {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 12px !important;
        font-weight: 500 !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td[colspan] span.ml-auto {
        font-family: var(--pf-num);
        font-size: 17px !important;
        font-weight: 700 !important;
        color: var(--grp-text, var(--pf-text-2)) !important;
    }
    /* Note : gros chiffre */
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(2):not([colspan]) {
        font-family: var(--pf-num);
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(3) {
        font-family: var(--pf-num);
        font-size: 16px !important;
        font-weight: 600;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(4):is(.text-emerald-400, .text-amber-400, .text-rose-400) {
        justify-self: start;
        padding: 2px 8px !important;
        border-radius: 99px;
        font-family: var(--pf-num);
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(4).text-emerald-400 { background: color-mix(in srgb, var(--pf-green) 15%, transparent); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(4).text-amber-400 { background: color-mix(in srgb, var(--pf-amber) 15%, transparent); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(4).text-rose-400 { background: color-mix(in srgb, var(--pf-red) 15%, transparent); }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(5) {
        white-space: nowrap;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(1):not([colspan]) {
        font-weight: 600 !important;
        color: var(--pf-text-2) !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(7) > button {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        background: transparent !important;
        border: 1px solid var(--pf-line) !important;
        color: var(--pf-text-3) !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes > a[href="simulateur.html"] {
        min-height: 54px;
        background: var(--pf-surface-2) !important;
        border-top: 1px solid var(--pf-line) !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes > a[href="simulateur.html"] span {
        font-family: var(--pf-font);
        font-size: 14px !important;
        font-weight: 700 !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes > a[href="simulateur.html"] :is(span, i) {
        color: var(--pf-accent-text) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       G. CADRE COMMUN (suite, Pro ludique) — menu, notification,
       fenêtres, Paramètres : identiques sur toutes les pages.
       ═══════════════════════════════════════════════════════════════ */

    /* ═══ MENU LATÉRAL (drawer) ═══════════════════════════════════ */
    body:not(#st-m) #mobileMenuSheet .sheet-panel {
        background: var(--m-surface) !important;
        border-left: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-shadow-lg) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-header {
        border-bottom: 1px solid var(--m-line) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-avatar {
        border-radius: 14px !important;
        border: 2px solid var(--m-accent-face) !important;
        box-shadow: none;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-name .n-primary {
        font-family: var(--m-font);
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        color: var(--m-text) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-name .n-secondary {
        font-size: 13px !important;
        color: var(--m-text-3) !important;
        font-weight: 500 !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-close {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-section {
        padding-top: 14px !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-section-title {
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--m-text-3) !important;
        letter-spacing: 0.08em !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item {
        min-height: 48px;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--m-text) !important;
        border-radius: var(--m-r-sm) !important;
        transition: var(--m-ease);
    }
    /* Icônes neutres (plus d'arc-en-ciel) dans une petite tuile */
    body:not(#st-m) #mobileMenuSheet .sheet-item > i:first-child {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        background: var(--m-surface-2);
        border: 1px solid var(--m-line);
        color: var(--m-text-2) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item:active {
        transform: scale(0.98);
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item[data-page][style*="background"] {
        background: var(--m-accent-soft) !important;
        box-shadow: none;
        color: var(--m-text) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item[data-page][style*="background"] > i:first-child {
        background: var(--m-accent-face);
        border-color: transparent;
        color: var(--m-ink) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item-meta {
        font-weight: 700 !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-divider {
        height: 1px !important;
        background: var(--m-line) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-footer {
        border-top: 1px solid var(--m-line) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-footer .sheet-item {
        background: transparent !important;
        border: 1px solid color-mix(in srgb, var(--m-red) 34%, transparent) !important;
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-footer .sheet-item > i:first-child {
        width: auto !important;
        height: auto !important;
        background: transparent;
        border: 0;
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) #mobileMenuSheet .sheet-item-badge {
        background: var(--m-red-strong) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        box-shadow: none;
    }

    /* ═══ NOTIFICATION (toast) ════════════════════════════════════
       Bulle compacte juste au-dessus du dock. */
    body:not(#st-m):not([data-st-public]) #toastGlobal {
        top: auto !important;
        bottom: calc(var(--m-dock-h) + var(--m-dock-gap) + 22px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px !important;
        padding: 10px 14px 10px 10px !important;
        max-width: calc(100vw - 32px);
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: var(--m-r-md) !important;
        box-shadow: var(--m-shadow-lg) !important;
    }
    body:not(#st-m):not([data-st-public]) #toastGlobal > div:first-child {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: var(--m-accent-soft) !important;
        color: var(--m-accent-text) !important;
        box-shadow: none !important;
        font-size: 14px;
    }
    body:not(#st-m):not([data-st-public]) #toastGlobal > div:first-child i {
        color: var(--m-accent-text) !important;
    }
    body:not(#st-m):not([data-st-public]) #toastGlobal > div:last-child {
        min-width: 0;
    }
    body:not(#st-m):not([data-st-public]) #toastGlobal h4 {
        font-family: var(--m-font) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m):not([data-st-public]) #toastGlobal p {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        color: var(--m-text-2) !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /* ═══ FENÊTRES MODALES ════════════════════════════════════════ */
    body:not(#st-m) [id^="modal"].fixed.inset-0 > div:first-child:is(.glass-dark, .glass-panel) {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: 22px !important;
        box-shadow: var(--m-shadow-lg) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 > div:first-child h3 {
        font-family: var(--m-font) !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button[type="submit"] {
        min-height: 50px;
        border-radius: 14px !important;
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
        font-family: var(--m-font);
        font-size: 16px !important;
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button[type="submit"] :is(i, span) {
        color: var(--m-ink) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button[type="submit"]:active {
        transform: scale(0.98);
    }
    /* Bouton de fermeture des fenêtres : vraie cible (40 px) */
    body:not(#st-m) [id^="modal"].fixed.inset-0 button[onclick*="fermer"].rounded-full {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none !important;
        color: var(--m-text-2) !important;
        flex-shrink: 0;
    }
    /* Choix Devoir / Examen : l'option choisie se teinte */
    body:not(#st-m) [id^="modal"] input.peer[type="radio"] + div.glass-input {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--m-text-2) !important;
        box-shadow: none !important;
        background-color: var(--m-surface-2) !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) [id^="modal"] input.peer[type="radio"]:checked + div.glass-input {
        background-color: var(--m-accent-soft) !important;
        border-color: var(--m-accent) !important;
        color: var(--m-accent-text) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m) [id^="modal"] input.peer[type="radio"][value="examen"]:checked + div.glass-input {
        background-color: color-mix(in srgb, var(--m-amber) 15%, transparent) !important;
        border-color: var(--m-amber) !important;
        color: var(--m-amber-text) !important;
    }
    body:not(#st-m) [id^="modal"] input.peer[type="radio"]:checked + div.glass-input i {
        color: inherit !important;
    }
    body:not(#st-m) [id^="modal"] input.peer[type="radio"]:focus-visible + div.glass-input {
        outline: 2px solid var(--m-accent-text);
        outline-offset: 2px;
    }
    body:not(#st-m) [id^="modal"] select.glass-input {
        min-height: 46px;
        font-weight: 500 !important;
    }
    /* Fenêtres : au-dessus des barres (certaines, en z-50, passaient
       sous la barre du haut et le dock). */
    body:not(#st-m) [id^="modal"].fixed.inset-0.z-50 {
        z-index: 75 !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 {
        background-color: var(--m-overlay) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 > div:first-child > div.border-b:first-child:has(> h3) {
        border-bottom: 1px solid var(--m-line) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 > div:first-child > div.border-t {
        border-top: 1px solid var(--m-line) !important;
        background: var(--m-surface-2) !important;
    }
    /* Textes des fenêtres (hors de <main>) : mêmes jetons lisibles */
    body:not(#st-m) [id^="modal"].fixed.inset-0 :is(.text-white, h3, h4:not(.uppercase)) {
        color: var(--m-text) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-slate-400,
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-slate-500,
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-slate-600 {
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-slate-300 {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-amber-400 { color: var(--m-amber-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-emerald-400 { color: var(--m-green-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-rose-400 { color: var(--m-red-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-blue-400 { color: var(--m-blue-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-violet-400 { color: var(--m-violet-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-cyan-400 { color: var(--m-cyan-text) !important; }
    body:not(#st-m) [id^="modal"].fixed.inset-0 .text-\[color\:var\(--color-accent\)\]:not([class*="bg-"]) { color: var(--m-accent-text) !important; }
    /* Boutons pleins des fenêtres : « valider » et « effacer » */
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-emerald-500,
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-red-500\/20 {
        min-height: 48px;
        border: 0 !important;
        border-radius: 14px !important;
        font-family: var(--m-font);
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    /* « Valider » : l'action principale, à l'accent comme partout */
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-emerald-500 {
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-emerald-500 :is(i, span) {
        color: var(--m-ink) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-red-500\/20 {
        background: color-mix(in srgb, var(--m-red) 14%, transparent) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-red) 40%, transparent) !important;
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 button.bg-red-500\/20 :is(i, span) {
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 :is(button.bg-emerald-500, button.bg-red-500\/20):active {
        transform: scale(0.98);
    }
    /* Boutons d'accent des fenêtres : pleins, texte encre */
    body:not(#st-m) [id^="modal"].fixed.inset-0 :is(button, a).bg-\[color\:var\(--color-accent\)\] {
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: var(--m-relief) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 :is(button, a).bg-\[color\:var\(--color-accent\)\] :is(i, span) {
        color: var(--m-ink) !important;
    }
    /* Petites étiquettes de section des fenêtres */
    body:not(#st-m) [id^="modal"].fixed.inset-0 h4.uppercase {
        font-family: var(--m-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 > div:first-child .border-t.border-white\/5 {
        border-top: 1px solid var(--m-line) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 ol.text-\[10\.5px\],
    body:not(#st-m) [id^="modal"].fixed.inset-0 p.text-\[10\.5px\],
    body:not(#st-m) [id^="modal"].fixed.inset-0 li.text-\[10\.5px\] {
        font-size: 12px !important;
    }
    /* Lignes de liste des fenêtres (règles, notifications) */
    body:not(#st-m) [id^="modal"].fixed.inset-0 div.flex.justify-between.items-center.bg-white\/5 {
        min-height: 48px;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-sm) !important;
        font-weight: 600;
        color: var(--m-text) !important;
    }
    body:not(#st-m) [id^="modal"].fixed.inset-0 div.flex.justify-between.items-center.bg-white\/5 > span:last-child {
        font-family: var(--m-font);
        font-weight: 700 !important;
    }
    body:not(#st-m) #listeNotifications > div.glass-item {
        border-radius: 14px !important;
        box-shadow: none !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #listeNotifications > div.glass-item:active {
        transform: scale(0.98);
    }
    body:not(#st-m) #listeNotifications > div.glass-item h4 {
        font-family: var(--m-font);
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    body:not(#st-m) #listeNotifications > div.glass-item p {
        font-size: 13px !important;
    }
    body:not(#st-m) #listeNotifications > div.glass-item > div:first-child {
        border: 0 !important;
        border-radius: 10px !important;
        background: color-mix(in srgb, var(--m-blue) 15%, transparent) !important;
        color: var(--m-blue-text) !important;
        box-shadow: none;
    }

    /* ─── Profil ─────────────────────────────────────────────────── */
    body:not(#st-m) #modalProfil button[onclick*="sauvegarderChangementsProfil"] {
        min-height: 50px;
        border-radius: 14px !important;
        background: var(--m-accent-face) !important;
        color: var(--m-ink) !important;
        border: 0 !important;
        box-shadow: var(--m-relief), var(--m-accent-glow) !important;
        font-family: var(--m-font);
        font-size: 16px !important;
        font-weight: 700 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #modalProfil button[onclick*="sauvegarderChangementsProfil"] :is(i, span) {
        color: var(--m-ink) !important;
    }
    body:not(#st-m) #modalProfil button[onclick*="deconnecter"],
    body:not(#st-m) #modalProfil button.glass-input.text-amber-400 {
        min-height: 48px;
        border-radius: 14px !important;
        background: var(--m-surface) !important;
        font-family: var(--m-font);
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #modalProfil button[onclick*="deconnecter"] {
        color: var(--m-red-text) !important;
        border: 1px solid color-mix(in srgb, var(--m-red) 38%, transparent) !important;
    }
    body:not(#st-m) #modalProfil button[onclick*="deconnecter"] i,
    body:not(#st-m) #modalProfil button[onclick*="deconnecter"] span {
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) #modalProfil button.glass-input.text-amber-400 {
        color: var(--m-amber-text) !important;
        border: 1px solid color-mix(in srgb, var(--m-amber) 38%, transparent) !important;
    }
    body:not(#st-m) #modalProfil :is(button[onclick*="sauvegarderChangementsProfil"], button[onclick*="deconnecter"], button.glass-input.text-amber-400):active {
        transform: scale(0.98);
    }
    body:not(#st-m) #modalProfil button.text-\[11px\] {
        min-height: 40px;
        font-size: 13px !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) #modalProfil button[onclick*="changerTheme"] {
        width: 40px !important;
        height: 40px !important;
        border: 3px solid var(--m-surface) !important;
        box-shadow: 0 0 0 1px var(--m-line-2) !important;
    }
    body:not(#st-m) #modalProfil #btnLangFr,
    body:not(#st-m) #modalProfil #btnLangEn,
    body:not(#st-m) #modalProfil #btnLangEs {
        min-height: 44px;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        background-color: var(--m-surface-2) !important;
        box-shadow: none !important;
    }
    body:not(#st-m) #modalProfil div.grid-cols-2:has(> #editUniversite) {
        grid-template-columns: minmax(0, 1fr) 112px !important;
    }
    body:not(#st-m) #modalProfil details > summary {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        font-size: 13px !important;
    }
    body:not(#st-m) #modalProfil .profile-upload {
        border-radius: 18px !important;
    }
    body:not(#st-m) #modalProfil .profile-upload img {
        border-radius: 18px !important;
        border: 2px solid var(--m-accent-face) !important;
    }

    /* ─── Nouvelle tâche : la date tient sur deux lignes ────────────
       jour + année / mois en entier (plus de « Septem… »). */
    body:not(#st-m) [id^="modal"] div.grid-cols-3:has(> #taskMonth) {
        grid-template-columns: 1fr 1fr !important;
    }
    body:not(#st-m) [id^="modal"] div.grid-cols-3:has(> #taskMonth) > #taskMonth {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* ─── « Ouvrir avec… » ────────────────────────────────────────── */
    body:not(#st-m) #modalOuvrirAvec {
        background: var(--m-overlay) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding: 0 12px calc(var(--m-dock-h) + var(--m-dock-gap) + 18px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:not(#st-m) #modalOuvrirAvec .panel {
        padding: 16px 12px 12px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: 22px !important;
        box-shadow: var(--m-shadow-lg) !important;
    }
    body:not(#st-m) #modalOuvrirAvec .panel .title {
        font-family: var(--m-font);
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) #modalOuvrirAvec .panel a {
        min-height: 48px;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--m-text) !important;
        border-radius: var(--m-r-sm) !important;
    }
    body:not(#st-m) #modalOuvrirAvec .panel a:active {
        background: var(--m-surface-2) !important;
    }
    body:not(#st-m) #modalOuvrirAvec .panel .cancel {
        min-height: 48px;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: 14px !important;
        box-shadow: none;
        color: var(--m-text) !important;
        font-family: var(--m-font);
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* ═══ PANNEAU PARAMÈTRES (settings.js) ═══════════════════════════ */
    body:not(#st-m) #stSettings .st-backdrop {
        background: var(--m-overlay) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    body:not(#st-m) #stSettings .st-drawer {
        background: var(--m-surface) !important;
        border-left: 1px solid var(--m-line-2) !important;
        box-shadow: var(--m-shadow-lg) !important;
        color: var(--m-text) !important;
    }
    body:not(#st-m) #stSettings .st-head {
        padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px !important;
        border-bottom: 1px solid var(--m-line) !important;
        align-items: center !important;
    }
    body:not(#st-m) #stSettings .st-head h2 {
        font-family: var(--m-font);
        font-size: 22px !important;
        font-weight: 800 !important;
        letter-spacing: -0.025em !important;
        color: var(--m-text);
    }
    body:not(#st-m) #stSettings .st-head h2 i {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--m-accent-soft);
        color: var(--m-accent-text) !important;
        font-size: 14px;
        box-shadow: none;
    }
    body:not(#st-m) #stSettings .st-head p {
        font-size: 13px !important;
        font-weight: 500;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) #stSettings .st-close {
        width: 40px !important;
        height: 40px !important;
        border-radius: var(--m-r-sm) !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
        color: var(--m-text-2) !important;
        font-size: 14px !important;
    }
    /* Onglets : gélules ; la rangée défile avec un fondu à droite */
    body:not(#st-m) #stSettings .st-tabs {
        gap: 6px !important;
        padding: 12px 16px 12px !important;
        border-bottom: 1px solid var(--m-line) !important;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    }
    body:not(#st-m) #stSettings .st-tab {
        min-height: 40px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        box-shadow: none;
        color: var(--m-text-3) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    body:not(#st-m) #stSettings .st-tab:last-child {
        margin-right: 30px;
    }
    body:not(#st-m) #stSettings .st-tab[aria-selected="true"] {
        background: var(--m-surface-3) !important;
        border-color: var(--m-line-2) !important;
        color: var(--m-text) !important;
        font-weight: 700 !important;
    }
    body:not(#st-m) #stSettings .st-body {
        padding: 4px 16px 32px !important;
    }
    body:not(#st-m) #stSettings .st-row {
        padding: 16px 0 !important;
        border-bottom: 1px solid var(--m-line) !important;
    }
    body:not(#st-m) #stSettings .st-row:last-child {
        border-bottom: 0 !important;
    }
    /* Réglage à segments : texte au-dessus, segment en pleine largeur */
    body:not(#st-m) #stSettings .st-row:has(> .st-seg) {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    body:not(#st-m) #stSettings .st-label {
        font-family: var(--m-font);
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em;
        color: var(--m-text);
    }
    body:not(#st-m) #stSettings .st-desc {
        font-size: 13px !important;
        color: var(--m-text-3) !important;
    }
    body:not(#st-m) #stSettings .st-seg {
        display: flex !important;
        gap: 2px !important;
        padding: 3px !important;
        border-radius: 13px !important;
        background: var(--m-surface-3) !important;
        border: 0 !important;
        box-shadow: none;
    }
    body:not(#st-m) #stSettings .st-seg button {
        flex: 1 1 0;
        min-height: 40px;
        padding: 0 6px !important;
        border-radius: 10px !important;
        color: var(--m-text-3) !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    body:not(#st-m) #stSettings .st-seg button[aria-pressed="true"] {
        background: var(--m-thumb) !important;
        color: var(--m-text) !important;
        font-weight: 700 !important;
        box-shadow: var(--m-shadow-sm), var(--m-hi);
    }
    /* Interrupteur : zone de tap de 44 px autour */
    body:not(#st-m) #stSettings .st-switch {
        width: 52px !important;
        height: 32px !important;
        margin-top: 2px;
        background: var(--m-surface-3) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
    }
    body:not(#st-m) #stSettings .st-switch::before {
        content: '';
        position: absolute;
        inset: -8px -6px;
    }
    body:not(#st-m) #stSettings .st-switch::after {
        top: 2px !important;
        left: 2px !important;
        width: 26px !important;
        height: 26px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    body:not(#st-m) #stSettings .st-switch[aria-pressed="true"] {
        background: var(--m-accent-face) !important;
        border-color: transparent !important;
    }
    body:not(#st-m) #stSettings .st-switch[aria-pressed="true"]::after {
        transform: translateX(20px) !important;
    }
    body:not(#st-m) #stSettings .st-swatches {
        gap: 10px !important;
    }
    body:not(#st-m) #stSettings .st-swatch {
        width: 40px !important;
        height: 40px !important;
        border: 3px solid var(--m-surface) !important;
        box-shadow: 0 0 0 1px var(--m-line-2) !important;
    }
    body:not(#st-m) #stSettings .st-swatch[aria-pressed="true"] {
        box-shadow: 0 0 0 2px var(--m-text) !important;
    }
    body:not(#st-m) #stSettings .st-custom {
        min-height: 40px;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--m-text-2) !important;
    }
    body:not(#st-m) #stSettings .st-custom input {
        width: 40px !important;
        height: 40px !important;
        border: 1px solid var(--m-line-2) !important;
        border-radius: 10px !important;
    }
    body:not(#st-m) #stSettings :is(.st-btn, .st-lang button) {
        min-height: 50px;
        border-radius: 14px !important;
        background: var(--m-surface-2) !important;
        border: 1px solid var(--m-line-2) !important;
        box-shadow: none;
        color: var(--m-text) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        transition: var(--m-ease);
    }
    body:not(#st-m) #stSettings :is(.st-btn, .st-lang button):active {
        transform: scale(0.98);
    }
    body:not(#st-m) #stSettings .st-btn i {
        color: var(--m-text-2) !important;
    }
    body:not(#st-m) #stSettings .st-btn.st-danger {
        color: var(--m-red-text) !important;
        border-color: color-mix(in srgb, var(--m-red) 38%, transparent) !important;
    }
    body:not(#st-m) #stSettings .st-btn.st-danger i {
        color: var(--m-red-text) !important;
    }
    body:not(#st-m) #stSettings .st-lang button[aria-pressed="true"] {
        background: var(--m-accent-soft) !important;
        border-color: var(--m-accent) !important;
        color: var(--m-accent-text) !important;
        font-family: var(--m-font);
        font-weight: 700 !important;
    }
    body:not(#st-m) #stSettings .st-note,
    body:not(#st-m) #stSettings .st-kbd {
        font-size: 12px !important;
        color: var(--m-text-3) !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       H. DENSITÉ COMPACTE (Paramètres › Densité)
       Mêmes cartes, marges resserrées ; chaque partie garde les siennes.
       ═══════════════════════════════════════════════════════════════ */
    /* Pro : accueil, simulateur, IA… */
    body.st-density-compact:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body.st-density-compact:not(#st-m) #dashboardNormalContent,
    body.st-density-compact:not(#st-m) #dashboardNormalContent > .flex.flex-col.lg\:flex-row,
    body.st-density-compact:not(#st-m) #dashboardNormalContent > .grid {
        gap: 10px !important;
    }
    body.st-density-compact:not(#st-m) main #focusWidget,
    body.st-density-compact:not(#st-m) main #widgetProgression,
    body.st-density-compact:not(#st-m) main #onboardingCard,
    body.st-density-compact:not(#st-m) main #examsSection,
    body.st-density-compact:not(#st-m) main #dashboardNormalContent > .grid > .glass-panel {
        padding-top: 14px !important;
        padding-bottom: 12px !important;
    }
    body.st-density-compact:not(#st-m) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child {
        padding-top: 14px !important;
        padding-bottom: 12px !important;
    }
    body.st-density-compact:not(#st-m) main .exam-row > a {
        min-height: 52px;
        padding: 8px 10px 8px 14px !important;
    }
    body.st-density-compact:not(#st-m) main .deadline-row {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    body.st-density-compact:not(#st-m) main #matieres-container {
        gap: 8px;
        padding: 10px;
    }
    body.st-density-compact:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > section.rounded-2xl,
    body.st-density-compact:not(#st-m, [data-page="devoirs"], [data-page="cours"], [data-page="notes"]) main > div.max-w-3xl > details.rounded-2xl {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        margin-bottom: 12px !important;
    }
    /* Console : suite de l'accueil */
    body.st-density-compact:not(#st-m) main #scheduleList .schedule-row > a {
        min-height: 52px;
        padding: 8px 10px !important;
    }
    /* Console : Tâches, Agenda */
    body.st-density-compact:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body.st-density-compact:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesAFaire,
    body.st-density-compact:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesTerminees {
        gap: 10px;
    }
    body.st-density-compact:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    body.st-density-compact:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listViewContainer .glass-item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    /* Performance : Notes */
    body.st-density-compact[data-page="notes"]:not(#st-m) main .glass-panel:where(:not(#landingPage *, #sectionConnexion *)) {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body.st-density-compact[data-page="notes"]:not(#st-m) main #kpiSection {
        gap: 8px !important;
    }
    body.st-density-compact[data-page="notes"]:not(#st-m) main #kpiSection > div {
        padding: 12px 12px 10px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       I. MOINS DE DÉFILEMENT — « l'essentiel sur le premier écran, le
       reste à un tap »
       - onglets internes (un seul composant, .st-tabs) : Accueil, Notes,
         Simulateur, IA ; collés sous la barre du haut quand on défile ;
       - en-têtes compacts : titres de page plus petits, sous-titre sur
         une ligne, « Bien démarrer » en barre fine, bienvenue en une
         ligne + pastilles, résumé du Simulateur ;
       - listes denses : tâches sur deux lignes (titre, puis échéance ·
         matière), « Filtres » et « Terminées » repliés.
       Les éléments ajoutés par mobile-enhance.js portent .st-m-only ; les
       attributs d'accroche (data-st-*) ne sont posés que sur téléphone et
       retirés au passage en version PC. Aucun texte ici : les libellés
       viennent de i18n.js.
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Panneaux d'onglet inactifs, cartes repliées ───────────────── */
    /* Poids de trois identifiants (#st-off, qui n'existe pas, dans :is()) :
       passe devant tout « display: … !important » posé sur ces cartes. */
    body:not(#st-m) main :is([data-st-off], [data-st-folded], #st-off#st-off#st-off) {
        display: none !important;
    }
    /* Panneau qui apparaît au changement d'onglet : fondu court */
    body:not(#st-m) main [data-st-in] {
        animation: st-pane-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    @keyframes st-pane-in {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }
    body.st-reduce-motion:not(#st-m) main [data-st-in] {
        animation: none;
    }

    /* ─── Onglets internes : contrôle segmenté collé sous la barre ───── */
    body:not(#st-m) main .st-tabs-sentinel {
        height: 0;
    }
    /* Collée juste sous la barre du haut (60 px). Le décalage se compte
       depuis le bord du contenu de <main> (padding-top 74 px, § B). */
    body:not(#st-m) main .st-tabs {
        position: sticky;
        top: calc(60px - 74px);
        z-index: 25;
        margin: 0 -16px;
        padding: 4px 16px 5px;
        background: var(--m-bg);
    }
    body:not(#st-m) main .st-tabs[hidden] {
        display: none;
    }
    /* Collée : un filet la sépare du contenu qui passe dessous */
    body:not(#st-m) main .st-tabs.is-stuck {
        box-shadow: 0 1px 0 var(--m-line), 0 12px 18px -16px rgba(0, 0, 0, 0.55);
    }
    body.light-mode:not(#st-m) main .st-tabs.is-stuck {
        box-shadow: 0 1px 0 var(--m-line), 0 12px 18px -16px rgba(40, 32, 18, 0.28);
    }
    /* Barre du haut cachée en descendant (shared.js) : la barre d'onglets
       collée prend sa place */
    body:not(#st-m) main .st-tabs {
        transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    body:not(#st-m) main .st-tabs.is-stuck[data-nav-hidden] {
        transform: translateY(-60px);
    }
    body.st-reduce-motion:not(#st-m) main .st-tabs {
        transition: none;
    }
    body:not(#st-m) main .st-tabs-list {
        position: relative;
        display: flex;
        gap: 2px;
        padding: 3px;
        border-radius: 14px;
        background: var(--m-surface-3);
        box-shadow: inset 0 0 0 1px var(--m-line);
    }
    /* Largeur selon le libellé (« Évaluations » plus long que « Cours »),
       la place restante partagée */
    body:not(#st-m) main .st-tab {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: var(--m-text-3);
        font-family: var(--m-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
        transition: var(--m-ease);
    }
    body:not(#st-m) main .st-tab[hidden] {
        display: none;
    }
    body:not(#st-m) main .st-tab-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body:not(#st-m) main .st-tab[aria-selected="true"] {
        background: var(--m-thumb);
        color: var(--m-text);
        font-weight: 700;
        box-shadow: var(--m-shadow-sm), var(--m-hi);
    }
    /* Curseur (mobile-enhance.js, mountTabs) : un seul fond qui glisse
       d'un onglet à l'autre, comme un contrôle segmenté natif. Placé, il
       remplace le fond de l'onglet choisi ; sans lui (pas encore mesuré),
       l'onglet garde son propre fond. Peint avant les onglets (DOM), il
       passe dessous. */
    body:not(#st-m) main .st-tabs-thumb {
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 0;
        width: 0;
        border-radius: 11px;
        background: var(--m-thumb);
        box-shadow: var(--m-shadow-sm), var(--m-hi);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.24s cubic-bezier(0.3, 1.15, 0.55, 1), width 0.24s cubic-bezier(0.3, 1.15, 0.55, 1);
    }
    body:not(#st-m) main .st-tabs-list.has-thumb .st-tabs-thumb {
        opacity: 1;
    }
    body:not(#st-m) main .st-tabs-list.has-thumb .st-tab[aria-selected="true"] {
        background: transparent;
        box-shadow: none;
    }
    body:not(#st-m) main .st-tab:active {
        transform: scale(0.97);
    }
    body:not(#st-m) main .st-tab:focus-visible {
        outline: 2px solid var(--m-accent);
        outline-offset: 1px;
    }
    body:not(#st-m) main .st-tab-count {
        flex-shrink: 0;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: color-mix(in srgb, var(--m-text-3) 18%, transparent);
        color: var(--m-text-2);
        font-size: 12px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
    }
    body:not(#st-m) main .st-tab[aria-selected="true"] .st-tab-count {
        background: var(--m-accent-soft);
        color: var(--m-accent-text);
    }
    body:not(#st-m) main .st-tab-count[hidden],
    body:not(#st-m) main .st-tab-dot[hidden] {
        display: none;
    }
    /* Point d'état (onglet « Mon IA ») : vert connecté, ambre à faire */
    body:not(#st-m) main .st-tab-dot {
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--m-amber);
    }
    body:not(#st-m) main .st-tab-dot[data-tone="ok"] {
        background: var(--m-green);
    }

    /* ─── Titres de page : plus petits, sous-titre sur une ligne ─────── */
    body[data-page]:not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) {
        font-size: 25px !important;
        line-height: 1.12 !important;
    }
    body[data-page]:not(#st-m) main h2[data-i18n]:is(.text-2xl, .text-3xl):where(:not(#landingPage *, #sectionConnexion *)) + p {
        margin-top: 3px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    /* ═══ ACCUEIL ═══════════════════════════════════════════════════
       Barre « Bien démarrer », bienvenue en une ligne + pastilles, héros
       « Prochain cours », puis les onglets Cours · Tâches · Évaluations. */
    body:not(#st-m) #dashboardNormalContent[data-st-home],
    body:not(#st-m) #dashboardNormalContent[data-st-home] > .flex.flex-col.lg\:flex-row,
    body:not(#st-m) #dashboardNormalContent[data-st-home] > .grid {
        gap: 8px !important;
    }
    /* « Vue d'ensemble » : la ligne de bienvenue sert de titre */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > div.justify-between.items-center.mt-1 {
        display: none !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .st-tabs {
        margin-top: -2px;
        margin-bottom: -2px;
    }

    /* « Bien démarrer » : une barre ; on la touche pour déplier */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob] {
        padding: 3px 4px 3px 14px !important;
        border-radius: var(--m-r-md) !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob="open"] {
        padding-bottom: 14px !important;
        padding-right: 14px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob] > button[onclick*="_fermerOnboarding"] {
        top: 3px !important;
        right: 4px !important;
        background: transparent;
        border-color: transparent;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob] > div > div:first-child {
        min-height: 40px;
        margin-bottom: 0 !important;
        padding-right: 40px;
        gap: 8px !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob] h3 {
        flex-shrink: 0;
        font-size: 15px !important;
        white-space: nowrap;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob] #obProgress {
        flex-shrink: 0;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob="closed"] > div > p,
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob="closed"] > div > .grid {
        display: none !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #onboardingCard[data-st-ob="open"] > div > p {
        margin-top: 2px;
    }
    body:not(#st-m) main #onboardingCard .st-ob-next {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        color: var(--m-text-2);
    }
    body:not(#st-m) main #onboardingCard[data-st-ob="open"] .st-ob-next {
        visibility: hidden;
    }
    body:not(#st-m) main #onboardingCard .st-ob-next[hidden] {
        display: block;
        visibility: hidden;
    }
    body:not(#st-m) main #onboardingCard .st-ob-toggle {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        border: 0;
        border-radius: var(--m-r-sm);
        background: transparent;
        color: var(--m-text-3);
        font-size: 13px;
    }
    body:not(#st-m) main #onboardingCard .st-ob-toggle i {
        transition: var(--m-ease);
    }
    body:not(#st-m) main #onboardingCard[data-st-ob="open"] .st-ob-toggle i {
        transform: rotate(180deg);
    }

    /* Bienvenue : une ligne + trois pastilles (matières · devoirs ·
       évaluations), sur la carte d'accent */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child {
        padding: 10px 10px 10px 14px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child::before {
        top: -96px;
        right: -70px;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child > div:first-child {
        margin-bottom: 8px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #userInfoDisplay {
        display: none !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child h3 {
        font-size: 22px !important;
        line-height: 1.15 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row {
        gap: 6px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        min-height: 42px;
        padding: 5px 8px !important;
        border-radius: 12px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card > div:first-child {
        order: 2;
        min-width: 0;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .lg\:flex-row > .glass-panel:first-child > div.sm\:flex-row > .glass-card > div:first-child > span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] :is(#kpiCours, #kpiTasks, #kpiExams) {
        order: 1;
        flex-shrink: 0;
        font-size: 21px !important;
    }

    /* Héros « Prochain cours » : l'heure à gauche, le cours et la salle à
       droite, la progression dessous */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget {
        padding: 12px 16px 12px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget > div:nth-child(2) {
        display: grid;
        grid-template-columns: fit-content(62%) minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusLabel {
        grid-column: 1 / -1;
        margin-bottom: 4px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusMainText {
        grid-column: 1;
        grid-row: 2 / 4;
        margin: 0 !important;
        font-size: 40px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusSubText {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        margin: 0 !important;
        font-size: 15px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusDetailText {
        grid-column: 2;
        grid-row: 3;
        align-self: start;
        margin-top: 2px !important;
        font-size: 13px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget > div:last-child {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px !important;
        padding-top: 9px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget > div:last-child > div:first-child {
        display: contents;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget > div:last-child > div:first-child > #focusProgressValue {
        order: 3;
        min-width: 40px;
        text-align: right;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #focusWidget > div:last-child > div.h-2 {
        order: 2;
        flex: 1 1 auto;
        width: auto !important;
    }

    /* Cartes des onglets : en-tête serré */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > .glass-panel {
        padding: 10px 12px 8px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > .glass-panel > div.mb-6 {
        min-height: 40px;
        margin-bottom: 6px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > .glass-panel h3 {
        font-size: 17px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > .glass-panel:last-child > div:nth-child(2) {
        gap: 4px !important;
        padding-bottom: 0 !important;
        margin-bottom: 8px !important;
        border-bottom: 0 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] :is(#scheduleList, #examsList, #deadlinesList) {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] :is(#scheduleList, #examsList, #deadlinesList) > * + * {
        margin-top: 0 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #overdueBanner {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #overdueBanner > div:first-child {
        margin: 0 0 5px 4px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #overdueList > div {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] #deadlinesList > div:last-child:not(.deadline-row) {
        padding-top: 0 !important;
    }

    /* Onglet Tâches : « Vue détaillée » à la place du titre, « + » à droite */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > [data-st-tasks] > div.mb-6 > h3 {
        display: none !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] > .grid > [data-st-tasks] > div.mb-6 > a[href="devoirs.html"] {
        min-height: 40px;
        padding: 0 !important;
        font-family: var(--m-font);
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--m-accent-text) !important;
    }

    /* Jauge « Progression semaine » : dans la ligne de bienvenue, à droite */
    body:not(#st-m) main [data-st-welcome] {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    body:not(#st-m) main [data-st-welcome] > h3 {
        flex: 1 1 auto;
        min-width: 0;
    }
    body:not(#st-m) main .st-week {
        flex: 0 0 auto;
        width: 118px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    body:not(#st-m) main .st-week-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--m-font);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--m-ink);
        opacity: 0.86;
    }
    body:not(#st-m) main .st-week-row {
        display: flex;
        align-items: center;
        gap: 7px;
    }
    body:not(#st-m) main .st-week-bar {
        flex: 1 1 auto;
        display: block;
        height: 5px;
        border-radius: 99px;
        background: rgba(0, 0, 0, 0.16);
        overflow: hidden;
    }
    body:not(#st-m) main .st-week-fill {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--m-ink);
        transform: scaleX(0);
        transform-origin: left center;
        transition: var(--m-ease);
    }
    body:not(#st-m) main .st-week-pct {
        flex-shrink: 0;
        font-family: var(--m-font);
        font-size: 13px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: var(--m-ink);
    }

    /* Tâches de l'accueil : deux lignes — titre (2 lignes max) et actions,
       puis échéance · matière */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center !important;
        column-gap: 8px;
        row-gap: 1px;
        padding: 6px 8px 7px 54px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row::after {
        content: '';
        order: 3;
        flex: 0 0 100%;
        height: 0;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1,
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 {
        display: contents !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row button[onclick*="toggleTaskCompletion"] {
        order: 0;
        flex: 0 0 40px;
        margin: 0 0 0 -48px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row h4 {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        -webkit-line-clamp: 2 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.shrink-0:last-child {
        order: 2;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    /* Actions : 36 px à l'œil, 40 px au doigt */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.shrink-0:last-child > button {
        position: relative;
        width: 36px !important;
        height: 36px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.shrink-0:last-child > button::after {
        content: '';
        position: absolute;
        inset: -2px;
    }
    /* Échéance puis matière, alignées sous le titre */
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > span {
        order: 4;
        flex: 0 0 auto;
        display: block !important;
        margin: 0 !important;
        white-space: nowrap;
        font-size: 12px !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > span i {
        margin-right: 3px;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > div:first-child {
        order: 5;
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
    }
    body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > div:first-child > span {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block !important;
        width: fit-content;
    }

    /* ═══ TÂCHES (devoirs.html) ══════════════════════════════════════
       En-tête serré, recherche + « Filtres », lignes sur deux lignes,
       « Terminées » repliées avec leur compteur. */
    body[data-page="devoirs"]:not(#st-m) main .max-w-4xl > div:first-child {
        margin: 0 0 12px !important;
    }
    body[data-page="devoirs"]:not(#st-m) main .arc-level-host > div:first-child {
        padding-right: 116px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > .arc-level {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        min-width: 0;
        max-width: 112px;
        padding: 7px 10px 8px;
        border-radius: var(--c-r-sm);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > .arc-level > span.arc-level-num {
        font-size: 22px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .arc-level-host > .arc-level > span.arc-level-label {
        font-size: 10.5px;
    }

    /* Recherche + bouton « Filtres » ; matière et tri se déplient */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles[data-st-filters] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles[data-st-filters] > select {
        grid-column: 1 / -1;
        min-width: 0 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles[data-st-filters="closed"] > select {
        display: none !important;
    }
    /* Dépliés : ils entrent en fondu court (se rejoue à chaque ouverture,
       l'élément passant de display:none à visible) */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles[data-st-filters="open"] > select {
        animation: st-pane-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        border-radius: var(--c-r-sm);
        background: var(--c-item);
        border: 1px solid var(--c-line-2);
        color: var(--c-text);
        font-size: 14px;
        font-weight: 600;
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-btn i {
        color: var(--c-text-3);
        font-size: 13px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-btn[aria-expanded="true"] {
        background: color-mix(in srgb, var(--c-accent) 14%, transparent);
        border-color: var(--c-accent-line);
        color: var(--c-accent-text);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-btn[aria-expanded="true"] i {
        color: inherit;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-btn:active {
        transform: scale(0.97);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-n {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--c-accent-face);
        color: var(--c-ink);
        font-size: 12px;
        font-weight: 700;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-filters-n[hidden] {
        display: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #compteurResultats {
        margin-bottom: 6px !important;
    }
    /* Sections « À rendre » / « Terminées » : en-têtes plus bas */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div.mb-10:has(> #listeTachesAFaire) {
        margin-bottom: 18px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child {
        min-height: 40px;
        margin-bottom: 8px !important;
        gap: 10px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child > div.rounded-full {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main div:is(.mb-10, :not([class])):has(> :is(#listeTachesAFaire, #listeTachesTerminees)) > div:first-child h3 {
        font-size: 17px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesAFaire,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #listeTachesTerminees {
        gap: 8px;
    }

    /* Ligne de tâche : titre (2 lignes max) et actions, puis échéance ·
       statut · matière sur une ligne */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex {
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: flex-start !important;
        column-gap: 8px;
        row-gap: 1px;
        padding: 7px 8px 8px 54px !important;
        border-radius: var(--c-r-md) !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex::after {
        content: '';
        order: 3;
        flex: 0 0 100%;
        height: 0;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex::before {
        top: 14px;
        bottom: 14px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > div.sm\:hidden {
        display: contents !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex button[onclick*="toggleTaskCompletion"] {
        order: 0;
        margin: 0 4px 0 -44px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex h4 {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div:last-child {
        order: 2;
        flex-direction: row !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    /* Actions : 36 px à l'œil, 40 px au doigt */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div:last-child > :is(button, div) {
        position: relative;
        width: 36px !important;
        height: 36px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div:last-child > button::after {
        content: '';
        position: absolute;
        inset: -2px;
    }
    /* Ligne 2 : échéance, statut (« À rendre » tombe : c'est la section),
       puis la matière qui se coupe si la place manque */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > div.sm\:hidden > span:not([class*="/15"]) {
        order: 4;
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 12.5px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > div.sm\:hidden > span[class*="/15"] {
        order: 5;
        flex: 0 0 auto;
        padding: 1px 8px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > div.sm\:hidden > span.bg-blue-500\/15 {
        display: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > span[class*="tracking-widest"] {
        order: 6;
        flex: 1 0 84px;
        min-width: 0;
        margin: 0 !important;
        display: block !important;
        position: relative;
        padding-left: 13px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main :is(#listeTachesAFaire, #listeTachesTerminees) > div.rounded-2xl.flex > div.flex-1 > div.truncate > span[class*="tracking-widest"]::before {
        position: absolute;
        left: 1px;
        top: 50%;
        margin-top: -3.5px;
    }
    /* « Terminées » : repliées ; l'en-tête (et son compteur) les déplie */
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [data-st-done] > div:first-child {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [data-st-done="closed"] > #listeTachesTerminees {
        display: none !important;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [data-st-done="open"] > #listeTachesTerminees {
        animation: st-pane-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-done-toggle {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--c-line);
        border-radius: var(--c-r-sm);
        background: var(--c-item);
        color: var(--c-text-2);
        font-size: 13px;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main .st-done-toggle i {
        transition: var(--c-press);
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [data-st-done="open"] .st-done-toggle i {
        transform: rotate(180deg);
    }

    /* ═══ AGENDA (cours.html) ════════════════════════════════════════
       Calendrier / Liste (icônes) et mois sur une seule ligne ; plus de
       hauteur minimale ni de cale en bas de page. */
    body[data-page="cours"]:not(#st-m) main > div.min-h-full {
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }
    body[data-page="cours"]:not(#st-m) main > div > div.h-28 {
        display: none !important;
    }
    body[data-page="cours"]:not(#st-m) main > div > div.justify-between:has(> div > h2[data-i18n="cours_title"]) {
        margin: 0 0 10px !important;
    }
    body[data-page="cours"]:not(#st-m) main #calendarContainer {
        padding: 10px 8px 10px !important;
    }
    body[data-page="cours"]:not(#st-m) main #calendarContainer > div.justify-between:has(> #viewToggle) {
        flex-wrap: nowrap !important;
        margin-bottom: 8px !important;
    }
    body[data-page="cours"]:not(#st-m) main #viewToggle > button {
        width: 44px;
        justify-content: center;
        padding: 0 !important;
    }
    /* Libellé gardé pour les lecteurs d'écran (icône seule à l'œil) */
    body[data-page="cours"]:not(#st-m) main #viewToggle > button > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    body[data-page="cours"]:not(#st-m) main #viewToggle > button > i {
        font-size: 15px;
    }
    body[data-page="cours"]:not(#st-m) main #monthNav {
        margin-left: auto !important;
    }
    body[data-page="cours"]:not(#st-m) main #filtresMatieres {
        margin-bottom: 6px !important;
    }
    body[data-page="cours"]:not(#st-m) main #calendarGrid > div[onclick],
    body[data-page="cours"]:not(#st-m) main #calendarGrid > div:not([onclick]):nth-child(n+8) {
        min-height: 54px !important;
    }

    /* ═══ NOTES (notes.html) : Résumé · Détail ═══════════════════════ */
    /* L'enveloppe s'efface : la barre d'onglets reste collée sur toute
       la page (le graphique et le tableau sont des enfants de <main>). */
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] {
        display: contents !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child {
        margin-bottom: 10px !important;
        gap: 10px !important;
    }
    /* Actions : « Ajouter une note » en grand, import en icône */
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap {
        gap: 8px !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap > button[onclick*="ouvrirModalNote()"] {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap > :is(button[onclick*="importFileInput"], #btnEffacerNotes) {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap > button[onclick*="importFileInput"] {
        width: 46px;
        justify-content: center;
        padding: 0 !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap > button[onclick*="importFileInput"] > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] > .st-tabs {
        margin-bottom: 4px;
    }

    /* Moyenne : la grande tuile, plus basse (chiffre et pourcentage côte
       à côte) */
    body[data-page="notes"]:not(#st-m) main [data-st-avg] {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        column-gap: 12px;
        margin-bottom: 10px;
        padding: 14px 16px 14px !important;
        border-radius: 16px !important;
        background:
            radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pf-accent) 20%, transparent) 0%, transparent 62%),
            var(--pf-surface) !important;
        border-color: color-mix(in srgb, var(--pf-accent) 28%, var(--pf-line)) !important;
    }
    body.light-mode[data-page="notes"]:not(#st-m) main [data-st-avg] {
        background:
            radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--pf-accent) 13%, transparent) 0%, transparent 62%),
            var(--pf-surface) !important;
    }
    body.st-no-bg[data-page="notes"]:not(#st-m) main [data-st-avg] {
        background: var(--pf-surface) !important;
    }
    body[data-page="notes"]:not(#st-m) main [data-st-avg] > span:first-of-type {
        grid-column: 1 / -1;
        margin-bottom: 6px !important;
        font-family: var(--pf-font);
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        -webkit-text-fill-color: var(--pf-text-3);
    }
    body[data-page="notes"]:not(#st-m) main [data-st-avg] > span:first-of-type i {
        -webkit-text-fill-color: currentColor;
        font-size: 11px;
    }
    body[data-page="notes"]:not(#st-m) main [data-st-avg] #kpiMoyenne {
        font-family: var(--pf-num) !important;
        font-size: 50px !important;
        font-weight: 700 !important;
        line-height: 0.95 !important;
        letter-spacing: -0.015em;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: var(--pf-text) !important;
    }
    body[data-page="notes"]:not(#st-m) main [data-st-avg] #kpiMoyenne + p {
        margin: 0 0 3px !important;
        text-align: right;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.3;
    }
    body[data-page="notes"]:not(#st-m) main [data-st-avg] #kpiMoyennePct {
        font-family: var(--pf-num);
        font-size: 16px;
        font-weight: 700;
        color: var(--pf-accent-text) !important;
    }
    /* Statistiques : une ligne qui défile de côté */
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] {
        display: flex !important;
        gap: 8px !important;
        margin: 0 -16px 10px !important;
        padding: 0 16px 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip]::-webkit-scrollbar {
        display: none;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] > div {
        flex: 0 0 128px;
        order: 0 !important;
        grid-column: auto !important;
        padding: 10px 12px 10px !important;
        scroll-snap-align: start;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] > div.col-span-2 {
        flex-basis: 164px;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] :is(#kpiNbNotes, #kpiMeilleure, #kpiCredits) {
        font-size: 28px !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] :is(#kpiDernierScan, #kpiPointFaible) {
        font-size: 15px !important;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] #kpiPointFaible[title]:not([title=""])::before {
        font-size: 15px;
    }
    body[data-page="notes"]:not(#st-m) main #kpiSection[data-st-strip] > div > p {
        font-size: 11.5px !important;
        margin-top: 3px !important;
    }
    /* Graphique : en-tête et sélecteur plus serrés */
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] #sectionGraphique {
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] #sectionGraphique > button:first-child {
        padding: 14px 12px 10px !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] #graphSousTitre {
        display: none !important;
    }
    body[data-page="notes"]:not(#st-m) main > [data-st-flat] #selectGraphMatiere {
        margin-top: 8px;
        min-height: 44px;
    }
    body[data-page="notes"]:not(#st-m) main > #graphiqueContent {
        margin-top: 10px !important;
        padding: 12px 14px 10px !important;
    }
    body[data-page="notes"]:not(#st-m) main > #graphiqueContent #legendeGraphique:empty {
        display: none;
    }
    /* Détail : fiches plus basses */
    body[data-page="notes"]:not(#st-m) main > #tableauNotes {
        margin-top: 4px !important;
    }
    body[data-page="notes"]:not(#st-m) main > #tableauNotes > div:first-child {
        padding: 12px 16px !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr:has(> td[colspan]) {
        padding: 9px 16px !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr {
        padding-top: 7px;
        padding-bottom: 7px;
        row-gap: 2px;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes tbody tr > td:nth-child(2):not([colspan]) {
        font-size: 26px !important;
    }
    body[data-page="notes"]:not(#st-m) main #tableauNotes > a[href="simulateur.html"] {
        min-height: 48px;
    }

    /* ═══ SIMULATEUR (simulateur.html) : Matières · Réglages · Outils ══ */
    body:not(#st-m) main [data-st-sim] > div:first-child {
        margin-bottom: 10px !important;
    }
    /* Résumé toujours visible : objectif / actuelle / simulée */
    body:not(#st-m) main .st-sim-sum {
        margin-bottom: 2px;
        padding: 8px;
        border-radius: var(--m-r-md);
        background: var(--m-surface);
        border: 1px solid var(--m-line);
        box-shadow: var(--m-hi), var(--m-shadow);
    }
    body:not(#st-m) main .st-sim-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    body:not(#st-m) main .st-sim-cell {
        min-width: 0;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 6px 8px;
        border: 0;
        border-radius: var(--m-r-sm);
        background: transparent;
        text-align: left;
        color: inherit;
        font: inherit;
    }
    body:not(#st-m) main button.st-sim-cell {
        background: var(--m-surface-2);
        box-shadow: inset 0 0 0 1px var(--m-line-2);
        transition: var(--m-ease);
    }
    body:not(#st-m) main button.st-sim-cell:active {
        transform: scale(0.97);
    }
    body:not(#st-m) main .st-sim-cell.is-hero {
        background: var(--m-accent-soft);
    }
    body:not(#st-m) main .st-sim-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--m-font);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--m-text-3);
    }
    body:not(#st-m) main .st-sim-value {
        display: flex;
        align-items: baseline;
        gap: 2px;
        white-space: nowrap;
    }
    body:not(#st-m) main .st-sim-num {
        font-family: var(--m-font);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        color: var(--m-text);
    }
    body:not(#st-m) main .st-sim-cell.is-hero .st-sim-num {
        color: var(--m-accent-text);
    }
    body:not(#st-m) main .st-sim-unit {
        font-size: 12px;
        font-weight: 700;
        color: var(--m-text-3);
    }
    body:not(#st-m) main .st-sim-status {
        margin: 6px 4px 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--m-text-2);
    }
    body:not(#st-m) main .st-sim-status[hidden] {
        display: none;
    }
    body:not(#st-m) main .st-sim-status[data-tone="ok"] {
        color: var(--m-green-text);
    }
    body:not(#st-m) main .st-sim-status[data-tone="bad"] {
        color: var(--m-red-text);
    }
    /* Actions de l'onglet Matières : sur une ligne si la place suffit */
    body:not(#st-m) main [data-st-sim] > [data-st-actions] {
        flex-wrap: wrap;
        gap: 8px !important;
        margin-bottom: 10px;
    }
    body:not(#st-m) main [data-st-sim] > [data-st-actions] > button:is([onclick^="ajouterMatiere"], [onclick^="importerDepuisNotes"], #btnCopierResume) {
        flex: 1 1 auto;
        justify-content: center;
        gap: 6px !important;
        min-height: 44px;
        padding: 0 10px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    body:not(#st-m) main [data-st-sim] > [data-st-actions] > button[onclick^="importerDepuisNotes"] {
        order: -1;
    }
    body:not(#st-m) main [data-st-sim] > [data-st-copy] {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    /* Réglages : l'objectif seul (les autres chiffres sont dans le résumé) */
    body:not(#st-m) main [data-st-sim] [data-st-kpis] > :nth-child(n+2) {
        display: none !important;
    }
    body:not(#st-m) main [data-st-sim] [data-st-kpis] {
        margin-bottom: 10px !important;
    }
    body:not(#st-m) main [data-st-sim] > .glass-panel,
    body:not(#st-m) main [data-st-sim] > #required-card {
        margin-bottom: 10px !important;
    }
    body:not(#st-m) main [data-st-sim] > .glass-panel:has(> div > #grade-system-pills) {
        padding: 14px !important;
    }
    /* Liste des matières : une carte basse par matière — nom et état sur
       la première ligne, coefficient / note réelle / objectif dessous */
    body:not(#st-m) main [data-st-sim] div.border-b:has(> button[onclick^="reinitialiserSimulateur"]) {
        padding: 10px 12px !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container {
        gap: 8px;
        padding: 10px;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div {
        padding: 8px 10px 10px 12px !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 4px !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:first-child {
        grid-column: 1 / 4 !important;
        grid-row: 1;
        min-width: 0;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:first-child > label {
        display: none !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:nth-child(4) { grid-column: 5 / 7; grid-row: 2; }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:last-child {
        grid-column: 4 / 7 !important;
        grid-row: 1;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 0 !important;
        gap: 6px !important;
        justify-content: flex-end !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container > div > .grid > div:last-child > div.flex-1 {
        flex: 0 1 auto;
        min-width: 0;
        text-align: right;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container .grid > div:last-child span[class*="bg-"] {
        min-height: 26px;
        padding: 0 9px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container input[id^="subject-name"] {
        min-height: 40px;
        font-size: 16px !important;
        text-overflow: ellipsis;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container label {
        margin-bottom: 3px !important;
        font-size: 10.5px !important;
    }
    body:not(#st-m) main [data-st-sim] #matieres-container input[type="number"] {
        min-height: 40px;
        font-size: 16px !important;
    }

    /* ═══ IA (ia.html) : Séance · Mon IA · Options ═══════════════════ */
    /* En-tête : le dock mène déjà à l'accueil ; titre et une ligne */
    body:not(#st-m) main [data-st-ia] > header {
        margin-bottom: 10px !important;
    }
    body:not(#st-m) main [data-st-ia] > header > a[href="index.html"] {
        display: none !important;
    }
    body:not(#st-m) main [data-st-ia] > header > h1 {
        margin-top: 0 !important;
        font-size: 25px !important;
    }
    body:not(#st-m) main [data-st-ia] > header > p {
        margin-top: 3px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    body:not(#st-m) main [data-st-ia] > section.rounded-2xl,
    body:not(#st-m) main [data-st-ia] > details.rounded-2xl {
        padding: 14px 14px !important;
        margin-bottom: 10px !important;
    }
    body:not(#st-m) main [data-st-ia] > .st-tabs {
        margin-bottom: 4px;
    }
    /* Mon IA (pas encore connectée) : l'encadré « Quelle IA as-tu ? » plus serré */
    body:not(#st-m) main [data-st-ia] #mcpOff > div.mt-5 {
        margin-top: 12px !important;
        padding: 12px !important;
    }
    body:not(#st-m) main [data-st-ia] > section > h2 {
        margin-bottom: 10px !important;
        font-size: 17px !important;
    }
    body:not(#st-m) main [data-st-ia] #step1Section label.text-xs {
        margin-top: 12px !important;
    }
    body:not(#st-m) main [data-st-ia] #step1Section > label.text-xs:first-of-type {
        margin-top: 0 !important;
    }
    /* Objectifs : une rangée de puces par groupe, qui défile de côté ; le
       nom du groupe en tête de rangée */
    body:not(#st-m) main [data-st-ia] #objChips {
        gap: 8px;
        margin: 0 -14px;
    }
    body:not(#st-m) main [data-st-ia] #objChips > div {
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 8px !important;
        padding: 0 14px 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding: 0 14px;
        scrollbar-width: none;
    }
    body:not(#st-m) main [data-st-ia] #objChips > div::-webkit-scrollbar {
        display: none;
    }
    body:not(#st-m) main [data-st-ia] #objChips > div > span.uppercase {
        flex: 0 0 auto;
        scroll-snap-align: start;
        width: auto !important;
        max-width: 92px;
        white-space: normal;
        font-size: 10.5px !important;
        line-height: 1.2;
    }
    body:not(#st-m) main [data-st-ia] #objChips .chip {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
    body:not(#st-m) main [data-st-ia] #lastSessions,
    body:not(#st-m) main [data-st-ia] details#profilBox {
        margin-top: 10px !important;
    }
    /* IA : une ligne par IA (nom · mode) ; précisions au tap */
    body:not(#st-m) main [data-st-ia] #step2Hint {
        margin-bottom: 10px !important;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact] {
        gap: 5px !important;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact] > .prov-card {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 10px;
        min-height: 44px;
        padding: 6px 32px 6px 14px !important;
        border-radius: var(--m-r-sm) !important;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact] > .prov-card::after {
        content: '';
        position: absolute;
        right: 15px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 2px solid var(--m-text-3);
        border-right: 2px solid var(--m-text-3);
        transform: rotate(45deg);
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact] > .prov-card > span:first-child > span:last-child {
        font-size: 16px !important;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact] > .prov-card > span.block:nth-child(2) {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact]:not([data-st-details]) > .prov-card > span.block:nth-child(3) {
        display: none;
    }
    body:not(#st-m) main [data-st-ia] #providerGrid[data-st-compact][data-st-details] > .prov-card > span.block:nth-child(3) {
        flex: 0 0 100%;
        margin-top: 4px !important;
    }
    body:not(#st-m) main [data-st-ia] #step2Section > div.flex-wrap {
        gap: 8px !important;
        margin-top: 10px !important;
    }
    body:not(#st-m) main [data-st-ia] #step2Section[data-st-tools="closed"] > div.flex-wrap > :not(#btnBilanShow, .st-pack-tools),
    body:not(#st-m) main [data-st-ia] #step2Section[data-st-tools="closed"] > #packPreview,
    body:not(#st-m) main [data-st-ia] #step2Section[data-st-tools="closed"] > p.mt-4 {
        display: none !important;
    }
    body:not(#st-m) main [data-st-ia] #step2Section[data-st-tools] > div.flex-wrap > #btnBilanShow {
        order: -1;
    }
    body:not(#st-m) main [data-st-ia] .st-pack-tools {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: var(--m-accent-text);
        font-family: var(--m-font);
        font-size: 13px;
        font-weight: 700;
    }
    body:not(#st-m) main [data-st-ia] .st-pack-tools i {
        font-size: 11px;
        transition: var(--m-ease);
    }
    body:not(#st-m) main [data-st-ia] .st-pack-tools[aria-expanded="true"] i {
        transform: rotate(180deg);
    }
    body:not(#st-m) main [data-st-ia] #step2Section > p.mt-4 {
        margin-top: 10px !important;
        font-size: 12px !important;
    }

    /* ═══ RESSOURCES / RÉSEAU : resserrer ════════════════════════════ */
    body[data-page="ressources"]:not(#st-m) main > div > div:first-child {
        margin-bottom: 12px !important;
        gap: 12px !important;
    }
    body[data-page="ressources"]:not(#st-m) main button:is([onclick="ouvrirModalTutoExtension()"], [onclick="ouvrirModalFichier()"]):not(#emptyAll *) {
        min-height: 44px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.2;
    }
    body[data-page="ressources"]:not(#st-m) main #viewMatieres > div.glass-panel:first-child {
        padding: 8px !important;
        margin-bottom: 14px !important;
    }
    body[data-page="chat"]:not(#st-m) #chatMainContainer > div > div:first-child {
        margin-bottom: 10px !important;
    }

    /* Petits écrans (≤ 379 px) : sur l'accueil, la matière d'une tâche se
       réduit à son point de couleur (le nom reste pour les lecteurs
       d'écran) ; l'échéance garde toute la ligne. Les boutons d'action des
       Notes et du Simulateur restent sur une ligne. */
    @media (max-width: 379px) {
        body[data-page="notes"]:not(#st-m) main > [data-st-flat] > div:first-child > div.flex-wrap > :is(button[onclick*="ouvrirModalNote()"], #btnEffacerNotes) {
            padding: 0 10px !important;
            gap: 6px !important;
            font-size: 13px !important;
        }
        body:not(#st-m) main [data-st-sim] > [data-st-actions] > button:is([onclick^="ajouterMatiere"], [onclick^="importerDepuisNotes"], #btnCopierResume) {
            gap: 5px !important;
            padding: 0 8px !important;
            font-size: 12.5px !important;
        }
        body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > div:first-child {
            flex: 0 0 14px;
        }
        body:not(#st-m) main #dashboardNormalContent[data-st-home] .deadline-row > div.flex-1 > div.flex-1 > div:first-child > span {
            width: 14px;
            padding: 0 !important;
            color: transparent !important;
            background: radial-gradient(circle at 7px 50%, var(--subj, var(--m-slate)) 0 4px, transparent 4.5px) no-repeat !important;
        }
    }

    /* ═══ Petits écrans (≤ 379px) ════════════════════════════════════ */
    @media (max-width: 379px) {
        body:not(#st-m) #mobileTopNav {
            padding-left: 12px !important;
            padding-right: 10px !important;
        }
        body:not(#st-m) #mobileTopNav > :first-child {
            gap: 8px !important;
        }
        body:not(#st-m) #mobileTopNav > div:last-child {
            gap: 6px !important;
        }
        body:not(#st-m) #mobileTopNav h1,
        body:not(#st-m) #mobileTopNav > a > span {
            font-size: 17px !important;
        }
        body:not(#st-m) #chatMainContainer h2[data-i18n="chat_title"] {
            font-size: 24px !important;
        }
        body:not(#st-m) #chatMainContainer > div > div:first-child > div:last-child {
            gap: 6px !important;
        }
        body:not(#st-m) main #dashboardNormalContent > .lg\:flex-row > .glass-panel:first-child h3 {
            font-size: 27px !important;
        }
        body:not(#st-m) main #focusMainText {
            font-size: 46px !important;
        }
    }

    /* ═══ Mouvement réduit ════════════════════════════════════════
       Les seules transitions ajoutées ici (transform/opacity) passent
       par --m-ease, --c-press et --pf-press : on les coupe. */
    body.st-reduce-motion {
        --m-ease: none;
        --c-press: none;
        --pf-press: none;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    :root,
    body {
        --m-ease: none;
        --c-press: none;
        --pf-press: none;
    }
    body:not(#st-m) main [data-st-in] {
        animation: none;
    }
    body:not(#st-m) main .st-tabs {
        transition: none;
    }
    body:not(#st-m) main .st-tabs-thumb {
        transition: none;
    }
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main #barreControles[data-st-filters="open"] > select,
    body:is([data-page="devoirs"], [data-page="cours"]):not(#st-m) main [data-st-done="open"] > #listeTachesTerminees {
        animation: none;
    }
}