:root {
    --brand: #1d4ed8;
    --brand-dark: #1e3a8a;
    --bg: #f7f8fb;
    --card: #ffffff;
    --border: #e2e5ec;
    --text: #1f2430;
    --text-muted: #667085;
    --danger: #c0392b;
    --success: #1e824c;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1500px; margin: 0 auto; padding: 10px 16px 60px; }

/* Un tableau qui a besoin de toute la largeur de la fenêtre (ex. permissions,
 * livres) peut "déborder" du conteneur de 1500px pour utiliser tout l'écran,
 * afin d'éviter le défilement horizontal sur les grands tableaux. */
.full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 20px;
    box-sizing: border-box;
}

body { padding-top: 8px; }

.site-header {
    background: var(--brand-dark);
    color: #fff;
    max-width: 1500px;
    margin: 0 auto 8px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(30,58,138,0.18);
}
.site-header-inner {
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.brand { color: #fff; font-weight: 700; font-size: 1.15rem; }
.brand:hover { text-decoration: none; opacity: 0.9; }
.top-nav { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; flex-wrap: wrap; }
.top-nav a { color: #dbe4ff; padding: 6px 4px; }
.top-nav a:hover { color: #fff; }
.who { color: #cbd5f5; padding-right: 6px; }
.logout-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 12px !important;
}
.logout-link:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.logout-icon { font-size: 1rem; }
.online-indicator {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 12px !important;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.online-indicator .icon-dot { color: #37d67a; width: 10px; height: 10px; }

/* ---------------------------------------------------------------
 * Icônes vectorielles sobres (remplacent les émojis "en 3D"). Un
 * seul trait, couleur héritée (currentColor), même esprit que le
 * pictogramme de déconnexion.
 * ------------------------------------------------------------- */
.icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.icon-lg { width: 1.3rem; height: 1.3rem; }
.online-indicator:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.login-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px !important;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff !important;
    font-weight: 600;
}
.login-link:hover { background: rgba(255,255,255,0.22); text-decoration: none; }
.btn-admin-nav {
    background: #f2b705;
    color: #3a2c00 !important;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 14px !important;
}
.btn-admin-nav:hover { background: #ffc61a; text-decoration: none; }
/* Bouton "Conseil de classe" (page d'accueil) : encadré en orange et mis en valeur au
   survol, pour que les professeurs repèrent facilement les dates des conseils. */
.btn-conseil-classe {
    border: 2px solid #f2b705 !important;
    color: #b5790a;
    font-weight: 700;
}
.btn-conseil-classe:hover {
    background: #fff4d6 !important;
    color: #8a5a00;
    text-decoration: none;
}
.btn-activites {
    border: 2px solid #e0399b !important;
    color: #a3126e;
    font-weight: 700;
}
.btn-activites:hover {
    background: #fce4f2 !important;
    color: #7d0e54;
    text-decoration: none;
}
/* Bouton "disquette" à gauche du bouton Administration : sauvegarde complète du logiciel
   (code + données) en un clic, sans passer par Administration → Apparence. */
.btn-header-backup {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font: inherit;
    border-radius: 50%;
    flex-shrink: 0;
}
.module-nav { background: rgba(0,0,0,0.15); padding-top: 10px; padding-bottom: 10px; }
.module-nav.site-header-inner { justify-content: center; }
.module-nav .top-nav {
    gap: 2px 4px;
    font-size: 0.78rem;
    flex-wrap: nowrap;
    justify-content: center;
    /* .site-header-inner (barre du haut) est un flex "space-between" prévu pour deux
       éléments (logo + nav) ; réutilisé ici pour un seul enfant (<nav>), celui-ci ne
       s'étirait pas sur toute la largeur — donc son propre justify-content:center
       n'avait aucun effet et les boutons du menu restaient collés à gauche. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.module-nav .top-nav a { white-space: nowrap; }
.module-nav .top-nav a {
    color: #c7d3f5;
    /* Séparation physique entre chaque bouton du menu, même non sélectionné, pour
       bien les distinguer les uns des autres. */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 5px 8px;
}
.module-nav .top-nav a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.module-nav .top-nav a.active {
    color: #fff;
    font-weight: 700;
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.4);
    padding: 5px 8px;
    border-radius: 999px;
}
/* Couleur de bordure des boutons du menu selon le rôle du compte connecté (voir
   includes/header.php) : blanc pour un professeur, jaune pour un CPE, rouge pour un
   administrateur. Le texte reste toujours blanc, quel que soit le rôle. */
/* Bordure des boutons du menu selon la PAGE (et non selon le rôle du compte connecté) :
   blanche pour les pages accessibles aux professeurs, jaune pour les pages à accès
   plus restreint (Casiers, PASS Région, Livres, Bourses) — voir includes/header.php. */
.module-nav-white { border-color: rgba(255,255,255,0.55); color: #fff; }
.module-nav-yellow { border-color: #f2b705; color: #fff; }
.module-nav-white:hover,
.module-nav-yellow:hover { color: #fff; }
.module-nav-white.active { background: rgba(255,255,255,0.22); }
.module-nav-yellow.active { background: rgba(242,183,5,0.3); }
@media (max-width: 1000px) {
    .module-nav .top-nav { font-size: 0.72rem; }
    .module-nav .top-nav a, .module-nav .top-nav a.active { padding: 4px 6px; }
}

/* Menu mobile en "burger" : la checkbox cachée + son label pilotent l'affichage du
   menu (.top-nav) en dessous de 700px, sans JavaScript. Au-dessus de 700px, le
   bouton burger est masqué et le menu s'affiche normalement sur une ligne. */
.mobile-menu-toggle-input { display: none; }
.mobile-menu-toggle-btn { display: none; }
@media (max-width: 700px) {
    /* Le bouton burger est épinglé en haut à droite du bandeau (même ligne que le logo),
       en position absolue pour ne jamais être repoussé sur une ligne séparée même si les
       infos de connexion (nom, "en ligne", déconnexion…) passent à la ligne à côté de lui. */
    .site-header { position: relative; }
    .site-header > .site-header-inner:first-of-type {
        position: relative;
        padding-right: 54px;
    }
    .mobile-menu-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        position: absolute;
        top: 12px;
        right: 12px;
        color: #fff;
        background: rgba(255,255,255,0.12);
        border-radius: 8px;
        cursor: pointer;
        z-index: 5;
    }
    /* Tant que le menu n'est pas ouvert, ce bandeau ne prend quasiment aucune hauteur :
       il ne se voit pas comme une ligne supplémentaire sous le bandeau principal. */
    .module-nav { padding-top: 0; padding-bottom: 0; }
    #mobile-menu-toggle:checked ~ .module-nav { padding-top: 8px; padding-bottom: 8px; }
    .module-nav .top-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        overflow-x: visible;
        width: 100%;
        gap: 4px;
    }
    #mobile-menu-toggle:checked ~ .module-nav .top-nav { display: flex; }
    .module-nav .top-nav a { text-align: center; }
}

.site-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 24px 16px;
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.2rem; margin: 28px 0 12px; }
.subtitle { color: var(--text-muted); margin: 0 0 20px; }

/* Onglets trimestres */
.trimester-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 22px;
}
.trimester-tabs a {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
}
.trimester-tabs a:hover { text-decoration: none; border-color: var(--brand); }
.trimester-tabs a.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Barre combinée trimestres + classes + "Plus d'options" + impression, TOUT sur
 * une seule ligne (page d'accueil), pour limiter la hauteur prise avant d'arriver
 * aux évaluations elles-mêmes. Les trimestres occupent environ les deux tiers de
 * la largeur ; les classes, le bouton "Plus d'options" (vert) et les contrôles
 * d'impression se partagent le tiers restant, alignés à droite. */
.quick-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 10px 0 8px;
}
.quick-bar .trimester-tabs {
    margin: 0;
    flex: 1 1 62%;
    min-width: 0;
}
.quick-bar .classe-tabs {
    margin: 0;
    flex: 0 1 auto;
}
.trimester-tabs.compact { gap: 5px; }
.trimester-tabs.compact a { padding: 4px 10px; font-size: 0.78rem; line-height: 1.3; }
.trimester-tabs.compact a small { font-size: 0.68rem; }
/* Afficher/cacher les dates de trimestre séparément bureau / mobile (voir
 * Administration → Apparence). */
@media (min-width: 701px) {
    .trimester-dates.hide-desktop { display: none; }
}
@media (max-width: 700px) {
    .trimester-dates.hide-mobile { display: none; }
    /* Les trois trimestres restent sur une seule ligne sur mobile, quitte à défiler
     * horizontalement, plutôt que le 3e trimestre qui retombe à la ligne. */
    .trimester-tabs.compact {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .trimester-tabs.compact a {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 0.72rem;
    }
}
.classe-tabs.compact { gap: 5px; }
.classe-tabs.compact a { padding: 3px 9px; font-size: 0.76rem; }
.classe-tabs.compact .classe-tabs-label { font-size: 0.76rem; }

.btn-more-options {
    flex: 0 0 auto;
    white-space: nowrap;
    background: #21a05a;
    border-color: #21a05a;
    color: #fff;
    padding: 6px 12px;
    font-size: 0.8rem;
}
.btn-more-options:hover { background: #1b8a4c; border-color: #1b8a4c; }
.btn-more-options.open { background: #14603a; border-color: #14603a; }

.print-controls-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.print-controls-inline select { font-size: 0.8rem; padding: 4px 6px; }
.print-controls-inline .btn-print { padding: 6px 10px; font-size: 0.8rem; }

.more-options-panel { display: none; }
.more-options-panel.open { display: block; }

/* Boutons d'action rapide de la page d'accueil (ajouter / saisie en masse) : intégrés
   directement dans la barre du haut (.quick-bar) pour ne pas ajouter de ligne
   supplémentaire sur la page. */
.home-quick-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.btn-add-round {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-add-round:hover { background: #1d4fd1; }
.btn-add-round .icon { width: 1.1em; height: 1.1em; }
.btn-add-bulk-round { background: #21a05a; width: auto; padding: 0 10px; border-radius: 999px; gap: 0; }
.btn-add-bulk-round:hover { background: #1b8a4c; }
.btn-add-bulk-round .icon:first-child { margin-right: -4px; }

.year-select { margin-bottom: 10px; font-size: 0.9rem; color: var(--text-muted); }

.weekday-label { display: inline-block; margin-left: 4px; color: var(--text-muted); font-style: italic; }

/* Onglet Administration → Apparence : deux colonnes côte à côte pour tout voir sans
   avoir à scroller. */
.apparence-columns { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.apparence-col { flex: 1 1 380px; min-width: 320px; }
.apparence-col .card { max-width: none; }
.year-select select { margin-left: 6px; }

/* Sélecteur de plage de dates (page publique) */
.date-range-form {
    display: flex;
    align-items: center;
    gap: 10px 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.date-range-form label { display: flex; align-items: center; gap: 6px; }
.date-range-form input[type=date] {
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
}
.date-range-quick { display: flex; align-items: center; gap: 6px; }

/* Tableau planning */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
table.planning { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.planning th, table.planning td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
table.planning th {
    background: #f0f2f8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: center;
}
table.planning tr:last-child td { border-bottom: none; }
table.planning td.date-cell { white-space: nowrap; font-weight: 600; }
table.planning td.day-cell { white-space: nowrap; color: var(--text-muted); }

/* Congés */
tr.row-holiday td { background: #eef0f3; }
tr.row-holiday td.day-cell, tr.row-holiday td.date-cell { color: var(--text-muted); }
td.holiday-cell {
    text-align: center;
    font-style: italic;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-list { display: flex; flex-direction: column; gap: 6px; }
.eval-badge {
    background: #eef2ff;
    border: 1px solid #dbe4ff;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.85rem;
}
.eval-badge .eval-type { font-weight: 700; color: var(--brand-dark); display: block; }
.eval-badge .eval-desc { color: var(--text); }
.eval-badge .eval-actions { margin-top: 4px; font-size: 0.78rem; }
.eval-badge .eval-actions a { margin-right: 10px; }
.eval-badge .eval-actions .del { color: var(--danger); }

.empty { color: var(--text-muted); font-style: italic; padding: 24px; text-align: center; }

/* Formulaires */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; max-width: 560px; }
/* Passage de classe (fin d'année) : cascade d'étapes à suivre dans l'ordre (voir
   admin.php, section "niveaux") — une seule étape est active à la fois, les précédentes
   sont marquées terminées, les suivantes sont grisées et désactivées tant que l'étape
   qui les précède n'est pas terminée. */
.promotion-steps { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: 24px; }
.promotion-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.promotion-step-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.9rem;
    background: #e5e7eb;
    color: var(--text-muted);
}
.promotion-step-body { flex: 1 1 auto; min-width: 0; }
.promotion-step-active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
.promotion-step-active .promotion-step-badge { background: var(--brand); color: #fff; }
.promotion-step-done { opacity: 0.7; }
.promotion-step-done .promotion-step-badge { background: #16a34a; color: #fff; }
.promotion-step-pending { opacity: 0.55; }
.promotion-step-pending button[disabled] { cursor: not-allowed; }
.bulk-generate-fullwidth { max-width: none; width: 100%; box-sizing: border-box; }
.bulk-generate-fullwidth .form-inline { align-items: flex-end; }
.bulk-student-scroll { max-height: 110px; overflow-y: auto; padding-right: 4px; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; }
.form-row input[type=text], .form-row input[type=password], .form-row input[type=date], .form-row select, .form-row textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: var(--text);
}
.form-row textarea { min-height: 70px; resize: vertical; }
.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-inline .form-row { flex: 1; min-width: 140px; margin-bottom: 0; }

button, .btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    margin: 3px 6px 3px 0;
    min-height: 40px;
    line-height: 1.2;
}
button:hover, .btn:hover { background: var(--brand-dark); text-decoration: none; }
button.secondary, .btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
button.secondary:hover, .btn.secondary:hover { background: #f0f2f8; }
button.danger { background: var(--danger); }
/* Icônes "supprimer" (poubelle) : même esprit que le bouton Imprimer — encadrées
 * de rouge plutôt qu'en aplat plein, pour rester sobres et cohérentes. */
button.danger.btn-icon-only, a.danger.btn-icon-only {
    background: #fff;
    color: var(--danger);
    border: 2px solid var(--danger);
}
button.danger.btn-icon-only:hover, a.danger.btn-icon-only:hover { background: #fdecea; }

/* Bouton "Imprimer" : bordure bien visible (verte) pour qu'il se distingue clairement
   des autres boutons secondaires de la page. */
.btn-print, button.btn-print.secondary, .btn.btn-print.secondary {
    border: 2px solid #1f9d55;
    color: #1f9d55;
    font-weight: 600;
}
.btn-print:hover, button.btn-print.secondary:hover, .btn.btn-print.secondary:hover {
    background: #eafaf0;
}

.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.92rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f3c1bb; }
.alert-success { background: #e9f7ef; color: var(--success); border: 1px solid #b7e3c8; }
.alert-info { background: #eaf2fd; color: #1c4e8f; border: 1px solid #c3d9f5; }

/* Admin */
.admin-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
}
.admin-tabs a { padding: 10px 8px; border-bottom: 3px solid transparent; color: var(--text-muted); font-weight: 600; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }
.admin-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 1100px) {
    .admin-tabs a { font-size: 0.72rem; padding: 8px 5px; }
}
.admin-tabs a:hover { text-decoration: none; color: var(--brand); }

table.simple { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; }
table.simple th, table.simple td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9rem; }
table.simple th { background: #f0f2f8; }
table.simple tr:last-child td { border-bottom: none; }
/* Sélection de lignes (voir toggleSelectAllRows()/preparePrintSelected()/exportListPdf()
 * dans footer.php) : colonne de cases à cocher jamais imprimée telle quelle, et si au
 * moins une ligne est cochée, seules les lignes cochées sont imprimées (Ctrl+P / bouton
 * Imprimer) — sans rien cocher, tout s'imprime comme avant. */
.row-select-col { width: 34px; text-align: center; }
@media print {
    body.print-selected-only table.simple tbody tr:not(.row-selected) { display: none !important; }
}
/* Alternance blanc / gris très léger pour distinguer facilement chaque ligne, à
 * l'écran comme à l'impression. */
table.simple tbody tr:nth-child(even):not(.bourse-row-oui):not(.bourse-row-non) { background: #f7f8fb; }
table.simple tbody tr:nth-child(even) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print {
    table.simple tbody tr:nth-child(even):not(.bourse-row-oui):not(.bourse-row-non) {
        background: #f7f8fb !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}
.actions-col { white-space: nowrap; }
.actions-col a { margin-right: 10px; }
.actions-col .del { color: var(--danger); }

.tag { display: inline-block; background: #eef2ff; color: var(--brand-dark); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 600; }

/* Saisie en masse */
.bulk-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bulk-table th { background: #f0f2f8; text-align: center; font-size: 0.78rem; text-transform: uppercase; color: var(--text-muted); padding: 8px; }
.bulk-table td { padding: 8px; border-top: 1px solid var(--border); vertical-align: top; }
.bulk-table input, .bulk-table select, .bulk-table textarea { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.88rem; font-family: inherit; }
.bulk-table textarea { min-height: 40px; resize: vertical; }
.bulk-row-remove { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px 8px; }
.bulk-actions { margin: 14px 0 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Générateur d'identifiants aléatoires (admin) */
.credentials-box {
    background: #eef7ee;
    border: 1px solid #b7e3c8;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}
.credentials-box strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* En-tête "hero" des pages de connexion / installation : logo You Imagine
 * sur fond blanc (voir .auth-topbar/.auth-logo plus bas), puis bandeau bleu. */
.auth-hero {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    color: #fff;
    padding: 40px 24px;
    text-align: center;
}
.auth-hero h1 { color: #fff; font-size: 1.6rem; margin: 0 0 6px; }
.auth-hero p { color: #dbe4ff; margin: 0; font-size: 0.98rem; }

.auth-body { max-width: 1100px; margin: 0 auto; padding: 32px 16px 60px; display: flex; justify-content: center; align-items: flex-start; flex: 1; }
.auth-body .card { width: 100%; max-width: 560px; margin: 60px 0 0; padding: 32px 30px; }
.auth-body .card h2 { font-size: 1.4rem; }

/* Connexion : bouton "Se connecter" et lien "Mot de passe oublié ?" sur la même
   ligne, alignés verticalement, le lien avec une police plus petite. */
.login-actions-row { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.login-actions-row .forgot-link { font-size: 0.82rem; }

/* Mot de passe oublié : libellé et champ e-mail sur la même ligne, champ large,
   bouton d'envoi pleine largeur juste en dessous. */
.form-row-inline-label { display: flex; align-items: center; gap: 12px; }
.form-row-inline-label label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.form-row-inline-label input { flex: 1 1 auto; min-width: 0; }
.auth-main { justify-content: center; }

/* ---------------------------------------------------------------
 * Responsive : téléphones et petits écrans
 * ------------------------------------------------------------- */
@media (max-width: 700px) {
    .container, .auth-body { padding-left: 12px; padding-right: 12px; }

    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.05rem; }

    .site-header-inner { padding: 12px; }
    .top-nav { width: 100%; justify-content: flex-start; gap: 10px 14px; font-size: 0.88rem; }

    /* Les tableaux larges non encapsulés (comptes, trimestres, congés) défilent
       horizontalement plutôt que de casser la mise en page sur petit écran.
       (bulk-table est déjà dans un conteneur .table-wrap qui gère son propre défilement.) */
    table.simple {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    table.simple td, table.simple th { white-space: nowrap; }

    .bulk-table th, .bulk-table td { min-width: 110px; }
    .bulk-table td:nth-child(4) { min-width: 160px; }

    /* Le planning public reste dans son propre conteneur défilant (table-wrap) :
       on réduit juste le texte pour limiter le défilement horizontal. */
    table.planning { font-size: 0.82rem; }
    table.planning th, table.planning td { padding: 8px 8px; }
    .eval-badge { font-size: 0.8rem; }

    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline .form-row { min-width: 0; width: 100%; }

    .date-range-form { flex-direction: column; align-items: stretch; gap: 8px; }
    .date-range-form label { justify-content: space-between; }
    .date-range-form input[type=date] { flex: 1; }

    .trimester-tabs a { padding: 8px 14px; font-size: 0.86rem; }
    .trimester-tabs a small { display: block; font-weight: 400; }

    .card { padding: 16px; }

    button, .btn { width: 100%; text-align: center; margin: 4px 0; }
    .form-inline button, .form-inline .btn,
    .actions-col button, .actions-col .btn,
    table.simple button, table.simple .btn,
    .admin-tabs a, .trimester-tabs a,
    .top-nav a, .site-footer a {
        width: auto;
    }

    .auth-hero { padding: 28px 16px; }
    .auth-hero h1 { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------
 * Matrices de permissions (Administration → Permissions par matière / par page)
 * ------------------------------------------------------------- */
/* Les intitulés de colonnes passent sur deux lignes (au lieu d'un seul "nowrap"
 * très large) pour que le tableau tienne sur la largeur de l'écran sans avoir à
 * faire défiler horizontalement, même avec de nombreuses pages/permissions. */
.perm-matrix th, .perm-matrix td { text-align: center; padding: 6px 4px; }
.perm-matrix th { white-space: normal; word-break: normal; font-size: 0.76rem; line-height: 1.2; max-width: 90px; vertical-align: bottom; }
.perm-matrix td { white-space: nowrap; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; white-space: normal; max-width: none; font-size: 0.88rem; }
.perm-matrix input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; display: block; margin: 0 auto; }

/* Contrôle "Tout cocher / décocher" dans l'en-tête d'une colonne (Congés, Matières) : permet
   de cocher/décocher toute une colonne d'un coup plutôt que ligne par ligne. */
.col-check-all { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; font-size: 0.72rem; white-space: nowrap; cursor: pointer; }
.col-check-all input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; }

/* ---------------------------------------------------------------
 * Ligne "groupe" de la vue compacte du planning (jours vides regroupés)
 * ------------------------------------------------------------- */
.row-group .group-cell {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    background: #fbfbfd;
    padding: 10px;
}

/* ---------------------------------------------------------------
 * Badge "matière" dans les cellules du planning
 * ------------------------------------------------------------- */
.eval-badge .eval-subject {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: var(--brand);
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 3px;
}

/* ---------------------------------------------------------------
 * Calendrier interactif (calendar_entry.php + accueil) — jours de la
 * semaine en lignes, semaines du mois en colonnes (vue "Google Sheet").
 * ------------------------------------------------------------- */
.cal-widget { margin-bottom: 28px; }
/* Affichage de plusieurs mois côte à côte à l'écran sur la page d'accueil (voir index.php,
 * sélecteur "Affichage"). Les mois excédentaires passent automatiquement à la ligne suivante
 * grâce à flex-wrap, qu'il y en ait 1, 2, 3 ou davantage à afficher pour le trimestre. */
/* Restreint explicitement à l'écran (jamais à l'impression, qui a sa propre disposition
 * régie par --print-basis un peu plus bas) pour ne jamais entrer en conflit avec elle,
 * quelle que soit la spécificité respective des sélecteurs. */
@media screen {
    .cal-widget-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
    /* min-width: 0 est indispensable ici : sans lui, un mois dont le contenu de la
     * première ligne (ex. plus de semaines, ou la ligne Semaine A/B) est légèrement
     * plus large que les autres empêche ce bloc flex de rétrécir à la largeur prévue
     * (largeur minimale par défaut d'un enfant flex = largeur de son contenu), ce qui
     * le rendait visiblement plus large que les mois voisins au lieu d'avoir tous
     * exactement la même largeur. Le débordement éventuel est alors géré par le
     * défilement horizontal de .table-wrap (voir plus haut) plutôt que par
     * l'élargissement du bloc mensuel entier.
     */
    .cal-widget-columns .cal-month-block { margin-bottom: 0; min-width: 0; }
    .cal-widget-columns.cal-cols-1 .cal-month-block { flex: 1 1 100%; max-width: 100%; }
    .cal-widget-columns.cal-cols-2 .cal-month-block { flex: 1 1 calc(50% - 9px); max-width: calc(50% - 9px); }
    .cal-widget-columns.cal-cols-3 .cal-month-block { flex: 1 1 calc(33.333% - 12px); max-width: calc(33.333% - 12px); }
}
@media screen and (max-width: 900px) {
    .cal-widget-columns.cal-cols-2 .cal-month-block,
    .cal-widget-columns.cal-cols-3 .cal-month-block { flex: 1 1 100%; max-width: 100%; }
}
.cal-month-title {
    margin: 20px 0 8px;
    font-size: 1.05rem;
    color: var(--brand-dark);
}
.cal-legend { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }
table.cal-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.82rem; }
table.cal-table th, table.cal-table td.cal-cell {
    border: 1px solid var(--border);
    vertical-align: top;
}
table.cal-table th {
    width: 46px;
    background: #f2f4f9;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 6px 2px;
}
td.cal-cell {
    background: var(--card);
    min-height: 74px;
    height: 74px;
    padding: 4px 5px;
    overflow: hidden;
}
td.cal-cell.cal-pad { background: transparent; border-color: transparent; }
td.cal-cell.cal-disabled { background: #f2f2f5; color: var(--text-muted); }

/* Case du jour actuel : mise en évidence par un encadré et un fond distinct, pour
 * se repérer d'un coup d'œil dans le calendrier. */
td.cal-cell.cal-today {
    background: #fff8e1;
    border: 2px solid #f2b705;
    box-shadow: inset 0 0 0 1px #f2b705;
}
td.cal-cell.cal-today .cal-daynum { font-weight: 800; color: #8a6400; }

/* Une couleur différente par mois (12 teintes) sur l'en-tête de la colonne des
 * jours (Lun/Mar/.../Dim), pour distinguer visuellement chaque mois du calendrier. */
.cal-month-color-0 table.cal-table th { background: #dbeafe; }
.cal-month-color-1 table.cal-table th { background: #fce7f3; }
.cal-month-color-2 table.cal-table th { background: #dcfce7; }
.cal-month-color-3 table.cal-table th { background: #fef3c7; }
.cal-month-color-4 table.cal-table th { background: #ede9fe; }
.cal-month-color-5 table.cal-table th { background: #ffe4e6; }
.cal-month-color-6 table.cal-table th { background: #cffafe; }
.cal-month-color-7 table.cal-table th { background: #fde68a; }
.cal-month-color-8 table.cal-table th { background: #e0e7ff; }
.cal-month-color-9 table.cal-table th { background: #fbcfe8; }
.cal-month-color-10 table.cal-table th { background: #d1fae5; }
.cal-month-color-11 table.cal-table th { background: #fee2e2; }

/* Une couleur différente par classe (6 teintes cycliques) pour repérer d'un coup
 * d'oeil les tableaux « Élèves par classe » : titre de section + première ligne
 * (en-tête) du tableau. Conservé à l'impression via print-color-adjust. */
h2.level-color-0 { border-left: 4px solid #2563eb; padding-left: 8px; }
h2.level-color-1 { border-left: 4px solid #db2777; padding-left: 8px; }
h2.level-color-2 { border-left: 4px solid #16a34a; padding-left: 8px; }
h2.level-color-3 { border-left: 4px solid #d97706; padding-left: 8px; }
h2.level-color-4 { border-left: 4px solid #7c3aed; padding-left: 8px; }
h2.level-color-5 { border-left: 4px solid #e11d48; padding-left: 8px; }
table.level-table-color-0 thead th { background: #dbeafe; }
table.level-table-color-1 thead th { background: #fce7f3; }
table.level-table-color-2 thead th { background: #dcfce7; }
table.level-table-color-3 thead th { background: #fef3c7; }
table.level-table-color-4 thead th { background: #ede9fe; }
table.level-table-color-5 thead th { background: #ffe4e6; }
table[class*="level-table-color-"] thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
@media print {
    table[class*="level-table-color-"] thead th {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    h2[class*="level-color-"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
table.cal-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Code couleur par matière sur les puces d'évaluation du calendrier (voir
   subject_color() dans functions.php) : conservé aussi à l'impression couleur. */
.cal-chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cal-daynum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 2px;
}
.cal-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    min-width: 0;
    border-radius: 50%;
    background: var(--brand);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    text-decoration: none !important;
}
.cal-add:hover { background: var(--brand-dark); }
.cal-holiday-label { font-size: 0.68rem; font-style: italic; color: var(--text-muted); }
.cal-chip {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    background: #eef2ff;
    color: var(--brand-dark) !important;
    border: 1.5px solid var(--brand);
    border-radius: 4px;
    padding: 1px 4px;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
.cal-chip:hover { background: #dbe4ff; }
/* Un conseil de classe doit sauter aux yeux dans le planning : classe(s) concernée(s)
   et horaire affichés en plus gros, sur fond orange, plutôt qu'en aplat discret comme
   une évaluation classique (voir includes/calendar_widget.php). Le texte (nom du type +
   classes + horaire) peut être plus ou moins long selon le nombre de classes concernées ;
   pour ne jamais dépasser 2 lignes dans la case du calendrier (au lieu de 3 auparavant),
   on réduit légèrement la taille de police et on tronque avec "…" au-delà de 2 lignes
   (line-clamp) plutôt que de laisser le texte s'étaler sur une 3e ligne.
   Note : le "title" de ce lien contient déjà le texte complet, donc rien n'est perdu -
   un survol affiche l'information intégrale même si elle est tronquée à l'écran. */
.cal-chip-conseil {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.74rem;
    font-weight: 800;
    background: #fff4d6 !important;
    color: #8a5a00 !important;
    border: 1.5px solid #f2b705;
    white-space: normal;
    line-height: 1.2;
}
.cal-chip-conseil:hover { background: #ffe9ad !important; }

/* Contact masqué (bouton "œil", voir students_contacts.php) : la ligne reste visible et
   lisible à l'écran (juste grisée), mais disparaît à l'impression et dans l'export PDF
   (voir exportListPdf() dans includes/footer.php) — les données restent enregistrées. */
tr.row-hidden-contact { background: #eceef2 !important; color: #7a7f8c; }
tr.row-hidden-contact td { color: #7a7f8c; }
tr.row-hidden-contact input { color: #7a7f8c; background: #f4f5f7; }
@media print {
    tr.row-hidden-contact { display: none !important; }
}

/* Récapitulatif interne/externe par classe (students_list.php, languages_specialites.php) :
   une ligne de chips visible à l'écran ET à l'impression. */
.students-summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.students-summary-chip {
    background: #eef2ff;
    color: var(--brand-dark);
    border: 1px solid #d6ddf5;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85rem;
}
.students-summary-chip.students-summary-total {
    background: #fff4d6;
    border-color: #f2b705;
    color: #8a5a00;
    font-weight: 700;
}
a.students-summary-chip.students-summary-filter {
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}
a.students-summary-chip.students-summary-filter:hover { background: #dde5fb; text-decoration: none; }
a.students-summary-chip.students-summary-filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.cal-chip-row { display: flex; align-items: center; gap: 2px; margin-bottom: 2px; }
.cal-chip-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    opacity: 0.65;
}
.cal-chip-del .icon { width: 11px; height: 11px; }
.cal-chip-del:hover { opacity: 1; background: #e7e9ee; }
.cal-more { font-size: 0.64rem; color: var(--text-muted); }

/* Vue compacte (page d'accueil) : cellules plus resserrées tout en gardant
 * la place pour 2 à 3 évaluations par jour. */
.cal-compact td.cal-cell { min-height: 58px; height: 58px; padding: 3px 4px; }
.cal-compact table.cal-table { font-size: 0.74rem; }
.cal-compact th { width: 38px; padding: 4px 2px; }
.cal-home-title { margin-top: 32px; }

/* Pop-up (fenêtre modale) de saisie rapide depuis le calendrier */
dialog#quick-add-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 16px 22px;
    max-width: 460px;
    width: 92%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    position: relative;
}
dialog#quick-add-dialog .qa-title {
    margin: 0 34px 10px 0;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
dialog#quick-add-dialog::backdrop { background: rgba(15, 20, 35, 0.55); }
dialog#quick-add-dialog .form-row { margin-bottom: 14px; }
dialog#quick-add-dialog button[type="submit"] { margin-right: 8px; }
dialog#quick-add-dialog .qa-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
}
dialog#quick-add-dialog .qa-close:hover { color: var(--danger); }
dialog#quick-add-dialog .qa-duplicate-row {
    background: #f4f6fb;
    border-radius: 8px;
    padding: 10px 12px;
}
dialog#quick-add-dialog .qa-duplicate-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
dialog#quick-add-dialog .qa-duplicate-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 6px;
    max-height: 110px;
    overflow-y: auto;
}
dialog#quick-add-dialog .qa-duplicate-choice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 400;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 5px;
    flex: 0 0 calc(25% - 8px);
    box-sizing: border-box;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 700px) {
    table.cal-table { font-size: 0.7rem; }
    table.cal-table th { width: 32px; }
    td.cal-cell { min-height: 50px; height: 50px; padding: 2px 3px; }
    .cal-daynum { font-size: 0.7rem; }
}

/* ---------------------------------------------------------------
 * Filtre "Classe" par boutons (seconde / première / terminale)
 * ------------------------------------------------------------- */
.classe-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.classe-tabs-action { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.classe-tabs-search { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.classe-tabs-search input { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.84rem; width: 170px; }

/* Ligne de boutons d'outils (imprimer / exporter / importer) qui doivent tenir sur
 * une seule ligne pour prendre le moins de place possible en hauteur. */
.inline-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-import { position: relative; display: inline-block; }
.inline-import summary { list-style: none; cursor: pointer; }
.inline-import summary::-webkit-details-marker { display: none; }
.inline-import summary::marker { content: ""; }
/* Filet de sécurité multi-navigateurs : certains navigateurs réservent malgré tout un
   espace pour le triangle de balise <summary>, ce qui décale légèrement son contenu
   (ex. l'icône d'import) au lieu de le centrer dans le bouton rond. */
.inline-import summary.btn-icon-only {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    text-indent: 0;
}
.inline-import-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    z-index: 20;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20,30,60,0.15);
    padding: 14px;
    width: 380px;
    max-width: 90vw;
}

/* Filtre "Classe" sous forme de boutons radio visibles (coordonnées des parents) */
.radio-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radio-pill-classe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}
.radio-pill-classe input { margin: 0; }
.radio-pill-classe.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-filter-outline { background: #fff; border: 3px solid var(--brand); color: var(--brand); font-weight: 700; }
.btn-filter-outline:hover { background: #eef2ff; }
.btn-filter-outline.btn-icon-only .icon { width: 1.3em; height: 1.3em; stroke-width: 3; }
.classe-tabs-label { font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.classe-tabs a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
}
.classe-tabs a:hover { text-decoration: none; border-color: var(--brand); }
/* Un lien <a> "icône seule" (export CSV, import, lien de partage…) placé dans une barre
   .classe-tabs héritait du style des pastilles de filtre de classe (rond, padding
   6px/14px) au lieu du carré à bords arrondis des autres boutons-icônes, ce qui le
   rendait complètement rond et décentrait son icône. */
.classe-tabs a.btn-icon-only,
.classe-tabs-action a.btn-icon-only {
    border-radius: 8px !important;
    padding: 0 !important;
    /* .classe-tabs a { display: inline-block } l'emportait sur le display:flex de
       .btn-icon-only (spécificité tag+classe > classe seule) : l'icône SVG, redevenue un
       simple élément inline, s'alignait alors sur sa ligne de base au lieu d'être centrée
       verticalement — visible surtout sur les icônes dont le tracé n'est pas symétrique
       (ex. la flèche du bouton "Exporter en CSV"). */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Titre de section avec petite étiquette de version alignée à droite (ex. page
   Administration → Connexions, "Connecté·e·s actuellement" + version installée). */
.section-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.section-title-row h2 { margin: 0; }
.app-version-tag {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.classe-tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Une couleur distincte par classe (2de / 1re / Tle, dans cet ordre), pour les repérer plus
 * facilement d'un coup d'œil — sur toutes les pages utilisant ces boutons de filtre. Le
 * premier bouton ("Toutes les classes") garde la couleur neutre habituelle ; les trois
 * suivants (2e, 3e et 4e éléments du même type) reçoivent chacun leur couleur, qu'il y ait
 * exactement 3 niveaux ou plus (les niveaux au-delà du 3e restent neutres). Repose sur
 * l'ordre d'affichage plutôt que sur le nom du niveau, pour fonctionner même si les noms
 * de niveaux sont personnalisés. */
.classe-tabs a:nth-of-type(2):not(.active),
.radio-pill-classe:nth-of-type(2):not(.active) { border-color: #2e8b57; color: #2e8b57; }
.classe-tabs a:nth-of-type(2).active,
.radio-pill-classe:nth-of-type(2).active { background: #2e8b57; border-color: #2e8b57; color: #fff; }

.classe-tabs a:nth-of-type(3):not(.active),
.radio-pill-classe:nth-of-type(3):not(.active) { border-color: #c9760b; color: #c9760b; }
.classe-tabs a:nth-of-type(3).active,
.radio-pill-classe:nth-of-type(3).active { background: #c9760b; border-color: #c9760b; color: #fff; }

.classe-tabs a:nth-of-type(4):not(.active),
.radio-pill-classe:nth-of-type(4):not(.active) { border-color: #7a4fc9; color: #7a4fc9; }
.classe-tabs a:nth-of-type(4).active,
.radio-pill-classe:nth-of-type(4).active { background: #7a4fc9; border-color: #7a4fc9; color: #fff; }

/* ---------------------------------------------------------------
 * Filtre "Matières" (récapitulatif d'un professeur pour l'impression)
 * ------------------------------------------------------------- */
.matiere-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.88rem;
}
.matiere-filter-label { font-weight: 600; color: var(--text-muted); width: 100%; margin-bottom: 4px; }
.matiere-check { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.matiere-check input { margin: 0; }

/* ---------------------------------------------------------------
 * Impression : masque la navigation, les formulaires et boutons, ne
 * garde que le titre et le contenu (planning, listes, etc.).
 * ------------------------------------------------------------- */
/* Le calendrier interactif s'imprime en paysage, TOUS les mois affichés (jusqu'à 3,
   soit un trimestre complet) tenant sur UNE SEULE page : les blocs mensuels sont
   disposés côte à côte (voir .cal-month-block) plutôt qu'empilés un par page. */
@page {
    size: landscape;
    margin: 8mm;
}
@media print {
    .no-print,
    .site-header, .top-nav, .site-footer,
    .trimester-tabs, .date-range-form, .year-select,
    .subtitle, .alert,
    form, button, .btn, dialog {
        display: none !important;
    }
    .container h1 { text-align: center; }
    /* Certaines pages (ex. présences aux réunions) mettent tout le tableau à
     * imprimer À L'INTÉRIEUR d'un <form> (pour l'enregistrement en masse) : la règle
     * générale "form { display:none }" ci-dessus le ferait disparaître entièrement à
     * l'impression (page blanche). On le garde donc visible explicitement ; les
     * boutons qu'il contient restent masqués via leur propre classe .no-print. */
    form.print-form-table {
        display: block !important;
    }
    body { background: #fff; padding-top: 0; }
    .container { max-width: 100%; padding: 0; margin: 0; }
    .table-wrap { border: none; overflow: visible; }
    table.planning { font-size: 11pt; }
    table.planning th, table.planning td,
    table.cal-table th, table.cal-table td { border: 1px solid #999; }
    a { color: inherit; text-decoration: none; }

    /* Tout le trimestre (2 à 3 mois) sur une seule page : blocs mensuels côte à côte,
       étirés pour utiliser toute la hauteur disponible de la page (moins compressé). */
    .cal-widget { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3mm; height: 100%; }
    .cal-month-block {
        flex: 0 1 var(--print-basis, 32%);
        max-width: var(--print-basis, 32.5%);
        display: flex;
        flex-direction: column;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .cal-month-block .table-wrap { flex: 1 1 auto; }
    /* Un bloc mensuel exclu du nombre de mois choisi avant impression (voir le
       sélecteur "Imprimer :" sur index.php et printCalendar() ci-dessus). */
    .cal-month-block.cal-month-print-hidden { display: none !important; }
    .cal-month-title { margin: 0 0 2px; font-size: 8pt; text-align: center; }
    .cal-legend { font-size: 5.5pt; display: block; }
    .cal-widget .table-wrap { page-break-inside: avoid; break-inside: avoid; }

    /* Cases resserrées (3 évaluations maximum par jour, comme à l'écran — voir
       "+N autres") pour que 2 à 3 mois tiennent côte à côte sur une seule page paysage,
       tout en utilisant le plus possible la hauteur disponible de la page (moins
       compressé, plus lisible — voir aussi .cal-widget / .cal-month-block ci-dessus). */
    table.cal-table { font-size: 9pt; table-layout: fixed; height: 100%; }
    /* Colonne des jours de la semaine réduite au minimum pour laisser le maximum de
       place aux cases contenant les évaluations (matière, classe, EE/EO). */
    table.cal-table th { padding: 2px 1px; font-size: 6.6pt; width: 8mm; max-width: 8mm; white-space: nowrap; overflow: hidden; letter-spacing: -0.2px; }
    td.cal-cell.cal-disabled {
        background: #e2e2e6 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    td.cal-cell { min-height: 62px; height: 62px; padding: 3px 4px; vertical-align: top; }
    table.cal-table .cal-chip { font-size: 7.5pt; padding: 1.5px 2px; margin-bottom: 2px; }
    table.cal-table .cal-chip-conseil {
        font-size: 7.8pt;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table.cal-table .cal-more { font-size: 6.5pt; }
    .cal-daynum { font-size: 8pt; margin-bottom: 1px; }
    .cal-add { display: none !important; }

    /* Cases à cocher : le rendu natif de la coche est parfois invisible à l'impression
       selon le navigateur ; on force un repère visuel explicite (texte + fond). */
    input[type="checkbox"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid #333 !important;
        width: 14px; height: 14px;
    }
    input[type="checkbox"]:checked { accent-color: #1f9d55 !important; }
    tr.row-present td { background: #e9f7ef !important; }
    tr.row-absent td { background: #fdecea !important; }
}

/* ---------------------------------------------------------------
 * Pied de page personnalisable (ex. "Logiciel créé par M. Benaroch 2026 V1.0")
 * ------------------------------------------------------------- */
.site-footer-credit { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------------
 * Bande verticale à gauche de la page de connexion / configuration : logo
 * You Imagine en haut sur fond blanc, puis la liste des services offerts
 * aux professeurs. Le bloc de connexion reste à droite (.auth-main).
 * ------------------------------------------------------------- */
.auth-layout { display: flex; min-height: 100vh; }
.auth-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--brand-dark);
    display: flex;
    flex-direction: column;
}
.auth-sidebar-logo {
    background: #fff;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.auth-logo { height: 48px; width: auto; display: inline-block; }
.auth-sidebar-content { padding: 26px 22px; }
.auth-sidebar-content h2 { color: #fff; font-size: 1.2rem; margin: 0 0 4px; }
.auth-sidebar-tagline { color: #c7d3f5; font-size: 0.84rem; margin: 0 0 24px; }
.auth-sidebar-content h3 {
    color: #c7d3f5;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}
.auth-sidebar-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-sidebar-features li { color: #e7ecfb; font-size: 0.88rem; line-height: 1.35; display: flex; align-items: center; gap: 8px; }
.auth-sidebar-features li .icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.auth-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* La bande de gauche passe au-dessus du bloc de connexion sur petit écran, plutôt que de
   rétrécir un panneau vertical illisible. Placé APRÈS les règles ci-dessus (même
   spécificité : l'ordre dans le fichier décide, donc ce bloc doit venir en dernier pour
   l'emporter en dessous de 700px). */
@media (max-width: 700px) {
    /* Sur mobile, la bande bleue de gauche (logo + services) prend trop de place :
       on la masque entièrement pour n'afficher que le bloc de connexion. */
    .auth-layout { flex-direction: column; min-height: 0; }
    .auth-sidebar { display: none; }
}

/* ---------------------------------------------------------------
 * Pages "élèves" (coordonnées, casiers, PASS Région, livres, bourses,
 * réunions, bac blanc / grand oral) : encarts de comptage, statuts colorés.
 * ------------------------------------------------------------- */
.count-boxes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.count-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    min-width: 160px;
    flex: 1 1 200px;
}
.count-box h3 { margin: 0 0 4px; font-size: 0.84rem; color: var(--brand-dark); }
.count-line { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 1px 0; gap: 10px; }
.count-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.count-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    background: #eef1fb;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
}
.count-chip strong { color: var(--brand-dark); }
.empty-mini { color: var(--text-muted); font-size: 0.84rem; margin: 0; }
/* LV1/LV2/Spécialités : cliquer sur une langue ou une spécialité filtre le tableau des
   élèves sur ce seul choix (voir languages_specialites.php). */
a.count-line-link { color: var(--text); text-decoration: none; cursor: pointer; border-radius: 4px; }
a.count-line-link:hover { background: #eef1fb; text-decoration: none; }
a.count-line-link.active { background: var(--brand); color: #fff; font-weight: 700; }
a.count-line-link.active strong { color: #fff; }
a.count-chip-link { text-decoration: none; cursor: pointer; }
a.count-chip-link:hover { background: #dde5fb; text-decoration: none; }
a.count-chip-link.active { background: var(--brand); border-color: var(--brand); color: #fff; }
a.count-chip-link.active strong { color: #fff; }

table.simple tr.row-rendu { background: #eafaf0; }
table.simple tr.row-non-rendu { background: #fdecea; }
.book-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; }
.row-rendu .book-status { color: var(--success); }
.row-non-rendu .book-status { color: var(--danger); }

/* Livres : une paire de colonnes (N° + statut) par matière — la case de statut
 * bascule immédiatement de rouge à vert en cliquant sur la coche. */
table.books-matrix .book-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
table.books-matrix .book-toggle-label { cursor: pointer; font-size: 1rem; display: inline-block; }
td.book-cell-rendu, td.book-cell-non-rendu {
    background: #fbdedb;
    text-align: center;
    vertical-align: middle;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
td.book-cell-rendu { background: #d9f3e2; }
@media print {
    td.book-cell-rendu, td.book-cell-non-rendu { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .book-toggle-btns { display: none; }
}
td.book-cell-rendu input[type=text], td.book-cell-non-rendu input[type=text] { display: block; margin: 0 auto 3px; text-align: center; }

/* Case grisée pour une matière non associée à la classe de l'élève (voir Administration
   → Matières, cases à cocher par classe) : pas de saisie possible, juste un repère. */
td.book-cell-not-concerned {
    background: #e2e2e6;
    text-align: center;
    vertical-align: middle;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.book-not-concerned-label { font-size: 0.68rem; color: var(--text-muted); font-style: italic; }
@media print { td.book-cell-not-concerned { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }

/* Casiers : alternance de couleur par élève, surtout utile à l'impression pour
 * repérer facilement chaque ligne sur une longue liste. */
table.locker-table tr.locker-row-b { background: #f3f5fa; }
@media print {
    table.locker-table tr.locker-row-b td { background: #f3f5fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Inverse de .no-print : un élément qui n'apparaît qu'à l'impression (ex. la version
 * lisible d'un champ normalement affiché comme un <input> à l'écran). */
.only-print { display: none; }
@media print { .only-print { display: table-cell !important; } }

/* Libellé générique "Congé" affiché à la place du libellé complet à l'impression
   (voir Administration → Congés, colonne "Remplacer par Congé à l'impression"). */
.print-only-label { display: none; }
@media print { .print-only-label { display: inline !important; } .screen-only-label { display: none !important; } }

/* Nom de la classe sélectionnée, affiché en grand et en couleur à côté du titre
   "Planning des évaluations" uniquement à l'impression (voir index.php), afin que
   les élèves sachent à quelle classe correspond le planning imprimé. */
.print-classe-badge { display: none; }
@media print {
    .print-classe-badge {
        display: inline-block !important;
        color: #c0392b;
        font-size: 1.3em;
        font-weight: 800;
        margin-left: 14px;
    }
}

/* Pied de page imprimé du planning (coordonnées de l'établissement, voir Administration
   → Apparence) : affiché en bas de la page uniquement à l'impression. */
.print-planning-footer {
    text-align: center;
    color: #555;
    margin-top: 8mm;
}
/* .print-only-label force "display:inline" par défaut (voir plus haut) : ce pied de page
   doit rester un bloc pleine largeur pour que le centrage du texte porte sur toute la page
   imprimée, et non sur la seule largeur du texte lui-même. */
@media print {
    .print-planning-footer { display: block !important; width: 100%; }
}

/* Coordonnées cliquables (téléphone → appel direct sur smartphone, e-mail → logiciel de
   messagerie) avec un petit bouton pour copier l'adresse e-mail dans le presse-papier. */
.contact-link { color: var(--brand-dark) !important; text-decoration: underline; }
.contact-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.82rem;
    line-height: 1.4;
    cursor: pointer;
    min-height: 0;
    color: var(--text-muted);
}
.copy-btn:hover { background: #f0f2f8; }

table.bourses-table tfoot .bourses-counts td { font-weight: 700; background: #f2f4f9; text-align: center; }
table.bourses-table tfoot .bourses-counts td:first-child { text-align: left; }

/* Ligne verte si l'élève est boursier, rouge sinon — conservé à l'impression. */
table.bourses-table tbody tr.bourse-row-oui { background: #d9f3e2; }
table.bourses-table tbody tr.bourse-row-non { background: #fbdedb; }
table.bourses-table tbody tr.bourse-row-oui,
table.bourses-table tbody tr.bourse-row-non {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
@media print {
    table.bourses-table tbody tr.bourse-row-oui,
    table.bourses-table tbody tr.bourse-row-non {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ---------------------------------------------------------------
 * Groupes de boutons radio dans la pop-up de saisie rapide (niveau,
 * matière, type d'évaluation) : plus rapide à cliquer qu'un menu déroulant.
 * ------------------------------------------------------------- */
.radio-group-label { display: block; font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; }
.radio-group { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
}
.radio-pill input[type="radio"] { margin: 0; accent-color: var(--brand); }
.radio-pill:has(input:checked) { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------------------------------------------------------------
 * Bandeau "consultation seule" (pages où un professeur ne peut que consulter,
 * la modification étant réservée à l'administrateur — voir user_can_edit_page()).
 * ------------------------------------------------------------- */
.readonly-banner {
    background: #fff7e0;
    border: 1px solid #f0d989;
    color: #6b5300;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------
 * Réunions parents-professeurs : mise en évidence visuelle par ligne selon
 * la présence cochée ou non (vert = présent, rouge = absent).
 * ------------------------------------------------------------- */
tr.row-present { background: #eafaf0; }
tr.row-present td { border-color: #bfe8cc; }
tr.row-absent { background: #fdf1ef; }
tr.row-absent td { border-color: #f3c8c1; }
.meeting-filter { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.meeting-filter button.active { background: var(--brand-dark); }
.meeting-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------
 * Indicateur "en ligne" et journal des connexions (Administration).
 * ------------------------------------------------------------- */
.online-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.online-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eafaf0;
    border: 1px solid #b7e3c8;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.85rem;
}
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; display: inline-block; }
.online-chip-active { border-width: 2px; border-color: #1f9d55; }
.online-chip-logout {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--danger);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.online-chip-logout:hover { background: #fbdedb; border-radius: 50%; }
.online-chip-logout .icon { width: 15px; height: 15px; }
/* Compte visible dans le journal des connexions ET actuellement en ligne : entouré
 * en vert pour le distinguer d'un simple historique. */
.account-online-badge {
    border: 2px solid #1f9d55;
    border-radius: 999px;
    padding: 2px 10px;
    display: inline-block;
    font-weight: 600;
}

/* ---------------------------------------------------------------
 * Boutons "icône seule" (gain de place et de rapidité visuelle) : une
 * poubelle pour supprimer, une disquette pour enregistrer une ligne, un
 * gros "+" pour ajouter — plutôt que du texte répété dans chaque ligne.
 * ------------------------------------------------------------- */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    font-size: 1.05rem;
    border-radius: 8px;
    line-height: 1;
}
.btn-save-icon { background: var(--brand); color: #fff; border: none; }
.btn-save-icon:hover { background: var(--brand-dark); }
.btn-save-icon-green { background: #1f9d55; color: #fff; border: none; }
.btn-save-icon-green:hover { background: #187c43; }
/* Bouton PDF : rouge et bien visible, toujours à gauche du bouton Imprimer sur les
   pages de listes (voir footer.php → exportListPdf()). */
.btn-pdf { background: #e5342b !important; color: #fff !important; border: none !important; }
.btn-pdf:hover { background: #c62a22 !important; }
button.danger.btn-icon-only { border-radius: 8px; }
.btn-add-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
}
.btn-add-icon:hover { background: var(--brand-dark); }
.btn-add-icon .icon { width: 1.3rem; height: 1.3rem; }

/* Petits boutons ronds "Rendu / Non rendu" pour la case d'un livre
 * (page Gestion des livres) : vert avec un R, rouge avec une croix. */
.book-toggle-btns { display: flex; gap: 3px; justify-content: center; align-items: center; margin: 0 auto; width: fit-content; }
.book-toggle-btn {
    width: 15px;
    height: 15px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    border: none;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.45;
    flex-shrink: 0;
}
.book-toggle-btn.is-active { opacity: 1; box-shadow: 0 0 0 2px rgba(0,0,0,0.12); }
.book-toggle-rendu { background: #2ecc71; color: #fff; }
.book-toggle-non-rendu { background: #e74c3c; color: #fff; }
.book-toggle-btn .icon { width: 0.6rem; height: 0.6rem; }

/* ---------------------------------------------------------------
 * Barre d'actions dupliquée en haut ET en bas d'un long tableau
 * (enregistrement global), alignée à droite pour rester accessible
 * sans avoir à faire défiler jusqu'en bas.
 * ------------------------------------------------------------- */
.table-actions-top, .table-actions-bottom { display: flex; justify-content: flex-end; margin: 10px 0; }

/* ---------------------------------------------------------------
 * Inscriptions élèves (secrétariat) : très large tableau (une cinquantaine de
 * colonnes reprenant le classeur de suivi des candidatures) — voir
 * enrollments.php. Le nom du candidat (1re colonne) reste visible même en
 * faisant défiler horizontalement, et chaque ligne est teintée selon son statut
 * d'inscription (coché à gauche du nom).
 * ------------------------------------------------------------- */
.enroll-table td { white-space: nowrap; }
.enroll-table textarea { white-space: normal; }
.enroll-table th {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 140px;
    line-height: 1.2;
    vertical-align: bottom;
}
.enroll-table th.enroll-name-cell, .enroll-table td.enroll-name-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}
.enroll-table thead th.enroll-name-cell { z-index: 3; }
tr.enroll-row-inscrit td.enroll-name-cell { background: #e3f6ea; }
tr.enroll-row-ne-vient-pas td.enroll-name-cell { background: #eceef2; }
tr.enroll-row-inscrit { background: #e3f6ea; }
tr.enroll-row-ne-vient-pas { background: #eceef2; color: #7a7f8c; }
tr.enroll-row-ne-vient-pas input, tr.enroll-row-ne-vient-pas textarea, tr.enroll-row-ne-vient-pas select {
    color: #7a7f8c;
    background: #f4f5f7;
}
.enroll-status-cell { display: flex; gap: 4px; }
.enroll-status-btn { width: 30px; height: 30px; opacity: 0.4; border: 1.5px solid var(--border); background: #fff; }
.enroll-status-btn-yes { color: var(--success); }
.enroll-status-btn-yes.active { opacity: 1; background: var(--success); color: #fff; border-color: var(--success); }
.enroll-status-btn-no { color: var(--danger); }
.enroll-status-btn-no.active { opacity: 1; background: var(--danger); color: #fff; border-color: var(--danger); }
.enroll-table input[type="text"], .enroll-table textarea, .enroll-table select { font-size: 0.85rem; }

/* -------------------------------------------------------------
 * Étiquette Semaine A / Semaine B au-dessus de chaque semaine du planning
 * (voir includes/calendar_widget.php et Administration → Apparence).
 * ------------------------------------------------------------- */
.cal-week-ab-row { line-height: 1; }
.cal-week-ab-cell {
    text-align: center;
    padding: 2px 1px !important;
    border-bottom: none !important;
    height: 20px;
    white-space: nowrap;
}
.cal-week-ab-cell > * { vertical-align: middle; }
.week-ab-badge {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 0 6px;
    border-radius: 999px;
    line-height: 1.4;
}
.week-ab-badge-a { background: #dbeafe; color: #1d4ed8; }
.week-ab-badge-b { background: #fce7f3; color: #be185d; }
.week-ab-badge-manual { border: 1.5px dashed currentColor; }
/* Bouton crayon (réglage manuel, administrateur) sur la moitié haute de la cellule,
 * bouton œil (afficher/masquer l'étiquette, tout utilisateur) juste en dessous, sur
 * la moitié basse — voir includes/calendar_widget.php. */
.week-ab-controls {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    vertical-align: middle;
    margin-left: 2px;
}
.week-ab-toggle-form { display: block; line-height: 0; }
.week-ab-toggle-btn, .week-ab-eye-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 9px;
    padding: 0;
    font-size: 0.5rem;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
}
.week-ab-toggle-btn:hover, .week-ab-eye-btn:hover { background: var(--bg-hover, #f1f5f9); }
.week-ab-eye-btn-active { background: #e2e8f0; }

/* Lien "voir" et bouton "ajouter/remplacer" pour les pièces jointes des dossiers
 * d'inscription (livret de famille, fiche médicale — voir enrollments.php). */
.enroll-file-link, .enroll-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    color: var(--text-muted);
}
.enroll-file-link { color: var(--success); border-color: var(--success); }
.enroll-file-link:hover, .enroll-upload-label:hover { background: #f1f5f9; }
.enroll-file-link svg, .enroll-upload-label svg { width: 14px; height: 14px; }