/* Feuille de base de SuiviPeda (lot 7 de l'audit UX, 23/10/2026) : règles de l'identité « Institutionnel »
   (ex-identite.css), correctifs de composants en mode nuit (ex-mode-sombre.css), rendu Quill en lecture
   (ex-quill-lecture.css), œil des mots de passe, accessibilité. Chargée après tokens.css. */

/* ---- Base ---- */
html[data-identite] body {
    font-family: var(--id-font);
    background-color: var(--id-bg);
    color: var(--id-ink);
}
html[data-identite] h1,
html[data-identite] h2,
html[data-identite] h3,
html[data-identite] h4,
html[data-identite] .card-title {
    font-family: var(--id-font);
}
html[data-identite] .text-muted,
html[data-identite] .form-label {
    color: var(--id-soft) !important;
}

/* ---- Bandeau supérieur ---- */
html[data-identite] header.navbar {
    background: var(--id-nav-bg) !important;
    border-bottom: 1px solid var(--id-border);
    box-shadow: none;
    color: var(--id-nav-ink);
}
html[data-identite] header.navbar .navbar-brand,
html[data-identite] header.navbar .navbar-brand * ,
html[data-identite] header.navbar .nav-link,
html[data-identite] header.navbar .nav-link * {
    color: var(--id-nav-ink) !important;
}
html[data-identite] header.navbar .text-muted,
html[data-identite] header.navbar .navbar-brand small {
    color: var(--id-nav-soft) !important;
}
html[data-identite] header.navbar .nav-link:hover,
html[data-identite] header.navbar .nav-link.active {
    background: var(--id-nav-hover);
    border-radius: var(--id-radius-sm);
}

/* ---- Cartes ---- */
html[data-identite] .card,
html[data-identite] .tabler-card,
html[data-identite] .sidebar-col .card {
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
html[data-identite] .sidebar-col .card-header {
    background: transparent;
    border-bottom: 1px solid var(--id-border);
    border-radius: var(--id-radius) var(--id-radius) 0 0 !important;
    font-weight: 700;
    color: var(--id-ink);
}
html[data-identite] .sidebar-col .list-group-item {
    background: transparent;
    border-bottom: 1px solid var(--id-border);
    color: var(--id-ink);
}
html[data-identite] .sidebar-col .list-group-item.active,
html[data-identite] .list-group-item.active {
    background: rgba(var(--id-primary-rgb), 0.12);
    border-color: var(--id-border);
    box-shadow: inset 4px 0 0 var(--id-primary);
    color: var(--id-primary);
    font-weight: 700;
}

/* ---- En-têtes de section : plus de bandeau plein coloré ---- */
html[data-identite] .onglet-header.card-header {
    background: var(--id-surface);
    color: var(--id-ink);
    border-bottom: 1px solid var(--id-border);
    box-shadow: inset 6px 0 0 var(--id-primary), inset -6px 0 0 var(--id-primary);
    border-radius: var(--id-radius);
}
html[data-identite] .onglet-header .card-title,
html[data-identite] .onglet-header h1,
html[data-identite] .onglet-header h2,
html[data-identite] .onglet-header i {
    color: var(--id-ink) !important;
}
html[data-identite] .onglet-header .card-title {
    font-family: var(--id-hand);
    font-size: var(--id-hand-size);
    font-weight: 700;
    line-height: 1.1;
}
html[data-identite] .tabler-card .card-header {
    background: var(--id-surface-2);
    color: var(--id-ink);
    border-bottom: 1px solid var(--id-border);
    border-radius: var(--id-radius) var(--id-radius) 0 0;
}
html[data-identite] .tabler-card .card-header h2,
html[data-identite] .tabler-card .card-header h3,
html[data-identite] .tabler-card .card-header .card-title {
    color: var(--id-ink);
    font-weight: 700;
}
html[data-identite] .tabler-card .card-header .btn {
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #ffffff;
    border-radius: var(--id-radius-sm);
}
html[data-identite] .tabler-card .card-header .btn:hover {
    background: var(--id-primary);
    filter: brightness(0.92);
}

/* ---- Boutons, champs ---- */
html[data-identite] .btn {
    border-radius: var(--id-radius-sm);
    font-weight: 600;
}
html[data-identite] {
    --id-success: #2f7d55;
    --id-danger: #b3382c;
    --id-warning: #b5650a;
}
html[data-identite][data-bs-theme="dark"] {
    --id-success: #4aa675;
    --id-danger: #e06a5d;
    --id-warning: #e0963a;
}
/* Couleurs d'action : une seule déclinaison par rôle, dans toute l'application */
html[data-identite] .btn-primary,
html[data-identite] .btn-success,
html[data-identite] .btn-danger,
html[data-identite] .btn-warning {
    color: #ffffff;
    border-width: 1px;
    border-style: solid;
    background-image: none;
}
html[data-identite] .btn-primary { background: var(--id-primary); border-color: var(--id-primary); }
html[data-identite] .btn-success { background: var(--id-success); border-color: var(--id-success); }
html[data-identite] .btn-danger  { background: var(--id-danger);  border-color: var(--id-danger); }
html[data-identite] .btn-warning { background: var(--id-warning); border-color: var(--id-warning); }
html[data-identite] .btn-info    { background: var(--id-primary); border-color: var(--id-primary); color: #ffffff; }
html[data-identite] .btn-secondary {
    background: var(--id-surface-2);
    border: 1px solid var(--id-border);
    color: var(--id-ink);
}
html[data-identite] .btn-primary:hover,
html[data-identite] .btn-success:hover,
html[data-identite] .btn-danger:hover,
html[data-identite] .btn-warning:hover,
html[data-identite] .btn-info:hover {
    filter: brightness(0.92);
    color: #ffffff;
}
html[data-identite] .btn-secondary:hover {
    filter: brightness(0.96);
    color: var(--id-ink);
}
html[data-identite] .form-control,
html[data-identite] .form-select,
html[data-identite] .tabler-card .form-control,
html[data-identite] .tabler-card .form-select,
html[data-identite] .tabler-card textarea {
    border-radius: var(--id-radius-sm);
    border-color: var(--id-border);
    background-color: var(--id-surface);
    color: var(--id-ink);
}
html[data-identite] .form-control:focus,
html[data-identite] .form-select:focus,
html[data-identite] .tabler-card .form-control:focus,
html[data-identite] .tabler-card .form-select:focus,
html[data-identite] .tabler-card textarea:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--id-primary-rgb), 0.18);
}

/* ---- Panel Prof et Admin : en-têtes neutres, menu à plat ---- */
html[data-identite] .prof-card .card-header,
html[data-identite] .admin-card .card-header:not(.sysop-header) {
    background: var(--id-surface-2);
    color: var(--id-ink);
    border-bottom: 1px solid var(--id-border);
    border-radius: var(--id-radius) var(--id-radius) 0 0;
}
html[data-identite] .prof-card .card-header *:not(.btn):not(.badge),
html[data-identite] .admin-card .card-header:not(.sysop-header) *:not(.btn):not(.badge) {
    color: var(--id-ink);
}
html[data-identite] .prof-card,
html[data-identite] .admin-card {
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
html[data-identite] .menu-category-btn:hover,
html[data-identite] .menu-category-btn.active {
    background: rgba(var(--id-primary-rgb), 0.12);
    color: var(--id-primary);
}

/* ---- Pages publiques : voir css/public.css (carte .auth-*, bandeau .page-hero ; lot 7) ---- */
html[data-identite] .feature-icon-landing {
    background: var(--id-primary);
}
html[data-identite] .stat-card-landing {
    background: var(--id-primary);
}
html[data-identite] header.navbar .navbar-toggler {
    color: var(--id-nav-ink);
    border-color: var(--id-nav-soft);
}
html[data-identite] header.navbar .navbar-toggler-icon {
    filter: none;
}
html[data-identite] .stat-number {
    color: var(--id-primary);
}

/* ---- États vides : message lisible, même présentation partout ---- */
html[data-identite] p.text-center.text-muted.p-4,
html[data-identite] .etat-vide,
html[data-identite] .empty .empty-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 1rem;
    padding: 1.75rem 1rem !important;
    border: 1.5px dashed var(--id-border);
    border-radius: var(--id-radius);
    background: var(--id-surface-2);
    color: var(--id-ink) !important;
    font-weight: 600;
}
html[data-identite] p.text-center.text-muted.p-4::before {
    content: "\eac4";
    font-family: "tabler-icons";
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--id-primary);
}

/* ---- Compte en lecture seule (AESH) : on retire les commandes de saisie ---- */
html[data-lecture-seule] .btn:has(.ti-plus),
html[data-lecture-seule] .btn:has(.ti-pencil),
html[data-lecture-seule] .btn:has(.ti-edit),
html[data-lecture-seule] .btn:has(.ti-trash),
html[data-lecture-seule] .btn:has(.ti-device-floppy),
html[data-lecture-seule] .dropdown:has(> .btn .ti-plus),
html[data-lecture-seule] .content-col .card-header .btn,
html[data-lecture-seule] .content-col .card-header .dropdown,
html[data-lecture-seule] .tabler-card form button[type="submit"],
html[data-lecture-seule] .sub-form {
    display: none !important;
}

/* ---- Correctifs du 22/10/2026 (lot 0 de l'audit UX) ---- */
/* Pastille de l'élève dans l'en-tête d'onglet : ses blancs translucides étaient faits pour
   l'ancien bandeau violet ; sur l'en-tête clair de l'identité elle était invisible. */
html[data-identite] .onglet-header .eleve-avatar {
    background: var(--id-primary);
    border: 2px solid var(--id-primary);
    color: #ffffff;
}
/* Outil actif et survol dans les menus Prof/Admin : même teinte que les catégories
   (les gabarits gardaient leur vert/orange historique sur ces liens). */
html[data-identite] .menu-tools a:hover,
html[data-identite] .menu-tools a.active {
    background: rgba(var(--id-primary-rgb), 0.12);
    color: var(--id-primary);
    border-left-color: var(--id-primary);
}
html[data-identite] .menu-tools a.active {
    font-weight: 700;
}

/* ---- Lot 1 (22/10/2026) : élève courant et flèches dans le bandeau d'onglet ---- */
html[data-identite] .eleve-sous { color: var(--id-soft); opacity: 1; }
html[data-identite] .eleve-badge { background: rgba(var(--id-primary-rgb), 0.12); color: var(--id-primary); }
html[data-identite] .eleve-nav { background: var(--id-surface-2); color: var(--id-primary); border: 1px solid var(--id-border); }
html[data-identite] .eleve-nav:hover { background: rgba(var(--id-primary-rgb), 0.12); color: var(--id-primary); }

/* ---- Lot 4 (23/10/2026) : état vide commun, pilules, sélecteur d'élèves, validation ---- */
.etat-vide { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 1rem; padding: 1.75rem 1rem; text-align: center; border: 1.5px dashed var(--id-border, #d8dee8); border-radius: var(--id-radius, 8px); background: var(--id-surface-2, #eef2f7); }
.etat-vide-icone { font-size: 1.9rem; color: var(--id-primary, #1f5fbf); }
.etat-vide-titre { font-weight: 600; color: var(--id-ink, #0e2b4d); }
.etat-vide-texte { font-size: 0.85rem; color: var(--id-soft, #4a5f7d); max-width: 36rem; }
.etat-vide-action { margin-top: 0.5rem; }
html[data-identite] .etat-vide { color: var(--id-ink); }
.pilules { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pilules .btn { border-radius: 999px; }
.pilules .pilule-autre-champ { max-width: 16rem; }
html[data-identite] .pilules .btn-check:checked + .btn { background: var(--id-primary); border-color: var(--id-primary); color: #ffffff; }
html[data-identite] .pilules .btn-check:focus-visible + .btn { box-shadow: 0 0 0 0.2rem rgba(var(--id-primary-rgb), 0.3); }
.selecteur-eleves-liste .form-check { margin-bottom: 0.25rem; }
.was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: var(--id-danger, #b3382c); }
.was-validated .pilules:has(.btn-check:invalid) .btn { border-color: var(--id-danger, #b3382c); }

/* ---- Lot 5 (23/10/2026) : fil d'Ariane, tiroir du menu sur mobile, pilules des dispositifs ---- */
.fil-ariane { color: var(--id-soft, #4a5f7d); }
.fil-ariane a { color: var(--id-primary, #1f5fbf); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane-sep { margin: 0 0.15rem; }
@media (max-width: 767.98px) {
    .prof-sidebar.offcanvas-md, .admin-sidebar.offcanvas-md { --tblr-offcanvas-width: 300px; width: 300px; flex: none; }
    .prof-sidebar.offcanvas-md .card, .admin-sidebar.offcanvas-md .card { border: 0; border-radius: 0; box-shadow: none; }
}


/* ---- Composants en mode nuit (ex-mode-sombre.css) ---- */
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-control {
    background-color: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-select option {
    color: var(--tblr-body-color) !important;
}
html[data-bs-theme="dark"] .choices__inner {
    background-color: var(--tblr-bg-forms);
    border-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .ql-toolbar.ql-snow,
html[data-bs-theme="dark"] .ql-container.ql-snow {
    border-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .ql-snow .ql-stroke,
html[data-bs-theme="dark"] .ql-snow .ql-stroke-miter {
    stroke: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .ql-snow .ql-fill,
html[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--tblr-bg-surface);
    border-color: var(--tblr-border-color) !important;
}
html[data-bs-theme="dark"] .ql-snow .ql-picker-label,
html[data-bs-theme="dark"] .ql-snow .ql-picker-item {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--tblr-bg-surface-tertiary) !important;
}
html[data-bs-theme="dark"] .bg-light {
    background-color: var(--tblr-bg-surface-tertiary) !important;
}
html[data-bs-theme="dark"] .bg-white.text-dark {
    color: var(--tblr-body-color) !important;
}
html[data-bs-theme="dark"] .menu-category {
    border-bottom-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .menu-category-btn {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .menu-tools {
    background: var(--tblr-bg-surface-tertiary);
}
html[data-bs-theme="dark"] .menu-tools a {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .menu-tools a:hover,
html[data-bs-theme="dark"] .menu-tools a.active {
    background: var(--tblr-active-bg);
}
html[data-bs-theme="dark"] .menu-tools.sysop-tools a:hover,
html[data-bs-theme="dark"] .menu-tools.sysop-tools a.active,
html[data-bs-theme="dark"] .menu-tools a.sysop-link:hover,
html[data-bs-theme="dark"] .menu-tools a.sysop-link.active {
    background: var(--id-sysop-lt);
}
html[data-bs-theme="dark"] .recherche-declencheur {
    border-bottom-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .recherche-bouton {
    background: var(--tblr-bg-surface-tertiary);
    border-color: var(--tblr-border-color);
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-bouton:hover,
html[data-bs-theme="dark"] .recherche-bouton:focus-visible {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .recherche-bouton kbd,
html[data-bs-theme="dark"] .recherche-pied kbd,
html[data-bs-theme="dark"] .recherche-fermer {
    background: var(--tblr-bg-surface);
    border-color: var(--tblr-border-color);
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-boite {
    background: var(--tblr-bg-surface);
}
html[data-bs-theme="dark"] .recherche-entete {
    border-bottom-color: var(--tblr-border-color);
}
html[data-bs-theme="dark"] .recherche-champ {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .recherche-item {
    color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .recherche-item.actif {
    background: var(--tblr-active-bg);
}
html[data-bs-theme="dark"] .recherche-desc {
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-etiquette {
    background: var(--tblr-bg-surface-tertiary);
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-vide {
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-exemples-titre {
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .recherche-puce {
    background: var(--tblr-bg-surface-tertiary);
    border-color: var(--tblr-border-color);
    color: #9fb0ff;
}
html[data-bs-theme="dark"] .recherche-puce:hover {
    background: var(--tblr-active-bg);
}
html[data-bs-theme="dark"] .recherche-pied {
    background: var(--tblr-bg-surface-tertiary);
    border-top-color: var(--tblr-border-color);
    color: var(--tblr-secondary-color, #9aa4b2);
}
html[data-bs-theme="dark"] .table-success {
    --tblr-table-color: var(--tblr-body-color);
    --tblr-table-bg: #22402a;
    --tblr-table-border-color: #2e4f36;
    --tblr-table-striped-bg: #1e3824;
    --tblr-table-striped-color: var(--tblr-body-color);
    --tblr-table-active-bg: #2e4f36;
    --tblr-table-active-color: var(--tblr-body-color);
    --tblr-table-hover-bg: #294a30;
    --tblr-table-hover-color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .table-danger {
    --tblr-table-color: var(--tblr-body-color);
    --tblr-table-bg: #4a2626;
    --tblr-table-border-color: #5c3232;
    --tblr-table-striped-bg: #432222;
    --tblr-table-striped-color: var(--tblr-body-color);
    --tblr-table-active-bg: #5c3232;
    --tblr-table-active-color: var(--tblr-body-color);
    --tblr-table-hover-bg: #553030;
    --tblr-table-hover-color: var(--tblr-body-color);
}
html[data-bs-theme="dark"] .upload-zone {
    background: var(--tblr-bg-surface-tertiary) !important;
}
html[data-bs-theme="dark"] .sysop-liens-table {
    background: var(--tblr-bg-surface-tertiary) !important;
    color: var(--tblr-body-color) !important;
}

/* ---- Rendu Quill en lecture (ex-quill-lecture.css) ---- */

.ql-snow .ql-picker.ql-size { width: 100px; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Normal'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: 'Petit'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: 'Grand'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: 'Très grand'; }

.ql-size-small { font-size: 0.75em; }
.ql-size-large { font-size: 1.5em; }
.ql-size-huge  { font-size: 2.5em; }

/* Oeil pour afficher/masquer un mot de passe (ajouté automatiquement sur tout input[type=password]) */
.password-toggle-wrapper { position: relative; }
.password-toggle-wrapper input[type="password"],
.password-toggle-wrapper input[type="text"] { padding-right: 2.75rem; }
.password-toggle-btn {
    position: absolute; top: 50%; right: 0.25rem; transform: translateY(-50%);
    background: none; border: none; padding: 0; margin: 0; line-height: 1;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    cursor: pointer; color: var(--id-soft, #4a5f7d); display: flex; align-items: center; justify-content: center; z-index: 5;
}
.password-toggle-btn:hover { color: var(--id-ink, #0e2b4d); background: rgba(var(--id-primary-rgb, 31, 95, 191), 0.08); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--id-primary, #1f5fbf); outline-offset: 1px; }

/* ---- Accessibilité et cibles (lot 7, 23/10/2026) ---- */
/* Anneau de focus visible au clavier, jamais supprimé */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.menu-tools a:focus-visible, .menu-category-btn:focus-visible, .nav-link:focus-visible {
    outline: 2px solid var(--id-primary, #1f5fbf); outline-offset: 2px; box-shadow: none;
}
.creneau-btn:focus-visible { outline: 2px solid var(--id-primary, #1f5fbf); }
/* Texte secondaire : contraste suffisant sur fond clair comme sur fond sombre */
html[data-identite] .form-control::placeholder { color: var(--id-soft); opacity: 0.85; }
/* Cibles tactiles : au moins 44 px pour les petits boutons ronds */
.letter-badge { min-width: 44px; min-height: 44px; }
/* Barre d'onglets mobile : libellés passés de 0,64 à 0,74 rem directement dans dashboard.css (chargée après). */
@media (max-width: 767.98px) {
    .sous-onglets .btn { padding-top: 0.35rem; padding-bottom: 0.35rem; }
}
/* Icônes décoratives : la police tabler-icons n'a rien à lire */
.ti::before { speak: never; }

/* ---- En-têtes et pilules de niveau par variable --niveau (lot 7) ----
   Remplace les sélecteurs [style*="background"] : l'onglet pose style="--niveau: #xxx" et la feuille
   dessine une carte claire avec un filet de la couleur du niveau de chaque côté. */
html[data-identite] .card-header.entete-niveau {
    background: var(--id-surface);
    color: var(--id-ink);
    border-bottom: 1px solid var(--id-border);
    border-radius: var(--id-radius) var(--id-radius) 0 0;
    box-shadow: inset 6px 0 0 var(--niveau, var(--id-primary)), inset -6px 0 0 var(--niveau, var(--id-primary));
}
html[data-identite] .card-header.entete-niveau *:not(.btn):not(.badge) { color: var(--id-ink); }
html[data-identite] .card-header.entete-niveau .btn { background: var(--id-primary); border: 1px solid var(--id-primary); color: #ffffff; }
html[data-identite] .card-header.entete-niveau .btn *:not(.ti-x):not(.ti-xx):not(.ti-xxx) { color: #ffffff; }
html[data-identite] .card-header.entete-niveau .badge.bg-white { background: rgba(var(--id-primary-rgb), 0.12) !important; color: var(--id-primary) !important; }
html[data-identite] .sous-onglets a.btn.pilule-niveau-active {
    background: var(--id-surface);
    color: var(--id-ink);
    border-color: var(--id-border);
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--niveau, var(--id-primary)), inset -4px 0 0 var(--niveau, var(--id-primary));
}
html[data-identite] .sous-onglets a.btn.pilule-niveau-active .badge.bg-white { background: rgba(var(--id-primary-rgb), 0.12) !important; color: var(--id-primary) !important; }

/* ---- Bandeau commun des trois surfaces (ex-bloc <style> de includes/nav_header_buttons.php, lot 7) ---- */
    /* Liens de navigation du header (26/09/2026) : style "ghost" (fond transparent, icône +
       texte), plutôt que les anciens boutons pleins d'une couleur différente chacun. La couleur
       du texte suit déjà le thème de chaque page sans rien ajouter ici : .nav-link lit
       --tblr-navbar-color (= --tblr-body-color, adapté au mode nuit) sur fond neutre, et
       .navbar-admin/.navbar-prof le forcent en blanc sur leur bandeau coloré (règles existantes
       plus haut dans la page). */
    .header-nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0.5rem 0.7rem;
        border-radius: var(--tblr-border-radius, 6px);
        font-weight: 600;
        font-size: 0.875rem;
        white-space: nowrap;
        transition: background-color 0.15s ease;
    }
    .header-nav-link:hover,
    .header-nav-link.active {
        background-color: rgba(0, 0, 0, 0.06);
    }
    html[data-bs-theme="dark"] .header-nav-link:hover,
    html[data-bs-theme="dark"] .header-nav-link.active {
        background-color: rgba(255, 255, 255, 0.08);
    }
    /* Sur les bandeaux toujours colorés (Admin orange, Panel Prof vert), le survol/actif reste
       un voile blanc translucide quel que soit le mode : !important pour primer sur la règle
       "mode nuit" ci-dessus, comme le fait déjà .navbar-admin .nav-link { color: white !important }. */
    .navbar-admin .header-nav-link:hover,
    .navbar-admin .header-nav-link.active,
    .navbar-prof .header-nav-link:hover,
    .navbar-prof .header-nav-link.active {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    .header-nav-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: rgba(127, 127, 127, 0.25);
        color: inherit;
        font-size: 0.75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;
    }
    .header-nav-avatar img { width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 575.98px) {
        .header-nav-label { display: none; }
    }
    /* Hamburger mobile (02/10/2026) : sous 768px, le bouton mode nuit et les liens Suivi
       élèves/Admin/Panel Prof (toujours affichés, cf. docblock en tête de fichier) sont masqués
       en tant que boutons séparés et regroupés dans le menu déroulant du compte, dont le
       déclencheur devient une icône ☰ plutôt que l'avatar — évite d'encombrer le header sur un
       petit écran. Desktop inchangé : même menu, déclencheur avatar, pas de ces entrées. */
    @media (max-width: 767.98px) {
        .header-top-link { display: none !important; }
        .header-menu-trigger .header-nav-avatar { display: none; }
        .header-menu-trigger .header-nav-chevron { display: none; }
        .header-menu-trigger .header-menu-burger { display: inline-block !important; }
        .mobile-menu-item { display: flex !important; }
    }
    .header-menu-burger { display: none; font-size: 1.35rem; }
    .mobile-menu-item { display: none; }