/* ═══════════════════════════════════════════════════════════════════
   mobile-enhance.css — Améliorations interface mobile StudentTrack
   Objectif : rendre l'app lisible et compréhensible sur téléphone
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────────────────── */
:root {
    --mobile-nav-top-h: 56px;
    --mobile-nav-bottom-h: 70px;
}

/* ─── FAB "Mon Carnet IA" supprimé (toutes tailles d'écran) ─────── */
/* L'agent IA reste accessible via le drawer mobile et le sidebar desktop */
#ai-fab,
#ai-mobile-nav-link {
    display: none !important;
}

/* ─── Améliorations spécifiques mobile (< 768px) ──────────────── */
@media (max-width: 767px) {

    /* === TOP NAV — épuré, plus lisible === */
    #mobileTopNav {
        height: var(--mobile-nav-top-h) !important;
        padding-left: 14px !important;
        padding-right: 12px !important;
        gap: 8px !important;
    }
    #mobileTopNav > a,
    #mobileTopNav > div:first-child {
        gap: 10px !important;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }
    #mobileTopNav h1 {
        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #mobileTopNav #schoolIconMob,
    #mobileTopNav > a > div:first-child,
    #mobileTopNav > div:first-child > div:first-child {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }

    /* Cacher les icônes individuelles — regroupées dans le menu ; les XP,
       eux, ne s'affichent pas sur téléphone */
    #mobileTopNav #btnLanguageToggleMob,
    #mobileTopNav #btnThemeToggle,
    #mobileTopNav button[onclick*="ouvrirModalNotifications"],
    #mobileTopNav button[onclick*="ouvrirModalProfil"],
    #mobileTopNav #btnProfilNavMob,
    #mobileTopNav [onclick*="ouvrirModalXP"] {
        display: none !important;
    }

    /* Conteneur de droite (boutons d'action) */
    #mobileTopNav > div:last-child {
        gap: 8px !important;
        flex-shrink: 0;
    }

    /* Bouton menu principal */
    #mobileMenuBtn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e2e8f0;
        font-size: 15px;
        position: relative;
        flex-shrink: 0;
        cursor: pointer;
    }
    body.light-mode #mobileMenuBtn {
        background: rgba(0,0,0,0.05);
        border-color: rgba(0,0,0,0.1);
        color: #334155;
    }
    #mobileMenuBtn:active { transform: scale(0.94); }
    #mobileMenuBtn .menu-dot {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 9px;
        height: 9px;
        background: #ef4444;
        border-radius: 50%;
        border: 2px solid var(--bg-dark, #121418);
        box-shadow: 0 0 8px rgba(239,68,68,0.6);
    }

    /* === BOTTOM NAV — labels lisibles, meilleur touch === */
    #mobileBottomNav,
    nav.md\:hidden.fixed.bottom-0 {
        height: var(--mobile-nav-bottom-h) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        gap: 0 !important;
    }
    #mobileBottomNav > a,
    #mobileBottomNav > button:not([onclick*="ouvrirModalAjout"]):not([onclick*="bullseye"]),
    nav.md\:hidden.fixed.bottom-0 > a,
    nav.md\:hidden.fixed.bottom-0 > button:not([onclick*="ouvrirModalAjout"]) {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 4px !important;
        gap: 4px !important;
        position: relative;
        transition: color 0.15s;
    }
    #mobileBottomNav > a > i,
    #mobileBottomNav > button > i:not(.fa-plus):not(.fa-bullseye),
    nav.md\:hidden.fixed.bottom-0 > a > i,
    nav.md\:hidden.fixed.bottom-0 > button > i:not(.fa-plus):not(.fa-bullseye) {
        font-size: 19px !important;
        line-height: 1 !important;
    }
    #mobileBottomNav > a > span,
    #mobileBottomNav > button > span:not(.sr-only),
    nav.md\:hidden.fixed.bottom-0 > a > span,
    nav.md\:hidden.fixed.bottom-0 > button > span:not(.sr-only) {
        font-size: 11px !important;
        line-height: 1.1 !important;
        white-space: nowrap;
        font-weight: 700 !important;
        letter-spacing: 0.01em;
    }

    /* Indicateur de page active dans la bottom nav */
    #mobileBottomNav .mobile-nav-active,
    nav.md\:hidden.fixed.bottom-0 .mobile-nav-active {
        color: var(--color-accent) !important;
    }
    #mobileBottomNav .mobile-nav-active::before,
    nav.md\:hidden.fixed.bottom-0 .mobile-nav-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: var(--color-accent);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 0 10px var(--color-accent);
    }

    /* Bouton "+" central — plus visible */
    #mobileBottomNav button[onclick*="ouvrirModalAjout"] > div,
    nav.md\:hidden.fixed.bottom-0 button[onclick*="ouvrirModalAjout"] > div {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        box-shadow: 0 6px 20px rgba(242,123,33,0.4) !important;
    }

    /* Bouton IA auto-injecté → caché sur mobile (présent dans le menu drawer) */
    #mobileBottomNav #st-ai-static-mobile,
    nav.md\:hidden.fixed.bottom-0 #st-ai-static-mobile {
        display: none !important;
    }

    /* === MAIN — espacement et padding mobile === */
    main {
        padding-top: calc(var(--mobile-nav-top-h) + 12px) !important;
        padding-bottom: calc(var(--mobile-nav-bottom-h) + 16px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* === Titres de page — plus visibles === */
    main h2.text-2xl,
    main h2.text-3xl,
    main h2.text-4xl,
    main > div > div > h2,
    main > div > div > div > h2 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }

    /* === Texte minuscule — taille minimale lisible === */
    .text-\[8px\] { font-size: 11px !important; }
    .text-\[9px\] { font-size: 11px !important; }
    .text-\[10px\] { font-size: 12px !important; }

    /* === Cards stats — chiffres lisibles === */
    main .text-3xl.font-black,
    main .text-4xl.font-black {
        font-size: 30px !important;
    }
    main .text-5xl.font-black {
        font-size: 36px !important;
    }

    /* Labels des cards stats */
    main .glass-card .text-\[10px\],
    main .glass-panel .text-\[10px\] {
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
    }

    /* === Glass panels — moins de rayon, plus de respiration === */
    main .glass-panel.rounded-\[2rem\],
    main .glass-panel.rounded-\[2\.5rem\] {
        border-radius: 22px !important;
    }
    main .glass-panel.p-6,
    main .glass-panel.p-8 {
        padding: 18px !important;
    }
    main .glass-panel.p-5 {
        padding: 16px !important;
    }

    /* === Modals — overlay plein écran propre === */
    [id^="modal"].fixed.inset-0 > div:first-child {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 48px) !important;
    }

    /* === Welcome card — bien lisible === */
    main .glass-panel h3.text-3xl,
    main .glass-panel h3.text-4xl {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    /* === Calendar 7 col — taille minimum === */
    #calendarGrid {
        font-size: 11px !important;
    }
    #calendarGrid > div {
        min-height: 60px;
    }

    /* === Boutons d'action plus tactiles === */
    main button[type="submit"],
    main button.bg-\[color\:var\(--color-accent\)\] {
        min-height: 44px;
        font-size: 14px !important;
    }

    /* === Espacements entre sections === */
    main > div > div > div + div {
        margin-top: 14px;
    }

    /* === Boutons "Voir plus" / actions secondaires === */
    main .glass-item.px-3.py-2 {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE MENU SHEET — Drawer latéral avec toutes les options
   ═══════════════════════════════════════════════════════════════════ */
/* Ouverture et fermeture animées. Le menu passait de display:none à block
   dans la même image que son fondu : aucune des deux transitions (fond,
   panneau qui glisse) ne jouait, il apparaissait et disparaissait d'un coup.
   @starting-style donne l'état de départ à l'ouverture ; à la fermeture,
   display (allow-discrete) ne bascule qu'une fois le panneau sorti.
   Navigateurs sans support : apparition directe, comme avant. */
#mobileMenuSheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity, display;
    transition-duration: 0.16s, 0.2s;
    transition-timing-function: ease;
    transition-behavior: allow-discrete;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
#mobileMenuSheet.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
@starting-style {
    #mobileMenuSheet.open {
        opacity: 0;
    }
    #mobileMenuSheet.open .sheet-panel {
        transform: translateX(100%);
    }
}
#mobileMenuSheet .sheet-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88%;
    max-width: 360px;
    background: rgba(15, 17, 21, 0.98);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,0.08);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
body.light-mode #mobileMenuSheet .sheet-panel {
    background: rgba(255,255,255,0.98);
    border-left-color: rgba(0,0,0,0.07);
    box-shadow: -20px 0 60px rgba(0,0,0,0.12);
}
#mobileMenuSheet.open .sheet-panel { transform: translateX(0); }
/* Fermeture : le panneau repart plus vite qu'il n'est venu. */
#mobileMenuSheet:not(.open) .sheet-panel {
    transition-duration: 0.18s;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
    #mobileMenuSheet,
    #mobileMenuSheet .sheet-panel {
        transition: none;
    }
}

#mobileMenuSheet .sheet-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
body.light-mode #mobileMenuSheet .sheet-header { border-bottom-color: rgba(0,0,0,0.06); }

#mobileMenuSheet .sheet-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
}
#mobileMenuSheet .sheet-avatar img { width: 100%; height: 100%; object-fit: cover; }

#mobileMenuSheet .sheet-name { flex: 1; min-width: 0; }
#mobileMenuSheet .sheet-name .n-primary {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
body.light-mode #mobileMenuSheet .sheet-name .n-primary { color: #1a202c; }
#mobileMenuSheet .sheet-name .n-secondary {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin: 3px 0 0;
    line-height: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#mobileMenuSheet .sheet-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}
body.light-mode #mobileMenuSheet .sheet-close {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    color: #475569;
}

#mobileMenuSheet .sheet-section { padding: 14px 0 4px; }
#mobileMenuSheet .sheet-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 22px;
    margin-bottom: 6px;
}

#mobileMenuSheet .sheet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin: 1px 8px;
    border-radius: 12px;
    cursor: pointer;
    color: #e2e8f0;
    text-decoration: none;
    transition: background 0.15s;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: transparent;
    width: calc(100% - 16px);
    text-align: left;
    position: relative;
    min-height: 44px;
}
body.light-mode #mobileMenuSheet .sheet-item { color: #334155; }
#mobileMenuSheet .sheet-item:active { background: rgba(255,255,255,0.07); transform: scale(0.98); }
body.light-mode #mobileMenuSheet .sheet-item:active { background: rgba(0,0,0,0.05); }

#mobileMenuSheet .sheet-item > i:first-child {
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: #94a3b8;
    flex-shrink: 0;
}
body.light-mode #mobileMenuSheet .sheet-item > i:first-child { color: #64748b; }

#mobileMenuSheet .sheet-item .sheet-item-badge {
    margin-left: auto;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    line-height: 1.3;
}

#mobileMenuSheet .sheet-item .sheet-item-meta {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

#mobileMenuSheet .sheet-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 8px 18px;
}
body.light-mode #mobileMenuSheet .sheet-divider { background: rgba(0,0,0,0.06); }

#mobileMenuSheet .sheet-footer {
    padding: 12px 14px env(safe-area-inset-bottom, 14px);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
}
body.light-mode #mobileMenuSheet .sheet-footer { border-top-color: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — confort et lisibilité (< 768px uniquement)
   Tout ce bloc est sous @media (max-width: 767px) : la version PC
   (≥ 768px, sidebar Tailwind md:) n'est pas touchée.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ─── Hauteur réelle de l'écran ───────────────────────────────────
       100vh (h-screen) = hauteur SANS la barre d'outils de Safari iOS :
       le bas de la page passait dessous. 100dvh suit l'écran visible. */
    @supports (height: 100dvh) {
        body.h-screen,
        main.h-screen {
            height: 100dvh !important;
        }
    }

    /* ─── Pas de zoom automatique d'iOS au toucher d'un champ ─────────
       Safari zoome sur tout champ dont la police fait moins de 16px.
       Les champs déjà plus grands (text-base et au-delà) gardent leur taille. */
    :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [class~="text-base"], [class~="text-lg"], [class~="text-xl"], [class~="text-2xl"], [class~="text-3xl"], [class~="text-4xl"], [class~="text-5xl"], [class~="text-6xl"]) {
        font-size: 16px !important;
    }

    /* Tap immédiat (pas de délai de double-tap) */
    button,
    a,
    [onclick] {
        touch-action: manipulation;
    }

    /* ─── Barres de navigation opaques ────────────────────────────────
       Le fond vitré laissait voir le contenu défiler dessous (chiffres,
       titres) : illisible sur téléphone. Mode clair déjà opaque. */
    body:not(.light-mode) #mobileTopNav,
    body:not(.light-mode) #mobileBottomNav {
        background: rgba(17, 19, 23, 0.94) !important;
    }

    /* ─── Notification (toast) sous la barre du haut ──────────────────
       Elle recouvrait le logo et les boutons de la barre du haut. */
    #toastGlobal {
        top: calc(var(--mobile-nav-top-h) + 10px) !important;
        left: 12px !important;
        right: 12px !important;
        padding: 12px 14px !important;
        gap: 12px !important;
    }
    body:not(.light-mode) #toastGlobal {
        background: rgba(22, 25, 31, 0.97) !important;
    }

    /* ─── Grilles de cartes alignées ──────────────────────────────────
       La règle « espacement entre sections » plus haut
       (main > div > div > div + div) décalait aussi les cartes d'une
       grille (ex. indicateurs de Notes en quinconce) : dans une grille,
       c'est le gap qui espace. */
    main > div > .grid > div + div {
        margin-top: 0;
    }

    /* ═══ ACCUEIL (index.html) ═══════════════════════════════════════ */

    /* « Bien démarrer » : une étape faite = une seule ligne */
    [id^="obStep"].opacity-60 {
        padding: 10px 14px !important;
    }
    [id^="obStep"].opacity-60 > p {
        display: none;
    }
    [id^="obStep"].opacity-60 > div {
        margin-bottom: 0 !important;
    }

    /* Compteurs (matières / devoirs / évaluations) : 3 colonnes au lieu
       de 3 cartes empilées qui prenaient un écran entier. */
    main div:has(> .glass-card > #kpiCours) {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
    }
    main div:has(> .glass-card > #kpiCours) > .glass-card {
        padding: 12px 10px !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    main div:has(> .glass-card > #kpiCours) > .glass-card > div:first-child {
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
    }
    main div:has(> .glass-card > #kpiCours) > .glass-card > div:first-child > div {
        flex-shrink: 0;
        margin-top: 4px;
    }
    main div:has(> .glass-card > #kpiCours) > .glass-card > div:first-child > span {
        font-size: 11px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    #kpiCours,
    #kpiTasks,
    #kpiExams {
        font-size: 26px !important;
    }

    /* Cartes Cours / Évaluations / Tâches : pas de hauteur minimale
       (grand vide en bas de carte quand il y a peu d'éléments). */
    main .glass-panel.min-h-\[320px\] {
        min-height: 0 !important;
    }

    /* Tâches prioritaires : titre sur 2 lignes au lieu d'être coupé,
       boutons assez grands pour le doigt. */
    .deadline-row h4.truncate {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .deadline-row > div:last-child {
        gap: 8px !important;
    }
    .deadline-row button[onclick*="ouvrirModalOuvrirAvec"],
    .deadline-row button[onclick*="supprimerTacheManuelle"] {
        width: 34px;
        height: 34px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px !important;
    }
    .deadline-row button[onclick*="ouvrirModalOuvrirAvec"] i,
    .deadline-row button[onclick*="supprimerTacheManuelle"] i {
        font-size: 13px !important;
    }
    .deadline-row button[onclick*="toggleTaskCompletion"] {
        width: 28px !important;
        height: 28px !important;
        position: relative;
    }
    /* Zone de tap élargie autour de la case à cocher (sans la grossir) */
    .deadline-row button[onclick*="toggleTaskCompletion"]::after {
        content: '';
        position: absolute;
        inset: -8px;
    }

    /* ═══ TÂCHES (devoirs.html) ══════════════════════════════════════ */
    :is(#listeTachesAFaire, #listeTachesTerminees) > div > div.flex-1 {
        gap: 12px !important;
        padding-left: 8px !important;
    }
    /* L'icône de type fait doublon avec le badge « À rendre / Évaluation » :
       on la retire pour laisser la place au titre. */
    :is(#listeTachesAFaire, #listeTachesTerminees) > div > div.flex-1 > div.w-10.h-10 {
        display: none !important;
    }
    :is(#listeTachesAFaire, #listeTachesTerminees) h4.truncate {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3 !important;
    }
    :is(#listeTachesAFaire, #listeTachesTerminees) > div > div:last-child {
        gap: 8px !important;
        padding-right: 6px !important;
    }
    :is(#listeTachesAFaire, #listeTachesTerminees) > div > div:last-child > button {
        width: 36px;
        height: 36px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ═══ NOTES (notes.html) — tableau → fiches ══════════════════════
       Le tableau (600px mini) défilait de côté et cachait %, crédits et
       les boutons Modifier / Supprimer. Sur téléphone, une fiche par note :
         Nom de l'évaluation ................ [modifier] [supprimer]
         14,5 /20   72,5 %   Crédits 3
         commentaire éventuel                                         */
    #tableauNotes table,
    #tableauNotes tbody {
        display: block;
        min-width: 0 !important;
        width: 100%;
    }
    #tableauNotes thead {
        display: none;
    }
    /* Une rangée = une grille ; les bandeaux de matière (une seule
       cellule colspan) occupent toute la largeur. */
    #tableauNotes tbody tr {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        align-items: center;
        row-gap: 4px;
        padding: 10px 12px 10px 16px;
    }
    #tableauNotes tbody tr > td {
        display: block;
        padding: 0 !important;
        max-width: none !important;
    }
    #tableauNotes tbody tr > td[colspan] {
        grid-column: 1 / -1;
    }
    /* 1 nom */
    #tableauNotes tbody tr > td:nth-child(1):not([colspan]) {
        grid-column: 1 / 5;
        grid-row: 1;
        white-space: normal;
        font-size: 14px;
        line-height: 1.3;
        min-width: 0;
    }
    /* 2 note  3 barème  4 %  5 crédits */
    #tableauNotes tbody tr > td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        text-align: left !important;
        font-size: 16px;
    }
    #tableauNotes tbody tr > td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        text-align: left !important;
        font-size: 13px;
        margin-left: 3px;
    }
    #tableauNotes tbody tr > td:nth-child(3)::before {
        content: '/';
    }
    #tableauNotes tbody tr > td:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
        text-align: left !important;
        font-size: 13px;
        margin-left: 14px;
    }
    #tableauNotes tbody tr > td:nth-child(4)::after {
        content: ' %';
    }
    #tableauNotes tbody tr > td:nth-child(5) {
        grid-column: 4;
        grid-row: 2;
        text-align: left !important;
        font-size: 13px;
        margin-left: 14px;
    }
    #tableauNotes tbody tr > td:nth-child(5)[data-empty] {
        display: none;
    }
    #tableauNotes tbody tr > td:nth-child(5)[data-label]::before {
        content: attr(data-label) ' ';
    }
    /* 6 commentaire (ligne entière, seulement s'il existe) */
    #tableauNotes tbody tr > td:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: 3;
        white-space: normal;
        font-size: 12px !important;
    }
    #tableauNotes tbody tr > td:nth-child(6):empty {
        display: none;
    }
    /* 7 actions, à droite sur deux lignes */
    #tableauNotes tbody tr > td:nth-child(7) {
        grid-column: 5;
        grid-row: 1 / 3;
        display: flex;
        gap: 8px;
        padding-left: 10px !important;
    }
    #tableauNotes tbody tr > td:nth-child(7) > button {
        width: 36px;
        height: 36px;
        margin: 0 !important;
    }

    /* ═══ SIMULATEUR (simulateur.html) ═══════════════════════════════
       Coefficient, note réelle et objectif côte à côte : une matière
       tient en une carte compacte au lieu de 5 lignes empilées. */
    #matieres-container > div {
        padding: 14px !important;
    }
    #matieres-container > div > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #matieres-container > div > .grid > div:first-child,
    #matieres-container > div > .grid > div:last-child {
        grid-column: 1 / -1 !important;
    }
    #matieres-container > div > .grid > div:last-child {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
    #matieres-container > div > .grid > div:nth-child(2) .w-24 {
        width: 100% !important;
    }

    /* ═══ IA (ia.html) ═══════════════════════════════════════════════
       Cartes des IA sur une colonne : en 2 colonnes, le texte d'aide
       faisait une colonne de 3-4 mots par ligne. */
    #providerGrid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ═══ RÉSEAU (chat.html) ═════════════════════════════════════════
       Pas d'XP sur téléphone : on retire la pastille de l'en-tête, et
       le titre tient sur une ligne. */
    #chatMainContainer div[onclick*="ouvrirModalXP"] {
        display: none !important;
    }
    #chatMainContainer h2[data-i18n="chat_title"] {
        white-space: nowrap;
    }

    /* ═══ PAGE PUBLIQUE (index.html) ══════════════════════════════════
       Pas d'XP sur téléphone : ni dans les aperçus de l'app. */
    #landingPage .lp-xp {
        display: none !important;
    }
}

/* Entre 480 et 767px (grand téléphone à l'horizontale, petite tablette) :
   2 colonnes suffisent pour les IA. */
@media (min-width: 480px) and (max-width: 767px) {
    #providerGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Éléments propres au téléphone, injectés par mobile-enhance.js (chiffre
   clé des en-têtes…) : jamais affichés sur PC, même après un
   redimensionnement de la fenêtre. */
@media (min-width: 768px) {
    .st-m-only { display: none !important; }
}

/* ═══ Menu « Plus » : grille de toutes les sections ═══════════════════════
   Ouvert par l'onglet « Plus » de la barre du bas (shared.js). Tuiles à
   icône neutre, comme le reste du menu ; la page courante à l'accent. */
#mobileMenuSheet .sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 16px 8px;
}
#mobileMenuSheet .sheet-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 84px;
    padding: 12px 6px 10px;
    border-radius: var(--m-r-sm, 12px);
    background: var(--m-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--m-line, rgba(255, 255, 255, 0.07));
    color: var(--m-text, #e2e8f0);
    text-decoration: none;
    text-align: center;
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#mobileMenuSheet .sheet-tile:active { transform: scale(0.96); }
#mobileMenuSheet .sheet-tile-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--m-surface-3, rgba(255, 255, 255, 0.07));
    color: var(--m-text-2, #cbd5e1);
}
#mobileMenuSheet .sheet-tile-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
#mobileMenuSheet .sheet-tile.is-current {
    background: var(--m-accent-soft, rgba(242, 123, 33, 0.12));
    border-color: var(--m-accent-line, rgba(242, 123, 33, 0.4));
}
#mobileMenuSheet .sheet-tile.is-current .sheet-tile-icon {
    background: var(--m-accent-face, var(--color-accent, #f27b21));
    color: var(--m-ink, #16120e);
}
#mobileMenuSheet .sheet-tile-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--m-red-strong, #ef4444);
    border: 2px solid var(--m-surface, #15171b);
}
body.light-mode #mobileMenuSheet .sheet-tile { color: #1a202c; }

/* ═══ Éditeur de la barre du bas ══════════════════════════════════════════
   Panneau qui monte du bas ; chaque changement s'applique à la vraie barre. */
#stNavEditor {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: none;
    background: var(--m-overlay, rgba(0, 0, 0, 0.55));
}
#stNavEditor.open { display: block; }
#stNavEditor .ne-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    overflow-y: auto;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: var(--m-surface, #15171b);
    border-top: 1px solid var(--m-line-2, rgba(255, 255, 255, 0.1));
    box-shadow: var(--m-shadow-lg, 0 -20px 48px rgba(0, 0, 0, 0.5));
    color: var(--m-text, #f4f4f5);
    font-family: var(--m-font, inherit);
    animation: st-ne-up 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes st-ne-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #stNavEditor .ne-panel { animation: none; } }
body.st-reduce-motion #stNavEditor .ne-panel { animation: none; }
#stNavEditor .ne-panel:focus { outline: none; }
#stNavEditor .ne-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
#stNavEditor h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--m-text, #f4f4f5);
}
#stNavEditor .ne-desc {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--m-text-3, #9b9ea7);
}
#stNavEditor .ne-close {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--m-r-sm, 12px);
    background: var(--m-surface-2, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--m-line-2, rgba(255, 255, 255, 0.1));
    color: var(--m-text-2, #c8cad0);
}
/* Aperçu : la barre telle qu'elle sera */
#stNavEditor .ne-preview {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    min-height: 58px;
    padding: 6px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--m-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--m-line-2, rgba(255, 255, 255, 0.1));
}
#stNavEditor .ne-chip {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    color: var(--m-text-3, #9b9ea7);
}
#stNavEditor .ne-chip > span {
    max-width: 100%;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#stNavEditor .ne-chip.is-plus > i {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-accent-face, var(--color-accent, #f27b21));
    color: var(--m-ink, #16120e);
}
#stNavEditor .ne-title {
    margin: 4px 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-text-3, #9b9ea7);
}
#stNavEditor .ne-note {
    margin: 0 2px 8px;
    font-size: 12px;
    color: var(--m-amber-text, #fcc94d);
}
#stNavEditor .ne-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#stNavEditor .ne-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 6px 6px 8px;
    border-radius: var(--m-r-sm, 12px);
    background: var(--m-surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--m-line, rgba(255, 255, 255, 0.07));
}
#stNavEditor .ne-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--m-surface-3, rgba(255, 255, 255, 0.07));
    color: var(--m-text-2, #c8cad0);
}
#stNavEditor .ne-icon.is-plus {
    background: var(--m-accent-face, var(--color-accent, #f27b21));
    color: var(--m-ink, #16120e);
}
#stNavEditor .ne-label {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--m-text, #f4f4f5);
}
#stNavEditor .ne-icon-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--m-line-2, rgba(255, 255, 255, 0.1));
    color: var(--m-text-2, #c8cad0);
}
#stNavEditor .ne-icon-btn:disabled { opacity: 0.3; }
#stNavEditor .ne-icon-btn.is-remove { color: var(--m-red-text, #ff8c8c); }
#stNavEditor .ne-icon-btn.is-add {
    background: var(--m-accent-soft, rgba(242, 123, 33, 0.15));
    border-color: var(--m-accent-line, rgba(242, 123, 33, 0.42));
    color: var(--m-accent-text, #f9a96b);
}
#stNavEditor .ne-icon-btn:not(:disabled):active { transform: scale(0.94); }
#stNavEditor .ne-foot {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    padding: 12px 0 0;
    background: var(--m-surface, #15171b);
}
#stNavEditor .ne-btn {
    flex: 1;
    min-height: 48px;
    border-radius: var(--m-r-sm, 12px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    background: var(--m-surface-2, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--m-line-2, rgba(255, 255, 255, 0.1));
    color: var(--m-text, #f4f4f5);
}
#stNavEditor .ne-btn.ne-primary {
    background: var(--m-accent-face, var(--color-accent, #f27b21));
    border-color: transparent;
    color: var(--m-ink, #16120e);
}

/* Barre du bas personnalisée : un libellé long (Ressources, Simulateur) ne
   déborde jamais sur l'onglet voisin, même sur un petit écran. */
#mobileBottomNav > a > span:not(.badge-nav) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}