/* e-Fluenceur — Styles spécifiques */

/* ── Modale Aide ────────────────────────────────────────────────────────────── */
#modale-aide .modal-dialog,
#modale-eleves .modal-dialog,
#modale-stats .modal-dialog,
#modale-evolution .modal-dialog,
#modale-imprimer .modal-dialog { max-width: min(1400px, 95vw) }

/* 8 élèves max par ligne : 8×96px + 7 gaps + 2× padding modal body */
#modale-choix-eleve .modal-dialog { max-width: min(calc(768px + 9rem + 20px), 95vw) }

#modale-apropos .modal-dialog { max-width: 800px }


/* Alignement colonnes dans la liste de classe */
#pane-liste .liste-badge-niveau { min-width: 44px; text-align: center; flex-shrink: 0; }
#pane-liste .liste-eleve-avatar { flex-shrink: 0; }

/* Boutons d'action dans l'onglet Liste de classe */
#pane-liste .btn-vert,
#pane-liste .btn-secondaire,
#pane-liste .btn-orange,
#pane-liste .btn-rouge { font-size: 0.8rem; padding: 0.15rem 0.55rem; }

/* Onglets de la modale Élèves (sur fond coloré) */
#modale-eleves .nav-tabs { border-bottom: none; }
#modale-eleves .nav-tabs .nav-link { color: rgba(255,255,255,0.7); border-color: transparent; border-radius: 6px 6px 0 0; }
#modale-eleves .nav-tabs .nav-link:hover:not(.active) { color: #fff; background-color: rgba(255,255,255,0.12); border-color: transparent; }
#modale-eleves .nav-tabs .nav-link.active { color: var(--bs-body-color); background-color: var(--bs-modal-bg); border-color: rgba(255,255,255,0.25) rgba(255,255,255,0.25) var(--bs-modal-bg); }

/* Combobox prénom */
.prenom-dropdown {
    position: fixed;
    z-index: 2000;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.prenom-dropdown-item {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prenom-dropdown-item .fw-semibold {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prenom-dropdown-item .badge {
    flex-shrink: 0;
}

.prenom-dropdown-item:hover,
.prenom-dropdown-item:focus {
    background: var(--bs-secondary-bg);
    outline: none;
}

/* =============================================================
   CLASSEUR — Menu latéral collapsible (remplace la navbar Bootstrap
   horizontale + hamburger + #action-bar), repris d'e-difice.
   ============================================================= */

:root {
    --classeur-ouvert: 260px;
    --classeur-replie: 76px;
}

#header-nav {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    min-height: 86px;
}
.btn-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px;
    border: none; border-radius: 10px;
    background: transparent; color: #fff;
    cursor: pointer;
}
.btn-menu span {
    display: block; width: 20px; height: 2px; margin: 0 auto;
    background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* min-width: 0 : .marque est elle-même un enfant flex de #header-nav — sans
   ça, elle refuse de rétrécir sous la largeur de son contenu (comportement
   par défaut d'un enfant flex), ce qui peut forcer tout l'en-tête à
   déborder du viewport mobile si la description devient longue. */
.marque { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; font-family: 'Cairo Play', sans-serif; font-size: 1.15rem }
.marque-logo img { display: block; width: 28px; height: 28px; border-radius: 6px; object-fit: contain }
/* Description masquée en mobile (place limitée à côté du nom) : seule
   .entete-description (desktop, voir plus bas) l'affiche. */
.marque small { display: none }
.entete-description { display: none }
.actions-bureau { display: none }

@media (min-width: 992px) {
    .btn-menu { display: none }
    .marque { display: none }

    body {
        --classeur-marge: var(--classeur-replie);
        --classeur-marge-contenu: var(--classeur-replie);
    }
    body:has(#classeur:hover),
    body:has(#classeur:focus-within),
    body.menu-epingle {
        --classeur-marge: var(--classeur-ouvert);
    }
    /* --classeur-marge-contenu (contenu central) ne suit PAS le survol :
       seul l'épinglage le pousse vraiment, un simple survol/focus laisse le
       classeur déplié s'étendre par-dessus en ombre. */
    body.menu-epingle {
        --classeur-marge-contenu: var(--classeur-ouvert);
    }

    /* Même taille/police que le titre (.classeur-entete strong, 1.05rem
       Cairo Play) — les deux textes désignent la même app, pas de hiérarchie
       de taille entre eux. */
    .entete-description {
        display: block; flex-shrink: 1; min-width: 0;
        margin-left: var(--classeur-marge);
        margin-right: auto;
        color: rgba(255,255,255,.6); font-size: 1.05rem;
        font-family: 'Cairo Play', sans-serif;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        transition: margin-left .2s ease;
    }

    .actions-bureau {
        order: 4;
        display: flex; align-items: center; gap: 2px;
        background: rgba(0,0,0,.45); border-radius: 8px; padding: 2px 4px;
    }
    .actions-bureau button {
        border: none; background: transparent; color: #fff; opacity: .7;
        padding: 8px 11px; font-size: 1.3rem; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: opacity .2s;
    }
    .actions-bureau button:hover { opacity: 1 }
    #li-immersion { order: 9999 }
}

/* ── Classeur (menu latéral) ─────────────────────────────────────────────── */
.voile {
    position: fixed; inset: 0; z-index: 20;
    background: rgba(15, 18, 24, .45);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
}
.voile.ouvert { opacity: 1; pointer-events: auto }

.mise-en-page { display: flex; flex: 1; min-height: 0 }

#classeur.classeur {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 21;
    width: min(300px, 84vw);
    background: var(--bs-dark, #212529);
    color: #fff;
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.16,.84,.44,1);
    box-shadow: 10px 0 30px rgba(0,0,0,.25);
}
#classeur.classeur.ouvert { transform: translateX(0) }

[data-bs-theme="dark"] #header-nav { background-color: #1e1e1e !important }
[data-bs-theme="dark"] #classeur.classeur { background-color: #1e1e1e }

.classeur-entete {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 18px 14px;
    min-height: 86px;
}
.classeur-entete .pastille img { display: block; width: 100%; height: 100%; border-radius: 9px; object-fit: contain }
.classeur-entete .pastille {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.entete-texte { display: flex; flex-direction: column; min-width: 0 }
.classeur-entete strong { font-family: 'Cairo Play', sans-serif; font-size: 1.05rem; white-space: nowrap }
.classeur-fermer, .classeur-epingle {
    margin-left: auto; flex-shrink: 0;
    width: 32px; height: 32px; border: none; border-radius: 8px;
    background: rgba(255,255,255,.08);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.classeur-fermer { display: flex; color: #fff }
.classeur-epingle { display: none; color: rgba(255,255,255,.6) }
.classeur-epingle.active { color: var(--app-couleur, #3498db); background: color-mix(in srgb, var(--app-couleur, #3498db) 18%, transparent) }

/* padding-top: 0 (et non 10px comme en bas) : le premier item touche ainsi
   exactement le bas de .classeur-entete (86px) — sans ça, son survol/sa
   surbrillance « active » démarre 10px plus bas que le bord du header,
   décalage visible en comparant avec la jonction header/contenu à droite
   (qui, elle, n'a pas cet espace). */
.pages { flex: 1; overflow-y: auto; padding: 0 0 10px; display: flex; flex-direction: column }
#classeur-manuel { margin-top: auto }

.page-item .libelle {
    display: inline-block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-item .libelle.revele { text-overflow: clip }
.page-item .libelle.revele .libelle-texte { display: inline-block; transition: transform .4s ease }

.page-item { position: relative }
.page-item > a, .page-item > button {
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px 14px 22px;
    border: none; background: transparent; color: #fff;
    font-size: .98rem; text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.page-item::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 4px; border-radius: 0 3px 3px 0;
    background: var(--page-couleur);
}
.page-item.item-bleu   { --page-couleur: #2f6fe1 }
.page-item.item-vert   { --page-couleur: #2fa84f }
.page-item.item-orange { --page-couleur: #e08a1e }
.page-item.item-rouge  { --page-couleur: #e0483d }
.page-item.item-violet { --page-couleur: #8e44ad }
.page-item .icone {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    background: rgba(255,255,255,.08);
    color: var(--page-couleur);
}
.page-item.actif > a, .page-item.actif > button {
    background-color: color-mix(in srgb, var(--app-couleur, #3498db) 20%, transparent);
}
.page-item:not(.actif) > a:hover, .page-item:not(.actif) > button:hover { background: rgba(255,255,255,.08) }
.page-item > a:active, .page-item > button:active { background: rgba(255,255,255,.1) }
.page-item button:disabled { opacity: .4; cursor: not-allowed }
.page-item button:disabled:hover { background: transparent }

.classeur-pied { padding: 14px 18px 20px; border-top: 1px solid rgba(255,255,255,.08) }
.classeur-pied .etiquette { font-size: .72rem; color: rgba(255,255,255,.45); margin: 0 0 10px; white-space: nowrap }
.jetons { display: flex; gap: 10px; flex-wrap: wrap }
.jeton {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    border: none; background: rgba(255,255,255,.08); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.jeton:hover, .jeton:active { background: rgba(255,255,255,.18) }

body.chargement #classeur,
body.chargement .mise-en-page,
body.chargement .entete-description,
body.chargement #footer-forge-lien { transition: none !important }

@media (min-width: 992px) {
    .voile { display: none }
    #classeur.classeur {
        position: fixed; top: 0; bottom: 0;
        height: 100vh; width: var(--classeur-replie);
        transform: none; box-shadow: none;
        transition: width .2s ease;
        z-index: 15;
    }
    .classeur-fermer { display: none }
    .classeur-pied { display: none }
    /* Poussée sur .mise-en-page (en padding), pas sur main (en margin) : main
       a besoin de toute sa propriété margin pour se centrer (margin: 0 auto,
       voir plus bas) — un margin-left fixe dessus empêcherait le centrage,
       comme mx-auto l'empêchait d'empêcher la poussée dans l'autre sens.
       --classeur-marge-contenu : ne pousse qu'à l'épinglage (voir plus haut). */
    .mise-en-page { padding-left: var(--classeur-marge-contenu); transition: padding-left .2s ease }
    #footer-forge-lien { margin-left: var(--classeur-marge) !important; transition: margin-left .2s ease }

    #classeur .libelle { display: none }
    #classeur .page-item > a, #classeur .page-item > button { justify-content: flex-start; padding-left: 22px; padding-right: 18px }

    #classeur .classeur-entete { justify-content: flex-start; padding: 0 18px }
    #classeur .classeur-entete .entete-texte { display: none }

    #classeur.classeur:hover, #classeur.classeur:focus-within, #classeur.classeur.epingle {
        width: var(--classeur-ouvert);
        box-shadow: 10px 0 30px rgba(0,0,0,.18);
    }
    #classeur.classeur:hover .libelle, #classeur.classeur:focus-within .libelle, #classeur.classeur.epingle .libelle {
        display: block;
    }
    #classeur.classeur:hover .entete-texte, #classeur.classeur:focus-within .entete-texte, #classeur.classeur.epingle .entete-texte {
        display: flex; flex: 1;
    }
    #classeur.classeur:hover .classeur-epingle, #classeur.classeur:focus-within .classeur-epingle, #classeur.classeur.epingle .classeur-epingle {
        display: flex;
    }

    /* Posée un court instant par JS juste après un désépinglage, pour annuler
       l'effet déplié de :hover/:focus-within malgré la souris encore dessus
       (voir appliquerEpingle dans index.html). Même poids que les règles
       :hover/:focus-within/.epingle ci-dessus (#classeur.classeur + 2 classes) et
       placée après elles : à spécificité égale, l'ordre dans la feuille décide. */
    #classeur.classeur.repli-force { width: var(--classeur-replie); box-shadow: none }
    #classeur.classeur.repli-force .libelle,
    #classeur.classeur.repli-force .entete-texte,
    #classeur.classeur.repli-force .classeur-epingle,
    #classeur.classeur.repli-force .chevron { display: none }
}

/* Icône du bouton cloud (Nextcloud) — classe partagée entre la copie header
   et sa copie dans #classeur-jetons (voir ncMettreAJourIconeHeader en JS) */
.icone-nuage { color: rgba(255,255,255,.55); transition: color 0.3s }
.icone-nuage.nc-connecte { color: #27ae60 }
.icone-nuage.nc-sync     { color: #3498db }
.icone-nuage.nc-erreur   { color: #e74c3c }
@keyframes nc-icon-clignote {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}
.icone-nuage.nc-sync { animation: nc-icon-clignote 0.9s ease-in-out infinite }

/* ── Modes élève / TNI ───────────────────────────────────────────────────────── */
html.mode-eleve #li-partage { display: none !important }
html.mode-eleve #btn-choix-eleve-modifier-liste { display: none !important }
html.mode-eleve #nav-gauche .page-item:not(#li-deconnexion):not(#li-modifier-profil):not(#li-champions) { display: none !important }
html.mode-eleve.champions-masque #li-champions { display: none !important }
html.champions-desactive #li-champions { display: none !important }
html.mode-eleve #li-nuage { display: none !important }
/* #li-mode-vue et #li-params-eleve restent visibles en mode élève —
   pas de #li-config générique dans e-fluenceur (BOUTON_CONFIG = false) */
html.mode-eleve #header-boutons:not(:has(> button:not(#li-partage):not(#li-nuage))) { display: none !important }
html.mode-eleve #config-section-champions { display: none !important }

/* ── Modale Mode vue — grands boutons sélecteur ─────────────────────────── */
.mode-vue-btn { min-height: 120px; position: relative }
.mode-vue-actuel { position: absolute; bottom: 0.6rem; font-size: 0.7em }

/* ── Pavé numérique — bouton Retour exclu ───────────────────────────────── */
#mode-vue-panel-defi .btn:not(#btn-defi-retour) { height: 3rem; display: flex; align-items: center; justify-content: center }
.champs-eleve-lecture { display: none !important }
#bloc-eleve-actuel {
    display: none;
    margin-left: auto;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: 4px;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
#bloc-eleve-actuel:hover {
    border-color: var(--eleve-couleur, #6c757d);
    background: color-mix(in srgb, var(--eleve-couleur, #6c757d) 10%, var(--bs-secondary-bg));
}

.eleve-vignette {
    position: relative;
    inset: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--eleve-couleur, #6c757d);
    border-radius: 10px;
    padding: 6px;
    color: #fff;
    gap: 4px;
    overflow: visible;
    text-align: center;
}
#eleve-actuel-fa {
    font-size: 1.6rem;
    flex-shrink: 0;
}
html.mode-immersion #eleve-actuel-fa { font-size: 1.2rem }
.eleve-vignette-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.eleve-vignette-info > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
#eleve-actuel-prenom { font-size: 0.75rem }
#eleve-actuel-niveau {
    position: absolute;
    top: -9px;
    left: -6px;
    font-size: 0.6rem;
    z-index: 1;
    color: #fff !important;
}
/* ── Mode immersion ──────────────────────────────────────────────────────────
   Déclenché par le bouton Immersion ou la touche F.
   Masque header et footer et passe en plein écran navigateur.
   ─────────────────────────────────────────────────────────────────────────── */
html.mode-immersion #header-nav,
html.mode-immersion #footer-nav,
html.mode-immersion #classeur { display: none !important }
html.mode-immersion .mise-en-page { padding-left: 0 !important }

/* Masquer instruction-lecture en mode immersion */
html.mode-immersion #instruction-lecture {
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
}

/* Masquer ligne-info-texte en mode immersion */
html.mode-immersion #ecran-lecture .ligne-info-texte {
    max-height: 0 !important;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
}


/* En mode immersion + lecture-mot-choisi : remplacer démarrer/arrêter par les boutons suite */
html.mode-immersion #ecran-lecture.lecture-mot-choisi .btn-group,
html.mode-immersion #ecran-lecture.lecture-mot-choisi #btn-arreter,
html.mode-immersion #ecran-lecture.lecture-mot-choisi #info-auto-stop { display: none !important }
html.mode-immersion #ecran-lecture.lecture-mot-choisi #barre-outils { opacity: 1 !important; pointer-events: auto !important }

#btn-quitter-immersion {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s;
    align-items: center;
    justify-content: center;
}
html.mode-immersion #btn-quitter-immersion { display: flex }
#btn-quitter-immersion:hover { opacity: 1 }

/* ── Boutons visibles uniquement en mode élève ──── */
#li-deconnexion, #li-modifier-profil { display: none !important }
html.mode-eleve #li-deconnexion,
html.mode-eleve #li-modifier-profil { display: block !important }
html.mode-eleve #li-modifier-profil.profil-masque { display: none !important }
html.eleve-verrouille #li-deconnexion { display: none !important }
html.mode-eleve #btn-evaluation,
html.mode-eleve #btn-evaluation-compact { display: none !important }
html.mode-eleve #res-export-section { display: none !important }
html.mode-eleve #btn-pdf-eleve { display: none !important }


/* ── Modale choix élève ─────────────────────────────────────────────────── */
.btn-choix-eleve {
    width: 84px;
    height: 84px;
    background: var(--choix-eleve-couleur, #6c757d);
    border: none;
    border-radius: 14px;
    overflow: hidden;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 3px;
    text-align: center;
}
.btn-choix-eleve:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--choix-eleve-couleur, #6c757d) 35%, transparent);
}
.btn-choix-eleve:active { transform: translateY(0) }
.choix-eleve-icone {
    font-size: 1.6rem;
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-choix-eleve:hover .choix-eleve-icone {
    transform: scale(1.3) rotate(-8deg);
}
.choix-eleve-prenom {
    font-size: 0.75rem;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.choix-eleve-badge {
    font-size: 0.6rem;
    background: rgba(0,0,0,0.2) !important;
    color: #fff !important;
    padding: 1px 5px;
}

/* ── Boutons de niveau anonyme ──────────────────────────────────────────────── */
.btn-anon-niveau {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 0;
}
.btn-anon-niveau:hover {
    transform: scale(1.2);
    z-index: 1;
}

/* ── QR code partage ────────────────────────────────────────────────────────── */
#partage-qrcode canvas,
#partage-qrcode-eleve canvas,
#partage-qrcode-tni canvas { max-width: 350px; width: 100%; height: auto !important; border-radius: 8px }

/* Pas de ligne de bordure (grise Bootstrap, ne correspond à rien côté
   classeur) : même traitement que #classeur — juste le contraste de fond
   pour séparer le panneau du contenu. */
#modale-params-eleve { --bs-offcanvas-border-width: 0 }
/* Même fond que #classeur : var(--bs-dark) par défaut, re-assombri à
   #1e1e1e quand le thème racine est sombre. */
#modale-params-eleve { background-color: var(--bs-dark, #212529) }
[data-bs-theme="dark"] #modale-params-eleve { background-color: #1e1e1e }
/* En-tête du panneau — bandeau plein de la couleur de l'app (style
   e-template d'origine, posé en JS), pas le traitement teinté + pastille
   des autres modales ci-dessous. min-height: 86px, toujours égale à
   #header-nav : jonction visuelle sans décalage une fois le panneau ouvert. */
#modale-params-eleve-header {
    min-height: 86px;
    border-bottom: none !important;
}
#modale-params-eleve-titre { font-size: 1.3rem }
/* Neutralise le traitement générique hérité de .offcanvas-header.border-0
   plus bas (fond teinté + icône en pastille ronde) : ici le bandeau est
   déjà plein de couleur, l'icône reste une simple icône blanche dans le
   texte, sans décor supplémentaire. */
#modale-params-eleve-titre > i {
    width: auto; height: auto; border-radius: 0;
    background: none; color: inherit; font-size: inherit;
}
/* Pied du panneau — même hauteur que #footer-nav (--footer-hauteur, mesurée
   en JS). Panneau pleine hauteur (plus de bottom: var(--pied-hauteur) pour
   s'arrêter au-dessus du footer de page) : son propre pied (bouton
   Réinitialiser) tient ce rôle à la place. flex-shrink: 0 indispensable :
   #modale-params-eleve est une colonne flex dont .offcanvas-body (flex-grow)
   prend toute la place restante — sans ça, le flex-shrink par défaut (1)
   compresse légèrement ce pied sous var(--footer-hauteur). */
#modale-params-eleve-pied { height: var(--footer-hauteur, 44px); flex-shrink: 0 }

/* Push sidebar — tout le contenu se décale quand le panneau Mode élèves
   s'ouvre (header, contenu, footer), pas seulement le chrome en laissant le
   contenu recouvert. Une seule variable --config-marge, consommée à
   l'identique par les trois (un seul bloc de règles), plutôt que l'ancien
   système où body se réduisait et seul #footer-nav compensait par une marge
   négative — le contenu central n'était alors pas poussé du tout.
   html reçoit le même fond que body pour masquer le liseré blanc le temps
   que l'offcanvas apparaisse par-dessus. */
html { background-color: var(--bs-body-bg) }
html.no-transition-init #header-nav,
html.no-transition-init .mise-en-page,
html.no-transition-init #footer-nav,
html.no-transition-init .offcanvas { transition: none !important }
html.config-etait-ouvert body { --config-marge: var(--largeur-config-init, 400px) }
body { --config-marge: 0px }
body.config-ouvert { --config-marge: var(--config-decalage, var(--bs-offcanvas-width, 400px)) }
#header-nav, #footer-nav {
    margin-right: var(--config-marge);
    transition: margin-right 0.3s ease-in-out;
}
/* #main-content (dans .mise-en-page) a besoin de toute sa marge pour se
   centrer (margin: 0 auto, voir plus bas) : la poussée passe donc par un
   padding-right sur son parent plutôt qu'un margin-right direct dessus,
   même principe que le padding-left du classeur. */
.mise-en-page {
    padding-right: var(--config-marge);
    transition: padding-right 0.3s ease-in-out;
}

/* Mobile portrait — panneau pleine largeur, push sidebar désactivé */
@media (orientation: portrait) and (max-width: 767.98px) {
    #modale-params-eleve { --bs-offcanvas-width: 100% }
    html.config-etait-ouvert body,
    body.config-ouvert { --config-marge: 0px }
}

/* Bouton Mode élèves (roue crantée) actif : prend la couleur principale de
   l'application quand le panneau est ouvert. e-fluenceur n'utilise pas
   BOUTON_CONFIG générique du template : son équivalent est li-params-eleve. */
body.config-ouvert #li-params-eleve { color: var(--app-couleur, #3498db) !important }

/* Poignée de redimensionnement — bande verticale sur le bord gauche de l'offcanvas */
#config-resize-handle {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    border-left: 3px solid transparent;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#config-resize-handle:hover,
#config-resize-handle.actif { border-left-color: var(--bs-border-color) }
/* Icône grip — pastille centrée verticalement, chevauche le bord gauche pour
   rester visible aussi bien sur le fond de la page que sur celui de l'offcanvas */
#config-resize-handle i {
    position: absolute;
    left: -11px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 32px;
    border-radius: 9px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.7em;
    transition: color 0.2s, border-width 0.2s;
}
#config-resize-handle:hover i,
#config-resize-handle.actif i { color: var(--bs-body-color); border-width: 3px }
@media (orientation: portrait) and (max-width: 767.98px) {
    #config-resize-handle { display: none }
}

/* ── Titres de section (Config / À propos) — cadre de fond continu, coins
   arrondis au même rayon que .icone (classeur, 8px), repris d'e-difice. */
.config-section-title {
    background: var(--bs-secondary-bg);
    padding: 12px;
    margin: 4px 0 16px !important;
    border-radius: 8px;
}
.config-section-title > .fw-bold:first-child {
    font-size: 1rem; font-weight: 700 !important;
    margin-bottom: .6rem !important;
}
.config-section-title .list-group,
.config-section-title .list-group-flush {
    border-radius: 8px;
    overflow: hidden;
}
.config-section-title .list-group-item:first-child {
    border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.config-section-title .list-group-item:last-child {
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
/* Icônes des champs du panneau Mode élèves — même recette que .icone du
   classeur (30px, coins à 8px, fond rgba(255,255,255,.08)). */
#modale-params-eleve .icone {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    background: rgba(255,255,255,.08);
    color: var(--app-couleur, #3498db);
}

/* Carte des modales (et du panneau Mode élèves) — direction "classeur
   étendu" : un liseré de couleur primaire pleine hauteur à gauche, coins
   vifs (rayon à 0), repris d'e-difice. */
.modal-content, .offcanvas {
    border-left: 6px solid var(--app-couleur, #3498db);
    border-radius: 0;
}
.modal-header, .modal-footer {
    border-radius: 0 !important;
}

/* Header générique des modales (hors panneau Mode élèves, voir plus haut) :
   fond teinté (12% de la couleur de l'app) + icône de titre en pastille
   ronde pleine — repris d'e-difice. */
.modal-header.border-0, .offcanvas-header.border-0 {
    background: color-mix(in srgb, var(--app-couleur, #3498db) 12%, #1e1e1e);
    border-bottom: 1px solid var(--bs-border-color) !important;
}
.modal-header.border-0 .modal-title > i,
.offcanvas-header.border-0 .offcanvas-title > i {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--app-couleur, #3498db);
    color: #fff;
    font-size: .95rem;
}
.modal-header.border-0 .modal-title,
.offcanvas-header.border-0 .offcanvas-title {
    font-size: .98rem;
}

/* Entrée des modales (zoom + fondu), reprise d'e-difice. */
.modal.fade .modal-dialog {
    transform: scale(.92);
    transition: transform .3s cubic-bezier(0, 1, .3, 1);
}
.modal.show .modal-dialog {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

/* Boutons .btn-pill / .copie-url — modèle repris d'e-difice, utilisés par
   #btn-config-reset (panneau Mode élèves), le bouton Fermer de la modale
   Nouveautés et le bouton Copier de la modale Partage. */
.btn-pill {
    --btn-couleur: var(--app-couleur, #3498db);
    background: var(--btn-couleur);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .05em;
    padding: .35em;
    padding-left: 1.2em;
    padding-right: 3.3em;
    border: none;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    height: 2.8em;
    box-shadow: inset 0 0 1.6em -.6em color-mix(in srgb, var(--btn-couleur) 60%, black);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.btn-pill-icon {
    background: #fff;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 4px;
    box-shadow: .1em .1em .6em .2em color-mix(in srgb, var(--btn-couleur) 60%, black);
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: .3em;
    transition: all .3s;
}
.btn-pill-icon i {
    color: var(--btn-couleur);
    font-size: 1.1em;
    display: block;
    line-height: 1;
}
.btn-pill:hover .btn-pill-icon {
    width: calc(100% - .6em);
}
.btn-pill:hover .btn-pill-icon i {
    transform: translateX(.1em);
}
.btn-pill:active .btn-pill-icon {
    transform: scale(.95);
}

/* Cartes Auteur / Tchap / Liens / Remerciements (modale À propos) — modèle
   repris d'e-difice (icône ronde + séparateur + texte sur deux lignes +
   flèche), couleur unique (COULEUR_APP_PRIMAIRE, via --btn-couleur) sur
   toutes les sections. */
.carte-lien {
    --btn-couleur: var(--app-couleur, #3498db);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    color: var(--bs-body-color);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.carte-lien:hover {
    background: hsl(from var(--btn-couleur) h s 45%);
    border-color: hsl(from var(--btn-couleur) h s 45%);
    color: #fff;
}
.carte-lien:active {
    background: hsl(from var(--btn-couleur) h s 35%);
    border-color: hsl(from var(--btn-couleur) h s 35%);
    transition-duration: .08s;
}
.carte-lien:focus-visible {
    outline: 3px solid var(--btn-couleur);
    outline-offset: 2px;
}
.carte-lien-icone {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--btn-couleur);
    color: #fff;
    font-size: 1rem;
    transition: background-color .2s ease, color .2s ease;
}
.carte-lien-icone img { width: 20px; height: 20px }
.carte-lien:hover .carte-lien-icone {
    background: #fff;
    color: hsl(from var(--btn-couleur) h s 45%);
}
.carte-lien:active .carte-lien-icone {
    color: hsl(from var(--btn-couleur) h s 35%);
}
.carte-lien-fleche {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .75rem;
    color: var(--bs-secondary-color);
    transition: transform .2s ease, color .2s ease;
}
.carte-lien:hover .carte-lien-fleche {
    transform: translate(2px, -2px);
    color: #fff;
}
@media (prefers-reduced-motion: reduce) {
    .carte-lien, .carte-lien * { transition: none !important }
}

/* Bouton Copier (modale Partage) — modèle repris d'e-difice (bloc : champ en
   haut, bouton pleine largeur en bas), --btn-couleur même convention que
   .btn-pill. */
.copie-url {
    --btn-couleur: var(--app-couleur, #3498db);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
}
.copie-url-champ {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    background: var(--bs-tertiary-bg);
    padding: 10px 14px;
    font-weight: 600;
}
.copie-url-champ:focus {
    outline: none;
    box-shadow: none;
}
.copie-url-bouton {
    display: block;
    width: 100%;
    border: 0;
    padding: 10px 14px;
    background: var(--btn-couleur);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
}
.copie-url-bouton:hover { background: color-mix(in srgb, var(--btn-couleur) 80%, black) }
.copie-url-bouton:active { background: color-mix(in srgb, var(--btn-couleur) 65%, black) }

/* ── Modale session (overlay custom) ────────────────────────────────────────── */
.modale-header { background: #25a277 }
[data-bs-theme="dark"] .modale { background: var(--bs-body-bg); color: var(--bs-body-color) }

/* ── Main ─────────────────────────────────────────────────────────────────── */
/* max-width ajusté dynamiquement en JS (slider-largeur → main.style.maxWidth,
   voir script.js), donc toujours ce sélecteur (pas .ecran) qui doit porter
   à la fois le gabarit ET le centrage.
   Centré via mx-auto (Bootstrap) à l'origine — retiré lors du passage au
   classeur car mx-auto (margin-left: auto !important) entrait en conflit
   avec le margin-left de poussée (--classeur-marge) porté par main : les
   deux se disputaient la même propriété, mx-auto l'emportait toujours et
   annulait la poussée. La poussée vit maintenant sur .mise-en-page (son
   parent, en padding-left, voir plus bas) : main retrouve une propriété
   margin entièrement libre pour se centrer normalement avec margin: 0 auto. */
main { max-width: 1100px; margin: 0 auto }

/* ── Ecrans (JS toggle) ─────────────────────────────────────────────────────── */
.ecran { display: flex; flex-direction: column; min-height: 0; flex: 1 }
.ecran-actif { visibility: visible; opacity: 1 }
.ecran-cache { display: none }
/* Masque l'écran de saisie dès le chargement si un texte est disponible (anti-flash) */
html.chargement-texte #ecran-saisie { display: none }

/* ── Consigne ─────────────────────────────────────────────────────────────── */
.consigne { margin: 0 0 12px 0; font-size: 1em; color: var(--bs-secondary-color) }

.btn-sm { padding: 7px 18px; font-size: 0.85em }

/* ── Actions ──────────────────────────────────────────────────────────────── */
.actions {
    display: flex; gap: 10px; justify-content: center; align-items: center;
    margin-top: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.actions-secondaires { margin-top: 24px }
.actions-groupe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }

/* ── Infobox ───────────────────────────────────────────────────────────────── */
.infobox {
    display: flex; align-items: center; margin-top: auto; padding: 12px 16px;
    text-decoration: none; font-size: 0.95em; transition: all 0.2s;
    background: #e8f6ef; border: 1px solid #a8dfbf; border-radius: 6px; color: #1e8461;
}
.infobox:hover { background: #d4edda }
.infobox-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: #25a277; color: #fff;
    border-radius: 50%; font-size: 1.1em; font-weight: 700; flex-shrink: 0;
}
.infobox-text { flex: 1; text-align: center; padding-right: 28px }
[data-bs-theme="dark"] .infobox { background: #1a3d2e; border-color: #2a5c43; color: #6dd9a8 }
[data-bs-theme="dark"] .infobox:hover { background: #1e4a35 }

/* ── Export ────────────────────────────────────────────────────────────────── */
.cartes-export {
    display: flex; flex-direction: column;
    gap: 12px; margin: 16px 0;
}
.carte-export { flex: 1 1 100% }
.carte-export-texte { margin: 0; font-size: 0.85em; color: var(--bs-secondary-color); text-align: center; line-height: 1.4; flex: 1 }

/* ── Ecran 1 — Saisie ──────────────────────────────────────────────────────── */
#texte-input {
    width: 100%; flex: 1; min-height: 150px; padding: 14px; font-size: 1.1em;
    line-height: 1.6; border: 2px solid var(--bs-border-color); border-radius: 6px;
    resize: none; overflow-y: auto; font-family: inherit;
    background: var(--bs-body-bg); color: var(--bs-body-color);
}
#texte-input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,0.15) }

/* ── Ecran 2 — Lecture ─────────────────────────────────────────────────────── */
#ecran-lecture { overflow: hidden; margin-top: -8px }
#bandeau-sticky {
    flex-shrink: 0; background: var(--bs-body-bg);
}
.lecture-contenu { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative }
.resize-handle {
    position: absolute; top: 0; bottom: 0; width: 14px;
    cursor: ew-resize; z-index: 10;
}
.resize-handle::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4px; height: 36px; border-radius: 2px;
    background: var(--bs-border-color);
    opacity: 0; transition: opacity 0.15s, background 0.15s;
}
.resize-handle:hover::after, .resize-handle.actif::after {
    opacity: 1; background: var(--app-couleur);
}
.resize-handle-gauche { left: 0; }
.resize-handle-droite { right: 0; }
#barre-outils {
    display: flex; align-items: stretch; gap: 16px; flex-shrink: 0;
    padding: 4px 0; margin-bottom: 0;
}
#bloc-chrono {
    display: flex; align-items: center; gap: 16px;
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 12px 16px;
}
#chronometre { font-size: 2.3em; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; display: inline-flex; align-items: center; gap: 8px; background: #74b9ff; border-radius: 4px; padding: 4px 14px 6px; transform: rotate(-1.5deg); box-shadow: 2px 3px 0 rgba(0,0,0,.18); border-bottom: 3px solid rgba(0,0,0,.12) }
[data-bs-theme="dark"] #chronometre { background: var(--bs-tertiary-bg); color: #74b9ff }
.chrono-icone { vertical-align: middle; margin-top: 3px; font-size: 40px }

#boutons-controle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
#boutons-controle .btn { padding: 10px 24px; font-size: 1.05em }
#btn-demarrer-toggle { padding-left: 18px !important; padding-right: 18px !important; border-left: 1px solid rgba(255,255,255,0.4) !important }
#btn-arreter, #info-auto-stop { width: 120px; padding: 10px 8px !important; font-size: 1.05em !important; line-height: 1.5 !important; box-sizing: border-box; justify-content: center }
#btn-demarrer, #btn-demarrer-toggle { justify-content: center }
#btn-demarrer, #btn-demarrer::before, #btn-demarrer::after { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important }

/* ── Toggle Démarrer — push-button avec flèche Bootstrap ─────────────────
   ::after = caret Bootstrap, ::before = inutilisable (masqué).
   L'ombre est simulée par box-shadow, animée en sync avec translateY.    */
#btn-demarrer-toggle {
    background-color: #25a277;
    box-shadow: 0 4px 0 0 color-mix(in srgb, #25a277 60%, black);

    --bs-btn-hover-bg: #25a277;
    --bs-btn-active-bg: #25a277;
    transition: transform 0.5s cubic-bezier(0, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0, 1, 0.3, 1);
}
#btn-demarrer-toggle::before { display: none }
#btn-demarrer-toggle:hover:not(:disabled)  { box-shadow: 0 3px 0 0 color-mix(in srgb, #25a277 60%, black) }
#btn-demarrer-toggle:active:not(:disabled) { box-shadow: none; transition: none }
#btn-demarrer-toggle::after {
    display: inline-block;
    position: static;
    top: auto; right: auto; bottom: auto; left: auto;
    width: auto; height: auto;
    z-index: auto;
    background-color: transparent;
    border-radius: 0;
    margin-left: 0;
    vertical-align: .255em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    transition: none;
    transform: none;
}
#btn-demarrer-toggle.btn-stop-auto { background-color: #e74c3c; box-shadow: 0 4px 0 0 #922b21; --bs-btn-hover-bg: #e74c3c; --bs-btn-active-bg: #e74c3c }
#btn-demarrer-toggle.btn-stop-auto:hover:not(:disabled) { box-shadow: 0 3px 0 0 #922b21 }
#btn-demarrer-toggle.btn-stop-auto:active:not(:disabled) { box-shadow: none }
#btn-demarrer-toggle.btn-stop-auto::after { border: none; width: 10px; height: 10px; background-color: white; border-radius: 1px; vertical-align: middle }
#info-auto-stop { color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color) !important; background: #ced4da !important; cursor: default }.champs-eleve-lecture {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 12px 16px; margin-left: auto;
}
/* ── Carte niveau (écran saisie) ─────────────────────────────────────────────── */
.champ-niveau {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    padding: 14px 18px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    text-align: center;
}
.champ-niveau-titre {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 10px;
}
#pills-niveau-saisie {
    justify-content: center;
}
#pills-niveau-saisie .btn {
    padding: 8px 22px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.15s;
}
#pills-niveau-saisie .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,.22);
}
#pills-niveau-saisie .btn.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.2);
    transform: translateY(-2px);
}

/* ── Proportions Niveau / Prénom (écran lecture) ────────────────────────────── */
.champ-prenom-groupe { flex: 1; min-width: 0; width: auto; }
.champ-niveau-groupe { flex-shrink: 0; width: auto; }

/* ── Champs input-group — style unifié ──────────────────────────────────────── */
.champ-prenom-groupe .input-group-text,
.champ-niveau-groupe .input-group-text,
.champ-saisie-niveau .input-group-text,
.champ-saisie-prenom .input-group-text,
.champ-saisie-titre .input-group-text,
.champ-saisie-source .input-group-text {
    font-size: 0.9rem; padding: 0.2rem 0.5rem;
    background-color: var(--bs-secondary); color: #fff;
    border-color: var(--bs-secondary); border-width: 1px; border-right-width: 0;
}
.champ-prenom-groupe .form-control,
.champ-saisie-prenom .form-control,
.champ-saisie-titre .form-control,
.champ-saisie-source .form-control {
    font-size: 0.9rem; padding: 0.2rem 0.5rem;
    border-color: var(--bs-secondary); border-width: 1px;
}
.champ-niveau-groupe .dropdown-toggle,
.champ-saisie-niveau .dropdown-toggle {
    font-size: 0.9rem !important; padding: 0.2rem 0.5rem !important;
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
    border-width: 1px !important;
    background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important;
}
.option-auto { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--bs-secondary-color); cursor: pointer; user-select: none }
.option-auto input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer }
.option-auto input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5 }
.option-auto:has(input:disabled) { opacity: 0.5; cursor: not-allowed }
.btn-police.actif { background-color: var(--app-couleur); border-color: var(--app-couleur); color: #fff }
.raccourcis-clavier { margin: 12px 0 0 0; font-size: 0.8em; color: var(--bs-tertiary-color); text-align: center }
.raccourcis-clavier kbd {
    display: inline-block; padding: 1px 6px; font-size: 0.95em; font-family: inherit;
    color: var(--bs-body-color); background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color); border-radius: 3px;
}
#instruction-lecture {
    flex-shrink: 0; min-height: 1.4em; font-size: 1.15em; margin: 12px 0;
    padding: 14px 18px 14px 42px; border: 1px solid #a8cce8; border-left: 4px solid #3498db;
    background: #d4e6f6; border-radius: 4px; animation: consignePulse 2s ease-in-out 3; position: relative;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
[data-bs-theme="dark"] #instruction-lecture { background: rgba(52,152,219,0.12); border-color: rgba(52,152,219,0.4); color: var(--bs-body-color) }
#boutons-suite { display: inline-flex; gap: 8px }
#instruction-lecture::before { content: attr(data-icone); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #3498db }
@keyframes consignePulse {
    0% { background: #d4e6f6 }
    50% { background: #a8cce8; box-shadow: 0 0 12px rgba(52,152,219,0.3) }
    100% { background: #d4e6f6 }
}
@keyframes consignePulseDark {
    0% { background: rgba(52,152,219,0.12) }
    50% { background: rgba(52,152,219,0.28); box-shadow: 0 0 12px rgba(52,152,219,0.2) }
    100% { background: rgba(52,152,219,0.12) }
}
[data-bs-theme="dark"] #instruction-lecture { animation-name: consignePulseDark }
#zone-texte {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 16px; line-height: 2.1; font-size: 1.5em;
    background: var(--bs-secondary-bg); border-radius: 10px;
    border: 1px solid var(--bs-border-color); margin-top: 8px;
    --lh: 2.1em; isolation: isolate;
}
@font-face {
    font-family: 'Luciole';
    src: url('../data/polices/Luciole-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../data/polices/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marelle';
    src: url('../data/polices/Marelle-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MarelleBaton';
    src: url('../data/polices/MarelleBaton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
#select-syllabes-mode { display: none; }
#btn-syllabes-lecture.active ~ #select-syllabes-mode { display: inline-block; }
#pdf-syllabes-mode { display: none; }
#pdf-syllabes.active ~ #pdf-syllabes-mode { display: inline-block; }

.option-select {
    font-size: 1em;
    padding: 2px 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}
#zone-texte.police-courier   { font-family: 'Courier New', Courier, monospace }
#zone-texte.police-opendys   { font-family: 'OpenDyslexic', sans-serif; letter-spacing: 0.05em; word-spacing: 0.1em; line-height: 2.3; --lh: 2.3em }
#zone-texte.police-luciole   { font-family: 'Luciole', sans-serif }
#zone-texte.police-marelle       { font-family: 'Marelle', cursive; line-height: 2.2; --lh: 2.2em }
#zone-texte.police-marelle-baton { font-family: 'MarelleBaton', cursive; line-height: 2.2; --lh: 2.2em }
#zone-texte.lignes-alternees {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.13) 0,
            rgba(0,0,0,0.13) var(--lh),
            transparent var(--lh),
            transparent calc(var(--lh) * 2)
        ) content-box,
        var(--bs-secondary-bg);
    background-attachment: local;
}
[data-bs-theme="dark"] #zone-texte.lignes-alternees {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.06) 0,
            rgba(255,255,255,0.06) var(--lh),
            transparent var(--lh),
            transparent calc(var(--lh) * 2)
        ) content-box,
        var(--bs-secondary-bg);
    background-attachment: local;
}
#zone-texte.police-opendys .mot-erreur {
    text-decoration: none; background-color: #fdedec;
    background-image: linear-gradient(transparent 45%, #e74c3c 45%, #e74c3c 55%, transparent 55%);
}
#zone-texte.police-opendys .mot-erreur:hover {
    background-color: #f9d5d2;
    background-image: linear-gradient(transparent 45%, #e74c3c 45%, #e74c3c 55%, transparent 55%);
}

/* ── Mots ──────────────────────────────────────────────────────────────────── */
.mot, .ponctuation {
    display: inline; cursor: default; padding: 2px 4px; border-radius: 3px;
    transition: background 0.15s, color 0.15s; user-select: none; -webkit-user-select: none;
    position: relative; z-index: 1;
}
.mot-lie { padding-right: 0 }
.mot.cliquable { cursor: pointer }
.mot.cliquable:hover { background: #eaf4fc }
.mot-erreur { color: #e74c3c; text-decoration: line-through; background: #fdedec }
.mot-erreur:hover { background-color: #f9d5d2 !important }
.mot-dernier { background: #f9e94e; color: #000; z-index: 0 }
.mot.mot-dernier:hover { background: #f9e94e }
.mot-apres-dernier { opacity: 0.35 }

/* ── États lecture ─────────────────────────────────────────────────────────── */
#ecran-lecture.lecture-en-cours .lecture-contenu > *:not(#zone-texte):not(.raccourcis-clavier):not(.resize-handle) { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-en-cours .champs-eleve-lecture { visibility: hidden; pointer-events: none }
#ecran-lecture.lecture-arretee .lecture-contenu { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-arretee #zone-texte { pointer-events: auto }
#ecran-lecture.lecture-arretee #barre-outils { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-mot-choisi .lecture-contenu > *:not(#zone-texte):not(.raccourcis-clavier):not(.resize-handle) { opacity: 0.3; pointer-events: none }
#ecran-lecture.lecture-mot-choisi #barre-outils { opacity: 0.3; pointer-events: none }

/* ── Ecran 3 — EMDF ────────────────────────────────────────────────────────── */
#ecran-emdf h2 { margin: 0 0 10px 0; font-size: 1.6em; color: #1e8461; text-align: center }
.consigne-emdf { text-align: center; color: var(--bs-secondary-color); margin-bottom: 20px }
.emdf-item { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color) }
.emdf-grille { display: grid; grid-template-columns: 1fr; gap: 16px }
.emdf-titre { font-size: 1.15em; font-weight: 700; color: #1e8461 }
.emdf-note { font-size: 1.4em; font-weight: 700; color: #3498db; min-width: 40px; text-align: center }
.emdf-description { font-size: 0.9em; color: var(--bs-secondary-color); margin: 0 0 12px 0; line-height: 1.4 }
.btn-note {
    flex: 1; padding: 12px 8px; font-size: 1.1em; font-weight: 700;
    border: 2px solid var(--bs-border-color); border-radius: 6px;
    background: var(--bs-body-bg); color: var(--bs-body-color);
    cursor: pointer; transition: all 0.15s;
}
.btn-note[data-note="1"]:hover { border-color: #e67e22; background: #fef5ec }
.btn-note[data-note="2"]:hover { border-color: #f1c40f; background: #fef9e7 }
.btn-note[data-note="3"]:hover { border-color: #3498db; background: #eaf4fc }
.btn-note[data-note="4"]:hover { border-color: #25a277; background: #eafaf1 }
.btn-note[data-note="1"].active { border-color: #e67e22; background: #e67e22; color: #fff }
.btn-note[data-note="2"].active { border-color: #f1c40f; background: #f1c40f; color: #fff }
.btn-note[data-note="3"].active { border-color: #3498db; background: #3498db; color: #fff }
.btn-note[data-note="4"].active { border-color: #25a277; background: #25a277; color: #fff }
.emdf-legendes { margin-top: 10px; display: grid }
.emdf-legende {
    grid-row: 1; grid-column: 1;
    visibility: hidden; margin: 0; padding: 8px 12px; font-size: 0.85em;
    color: var(--bs-secondary-color); line-height: 1.4; border-radius: 0 4px 4px 0;
}
.emdf-legende.visible { visibility: visible; z-index: 1 }
.emdf-boutons:has(.btn-note[data-note="1"]:hover) ~ .emdf-legendes .emdf-legende[data-note="1"],
.emdf-boutons:has(.btn-note[data-note="2"]:hover) ~ .emdf-legendes .emdf-legende[data-note="2"],
.emdf-boutons:has(.btn-note[data-note="3"]:hover) ~ .emdf-legendes .emdf-legende[data-note="3"],
.emdf-boutons:has(.btn-note[data-note="4"]:hover) ~ .emdf-legendes .emdf-legende[data-note="4"] {
    visibility: visible; z-index: 2;
}
.emdf-legende[data-note="1"] { background: #fef5ec; border-left: 3px solid #e67e22 }
.emdf-legende[data-note="2"] { background: #fef9e7; border-left: 3px solid #f1c40f }
.emdf-legende[data-note="3"] { background: #eaf4fc; border-left: 3px solid #3498db }
.emdf-legende[data-note="4"] { background: #eafaf1; border-left: 3px solid #25a277 }
.emdf-vitesse { background: var(--bs-secondary-bg) }
.emdf-vitesse .emdf-note { color: #25a277 }

/* ── Ecran 4 — Résultats ───────────────────────────────────────────────────── */

/* Avatar dans le titre */
.res-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background-color: var(--res-avatar-couleur, #6c757d);
    color: #fff; font-size: 1rem;
}

/* Hero MCLM */
.res-mclm-hero {
    display: flex; flex-direction: column; align-items: center;
    padding: 1.25rem 1rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    flex-shrink: 0;
}
.res-mclm-grand {
    font-size: 4rem; font-weight: 800; line-height: 1;
    font-family: 'Cairo Play', sans-serif;
    transition: color 0.3s;
}
.res-mclm-unite {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--bs-secondary-color);
    margin-top: 3px; margin-bottom: 0.75rem;
}
.res-mclm-jauge-wrap { width: 100%; max-width: 220px; margin-bottom: 0.4rem }
.res-mclm-jauge-piste {
    height: 8px; background: var(--bs-border-color);
    border-radius: 4px; overflow: hidden;
}
.res-mclm-jauge-barre { height: 100%; border-radius: 4px; width: 0% }
.res-mclm-seuil-label { font-size: 0.75rem; color: var(--bs-secondary-color) }
.res-mclm-stats {
    display: flex; align-items: center; gap: 0.75rem;
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color); width: 100%; justify-content: center;
}
.res-mclm-stat { display: flex; flex-direction: column; align-items: center; gap: 1px }
.res-mclm-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--bs-secondary-color); font-weight: 600 }
.res-mclm-stat-valeur { font-size: 0.95rem; font-weight: 700; color: var(--bs-body-color) }
.res-mclm-stat-sep { width: 1px; height: 28px; background: var(--bs-border-color) }

/* Message d'encouragement — visible uniquement en mode élève */
#res-encouragement { display: none }
html.mode-eleve #res-encouragement { display: block }
.res-encouragement {
    text-align: center; padding: 0.7rem 1.25rem;
    border-radius: 10px; border: 1.5px solid;
    font-weight: 600; font-size: 0.95rem; margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.res-encouragement[data-note="4"] { color: #25a277; background: #eaf7ef; border-color: #25a277 }
.res-encouragement[data-note="3"] { color: #3498db; background: #eaf4fb; border-color: #3498db }
.res-encouragement[data-note="2"] { color: #e67e22; background: #fef5ec; border-color: #e67e22 }
.res-encouragement[data-note="1"] { color: #e74c3c; background: #fdedec; border-color: #e74c3c }

#ecran-resultats h2 {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0 0 20px 0; font-size: 1.6em; color: #1e8461; text-align: center;
}
.resultats-container {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px; margin-bottom: 20px;
}
.resultats-colonne h3 { margin: 0 0 12px 0; font-size: 0.95em; font-weight: 700; color: #1e8461 }
.resultat-ligne {
    display: flex; justify-content: space-between; padding: 12px 16px;
    font-size: 1.05em; border-bottom: 1px solid var(--bs-border-color);
}
.resultat-ligne:last-child { border-bottom: none }
.resultat-label { font-weight: 600; color: var(--bs-secondary-color) }
.resultat-valeur { font-weight: 700; color: #1e8461 }
.resultat-mclm { font-size: 1.2em; background: #eaf7ef }
.resultat-mclm .resultat-valeur { color: #25a277 }
.resultat-seuil-inline { font-size: 0.7em; font-weight: 400; color: var(--bs-tertiary-color) }
.resultat-emdf-score { font-size: 1.2em; background: #eaf7ef }
.resultat-emdf-score .resultat-valeur { color: #3498db }
[data-bs-theme="dark"] .resultat-mclm { background: rgba(37,162,119,0.12) }
[data-bs-theme="dark"] .resultat-emdf-score { background: rgba(52,152,219,0.12) }

/* ── Barres EMDF ───────────────────────────────────────────────────────────── */
.barre-label { width: 100px; font-size: 0.9em; font-weight: 600; color: var(--bs-secondary-color) }
.barre-note { width: 30px; text-align: center; font-weight: 700; color: #1e8461 }
#graphique-emdf .progress { height: 24px }
#graphique-emdf .progress-bar { transition: width 0.4s ease }

/* ── Modale Session — styles spécifiques ───────────────────────────────────── */
.session-table { width: 100%; border-collapse: collapse }
.modale-eleve td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle }
.modale-eleve:last-child td { border-bottom: none }
.col-niveau { width: 1%; white-space: nowrap }
.col-nom { width: 1%; white-space: nowrap }
.col-mclm { width: 1%; white-space: nowrap }
.col-actions { width: 1%; white-space: nowrap; text-align: right }
.modale-badge-niveau { border: none; cursor: pointer; transition: opacity 0.15s; min-width: 3rem; text-align: center }
.modale-badge-niveau:hover { opacity: 0.75 }

.modale-eleve-nom { font-size: 0.875em; font-weight: 700; color: var(--bs-body-color); background: none; border: none; border-bottom: 1px dashed transparent; padding: 0; cursor: pointer; text-align: left; border-radius: 0 }
.modale-eleve-nom:hover { border-bottom-color: var(--bs-secondary-color) }
.modale-eleve-nom-input { font-weight: 700; font-size: 0.875em; min-width: 100px; width: 120px; border: none; border-bottom: 2px solid var(--app-couleur); background: none; padding: 0; outline: none; color: var(--bs-body-color) }
.modale-score-mclm { font-size: 0.875em; font-weight: 700; color: #1e8461 }
.modale-score-emdf { font-size: 0.875em; font-weight: 600 }
.modale-score-sep { font-size: 0.875em; color: var(--bs-border-color); margin: 0 4px }
.modale-score-total { font-size: 0.875em; font-weight: 700; color: #3498db }
.modale-score-edit { cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color 0.15s }
.modale-score-edit:hover { border-bottom-color: currentColor }
.popover { border: 1px solid #adb5bd; box-shadow: 0 4px 16px rgba(0,0,0,0.18); --bs-popover-arrow-border: #adb5bd }
[data-bs-theme="dark"] .popover { border-color: #495057; box-shadow: 0 4px 16px rgba(0,0,0,0.45); --bs-popover-arrow-border: #495057 }
.modale-supprimer, .modale-imprimer, .modale-evolution {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    border-radius: 4px; transition: background 0.2s, opacity 0.2s;
    display: inline-flex; align-items: center; opacity: 0.7;
}
.modale-supprimer { color: #e74c3c }
.modale-supprimer:hover { background: #fdedec; opacity: 1 }
.modale-imprimer { color: #1e8461 }
.modale-imprimer:hover { background: #eaf7ef; opacity: 1 }
.modale-evolution { color: #3498db }
.modale-evolution:hover { background: #ebf5fb; opacity: 1 }
.modale-vide { text-align: center; color: var(--bs-tertiary-color); padding: 24px 0; font-style: italic }
.modale-session-sticky { position: sticky; top: -1rem; z-index: 10; background: var(--bs-body-bg); margin: -1rem -1rem 0; padding: 0.5rem 1rem; border-bottom: 1px solid var(--bs-modal-footer-border-color); margin-bottom: 0.75rem }
.modale-actions-session { display: flex; justify-content: center; padding-top: 16px; border-top: 1px solid var(--bs-border-color); margin-top: 8px }
.session-journee { border: 1px solid var(--bs-border-color); border-radius: 6px; padding: 12px; margin-bottom: 12px }
.session-journee-header { background: #dee2e6; border-radius: 4px; padding: 6px 10px; margin-bottom: 10px }
[data-bs-theme="dark"] .session-journee-header { background: var(--bs-tertiary-bg) }

/* ── Modale PDF ─────────────────────────────────────────────────────────────── */
.pdf-controles label, .pdf-champs label { font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap }
.pdf-groupe { width: auto }
.pdf-groupe .input-group-text { background-color: var(--bs-secondary); color: #fff; border-color: var(--bs-secondary); border-width: 2px; border-right-width: 1px }
.pdf-groupe .dropdown-toggle { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-secondary) !important; border-width: 2px !important }
/* Modale Statistiques — Journée */
.stats-input-group-text { background-color: var(--bs-secondary); color: #fff; border-color: var(--bs-secondary); border-width: 1px; border-right-width: 0 }
#stats-dropdown-jour .dropdown-toggle { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-secondary) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important }
/* Modale Évolution — Élève */
.input-group:has(#evolution-dropdown-eleve) .input-group-text { background-color: var(--bs-secondary); color: #fff; border-color: var(--bs-secondary); border-width: 1px; border-right-width: 0 }
.input-group:has(#evolution-dropdown-eleve) .dropdown-toggle { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-secondary) !important }
.pdf-groupe .dropdown-toggle { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-width: 2px !important }[data-select="pdf-taille"] .dropdown-toggle { width: 3.5rem }.pdf-select {
    padding: 6px 10px; font-size: 0.95em; border: 2px solid var(--bs-border-color);
    border-radius: 4px; background: var(--bs-body-bg); color: var(--bs-body-color); cursor: pointer;
}
.pdf-select:focus { outline: none; border-color: #3498db }
.btn-retours-ligne {
    padding: 5px 8px; border: 2px solid var(--bs-border-color); border-radius: 4px;
    background: var(--bs-body-bg); cursor: pointer; color: var(--bs-secondary-color);
    display: inline-flex; align-items: center; gap: 6px; line-height: 1;
    transition: all 0.2s;
}
.btn-retours-ligne:hover { border-color: #3498db; color: #3498db }
.btn-retours-ligne.active { border-color: #3498db; background: #3498db; color: #fff }
.pdf-input {
    padding: 6px 10px; font-size: 0.95em; border: 2px solid var(--bs-secondary);
    border-radius: 4px; background: var(--bs-body-bg); color: var(--bs-body-color); flex: 1; min-width: 0;
}
.pdf-input:focus { outline: none; border-color: #3498db }
.pdf-preview-container {
    border: 1px solid var(--bs-border-color); border-radius: 6px;
    background: var(--bs-secondary-bg); overflow: hidden;
}
.pdf-preview { width: 100%; height: 500px; border: none; display: block }

/* ── Syllabes colorées ──────────────────────────────────────────────────────── */
/* Les couleurs sont appliquées en style inline par phonème (rouge/bleu alterné + gris pour muets) */
/* En mode syllabes, le mot-erreur ne doit pas écraser les couleurs des spans phonèmes */
.mode-syllabes .mot-erreur { color: inherit }

/* ── Alertes Bootstrap ─────────────────────────────────────────────────────── */
#zone-alertes {
    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    z-index: 1100; width: auto; max-width: 90%;
}
#zone-alertes .alert {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-weight: 600; font-size: 0.95em;
    white-space: nowrap; padding: 12px 40px 12px 24px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    main { padding: 16px }
    #barre-outils { flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 0 }
    #bloc-chrono { gap: 6px; padding: 6px 10px; width: 100%; justify-content: space-between }
    #chronometre { font-size: 1.3em; gap: 5px; padding: 3px 10px 4px }
    #boutons-controle { justify-content: center; flex-wrap: wrap; gap: 6px }
    #boutons-controle .btn { padding: 8px 14px; font-size: 0.9em }
    #btn-demarrer-toggle { padding-left: 10px !important; padding-right: 10px !important }
    #btn-arreter, #info-auto-stop { width: auto; min-width: 80px; padding: 8px 12px !important; font-size: 0.9em !important }
    .champs-eleve-lecture { order: 2; width: 100%; gap: 4px }
    .champ-prenom-groupe .form-control, .champ-niveau-groupe .dropdown-toggle,
    .champ-saisie-prenom .form-control, .champ-saisie-niveau .dropdown-toggle { font-size: 0.85em !important; padding: 3px 6px !important }

    .raccourcis-clavier { display: none }
    #instruction-lecture { font-size: 0.85em; padding: 10px 14px 10px 36px }
    #instruction-lecture::before { left: 10px }
    #zone-texte { font-size: 1.1em; line-height: 1.9; padding: 12px; --lh: 1.9em }
    .btn:is(.btn-principal, .btn-vert, .btn-rouge, .btn-orange, .btn-secondaire, .btn-violet) { padding: 9px 18px; font-size: 0.95em }
    .emdf-grille { grid-template-columns: 1fr }
    .resultats-container { grid-template-columns: 1fr }
    .barre-label { width: 80px; font-size: 0.8em }
    .pdf-preview { height: 350px }
    .pdf-controles, .pdf-champs { flex-direction: column }
    .champ-niveau-groupe { flex-wrap: nowrap }
}

@media (max-width: 480px) {
    #bloc-chrono { flex-direction: column; align-items: center; justify-content: center; gap: 8px }
    #boutons-controle { width: 100%; justify-content: center }
}

@media (max-height: 768px) and (min-width: 601px) {
    main { padding: 12px }
    #bandeau-sticky { margin-bottom: 6px }
    #barre-outils { gap: 8px; border-bottom: none; padding: 6px 0 }
    #bloc-chrono { padding: 8px 12px; gap: 12px }
    #chronometre { font-size: 1.9em; padding: 3px 12px 5px }
    #boutons-controle .btn { padding: 10px 20px; font-size: 1em }
    #instruction-lecture { font-size: 1em; margin: 6px 0; padding: 8px 14px 8px 36px }
    #instruction-lecture::before { left: 10px }
    #zone-texte { padding: 10px; margin-top: 4px }
    .raccourcis-clavier { display: none }
}

/* ── Impression ────────────────────────────────────────────────────────────── */
@media print {
    nav, #zone-alertes, .actions, .actions-groupe,
    .cartes-export, .infobox, .raccourcis-clavier { display: none !important }
    body { font-size: 12pt; color: #000; background: #fff }
    main { max-width: 100%; padding: 0; margin: 0 }
    .ecran-cache { display: none !important }
    #ecran-resultats h2, .resultats-colonne h3, .resultat-valeur { color: #000 }
    .resultat-mclm { background: none; border: 2px solid #000 }
    .resultat-mclm .resultat-valeur { color: #000 }
    .progress-bar { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .progress { border: 1px solid #ccc; -webkit-print-color-adjust: exact; print-color-adjust: exact }
}

/* ── Dropdowns Bootstrap remplaçant les <select> ────────────────────────────── */
[data-select] .dropdown-toggle,
#stats-dropdown-jour .dropdown-toggle,
#evolution-dropdown-eleve .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left }
[data-select] .dropdown-item:hover,
#btn-demarrer-toggle ~ .dropdown-menu .dropdown-item:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color) }
.champ-lecture .dropdown-toggle { min-width: 110px }
.champ-lecture .dropdown-menu { min-width: 110px }
[data-select="select-syllabes-mode"] .dropdown-toggle,
[data-select="select-police"] .dropdown-toggle { min-width: 140px }
[data-select="pdf-mode"] .dropdown-toggle { min-width: 200px }
[data-select="pdf-police"] .dropdown-toggle,
[data-select="pdf-syllabes-mode"] .dropdown-toggle { min-width: 120px }
[data-select="pdf-taille"] .dropdown-toggle { min-width: 4rem }
[data-select="select-syllabes-mode"] .dropdown-toggle {
    padding: 5px 8px; border-width: 2px; line-height: 1;
}
[data-select="pdf-syllabes-mode"] {
    display: flex;
}
[data-select="pdf-syllabes-mode"] .dropdown-toggle {
    padding: 5px 8px; border-width: 2px; line-height: 1; height: 100%;
}

/* Boutons suite (immersion) */
#boutons-suite-compact { display: inline-flex; gap: 8px; align-items: center }