/* =============================================================
   style.css — Styles spécifiques à cette application
   ✏️  C'est ici que vous ajoutez vos propres règles CSS.

   Architecture CSS (ordre de chargement dans index.html) :
     1. bootstrap.css  — grille, utilitaires, composants Bootstrap  (ne pas modifier)
     2. common.css     — header, footer, polices, boutons e-cole     (ne pas modifier)
     3. style.css      — styles propres à votre application          (✏️ ce fichier)

   Conseil : utilisez d'abord les classes Bootstrap (d-flex, gap-2,
   p-3, rounded, fw-bold…) avant d'écrire du CSS custom.
   Pour les couleurs de fond/bordure, préférez les variables Bootstrap
   (var(--bs-secondary-bg), var(--bs-border-color)) afin que le mode
   sombre fonctionne automatiquement.

   Boutons personnalisés (définis dans common.css) :
     .btn-principal  — bleu   #3498db
     .btn-vert       — vert   #25a277
     .btn-rouge      — rouge  #e74c3c
     .btn-orange     — orange #e67e22
     .btn-secondaire — gris   #7f8c8d
     .btn-violet     — violet #8e44ad
   Pour une couleur dynamique : style="--btn-couleur:#votre-hex"
   ============================================================= */

/* Desktop ≥992px — espacements du collapse, de la nav et des boutons d'action */
@media (min-width: 992px) {
    .navbar-collapse { padding-left: 1rem }
    #nav-gauche { gap: 0 }
    #nav-gauche .nav-link { min-width: 6rem; padding-left: 1rem; padding-right: 1rem }
    #form-recherche { margin-right: 1rem }
    #header-boutons .nav-link { padding-left: 0.15em; padding-right: 0.15em; height: auto; padding-top: 6px; padding-bottom: 6px }
    #header-boutons { margin-right: 1rem }
}

/* navbar-icon-top — snippet Bootsnipp nNX3a, .fa remplacé par i */
.navbar-icon-top .navbar-nav .nav-link > i {
  position: relative;
  top: 3px;
  width: 36px;
  font-size: 24px;
  line-height: 12px;
}
@media (min-width: 992px) {
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
  }
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > i {
    display: block;
    width: 48px;
    margin: 2px auto 4px auto;
    top: 0;
    line-height: 24px;
  }
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > i > .badge {
    top: -7px;
  }
}


/* Labels des boutons droite : toujours masqués */
.nav-label { display: none }

/* ── Mode hamburger forcé par chevauchement du titre ─────────────────────────
   Déclenché par JS quand .app-marque chevauche #nav-gauche ou #header-boutons.
   navbar-expand-lg étant retiré, on reproduit ici les comportements du menu
   mobile (collapse, mise en page, icônes) sans restriction de breakpoint.
   ─────────────────────────────────────────────────────────────────────────── */
#header-nav.hamburger-titre .navbar-toggler { display: block }
#header-nav.hamburger-titre #header-nav-content.show,
#header-nav.hamburger-titre #header-nav-content.collapsing {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
#header-nav.hamburger-titre #header-boutons {
    order: -1; flex-direction: row !important; align-self: center; margin: 4px 0;
}
#header-nav.hamburger-titre #header-boutons .nav-link { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: var(--bs-nav-link-padding-y); padding-bottom: var(--bs-nav-link-padding-y) }
#header-nav.hamburger-titre #header-boutons .nav-link > i { margin-right: 0 }
#header-nav.hamburger-titre #nav-gauche { margin-inline-end: 0 !important }

#header-nav.hamburger-titre .navbar-icon-top .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    padding-right: 1rem;
    min-width: 0;
}
#header-nav.hamburger-titre .navbar-icon-top .navbar-nav .nav-link > i {
    top: 0; line-height: 1;
    width: 1.25em; text-align: center; margin-right: 8px;
}
#header-nav.hamburger-titre #navbar-top-row { width: 100% !important; position: relative !important }
#header-nav.hamburger-titre #nav-gauche .nav-item.active > .nav-link { padding-right: calc(1rem + 10px) }
#header-nav.hamburger-titre { min-height: 0 }
/* Annule le padding-left ≥992px qui décale les items du menu ouvert vers la droite */
#header-nav.hamburger-titre .navbar-collapse { padding-left: 0 }
#header-nav.hamburger-titre #form-recherche { padding: 0 1.5rem; margin-top: 1.5rem }
#header-nav.hamburger-titre .navbar-collapse .dropdown-menu { margin-left: 1.5rem; margin-right: 1.5rem }

/* Cadre sombre autour des boutons d'action (tous modes) */
#header-boutons { background: rgba(0,0,0,0.45); border-radius: 8px; padding: 2px 4px }

/* Bouton immersion toujours en dernière position (flex order) */
#li-immersion { order: 9999 }

/* Bouton immersion dans la top row hamburger — masqué en desktop, visible en mode hamburger */
#navbar-top-boutons { display: none; margin-left: auto; margin-right: 8px }
#header-nav.hamburger-titre #navbar-top-boutons {
    display: flex;
    align-items: center;
}
#btn-immersion-hamburger {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 20px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}
#btn-immersion-hamburger:hover { color: #fff }


/* Flèche Bootstrap du dropdown-toggle supprimée */
#nav-gauche .dropdown-toggle::after { display: none }

/* Icônes dossier fermé/ouvert — swap piloté par aria-expanded (ouverture) ou .active (sous-page active) */
#nav-gauche .dropdown-toggle .nav-icone-ouvert { display: none }
#nav-gauche .dropdown-toggle[aria-expanded="true"] .nav-icone-ferme,
#nav-gauche .nav-item.dropdown.active > .dropdown-toggle .nav-icone-ferme  { display: none }
#nav-gauche .dropdown-toggle[aria-expanded="true"] .nav-icone-ouvert,
#nav-gauche .nav-item.dropdown.active > .dropdown-toggle .nav-icone-ouvert { display: inline-block }

/* Dropdown — fond identique au header + légère animation à l'ouverture */
#nav-gauche .dropdown-menu {
    --bs-dropdown-bg: rgba(var(--bs-dark-rgb), 1);
    border-color: rgba(255,255,255,.1);
}
#nav-gauche .dropdown-menu { animation: nav-dropdown-in .15s ease }
@keyframes nav-dropdown-in { from { opacity: 0; transform: translateY(-4px) } }

/* Item de nav actif — encadrement de la page courante
   Même principe qu'e-lirecouleur : fond blanc semi-transparent sur le header sombre.
   La classe active est posée sur le <li> par majActive() en mode Markdown,
   et statiquement dans le HTML en mode manuel. */
#nav-gauche .nav-item.active > .nav-link {
    background-color: color-mix(in srgb, var(--app-couleur, #3498db) 30%, transparent);
    border-radius: 4px;
}
#nav-gauche .dropdown-item.active,
#nav-gauche .dropdown-item:active {
    background-color: color-mix(in srgb, var(--app-couleur, #3498db) 12%, transparent);
    color: var(--app-couleur, #3498db);
}

/* ── Barre d'actions (mode hamburger) ───────────────────────────────────────
   Remplace les boutons du header-boutons quand le menu hamburger est actif.
   Affichée en bas du contenu, au-dessus du footer, toujours visible.
   ─────────────────────────────────────────────────────────────────────────── */

/* Masquée par défaut (mode desktop) */
#action-bar { display: none; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.06) }

/* Visible dès que le hamburger est actif (mobile ou titre qui chevauche) */
body:has(#header-nav.hamburger-titre) #action-bar { display: flex }

/* En mode hamburger : #header-boutons masqué — il est remplacé par la barre d'actions */
body:has(#header-nav.hamburger-titre) #header-boutons { display: none !important }

/* Mode immersion : masquer la barre (le header et footer sont déjà masqués) */
html.mode-immersion #action-bar { display: none !important }

/* Mode élève : masquer Partage et Config dans la barre d'actions */
html.mode-eleve #action-bar-partage,
html.mode-eleve #action-bar-config { display: none !important }

/* Mode sombre : même teinte assombrie que le header et le footer (common.css l.278) */
[data-bs-theme="dark"] #action-bar { background-color: #1e1e1e !important }

/* Boutons de la barre — tab-bar style : icône + label centré, largeur égale */
.action-bar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.action-bar-btn i { font-size: 20px; line-height: 1 }
.action-bar-btn span { display: none }
.action-bar-btn:hover { color: #fff; background: rgba(255,255,255,0.07) }
.action-bar-btn:active { background: rgba(255,255,255,0.12) }

/* ── Mode élève ──────────────────────────────────────────────────────────────
   Classe appliquée sur <html> dès le <head> (script thème) → aucun flash.
   mode=eleve : masque les boutons Partage et Config dans la navbar.
   Le bouton Mode vue reste visible pour permettre le retour en mode normal.
   ─────────────────────────────────────────────────────────────────────────── */
html.mode-eleve #li-partage,
html.mode-eleve #li-config { display: none !important }
/* Mode élève : masquer le cadre sombre si tous les boutons restants sont cachés */
html.mode-eleve #header-boutons:not(:has(> li:not(#li-partage):not(#li-config))) { display: none !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 { display: none !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 }


/* QR code — taille limitée avec marge */
#partage-qrcode canvas { max-width: 300px; height: auto; padding: 8px; background: white; border-radius: 6px }

/* ── Rendu Markdown (.markdown-body) ────────────────────────────────────────
   Styles typographiques complémentaires aux classes Bootstrap injectées par JS.
   ─────────────────────────────────────────────────────────────────────────── */
.markdown-body { max-width: 860px }

/* Espacement des titres */
.markdown-body h1 { font-size: 2em;   margin: 0.5em 0 0.4em; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.2em }
.markdown-body h2 { font-size: 1.5em; margin: 1.2em 0 0.4em; border-bottom: 1px solid var(--bs-border-color); padding-bottom: 0.2em }
.markdown-body h3 { font-size: 1.2em; margin: 1em 0 0.3em }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { margin: 0.8em 0 0.3em }

/* Paragraphes et listes */
.markdown-body p,
.markdown-body ul,
.markdown-body ol { margin-bottom: 0.9em }
.markdown-body ul,
.markdown-body ol { padding-left: 1.8em }
.markdown-body li + li { margin-top: 0.25em }

/* Code inline — héritage du fond adapté au thème sombre/clair */
.markdown-body code { font-size: 0.9em }

/* Séparateur vertical pleine hauteur dans les boutons */
.btn .vr { margin-top: -0.375rem; margin-bottom: -0.375rem }

/* Rangée de boutons d'action — largeur égale et texte centré */
.actions { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem }
.actions > .btn { flex: 1 1 0; justify-content: center }

/* ── Panneau de résultats de recherche ───────────────────────────────── */
#form-recherche { position: relative }

#recherche-resultats {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 280px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 1051;
}

@media (min-width: 992px) {
    #recherche-resultats { right: auto; min-width: 380px }
}

.recherche-resultat {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}
.recherche-resultat:last-child { border-bottom: none }
.recherche-resultat:hover { background: var(--bs-secondary-bg) }

mark.recherche-surbrillance {
    background: rgba(241,196,15,0.35);
    border-radius: 2px;
    padding: 0 2px;
    color: inherit;
    font-weight: 500;
}

/* ── Modale Mode vue — grands boutons sélecteur ─────────────────────────── */
/* min-height pour un bouton confortable au clic et au tactile.
   position:relative sert d'ancrage pour .mode-vue-actuel en absolu. */
.mode-vue-btn { min-height: 120px; position: relative }
/* "Mode actuel" sorti du flux : l'icône et le label restent centrés quoi qu'il arrive */
.mode-vue-actuel { position: absolute; bottom: 0.6rem; font-size: 0.7em }

/* ── Pavé numérique (panel défi de la modale Mode vue) ──────────────────── */
/* Hauteur minimale commune + centrage du contenu pour tous les boutons du pavé.
   min-height plutôt que height fixe : le bouton peut s'agrandir si le texte est long.
   btn-defi-retour exclu : c'est un bouton lien, pas un bouton du pavé. */
#mode-vue-panel-defi .btn:not(#btn-defi-retour) { height: 3rem; display: flex; align-items: center; justify-content: center }

/* ── Impression ──────────────────────────────────────────────────────────────
   Masque header, footer et boutons flottants ; affiche le contenu en pleine page. */
@media print {
    #header-nav,
    #footer-nav,
    #btn-quitter-immersion { display: none !important }
    body { height: auto; overflow: visible }
    main { overflow: visible }
}

#modale-config { --bs-offcanvas-border-color: var(--bs-border-color) }
/* Le panneau s'arrête au-dessus du footer de la page (hauteur mesurée en JS,
   44px = py-2 + logo 28px en repli) — le footer reste visible en pleine largeur */
#modale-config { bottom: var(--pied-hauteur, 44px) }
/* En-tête du panneau Config — même hauteur que #header-nav */
#modale-config-header { min-height: 86px }

/* 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 }
/* Mobile portrait — pas de redimensionnement (pleine largeur fixe) */
@media (orientation: portrait) and (max-width: 767.98px) {
    #config-resize-handle { display: none }
}

/* Push sidebar — le contenu se décale quand le panneau Config s'ouvre.
   html reçoit le même fond que body pour masquer le liseré blanc entre
   le corps décalé et l'offcanvas qui n'est pas encore apparu.
   Le footer reste pleine largeur : il compense le décalage du body par une marge négative. */
html { background-color: var(--bs-body-bg) }
/* Supprime les transitions pendant le chargement initial (classe retirée après 2 frames) */
html.no-transition-init body,
html.no-transition-init #footer-nav,
html.no-transition-init .offcanvas { transition: none !important }
/* Pré-applique la marge avant le premier rendu si l'offcanvas était ouvert */
html.config-etait-ouvert body { margin-right: var(--largeur-config-init, 400px) }
html.config-etait-ouvert #footer-nav { margin-right: calc(-1 * var(--largeur-config-init, 400px)) }
body, #footer-nav { transition: margin-right 0.3s ease-in-out }
body.config-ouvert { margin-right: var(--config-decalage, var(--bs-offcanvas-width, 400px)) }
body.config-ouvert #footer-nav { margin-right: calc(-1 * var(--config-decalage, var(--bs-offcanvas-width, 400px))) }

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

/* Titres de section dans la modale Config — cadre gris léger */
.config-section-title {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1.25rem !important;
}
.config-section-title .list-group,
.config-section-title .list-group-flush {
    border-radius: 6px;
    overflow: hidden;
}

/* Icône des boutons Auteur / Liens / Remerciements (modale À propos) —
   boîte de largeur fixe (1.25em, alignée sur le fa-fw de FontAwesome) pour
   que chaque bouton ait la même colonne d'icône avant la séparation verticale.
   Recentrage entre le bord gauche du bouton et le trait vertical (.vr) :
   le padding-left du bouton (28px, commun.css) est bien plus grand que le
   gap-2 (8px) qui sépare l'icône du trait — l'icône se retrouve donc plaquée
   contre le trait au lieu d'être centrée dans tout cet espace. On la recale
   en la décalant à gauche de (padding - gap) / 2. */
.icone-fixe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    flex-shrink: 0;
    transform: translateX(calc((8px - 28px) / 2)); /* = -10px */
}
/* Correctif optique additionnel : le glyphe fa-code-branch n'est pas centré
   dans sa propre case de police (son encre est légèrement décalée à gauche) —
   décalage mesuré au pixel près par capture d'écran (~0.7px), à ajouter au
   recentrage ci-dessus. */
.icone-fixe .fa-code-branch {
    transform: translateX(0.7px);
}

/* ── Boutons de config — état actif (option exclusive sélectionnée) ──────── */
/* ✏️  Ajoutez ici les classes de vos propres boutons exclusifs */
.btn-choix-c.actif,
.btn-choix-d.actif {
    background-color: var(--app-couleur);
    border-color: var(--app-couleur);
    color: #fff;
}




/* =============================================================
   e-valstat — styles spécifiques
   ============================================================= */

/* Zone de travail centrée, largeur de lecture confortable */
.zone-app { max-width: 860px }

/* Titre d'opération et barre de progression à la couleur de l'app */
.titre-app { color: var(--app-couleur) }
[data-bs-theme="dark"] .titre-app { color: color-mix(in srgb, var(--app-couleur) 45%, white) }
.barre-app { background-color: var(--app-couleur) }
[data-bs-theme="dark"] .barre-app { background-color: color-mix(in srgb, var(--app-couleur) 60%, white) }

/* Bouton principal à la couleur de l'app, éclairci en mode sombre pour rester lisible sur fond foncé */
.btn-app { --btn-couleur: var(--app-couleur) }
[data-bs-theme="dark"] .btn-app { --btn-couleur: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* Titres de section des modales : e-template les colore en inline avec COULEUR_APP_PRIMAIRE,
   trop sombre (#283e54) pour le mode sombre → éclaircie (!important nécessaire face au style inline) */
[data-bs-theme="dark"] .config-section-title { color: color-mix(in srgb, var(--app-couleur) 45%, white) !important }

/* Compteur d'élèves détectés, à la couleur de l'app */
.badge-app { background-color: var(--app-couleur) }
[data-bs-theme="dark"] .badge-app { background-color: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* Liste des élèves détectés : défilement au-delà d'une quinzaine de noms */
.liste-eleves { max-height: 20rem; overflow-y: auto }

/* Page Outils : carré d'icône à la couleur de l'app */
.icone-outil { width: 48px; height: 48px; background-color: var(--app-couleur) }
[data-bs-theme="dark"] .icone-outil { background-color: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* =============================================================
   Page Analyser
   ============================================================= */

/* Page élargie : le tableau de bord a besoin de place */
.zone-app:has(#page-analyser:not(.d-none)) { max-width: 1400px }

/* Couleurs des groupes (s'adaptent au mode sombre via les variables Bootstrap) */
.groupe-besoins      { background-color: var(--bs-danger-bg-subtle)  !important; color: var(--bs-danger-text-emphasis) }
.groupe-fragile      { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) }
.groupe-satisfaisant { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) }
.groupe-absent       { background-color: var(--bs-secondary-bg)      !important; color: var(--bs-secondary-color) }
.pastille { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; vertical-align: -0.1em; margin-right: 0.3em; border: 1px solid var(--bs-border-color) }

/* Onglets : pilule active à la couleur de l'app */
.onglets-analyse { --bs-nav-pills-link-active-bg: var(--app-couleur); --bs-nav-link-color: var(--bs-body-color); --bs-nav-link-hover-color: var(--bs-body-color) }
[data-bs-theme="dark"] .onglets-analyse { --bs-nav-pills-link-active-bg: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* Tableau de bord */
.tableau-bord { font-size: 0.85rem }
.tableau-bord .col-eleve { position: sticky; left: 0; z-index: 1; background-color: var(--bs-body-bg); min-width: 11rem }
.tableau-bord .entete-matiere { background-color: var(--bs-tertiary-bg) }
.tableau-bord .entete-verticale { vertical-align: middle; text-align: center; height: 12rem; min-width: 3.6rem; padding: 0.3rem 0.15rem }
.tableau-bord .entete-verticale span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 11.5rem; white-space: normal; text-align: center; font-size: 0.72rem; line-height: 1.15; font-weight: 600; overflow-wrap: anywhere }
.tableau-bord .debut-matiere { border-left: 3px solid var(--bs-border-color-translucent) !important }
.tableau-bord .cellule-score { white-space: nowrap }
.tableau-bord tfoot th, .tableau-bord tfoot td { border-top: 2px solid var(--bs-border-color) }

/* Groupes de besoin */
.bandeau-groupe { font-weight: 600; font-size: 0.85rem; padding: 0.15rem 0.5rem; border-radius: 4px; margin-bottom: 0.35rem }

/* Analyse par item */
.badge-item { display: inline-block; font-size: 0.8rem; padding: 0.15rem 0.45rem; border-radius: 4px; white-space: nowrap }
.libelle-exercice { min-width: 9rem }

/* Impression : uniquement l'onglet affiché de la page Analyser, en paysage, couleurs conservées */
@media print {
    @page { size: A4 landscape; margin: 10mm }
    #header-nav, #footer-nav, #action-bar, #btn-quitter-immersion { display: none !important }
    body { background: #fff !important }
    .zone-app { max-width: none !important; padding: 0 !important }
    #page-analyser { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important }
    #page-analyser * { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .tableau-bord-conteneur { overflow: visible !important }
    .tableau-bord { font-size: 0.7rem }
    .tableau-bord .col-eleve { position: static }
    .carte-groupe, .bloc-competence, .tableau-bord tr { break-inside: avoid }
}

/* Interrupteurs (form-switch) à la couleur de l'app */
.interrupteur-app:checked { background-color: var(--app-couleur); border-color: var(--app-couleur) }
[data-bs-theme="dark"] .interrupteur-app:checked { background-color: color-mix(in srgb, var(--app-couleur) 65%, white); border-color: color-mix(in srgb, var(--app-couleur) 65%, white) }
.interrupteur-app:focus { box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--app-couleur) 25%, transparent) }

/* =============================================================
   Page Analyser résultats — onglet « Par élève »
   ============================================================= */

/* Araignée : couleurs de la fiche de restitution officielle (français bleu-vert, maths orange) */
.radar { width: 100%; max-width: 560px; display: block; margin: 0 auto; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif }
.radar-francais { --radar-anneau: #e3f2f5; --radar-fond: #eef7f9; --radar-arc: #a9d6df; --radar-aire: #b7dde5; --radar-trait: #3d6478; --radar-domaine: #ffffff }
.radar-maths    { --radar-anneau: #fdf1e7; --radar-fond: #fef6ef; --radar-arc: #f7bd8f; --radar-aire: #f9c89f; --radar-trait: #6b4a36; --radar-domaine: #ffffff }
[data-bs-theme="dark"] .radar-francais { --radar-anneau: #1d3238; --radar-fond: #182a2f; --radar-arc: #2f6674; --radar-aire: #3f7f8f; --radar-trait: #bfe6ee; --radar-domaine: #e6f6f9 }
[data-bs-theme="dark"] .radar-maths    { --radar-anneau: #3a2a1f; --radar-fond: #30231a; --radar-arc: #8a5530; --radar-aire: #a8683a; --radar-trait: #fbe0cb; --radar-domaine: #fff3ea }
.radar-anneau  { fill: var(--radar-anneau) }
.radar-fond    { fill: var(--radar-fond) }
.radar-seuil   { fill: none; stroke: var(--bs-secondary-color); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 3 3 }
.radar-arc     { fill: none; stroke: var(--radar-arc); stroke-width: 22; stroke-linecap: round }
.radar-domaine { fill: var(--radar-domaine); font-size: 12px; font-weight: 700; letter-spacing: 0.08em }
.radar-axe     { stroke: var(--bs-secondary-color); stroke-opacity: 0.45; stroke-width: 1 }
.radar-libelle { fill: var(--bs-body-color); font-size: 14px; font-style: italic; font-weight: 600 }
.radar-repere  { fill: var(--bs-secondary-color); font-size: 11px; font-weight: 700 }
.radar-aire    { fill: var(--radar-aire); fill-opacity: 0.85; stroke: var(--radar-trait); stroke-width: 2; stroke-linejoin: round }
.radar-moyenne { fill: none; stroke: var(--bs-secondary-color); stroke-width: 1.5; stroke-opacity: 0.55; stroke-linejoin: round }
.radar-point   { fill: var(--bs-body-bg); stroke: var(--radar-trait); stroke-width: 2 }
.radar-cible   { fill: transparent }
.radar-sommet:hover .radar-point { r: 6 }

/* Positionnement par compétence : zones des seuils + barre du score + repère de la moyenne */
.ligne-position { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-tertiary-bg); margin-bottom: 0.5rem }
.ligne-position:last-child { margin-bottom: 0 }
.ligne-position-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem }
.ligne-position-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem }
.ligne-position-pied .ecart-classe { margin-left: auto }
/* Variante B : barre à la couleur du groupe de l'élève sur fond gris, traits fins aux seuils,
   point gris pour la moyenne de la classe */
.piste { position: relative; height: 18px }
.piste::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 10px; background: var(--bs-secondary-bg); border-radius: 4px }
.barre-score { position: absolute; left: 0; top: 4px; height: 10px; border-radius: 4px; opacity: 0.85 }
.barre-besoins      { background: var(--bs-danger) }
.barre-fragile      { background: var(--bs-warning) }
.barre-satisfaisant { background: var(--bs-success) }
.barre-absent       { background: var(--bs-secondary-color) }
.trait-seuil { position: absolute; top: 1px; bottom: 1px; width: 1px; background: var(--bs-secondary-color); opacity: 0.8 }
.repere-classe { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--bs-secondary-color); border: 2px solid var(--bs-body-bg) }
.badge-groupe { display: inline-block; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; text-align: center }
.legende-barre { display: inline-block; width: 0.8rem; height: 8px; border-radius: 0 3px 3px 0; opacity: 0.85 }
.legende-seuil { display: inline-block; width: 1px; height: 14px; background: var(--bs-secondary-color) }
.legende-moyenne { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bs-secondary-color) }
@media print {
    #onglet-eleve .bloc-matiere-eleve { break-inside: avoid }
    .radar { max-width: 420px }
}
/* Moyenne de la classe : « classe x · ▲ +y » sous le score */
.ecart-classe { display: inline-block; font-size: 0.72rem; line-height: 1.2; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color) }

/* Fiche élève : une matière à la fois à l'écran (sous-onglets), les deux à l'impression */
@media screen { .masque-ecran { display: none } }
.onglets-matiere { --bs-nav-tabs-link-active-color: var(--app-couleur) }
[data-bs-theme="dark"] .onglets-matiere { --bs-nav-tabs-link-active-color: color-mix(in srgb, var(--app-couleur) 45%, white) }
.onglets-matiere .nav-link { font-weight: 600; color: var(--bs-secondary-color) }
.onglets-matiere .nav-link.active { color: var(--bs-nav-tabs-link-active-color) }
@media print { #fiche-eleve .bloc-matiere-eleve + .bloc-matiere-eleve { break-before: page } }

/* Éléments du guide des scores (volets dépliables) */
.volet-guide { font-size: 0.85rem }
.volet-guide > summary { cursor: pointer; font-weight: 600; color: var(--bs-secondary-color); padding: 0.15rem 0 }
.volet-guide > summary:hover { color: var(--bs-body-color) }
.volet-guide[open] > summary { color: var(--bs-body-color) }
.rubrique-guide { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bs-secondary-color); margin-top: 0.35rem }
.source-guide { font-size: 0.7rem; color: var(--bs-secondary-color); font-style: italic; margin-top: 0.35rem }

/* =============================================================
   En-têtes de page (phrase) et pastilles d’étape numérotées
   ============================================================= */
/* Phrase d'introduction de page : encadré teinté à la couleur de l'app,
   même principe que le bandeau vert « Traitement 100 % local » juste en dessous */
.phrase-page { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--bs-body-color); margin-bottom: 0.75rem;
    background: color-mix(in srgb, var(--app-couleur) 10%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--app-couleur) 30%, var(--bs-border-color));
    border-radius: 8px; padding: 0.65rem 0.9rem }
.phrase-page > i { color: var(--app-couleur); font-size: 1.05rem; margin-top: 0.15rem; flex-shrink: 0 }
.phrase-page a { color: var(--app-couleur); font-weight: 600 }
.phrase-page > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem }
[data-bs-theme="dark"] .phrase-page { background: color-mix(in srgb, var(--app-couleur) 22%, var(--bs-body-bg)); border-color: color-mix(in srgb, var(--app-couleur) 45%, var(--bs-border-color)) }
[data-bs-theme="dark"] .phrase-page > i, [data-bs-theme="dark"] .phrase-page a { color: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* Pill « Traitement 100 % local », dans la phrase-page (remplace l'ancien bandeau alert-success) */
.pill-local { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis) }
.pill-local i { font-size: 0.7rem }
.num-etape { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--app-couleur); color: #fff; font-size: 0.75rem; font-weight: 700 }
[data-bs-theme="dark"] .num-etape { background: color-mix(in srgb, var(--app-couleur) 65%, white); color: #1b2b3b }

/* Onglets de la page Analyser résultats : grandes cartes */
.onglets-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem }
@media (max-width: 767.98px) { .onglets-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.carte-onglet { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left; padding: 0.6rem 0.75rem !important; border: 1px solid var(--bs-border-color) !important; border-radius: 8px !important; background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important }
.carte-onglet i { font-size: 1.1rem; color: var(--bs-secondary-color); margin-bottom: 0.2rem }
.carte-onglet .titre-carte { font-weight: 700 }
.carte-onglet small { color: var(--bs-secondary-color); line-height: 1.2 }
.carte-onglet:hover { border-color: var(--bs-secondary-color) !important }
.carte-onglet.active { border: 2px solid var(--app-couleur) !important; background: color-mix(in srgb, var(--app-couleur) 15%, var(--bs-body-bg)) !important; padding: calc(0.6rem - 1px) calc(0.75rem - 1px) !important }
.carte-onglet.active i { color: var(--app-couleur) }
.carte-onglet.active .titre-carte { color: var(--app-couleur) }
[data-bs-theme="dark"] .carte-onglet.active { border-color: color-mix(in srgb, var(--app-couleur) 65%, white) !important; background: color-mix(in srgb, var(--app-couleur) 22%, var(--bs-body-bg)) !important }
[data-bs-theme="dark"] .carte-onglet.active i { color: color-mix(in srgb, var(--app-couleur) 65%, white) }
[data-bs-theme="dark"] .carte-onglet.active .titre-carte { color: color-mix(in srgb, var(--app-couleur) 65%, white) }

/* Étapes numérotées : un cadre par étape, avec ce qu'il faut faire dedans */
.etape-section { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 0.9rem 1rem; margin-bottom: 0.75rem }
.etape-entete { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem }
.etape-entete .num-etape { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; margin-top: 0.05rem }
.etape-compacte { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem }
.etape-compacte .etape-entete { margin-bottom: 0 }

/* =============================================================
   Étapes en accordéon (Assembler PDF, Analyser résultats)
   Une étape à la fois : les étapes non atteintes sont masquées
   (.etape-a-venir), les étapes validées se replient en une ligne
   avec une coche verte (.etape-repliee), cliquable pour rouvrir.
   ============================================================= */
.etape-section.etape-a-venir { display: none }
.etape-entete-ligne { display: flex; align-items: center; gap: 0.6rem }
.etape-section.etape-repliee .etape-corps { display: none }
.etape-section.etape-repliee .etape-entete small { display: none }
.etape-section.etape-repliee .etape-entete { align-items: center; margin-bottom: 0 }
.etape-section.etape-repliee .etape-entete-ligne { cursor: pointer }
.etape-section.etape-repliee .etape-entete-ligne:hover .etape-entete h3 { text-decoration: underline }
.etape-resume { display: none }
.etape-section.etape-repliee .etape-resume { display: inline-block; margin-left: auto; text-align: right }
.etape-section .etape-coche { display: none; color: #25a277; font-size: 1.15rem; flex-shrink: 0 }
[data-bs-theme="dark"] .etape-section .etape-coche { color: color-mix(in srgb, #25a277 55%, white) }
.etape-section.etape-repliee .etape-coche { display: inline-block }

/* Étape validée : fond vert très clair, numéro en vert (même vert que la coche) */
.etape-section.etape-repliee { background: var(--bs-success-bg-subtle) }
.etape-section.etape-repliee .num-etape { background: #25a277; color: #fff }
[data-bs-theme="dark"] .etape-section.etape-repliee .num-etape { background: color-mix(in srgb, #25a277 55%, white); color: #06231a }

/* ── Page d'accueil : 3 tuiles carrées (Analyser / Assembler / Outils) ── */
#header-marque { pointer-events: auto; cursor: pointer }
.tuiles-accueil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
@media (max-width: 767.98px) { .tuiles-accueil { grid-template-columns: 1fr } }
.tuile-accueil {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; text-align: center; text-decoration: none; aspect-ratio: 1; padding: 1.5rem;
    border: 1px solid var(--bs-border-color); border-radius: 12px;
    background: var(--bs-tertiary-bg); color: var(--bs-body-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tuile-accueil i { font-size: 2.2rem; color: var(--app-couleur) }
.tuile-accueil .titre-tuile { font-weight: 700; font-size: 1.05rem }
.tuile-accueil small { color: var(--bs-secondary-color) }
.tuile-accueil:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-color: var(--app-couleur) }
@media (max-width: 767.98px) {
    .tuile-accueil { aspect-ratio: auto; flex-direction: row; text-align: left; padding: 1rem }
    .tuile-accueil i { font-size: 1.5rem }
}

/* ── Par élève : bandeau (sélecteur d'élève + onglets matière) ── */
.bandeau-eleve { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem }
.bandeau-eleve-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem }
.btn-rond-eleve { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease }
.btn-rond-eleve:hover { background: var(--app-couleur); color: #fff; border-color: var(--app-couleur) }
.select-eleve { flex: 1; min-width: 180px; font-size: 1.1rem; font-weight: 700; padding: 0.45rem 0.75rem }
.bandeau-eleve .form-check-label { color: var(--bs-secondary-color) }
.onglets-matiere-pilules { display: flex; gap: 0.5rem }
.onglet-matiere-pilule { flex: 1; text-align: center; padding: 0.55rem; border-radius: 8px; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); font-weight: 600; cursor: pointer }
.onglet-matiere-pilule.active { border-color: var(--app-couleur); background: color-mix(in srgb, var(--app-couleur) 15%, var(--bs-body-bg)); color: var(--app-couleur) }
.onglet-matiere-pilule:hover:not(.active) { border-color: var(--bs-secondary-color) }

/* Page d'accueil : couleurs des extensions de fichiers dans la phrase d'intro */
.texte-xlsx { color: #1e7e46 }
.texte-pdf { color: #a5271e }
[data-bs-theme="dark"] .texte-xlsx { color: color-mix(in srgb, #1e7e46 65%, white) }
[data-bs-theme="dark"] .texte-pdf { color: color-mix(in srgb, #a5271e 65%, white) }


/* Bouton « Voir un exemple » : pastille à droite de la phrase d'intro */
.pill-demo { margin-left: auto; align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--app-couleur); color: var(--app-couleur); background: var(--bs-body-bg); text-decoration: none; white-space: nowrap }
.pill-demo:hover { background: color-mix(in srgb, var(--app-couleur) 12%, var(--bs-body-bg)); color: var(--app-couleur) }
[data-bs-theme="dark"] .pill-demo { border-color: color-mix(in srgb, var(--app-couleur) 65%, white); color: color-mix(in srgb, var(--app-couleur) 65%, white) }
@media (max-width: 575.98px) { .phrase-page { flex-wrap: wrap } .pill-demo { margin-left: 1.85rem } }