: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; }
/* Bouton "Aide" (voir help_contact.php) : visible dans le bandeau pour TOUT utilisateur
   connecté (professeur, CPE, administrateur...), pas seulement les administrateurs — donc
   volontairement placé hors des blocs conditionnés par le rôle, juste avant "Se
   déconnecter". Même style discret (fond léger, pilule) que le bouton de déconnexion. */
.btn-header-help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 12px !important;
}
.btn-header-help:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.btn-header-help .icon { width: 15px; height: 15px; }
.online-indicator {
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 5px 12px !important;
    font-size: 0.82rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    max-width: 260px;
    line-height: 1.3;
}
.online-indicator .icon-dot { color: #37d67a; width: 10px; height: 10px; }
/* Noms des comptes actuellement connectés (voir get_online_users() / record_heartbeat()) :
   affichés en très petits caractères directement dans le badge "N en ligne", juste après le
   nombre — visible uniquement par les administrateurs, comme le badge lui-même. */
.online-indicator-names {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.72);
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
}
.online-indicator-names::before { content: "\2014\a0"; }

/* ---------------------------------------------------------------
 * 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 "Toutes vos évaluations" (page d'accueil, voir my_evaluations.php) : bilan
   personnel des évaluations saisies par le professeur connecté (ou l'administrateur, s'il
   a lui-même des matières attribuées) — visible uniquement des professeurs et de
   l'administration, même style que Conseil de classe / Toutes les activités mais encadré
   en vert. */
.btn-my-evaluations {
    border: 2px solid #1c9d5b !important;
    color: #147a44;
    font-weight: 700;
}
.btn-my-evaluations:hover {
    background: #e3f7ec !important;
    color: #0d5c32;
    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;
}
/* Bouton "Suivi des saisies" (icône calendrier) à droite du badge "N en ligne" — voir
   evaluations_recap.php. Volontairement sobre (icône blanche, simple contour blanc, fond
   transparent) pour se distinguer du bouton "disquette" (fond plein) et du bouton
   Administration (pilule jaune) tout en restant lisible sur le bandeau bleu. */
.btn-header-recap {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid #fff !important;
    color: #fff;
    cursor: pointer;
    font: inherit;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-header-recap:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.btn-header-recap .icon { width: 17px; height: 17px; }
/* Bouton "réparation" (icône clé à molette) à gauche du bouton "disquette" (Enregistrer
   une sauvegarde) et du bouton Administration — icône blanche SANS contour ni fond, pour
   rester très discret dans le bandeau. Vérifie/corrige l'intégrité des données stockées
   (voir repair_data.php). */
.btn-header-repair {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font: inherit;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-header-repair:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
.btn-header-repair .icon { width: 17px; height: 17px; }
/* Bouton "Notifications" (point d'exclamation orange, fond blanc, bordure orange) — à
   gauche du bouton "disquette" (voir includes/header.php et Administration → Notifications).
   Volontairement très visible (couleurs inversées par rapport aux autres boutons du
   bandeau) pour que l'administrateur repère facilement la gestion des bandeaux. */
.btn-header-notif {
    padding: 0 !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #d97706 !important;
    /* !important nécessaire : la règle générique ".top-nav a { color: #dbe4ff }" est plus
       spécifique (élément + classe) qu'une simple classe seule et écrasait sinon cet
       orange, rendant le point d'exclamation quasi invisible sur fond blanc. */
    color: #d97706 !important;
    cursor: pointer;
    font: inherit;
    border-radius: 50%;
    flex-shrink: 0;
}
.btn-header-notif:hover { background: #fff7ed; color: #d97706 !important; text-decoration: none; }
.btn-header-notif .icon { width: 17px; height: 17px; }
.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, .module-nav .top-nav summary { white-space: nowrap; }
.module-nav .top-nav a,
.module-nav .top-nav summary {
    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,
.module-nav .top-nav summary: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;
}
/* Sous-menu déroulant du menu de navigation (Administration → Menus, voir
   includes/header.php et build_effective_menu()) : un <details>/<summary> — pas de JS
   nécessaire pour ouvrir/fermer, cohérent avec .inline-import utilisé ailleurs. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::marker { content: ''; }
.nav-dropdown-caret { font-size: 0.7em; }
.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 30;
    background: var(--brand-dark);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(10,20,50,0.35);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 190px;
}
.nav-dropdown-panel a { border-radius: 8px; }
@media (max-width: 700px) {
    .nav-dropdown { display: block; }
    .nav-dropdown-panel {
        position: static;
        box-shadow: none;
        background: rgba(0,0,0,0.15);
        margin-top: 4px;
        margin-left: 10px;
    }
}
/* 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;
    }
    /* Le titre de l'application (ex. "Lycée Talmudique - Gestion") peut être assez long :
       réduit et tronqué avec "…" sur mobile pour ne jamais chevaucher la rangée d'icônes
       (aide, déconnexion...) épinglée à droite, quelle que soit sa longueur. */
    .site-header > .site-header-inner:first-of-type .brand {
        display: inline-block;
        font-size: 0.92rem;
        max-width: calc(100% - 100px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }
    .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;
    }
    /* Sur mobile, toute la rangée d'actions du compte (nom connecté, "en ligne",
       icônes admin, aide, déconnexion...) prenait trop de place et retombait
       systématiquement à la ligne — jusqu'à deux lignes supplémentaires avant même
       d'arriver au menu des pages. On la réduit ici à une simple rangée d'icônes
       (textes masqués, disponibles via l'attribut title), épinglée à gauche du
       bouton burger, sur la même ligne que le logo. */
    .site-header > .site-header-inner:first-of-type .top-nav {
        position: absolute;
        top: 8px;
        right: 54px;
        left: auto;
        width: auto;
        max-width: calc(100vw - 108px);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
    }
    .site-header > .site-header-inner:first-of-type .top-nav .who,
    .site-header > .site-header-inner:first-of-type .top-nav .help-text,
    .site-header > .site-header-inner:first-of-type .top-nav .logout-text,
    .site-header > .site-header-inner:first-of-type .top-nav .admin-text,
    .site-header > .site-header-inner:first-of-type .top-nav .online-count-text,
    .site-header > .site-header-inner:first-of-type .top-nav .online-indicator-names { display: none; }
    .site-header > .site-header-inner:first-of-type .top-nav a:not(.login-link),
    .site-header > .site-header-inner:first-of-type .top-nav .btn-admin-nav,
    .site-header > .site-header-inner:first-of-type .top-nav form { flex-shrink: 0; }
    .site-header > .site-header-inner:first-of-type .top-nav a:not(.login-link),
    .site-header > .site-header-inner:first-of-type .top-nav .btn-admin-nav,
    .site-header > .site-header-inner:first-of-type .top-nav form button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
    }
    .logout-icon { font-size: 1.15rem; }
    /* 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; }
/* Ligne Date / Heure de début / Durée / bouton "Générer" (page Bac blanc / Grand oral) :
 * ces 4 champs doivent rester alignés sur une seule ligne (les spécialités, plus larges
 * et sur plusieurs lignes, sont désormais affichées séparément en dessous pour ne plus
 * forcer cette ligne à se replier). */
.oral-bulk-align-row { flex-wrap: nowrap; align-items: flex-end; }
.oral-bulk-align-row .form-row { flex: 0 0 auto; min-width: 0; }
@media (max-width: 900px) {
    .oral-bulk-align-row { flex-wrap: wrap; }
}

/* Onglet Administration → Nouvelle année : checklist de passage à l'année scolaire
   suivante (voir admin.php, section "nouvelle_annee"). Réutilise le style visuel des
   étapes de "Passage de classe" (.promotion-step) pour rester cohérent. */
.admin-tab-highlight { font-weight: 700; }
.ny-checklist { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 24px; }
.ny-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.ny-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);
}
.ny-step-body { flex: 1 1 auto; min-width: 0; }
.ny-step-done { opacity: 0.75; }
.ny-step-done .ny-step-badge { background: #16a34a; color: #fff; }
.ny-step-danger { border-color: #e0554a; }
.ny-step-danger .ny-step-badge { background: #fdecea; color: #9c2c22; }
.btn-small { padding: 4px 10px !important; font-size: 0.82rem !important; margin: 4px 8px 0 0; display: inline-block; }
.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=email], .form-row input[type=password], .form-row input[type=date], .form-row input[type=time], .form-row select, .form-row textarea {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    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 */
/* Le menu des onglets doit toujours tenir sur une seule ligne, sans jamais avoir besoin de
 * scroller horizontalement (même avec beaucoup d'onglets) : la taille de police est
 * réduite automatiquement si besoin par le script fitAdminTabs() (voir footer.php), qui
 * s'appuie sur `font-size: inherit` ci-dessous pour que les onglets suivent la taille
 * définie dynamiquement sur le conteneur .admin-tabs. */
.admin-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: hidden;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.admin-tabs a { padding: 0.65em 0.4em; border-bottom: 3px solid transparent; color: var(--text-muted); font-weight: 600; font-size: inherit; white-space: nowrap; flex-shrink: 0; }
.admin-tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.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; }
/* Homogénéité des champs de saisie dans les tableaux d'administration (ex. Comptes) :
 * sans hauteur explicite, un input[type=email]/password/text prend la hauteur "native"
 * du navigateur (plus petite que les boutons icône de 36px à côté), ce qui donnait un
 * effet décalé/inégal d'une colonne à l'autre. On aligne tous les champs de ces
 * formulaires en ligne sur la même hauteur que le bouton icône réduit ci-dessous, et on
 * empêche le bouton de repasser à la ligne suivante faute de place (il élargit sa
 * colonne plutôt que de se retrouver sous le champ). */
table.simple .form-inline { flex-wrap: nowrap; align-items: center; }
table.simple .form-inline input[type=text],
table.simple .form-inline input[type=email],
table.simple .form-inline input[type=password] {
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.88rem;
    font-family: inherit;
}
table.simple .form-inline .btn-icon-only {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
/* Colonne "Note" (réunions parents-profs, page Livres) : un simple champ texte sur une
 * ligne, assez discret pour ne pas élargir le tableau ni le faire déborder. */
.meeting-note-input {
    width: 100%;
    min-width: 140px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.84rem;
}
@media print { .meeting-note-input { border: none; padding: 0; background: transparent; } }
.book-note-input {
    width: 100px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
}
@media print { .book-note-input { border: none; padding: 0; background: transparent; width: auto; } }
/* Tableau de personnalisation du menu (Administration → Menus, voir admin.php) : une page
 * regroupée dans un sous-menu est légèrement indentée et sur fond distinct pour bien la
 * rattacher visuellement au sous-menu qui la précède dans le tableau. */
.menu-config-folder-row td { background: #f0f2f8; font-weight: 600; }
.menu-config-child-row td:nth-child(2) { padding-left: 30px; }
/* Encadré récapitulatif (page Bourses) : nombre de boursiers / non boursiers et montant
 * total des bourses, calculé automatiquement à partir du tableau — placé à droite des
 * boutons de filtre Boursier, avant les icônes PDF/impression. */
.bourses-summary-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid var(--border);
    font-size: 0.84rem;
    color: var(--text);
}
.bourse-montant-input {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.84rem;
    text-align: right;
}
@media print { .bourse-montant-input { border: none; padding: 0; background: transparent; width: auto; text-align: left; } }
/* Compte verrouillé (Administration → Comptes, voir admin.php) : ligne encadrée en rouge
 * pour la repérer immédiatement, notamment en arrivant depuis le lien du bandeau d'alerte
 * de verrouillage (voir includes/header.php). */
tr.users-table-row-locked { box-shadow: inset 0 0 0 2px #e0554a; background: #fdecea; }
tr.users-table-row-locked td { border-bottom-color: #f3c8c1; }
.users-locked-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f8d7d3;
    color: #9c2c22;
    font-size: 0.7rem;
    font-weight: 700;
}
.users-locked-tag .icon { width: 0.8em; height: 0.8em; }
/* 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; }

/* Page publique (public_view.php) affichée quand le lien partagé n'est plus valable
   (désactivé par un administrateur, ou jeton inconnu) : plutôt qu'un simple message texte,
   une petite carte centrée reprenant le logo et le nom de l'établissement, pour rassurer le
   visiteur qu'il est bien au bon endroit, avec une indication claire de la marche à suivre. */
.pv-expired-card {
    max-width: 440px;
    margin: 80px auto 0;
    padding: 36px 30px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    text-align: center;
}
.pv-expired-logo { max-width: 120px; max-height: 90px; margin-bottom: 14px; }
.pv-expired-establishment { margin: 0 0 18px; font-size: 1.1rem; color: var(--text-muted); font-weight: 600; }
.pv-expired-title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; color: var(--danger); }
.pv-expired-text { margin: 0 0 10px; color: var(--text-muted); }
.pv-expired-card .btn { display: inline-block; margin-top: 16px; width: auto; padding: 10px 22px; }

/* 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; }

    /* Le choix "Affichage : 1/2/3 mois côte à côte" (page d'accueil du planning) n'a de
       sens qu'en version bureau : sur mobile, seul l'affichage 1 mois est réellement
       utilisable (2/3 mois côte à côte deviennent illisibles sur un petit écran), donc on
       masque complètement ce sélecteur plutôt que de laisser un choix qui ne fonctionne
       pas — le planning reste forcé sur 1 mois par défaut côté serveur (voir index.php). */
    .colonnes-form-mobile-hide { display: none !important; }

    /* 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,
    .btn-icon-only, .qa-close {
        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); }
/* Conteneur des icônes d'action d'une case du planning (œil + bouton "+"), voir
   includes/calendar_widget.php. */
.cal-daynum-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
/* Icône "œil" à gauche du bouton "+" : ouvre le panneau latéral avec toutes les évaluations
   du jour (voir openDaySidePanelFromButton() dans includes/calendar_widget.php). Gris neutre,
   ni trop clair ni trop foncé, pour rester discrète à côté du bouton "+" bleu. */
.cal-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    min-width: 0;
    border-radius: 50%;
    background: transparent;
    color: #888c94 !important;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.cal-eye .icon { width: 14px; height: 14px; }
.cal-eye:hover { color: #55585f !important; background: #eceef2; }
.cal-holiday-label { font-size: 0.68rem; font-style: italic; color: var(--text-muted); }
/* Jour du planning contenant déjà des évaluations : clic pour ouvrir le panneau latéral
   (voir includes/calendar_widget.php → openDaySidePanelFromCell(), sur ordinateur
   uniquement — voir @media plus bas). */
.cal-cell-clickable { cursor: pointer; }
.cal-cell-clickable:hover { background: #eef2ff; }

/* Panneau latéral des évaluations d'un jour (voir includes/calendar_widget.php), affiché au
   clic sur un jour du planning déjà rempli, ou dans la pop-up d'ajout rapide pour prévenir
   d'un doublon. Réservé à l'ordinateur (masqué en dessous de 900px, où l'espace manque). */
.day-side-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 92vw;
    height: 100%;
    background: var(--card);
    box-shadow: -8px 0 28px rgba(0,0,0,0.18);
    padding: 26px 24px;
    overflow-y: auto;
    transition: right 0.25s ease;
    z-index: 70;
}
.day-side-panel.open { right: 0; }
.day-side-panel-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
}
.day-side-panel-close:hover { color: var(--danger); }
.day-side-panel h3 { margin: 0 34px 16px 0; font-size: 1.15rem; }
.day-side-panel-entry {
    border-left: 4px solid var(--border);
    background: #f7f8fb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 0.94rem;
}
.day-side-panel-entry a { font-weight: 700; text-decoration: none; }
.day-side-panel-entry a:hover { text-decoration: underline; }
.day-side-panel-level { font-weight: 400; color: var(--text-muted); }
.day-side-panel-meta { margin-top: 4px; font-size: 0.86rem; color: var(--text-muted); }
@media (max-width: 899px) {
    .day-side-panel { display: none !important; }
}
.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; }
/* Évaluation saisie par un autre compte que l'utilisateur courant : la puce reste visible
   (avec toutes ses informations) mais n'est plus cliquable, puisque son édition/suppression
   est réservée à son auteur (ou à un administrateur) — voir user_can_edit_evaluation() dans
   includes/functions.php et le rendu correspondant dans includes/calendar_widget.php. */
.cal-chip-readonly { cursor: default; }
.cal-chip-readonly:hover { background: inherit; }
/* 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: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 800;
    background: #fff4d6 !important;
    color: #8a5a00 !important;
    border: 1.5px solid #f2b705;
    white-space: nowrap;
    line-height: 1.3;
}
.cal-chip-conseil:hover { background: #ffe9ad !important; }
.cal-chip-conseil-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cal-chip-conseil-heure {
    font-size: 0.6rem;
    font-weight: 700;
    opacity: 0.85;
    flex-shrink: 0;
}

/* 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;
}
/* Quand une classe précise est sélectionnée (students_list.php, languages_specialites.php),
 * seule la puce de cette classe doit apparaître à l'impression/export PDF — les puces des
 * autres classes, le total général et les boutons Voir les internes/externes (qui portent
 * sur l'ensemble des classes) n'ont plus leur place une fois qu'on imprime une seule classe,
 * et feraient déborder la classe choisie sur une deuxième page. Voir render_statut_summary_line(). */
@media print {
    .print-hide-classe-filtered { display: none !important; }
}

/* Bouton "🖶 1 page" — students_contacts.php, students_list.php, languages_specialites.php,
 * meetings.php : à côté du bouton Imprimer/PDF, bascule (au clic, voir toggleOnePageMode()
 * dans footer.php) la classe 'print-one-page' sur le <body>, qui réduit drastiquement la
 * taille du tableau et l'espacement entre classes à l'impression / export PDF, pour que
 * tout tienne sur une seule page paysage au lieu de s'étaler sur plusieurs. Purement
 * visuel à l'impression : rien ne change à l'écran tant qu'on n'imprime pas. Même famille
 * que .btn-icon-only (même hauteur, mêmes couleurs) mais rectangulaire, pour accueillir
 * l'icône ET le texte "1 page" côte à côte plutôt qu'une icône seule. */
.btn-onepage-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 0;
    padding: 0 14px;
    font-size: 0.85rem;
    border-radius: 8px;
    line-height: 1;
    white-space: nowrap;
}
.btn-onepage-toggle .icon { width: 1.05em; height: 1.05em; }
.btn-onepage-toggle.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
@media print {
    body.print-one-page h1 { font-size: 11pt; margin: 0 0 2px; }
    body.print-one-page h2 {
        font-size: 7.5pt;
        margin: 2px 0 1px;
        page-break-before: auto;
    }
    body.print-one-page .table-wrap { margin-bottom: 0 !important; }
    /* IMPORTANT : table.simple th/td ont normalement leur propre font-size (0.9rem,
       voir plus haut dans ce fichier) déclaré directement sur th/td — un font-size posé
       seulement sur <table> ne peut pas l'emporter par héritage puisque th/td ont chacun
       une valeur qui leur est explicitement destinée. Le !important ci-dessous est donc
       indispensable : sans lui, la police ne rétrécissait pas du tout en mode 1 page,
       ce qui empêchait tout de tenir sur une seule page malgré la réduction du padding. */
    body.print-one-page table.simple th,
    body.print-one-page table.simple td {
        font-size: 6.2pt !important;
        padding: 0.5px 2px !important;
        line-height: 1.1 !important;
        vertical-align: middle;
    }
    /* La case à cocher "Parent présent" (meetings.php) garde sa taille fixe (14px, voir
       plus haut dans ce fichier) même quand tout le reste rétrécit : elle finit par imposer
       sa propre hauteur à toute la ligne du tableau, plus grande que le texte compacté
       autour. On la réduit aussi en mode 1 page pour qu'elle ne soit plus le facteur
       limitant de la hauteur de ligne. */
    body.print-one-page input[type="checkbox"] {
        width: 7px !important;
        height: 7px !important;
        border-width: 0.5px !important;
        vertical-align: middle;
    }
    /* Noms/prénoms (souvent la plage de texte la plus longue et la plus fréquente
       à s'étirer sur plusieurs lignes) : on interdit le retour à la ligne pour que
       chaque élève reste sur une seule ligne de tableau, quitte à ce que la colonne
       compresse le texte plutôt que de faire grossir la hauteur de la ligne — c'est
       ce qui coûtait le plus de hauteur au tableau avec des noms de famille longs. */
    body.print-one-page table.simple td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Certains champs restent des <input>/<select> même en lecture (voir
       students_contacts.php, languages_specialites.php) : on les affiche comme du texte
       simple en mode compact, sans cadre ni fond, pour gagner la place que prendrait
       sinon chaque bordure de champ. */
    body.print-one-page table.simple input[type="text"],
    body.print-one-page table.simple input[type="date"],
    body.print-one-page table.simple select {
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 6.2pt;
        width: 100% !important;
        min-height: 0;
    }
    /* Le champ Date de naissance (students_list.php) reste un <input type="date"> même en
       lecture : l'icône native du calendrier a une largeur/hauteur fixe que le CSS ne peut
       pas réduire, et prend une place disproportionnée par rapport au texte compacté
       autour — on la masque en mode 1 page pour ne garder que la date elle-même. */
    body.print-one-page table.simple input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
    }
    /* Ligne de puces internes/externes (.students-summary-line, students_list.php et
       languages_specialites.php) : on la réduit fortement et on force tout sur une seule
       ligne pour libérer la place nécessaire au tableau, quitte à ce que les puces soient
       très petites — l'objectif est uniquement de tenir sur une page à l'impression. */
    body.print-one-page .students-summary-line {
        gap: 3px;
        margin-bottom: 2px;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    body.print-one-page .students-summary-chip {
        padding: 0 5px;
        font-size: 6pt;
        border-radius: 4px;
        white-space: nowrap;
    }
    /* Encarts LV1 / LV2 / Spécialités (languages_specialites.php uniquement) : on réduit
       leur hauteur (padding, marges, taille de police) pour qu'ils tiennent sur une bande
       fine en haut de la page plutôt que sur plusieurs lignes de hauteur normale. */
    body.print-one-page .count-boxes {
        gap: 4px;
        margin-bottom: 3px;
    }
    body.print-one-page .count-box {
        padding: 1px 6px;
        min-width: 0;
        flex: 1 1 auto;
    }
    body.print-one-page .count-box h3 {
        font-size: 6pt;
        margin: 0 0 1px;
    }
    body.print-one-page .count-line {
        font-size: 5.5pt;
        padding: 0;
        gap: 4px;
    }
    body.print-one-page .count-chips {
        gap: 2px;
    }
    body.print-one-page .count-chip {
        font-size: 5.5pt;
        padding: 0 3px;
        gap: 2px;
    }
    body.print-one-page .empty-mini {
        font-size: 5.5pt;
        margin: 0;
    }
}
.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: 500px;
    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; }
/* Les boutons du bas (Ajouter / Enregistrer et ajouter / Annuler) tiennent sur une seule
   ligne, quelle que soit la largeur du formulaire — pop-up d'ajout rapide (voir ci-dessus)
   comme formulaire complet evaluation_form.php (voir aussi @media 700px ci-dessous où
   button/.btn passent normalement à width:100% sur mobile). */
.qa-actions-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}
.qa-actions-row button, .qa-actions-row .btn {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.76rem;
}
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; }

/* Page Internat (appel) : les deux barres de boutons (Vue : Jour/Semaine/Mois/Année et
 * Classe : Toutes/2de/1re/Tle) doivent impérativement tenir sur une seule ligne sur mobile,
 * quitte à défiler horizontalement au pire, plutôt que de faire passer un bouton à la
 * ligne (ce qui prenait beaucoup de hauteur d'écran avant de pouvoir faire l'appel). */
/* Regroupe les lignes "Vue :" et "Classe :" (page Internat) sur une seule ligne quand la
 * largeur d'écran le permet — voir internat.php. Chaque ligne reste elle-même un
 * .classe-tabs flex (voir plus haut) ; ce conteneur les met simplement côte à côte. */
@media (min-width: 701px) {
    .internat-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
    .internat-controls-row .internat-vue-tabs,
    .internat-controls-row .internat-classe-tabs { margin-bottom: 8px; }
}
/* Champs "Du … au …" de la vue Période (période personnalisée, voir internat.php) : reste
 * sur la même ligne que les onglets Vue, y compris sur mobile où toute la rangée défile
 * horizontalement (voir .internat-vue-tabs ci-dessous). */
.internat-periode-form { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin: 0; }
.internat-periode-form label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.86rem; white-space: nowrap; }
.internat-periode-form input[type="date"] { padding: 4px 6px; font-size: 0.86rem; }
.internat-count-label-short { display: none; }
@media (max-width: 700px) {
    .internat-vue-tabs, .internat-classe-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        padding-bottom: 2px;
    }
    .internat-vue-tabs a, .internat-classe-tabs a { flex: 0 0 auto; padding: 4px 10px; font-size: 0.8rem; }
    .internat-periode-form { flex: 0 0 auto; }
    .internat-vue-tabs .classe-tabs-label, .internat-classe-tabs .classe-tabs-label { flex: 0 0 auto; }
    .internat-classe-tabs .classe-tabs-action { margin-left: 6px; }
    /* Réduit l'espace entre la ligne "Vue :" et la ligne "Classe :" sur mobile, pour
       gagner de la hauteur d'écran avant d'arriver à l'appel proprement dit. */
    .internat-vue-tabs { margin-bottom: 6px; }
    /* Bilan du jour (18 présent · 0 absent · 0 malade...) : sur mobile, les libellés
       complets tiennent difficilement sur deux lignes — on les remplace par leurs
       raccourcis (P / A / M / S / SP / D, déjà utilisés dans les boutons de statut) pour
       que tout le bilan tienne sur deux lignes maximum au lieu de trois. */
    .internat-count-label-full { display: none; }
    .internat-count-label-short { display: inline; font-weight: 700; }
    .internat-day-counts { font-size: 0.82rem; line-height: 1.5; }
}

/* 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; }

    /* Impression "3 mois côte à côte" / "4 mois côte à côte" (voir printCalendar()) : au
     * lieu d'aligner tous les mois sur une seule ligne (trop étroit à 3 ou 4), une grille
     * 2 colonnes leur laisse chacun deux fois plus de largeur, tout en restant sur une
     * seule page — 4 mois remplissent la grille 2x2 complète (2 lignes de 2), et pour 3
     * mois, les 2 premiers occupent la première ligne et le 3e (toujours en 3e position
     * dans le DOM parmi les blocs visibles, donc nth-child(3)) est centré seul sur la
     * deuxième ligne, à moitié largeur plutôt que de s'étirer sur toute la page. */
    .cal-widget.print-grid-3,
    .cal-widget.print-grid-4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 3mm;
        height: 100%;
    }
    .cal-widget.print-grid-3 .cal-month-block,
    .cal-widget.print-grid-4 .cal-month-block {
        flex: none !important;
        max-width: none !important;
        width: auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    .cal-widget.print-grid-3 .cal-month-block:nth-child(3) {
        grid-column: 1 / span 2;
        width: 50%;
        justify-self: center;
    }
    /* Voir printCalendar() dans index.php : en grille (3page/4page), le pied de page
       imprimé n'a plus de place sur la page (déjà remplie par les mois) et serait rejeté
       seul sur une 2e page — on le masque explicitement dans ce cas. */
    body.print-hide-planning-footer .print-planning-footer { display: none !important; }
    /* La grille laisse deux fois plus de largeur par mois que l'alignement "côte à côte"
       (2 colonnes au lieu de 3 ou 4 sur une seule ligne) : on en profite pour agrandir le
       texte et maximiser la lisibilité des évaluations plutôt que de garder la même taille
       compressée que le mode "côte à côte". */
    .cal-widget.print-grid-3 table.cal-table,
    .cal-widget.print-grid-4 table.cal-table {
        font-size: 10.5pt;
    }
    .cal-widget.print-grid-3 table.cal-table th,
    .cal-widget.print-grid-4 table.cal-table th {
        font-size: 7.5pt;
    }
    .cal-widget.print-grid-3 .cal-month-title,
    .cal-widget.print-grid-4 .cal-month-title {
        font-size: 10pt;
    }
    .cal-widget.print-grid-3 .cal-legend,
    .cal-widget.print-grid-4 .cal-legend {
        font-size: 6.5pt;
    }
    /* La hauteur fixe des cases (62px, voir plus bas) est calibrée pour 2-3 mois sur une
       seule ligne occupant toute la hauteur de la page — sur 2 lignes (grille), chaque mois
       ne dispose plus que de la moitié de cette hauteur : on réduit donc les cases et les
       puces d'évaluation en conséquence pour que la grille tienne malgré tout sur une page. */
    .cal-widget.print-grid-3 td.cal-cell,
    .cal-widget.print-grid-4 td.cal-cell {
        min-height: 42px;
        height: 42px;
        padding: 1.5px 2px;
    }
    .cal-widget.print-grid-3 table.cal-table .cal-chip,
    .cal-widget.print-grid-4 table.cal-table .cal-chip {
        font-size: 6.5pt;
        padding: 1px 2px;
        margin-bottom: 1px;
    }
    .cal-widget.print-grid-3 table.cal-table .cal-more,
    .cal-widget.print-grid-4 table.cal-table .cal-more {
        font-size: 5.8pt;
    }

    .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, .cal-eye { 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; }
/* Deux boutons de liens (ex. site principal / planning), modifiables dans Administration →
 * Apparence (voir get_auth_sidebar_links()), toujours calés en bas du bandeau bleu grâce à
 * margin-top:auto (le bandeau lui-même est en flex-direction:column, voir .auth-sidebar). */
.auth-sidebar-links {
    margin-top: auto;
    padding: 18px 22px 22px;
    display: flex;
    gap: 10px;
}
.auth-sidebar-link-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
}
.auth-sidebar-link-btn:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.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; } }
/* Titre imprimé/exporté en PDF spécifique à l'onglet actif (Bac blanc OU Grand oral, jamais
 * les deux) — voir oral_slots.php. Masqué à l'écran, affiché uniquement à l'impression. */
.only-print-heading { display: none; }
@media print { .only-print-heading { display: block !important; } }
/* Bilan général en haut de la page Inscriptions élèves (voir enrollments.php) : fiches
 * reçues en ligne, total de candidats, admis, refusés — en un coup d'œil. */
.enroll-summary-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px;
}
.enroll-summary-box span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid var(--border);
    font-size: 0.88rem;
    color: var(--text);
}
.enroll-summary-admis { background: #e8f6ee !important; color: var(--success) !important; }
.enroll-summary-refuses { background: #fdecea !important; color: var(--danger) !important; }
@media (max-width: 700px) {
    .enroll-summary-box { gap: 6px; }
    .enroll-summary-box span { padding: 5px 10px; font-size: 0.78rem; }
}

/* 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); }

/* ---------------------------------------------------------------
 * Internat — appel du jour (internat.php) : pastilles de statut compactes
 * (abréviation d'une ou deux lettres, voir get_internat_statuses()) en une
 * seule ligne par élève pour une saisie rapide au smartphone sans défilement
 * horizontal, colonne Élève resserrée, note repliée par défaut (n'apparaît
 * que pour un statut autre que Présent, en CSS pur via :has()), plus les
 * couleurs de ligne/cellule des récapitulatifs Semaine/Mois/Année.
 * ------------------------------------------------------------- */
.internat-appel-table { table-layout: fixed; }
.internat-appel-table th:first-child,
.internat-appel-table td:first-child { width: 38%; overflow-wrap: break-word; padding-right: 4px; }
.internat-status-group { display: flex; flex-wrap: nowrap; gap: 3px; }
.internat-status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 7px;
    flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 0.76rem; font-weight: 700;
    cursor: pointer; background: #fff; white-space: nowrap;
}
.internat-status-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.internat-status-present:has(input:checked) { background: #16a34a; border-color: #16a34a; color: #fff; }
.internat-status-absent:has(input:checked) { background: #dc2626; border-color: #dc2626; color: #fff; }
.internat-status-malade:has(input:checked) { background: #d97706; border-color: #d97706; color: #fff; }
.internat-status-permission:has(input:checked) { background: #2563eb; border-color: #2563eb; color: #fff; }
.internat-status-sortie_sans_permission:has(input:checked) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.internat-status-depart:has(input:checked) { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.internat-note-wrap { display: none; margin-top: 6px; }
.internat-note-wrap input { width: 100%; font-size: 0.82rem; padding: 5px 8px; }
.internat-appel-table tbody tr:has(input[value="absent"]:checked) .internat-note-wrap,
.internat-appel-table tbody tr:has(input[value="malade"]:checked) .internat-note-wrap,
.internat-appel-table tbody tr:has(input[value="permission"]:checked) .internat-note-wrap,
.internat-appel-table tbody tr:has(input[value="sortie_sans_permission"]:checked) .internat-note-wrap,
.internat-appel-table tbody tr:has(input[value="depart"]:checked) .internat-note-wrap { display: block; }
.internat-appel-table tbody tr:has(input[value="absent"]:checked) { background: #fdf1ef; }
.internat-appel-table tbody tr:has(input[value="malade"]:checked) { background: #fef6e7; }
.internat-appel-table tbody tr:has(input[value="permission"]:checked) { background: #eaf1fd; }
.internat-appel-table tbody tr:has(input[value="sortie_sans_permission"]:checked) { background: #fee2e2; }
.internat-appel-table tbody tr:has(input[value="depart"]:checked) { background: #f3edfc; }
/* Bilan par élève (vues Semaine / Mois / Année, voir internat.php) : absences, sorties
 * autorisées, sorties sans permission et malades sur la période, juste à droite du nom,
 * pour un suivi rapide sans avoir à compter les statuts jour par jour. */
.internat-bilan-col { white-space: nowrap; font-size: 0.82rem; color: var(--text-muted); }
.internat-bilan-item { display: inline-block; margin-right: 10px; }
.internat-bilan-item strong { color: var(--text); }
/* Contrôle "Trier par" (vues Semaine / Mois / Année, voir internat.php et
 * render_internat_tri_control() dans includes/functions.php) : permet de classer les élèves
 * par nombre décroissant d'absences / sorties / sorties sans permission / malades, pour
 * repérer d'un coup d'œil qui sort ou s'absente le plus souvent. */
.internat-tri-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.btn-tag {
    display: inline-block;
    background: var(--bg-soft, #f1f5f9);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.btn-tag:hover { background: #e2e8f0; text-decoration: none; color: var(--text); }
.btn-tag.active { background: var(--brand); color: #fff; }
/* Tableau de bord discret en haut de la page Internat (voir render_internat_dashboard() dans
 * includes/functions.php), affiché quelle que soit la vue (Jour / Semaine / Mois / Année) :
 * quatre cartes compactes (absences, sorties, sorties sans permission, malades) sur la
 * période et le filtre de classe actuellement affichés, plus une éventuelle carte "à
 * surveiller" mettant en avant l'élève ayant le plus d'incidents sur la période. Volontairement
 * discret (petites cartes, couleurs pastel) pour ne pas alourdir une page déjà dense. */
.internat-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px;
}
.internat-dashboard-card {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--dash-color, var(--brand));
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.internat-dashboard-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dash-color, var(--text));
}
.internat-dashboard-label { white-space: nowrap; }
.internat-dashboard-highlight {
    background: #fff8e6;
    border-left-color: #d97706;
    color: #7c4a03;
}
.internat-dashboard-highlight .internat-dashboard-value { color: #d97706; }
.internat-dashboard-highlight .icon { width: 1.1em; height: 1.1em; }
.internat-dashboard-highlight .internat-dashboard-label { white-space: normal; }
/* Bouton "Réglages" (roue crantée) du bloc "à surveiller" : ouvre un petit panneau
 * (seuils par type d'incident) ancré sous l'icône, sans quitter la page — voir
 * render_internat_dashboard() dans includes/functions.php. */
.internat-dashboard-settings { position: relative; }
.internat-dashboard-settings summary { list-style: none; cursor: pointer; }
.internat-dashboard-settings summary::-webkit-details-marker { display: none; }
.internat-dashboard-settings summary::marker { content: ""; }
.internat-dashboard-settings-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 12px 14px;
    width: 260px;
}
.internat-dashboard-settings-panel .form-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.internat-dashboard-settings-panel .form-row label { font-size: 0.86rem; }
@media (max-width: 700px) {
    .internat-dashboard { gap: 6px; margin: 8px 0 12px; }
    .internat-dashboard-card { padding: 5px 9px; font-size: 0.74rem; gap: 4px; }
    .internat-dashboard-value { font-size: 0.92rem; }
    .internat-dashboard-settings-panel { width: calc(100vw - 32px); right: -8px; }
}
td.internat-cell-present { background: #eafaf0; color: #15803d; }
td.internat-cell-absent { background: #fdf1ef; color: #b91c1c; }
td.internat-cell-malade { background: #fef6e7; color: #b45309; }
td.internat-cell-permission { background: #eaf1fd; color: #1d4ed8; }
td.internat-cell-sortie_sans_permission { background: #fee2e2; color: #b91c1c; }
td.internat-cell-depart { background: #f3edfc; color: #6d28d9; }
@media (max-width: 480px) {
    .internat-appel-table th:first-child,
    .internat-appel-table td:first-child { width: 30%; font-size: 0.76rem; padding-left: 6px; padding-right: 2px; }
    .internat-status-pill { padding: 8px 1px; font-size: 0.7rem; border-radius: 6px; }
    .internat-status-group { gap: 2px; }
}
@media (max-width: 700px) {
    /* Le moins d'espace possible entre les tableaux de chaque classe (vue Jour) : sur
       mobile, on scrolle déjà beaucoup pour faire l'appel de toutes les classes, chaque
       pixel gagné entre deux tableaux compte. */
    .internat-table-wrap { margin-bottom: 8px !important; }
    .internat-level-heading { margin: 10px 0 4px; }
    /* La ligne "Aller à la date" (sélecteur de date libre) fait double emploi sur mobile
       avec la navigation ◀ / date / ▶ / Aujourd'hui juste au-dessus — on la masque pour
       gagner cette ligne (elle reste disponible sur ordinateur). */
    .internat-goto-date { display: none; }
}
@media print {
    .internat-status-group, .internat-note-wrap { display: none; }
}

/* ---------------------------------------------------------------
 * 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; }
.btn-siecle { background: #f59e0b !important; color: #fff !important; border: none !important; }
.btn-siecle:hover { background: #d9860a !important; }

button:disabled, input[type="file"]:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger.btn-icon-only { border-radius: 8px; }

/* Impression depuis l'administration (Coordonnées, Élèves, Casiers, PASS Région, Livres,
   Bourses, Inscriptions…) : à l'écran, chaque champ est un <input>/<select> encadré,
   nécessaire pour la saisie ; mais imprimé tel quel, cet encadrement (bordures de chaque
   champ, flèches des compteurs numériques, flèche des menus déroulants) donne un rendu très
   chargé et peu lisible. On fait donc disparaître ces éléments d'interface à l'impression,
   pour ne garder que le texte, comme en mode consultation. */
@media print {
    .print-form-table input:not([type="checkbox"]):not([type="radio"]),
    .print-form-table select,
    .print-form-table textarea,
    #passregion-table-wrap input:not([type="checkbox"]):not([type="radio"]),
    #passregion-table-wrap select {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        color: inherit;
    }
    .print-form-table select,
    #passregion-table-wrap select {
        -webkit-appearance: none;
        appearance: none;
        background-image: none !important;
    }
    /* Flèches des champs numériques (ex. Casiers, Bourses). */
    .print-form-table input[type="number"]::-webkit-outer-spin-button,
    .print-form-table input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .print-form-table input[type="number"] { -moz-appearance: textfield; }
    /* Petite icône calendrier des champs date (ex. Élèves → Date de naissance). */
    .print-form-table input[type="date"]::-webkit-calendar-picker-indicator {
        display: none;
    }
}
.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: 1px !important;
    border-bottom: none !important;
    height: 16px;
    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;
    line-height: 0;
}
.week-ab-toggle-form { display: block; line-height: 0; margin: 0; }
/* Le sélecteur générique `button { min-height: 40px; margin: 3px 6px 3px 0; padding: 10px 18px; }`
 * (voir plus haut) doit être explicitement neutralisé ici : min-height l'emporte
 * toujours sur height en cas de conflit, quelle que soit la spécificité — sans ce
 * min-height:0, ces boutons restaient à 40px de haut malgré height:7px. */
.week-ab-toggle-btn, .week-ab-eye-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 7px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    border: 1px solid var(--border);
    border-radius: 1px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    overflow: hidden;
}
.week-ab-toggle-btn svg, .week-ab-eye-btn svg {
    width: 6px;
    height: 6px;
    stroke-width: 2.5;
}
.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; }

/* ---------------------------------------------------------------
 * Suivi des saisies (evaluations_recap.php) — évaluations par professeur,
 * trimestre par trimestre et mois par mois.
 * ------------------------------------------------------------- */
.recap-table { font-size: 0.82rem; }
.recap-table th, .recap-table td { text-align: center; white-space: nowrap; }
.recap-teacher-cell { text-align: left !important; white-space: normal; min-width: 160px; }
.recap-teacher-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.recap-teacher-name { font-weight: 600; }
.recap-subjects { color: #1c7a3d; font-weight: 700; }
.recap-no-subject { font-style: italic; color: var(--text-muted); font-weight: 400; }
.recap-trimester-head {
    background: #eef2ff;
    color: var(--brand-dark);
    font-weight: 700;
    border-left: 2px solid var(--brand);
}
/* Trimestre actuellement en cours (voir build_evaluations_recap() dans
   includes/functions.php) : léger surlignage de l'en-tête pour le repérer d'un coup
   d'œil, en plus du badge "en cours". */
.recap-trimester-head.recap-trimester-current { background: #dbe6ff; }
.recap-current-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.recap-trimester-dates { font-weight: 400; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.recap-month-head { font-weight: 600; font-size: 0.76rem; color: var(--text-muted); }
.recap-total-head { font-weight: 700; border-left: 1px solid var(--border); }
.recap-count-cell { color: var(--text); }
.recap-count-zero { color: var(--text-muted); }
.recap-total-cell { font-weight: 700; background: #f7f8fc; border-left: 1px solid var(--border); }
.recap-year-total-cell { font-weight: 800; background: #eef2ff; color: var(--brand-dark); border-left: 2px solid var(--brand); }
/* Professeur n'ayant encore rien saisi pour le trimestre EN COURS uniquement (voir
   build_evaluations_recap()) : seules les cellules de ce trimestre ressortent en rouge sur
   sa ligne, pas les deux autres trimestres — puisque les évaluations se saisissent
   trimestre par trimestre, il est normal qu'un trimestre pas encore commencé soit vide. */
td.recap-cell-alert { background: #fdecea; }
td.recap-cell-alert.recap-total-cell { background: #f8d7d3; }
.recap-warning {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f8d7d3;
    color: #9c2c22;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}
.recap-warning .icon { width: 0.8em; height: 0.8em; }
/* Bouton de rappel par e-mail : bien rond et SÉPARÉ de la pastille "Rien saisi" (pas
   imbriqué dedans), pour rester lisible et rester un cercle net quel que soit l'espace
   disponible sur la ligne (flex-shrink/basis figés pour empêcher tout écrasement). */
.recap-reminder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #9c2c22;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
}
.recap-reminder-btn .icon { width: 11px; height: 11px; }
.recap-reminder-btn:hover { background: #7a221a; }
.recap-reminder-btn-disabled { background: #c9a8a4; cursor: not-allowed; }
.recap-orphan-note { color: var(--text-muted); font-size: 0.85rem; }
@media print {
    .recap-table { font-size: 8pt; }
    .recap-warning { background: none; color: #9c2c22; padding: 0; }
    .recap-trimester-dates { font-size: 6.5pt; }
}

/* -------------------------------------------------------------
 * Bandeau d'alerte : comptes verrouillés après 3 échecs de connexion
 * (visible uniquement pour l'administrateur, voir includes/header.php).
 * ------------------------------------------------------------- */
.lockout-alert-banner {
    background: #fdecea;
    border-bottom: 2px solid #e0554a;
    padding: 8px 20px;
}
.lockout-alert-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    color: #7a221a;
    font-size: 0.86rem;
}
.lockout-alert-row + .lockout-alert-row { border-top: 1px solid #f3c8c1; }
.lockout-alert-icon { flex: none; width: 1em; height: 1em; color: #9c2c22; }
.lockout-alert-icon .icon { width: 1em; height: 1em; }
.lockout-alert-text { flex: 1 1 auto; }
.lockout-alert-link { margin-left: 8px; color: #7a221a; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.lockout-alert-link:hover { color: #4a140f; }
.lockout-alert-dismiss { flex: none; }
.lockout-alert-dismiss button {
    background: none;
    border: none;
    color: #7a221a;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
}
.lockout-alert-dismiss button:hover { color: #4a140f; }
.lockout-alert-dismiss-all { text-align: right; padding-top: 4px; }

/* -------------------------------------------------------------
 * Bandeau "trimestre en cours non saisi" affiché aux professeurs concernés (voir
 * get_teacher_current_trimester_alert() dans includes/functions.php et
 * dismiss_teacher_alert.php) — texte personnalisable dans Administration → Apparence.
 * Volontairement très fin (une seule ligne) et simplement encadré de rouge, pour rester
 * discret sans pour autant passer inaperçu.
 * ------------------------------------------------------------- */
.teacher-recap-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    background: #fff;
    border-top: 1.5px solid #e0554a;
    border-bottom: 1.5px solid #e0554a;
    color: #9c2c22;
    font-size: 0.8rem;
}
.teacher-recap-alert-text { flex: 1 1 auto; }
.teacher-recap-alert-dismiss { flex: none; }
.teacher-recap-alert-dismiss button {
    background: none;
    border: none;
    color: #9c2c22;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.teacher-recap-alert-dismiss button:hover { color: #4a140f; }

/* -------------------------------------------------------------
 * Notifications personnalisées (voir Administration → Notifications et
 * get_active_notifications_for_user() dans includes/functions.php) : même bandeau fin
 * qu'au-dessus, mais en orange pour se distinguer du rouge (réservé au rappel de saisie
 * du planning) — plusieurs notifications actives s'empilent, chacune fermable
 * individuellement (voir dismiss_notification.php).
 * ------------------------------------------------------------- */
.app-notification-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    background: #fff;
    border-top: 1.5px solid #d97706;
    border-bottom: 1.5px solid #d97706;
    color: #92400e;
    font-size: 0.8rem;
}
.app-notification-icon { flex: none; display: inline-flex; }
.app-notification-icon .icon { width: 15px; height: 15px; }
.app-notification-text { flex: 1 1 auto; }
.app-notification-dismiss { flex: none; }
.app-notification-dismiss button {
    background: none;
    border: none;
    color: #92400e;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.app-notification-dismiss button:hover { color: #5c2b06; }

/* Formulaire "Ajouter une notification" (Administration → Notifications) : en largeur
   plutôt qu'empilé verticalement — le message occupe toute la largeur de la carte, puis
   les champs cible/couleur/dates/bouton sont sur une seule ligne qui passe à la ligne
   suivante seulement si l'écran est trop étroit. */
.notif-add-form { max-width: none; }
.notif-add-message textarea { max-width: none; }
.notif-add-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.notif-add-row .form-row { flex: 1 1 180px; min-width: 160px; margin-bottom: 0; }
.notif-add-submit { flex: 0 0 auto; min-width: 0 !important; }
.notif-add-submit button { white-space: nowrap; }

/* -------------------------------------------------------------
 * Formulaire d'aide / contact (help_contact.php) — accessible à tout utilisateur connecté
 * via le bouton "Aide" du bandeau (voir .btn-header-help ci-dessus).
 * ------------------------------------------------------------- */
.help-contact-form { max-width: 620px; }
.help-category-options { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.help-category-option { display: flex; align-items: center; gap: 7px; font-weight: 400; }

/* -------------------------------------------------------------
 * "Toutes vos évaluations" (my_evaluations.php) — bilan personnel des évaluations
 * saisies par le professeur (ou l'administrateur) connecté.
 * ------------------------------------------------------------- */
.my-eval-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.my-eval-summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 18px;
    min-width: 140px;
}
.my-eval-summary-current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
.my-eval-summary-name { font-weight: 700; }
.my-eval-summary-dates { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.my-eval-summary-count { font-size: 1.6rem; font-weight: 800; color: var(--brand-dark); margin-top: 4px; }
.my-eval-summary-total { background: #eef2ff; border-color: var(--brand); }

/* -------------------------------------------------------------
 * Pacte enseignant (pacte.php) : suivi des heures de pacte (remplacement courte durée /
 * devoir fait) par élève, colonne par colonne (une colonne = une heure de pacte).
 * ------------------------------------------------------------- */
/* En-tête compact sur une seule ligne (nom, matières, type de pacte, heures données/
   restantes, boutons export/impression) — occupe toute la largeur disponible plutôt que
   d'empiler l'information sur plusieurs lignes comme auparavant. Repasse en colonne sur
   petit écran (voir media query plus bas). */
.pacte-header-card {
    max-width: none;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.pacte-header-name { font-size: 1rem; white-space: nowrap; }
.pacte-header-sep { color: var(--text-muted); }
.pacte-header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: nowrap; }
/* Les boutons Sauvegarder/Restaurer sont maintenant icône seule (.btn-icon-only, voir
   pacte.php) : la barre tient naturellement sur une seule ligne sans avoir besoin de forcer
   un défilement horizontal — ce qui, tenté précédemment via overflow-x:auto sur
   .pacte-header-card, coupait par erreur le panneau déroulant "Restaurer" (position:absolute
   à l'intérieur), qui se retrouvait invisible car recadré par cet overflow. */
.pacte-hours-remaining {
    display: inline-block;
    padding: 2px 10px;
    border: 1.5px solid #d97706;
    border-radius: 999px;
    color: #92400e;
    font-weight: 700;
}
.pacte-columns-editor { margin-bottom: 2px; }
/* Barre d'outils au-dessus des colonnes : titre/explication à gauche, bouton
   "Enregistrer" à droite — sur la MÊME ligne que le bloc de saisie des dates/horaires
   juste en dessous, pour que le professeur puisse enregistrer sans avoir à descendre
   tout en bas de la page (voir pacte.php). */
.pacte-columns-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
/* margin-left:auto pousse toujours le bouton à droite, même si la ligne passe sur une
   deuxième ligne (texte d'aide long) : sans ça, un bouton seul sur sa ligne se retrouve
   collé à gauche malgré justify-content:space-between sur le parent — incohérent avec le
   bouton "Enregistrer" du bas de tableau, aligné à droite via .table-actions-bottom. */
.pacte-save-btn { flex: none; white-space: nowrap; margin-left: auto; }
/* Ligne horizontale UNIQUE (pas d'empilement) occupant toute la largeur de la fenêtre :
   défile horizontalement si le nombre d'heures ne tient pas à l'écran, plutôt que de
   passer à la ligne comme avant — le professeur garde tout sous les yeux sans avoir à
   chercher une colonne perdue plus bas dans la page. */
.pacte-columns-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
/* Espace vide en tête de la ligne, EXACTEMENT de la même largeur que les colonnes
   "Nom" + "Prénom" des tableaux d'élèves juste en dessous (voir .pacte-col-nom /
   .pacte-col-prenom et le colgroup de chaque tableau dans pacte.php) — c'est ce qui fait
   que la première heure de pacte tombe pile au-dessus de sa colonne de cases à cocher. */
.pacte-columns-spacer { flex: 0 0 auto; width: 340px; }
.pacte-column-editor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-sizing: border-box;
    flex: 0 0 auto;
}
.pacte-column-editor-item label { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.pacte-col-item-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Bouton cadenas : dimensions carrées identiques (largeur = hauteur) + border-radius:50%
   appliqués aussi au survol, pour que le fond affiché au survol soit bien un cercle net
   et non un ovale (un bouton <button> sans largeur fixe s'étire sinon selon son contenu). */
.pacte-lock-btn {
    background: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.pacte-lock-btn .icon { width: 13px; height: 13px; }
.pacte-lock-btn:hover { color: var(--text); background: rgba(0,0,0,0.06); }
/* Champ date compact : sans réduire la taille de police, l'année ("2026") est
   coupée dans la largeur étroite des colonnes de pacte — on réduit la police et le
   padding interne du champ pour que la date complète (jj/mm/aaaa) reste lisible. */
.pacte-date-input { width: 100%; font-size: 0.72rem; padding: 2px 1px; box-sizing: border-box; }
.pacte-time-input { font-size: 0.72rem; }
/* Compteur "X présent(s)" : police réduite, gras et bleu, y compris quand la carte de
   la colonne est grisée (verrouillée) — voir .pacte-col-locked ci-dessous qui n'utilise
   plus opacity pour ne pas estomper ce texte. */
.pacte-col-present-count { font-size: 0.66rem; font-weight: 700; color: #1d4ed8; }
.pacte-col-weekday { font-size: 0.72rem; color: var(--text-muted); min-height: 1em; }
/* Heure de début/fin EMPILÉES (l'une sous l'autre) plutôt que côte à côte, avec un
   libellé "De :" / "À :" — permet des colonnes bien plus étroites, pour que les 18 ou 24
   heures de pacte d'un professeur puissent défiler côte à côte sans être démesurées. */
.pacte-time-stack { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; width: 100%; }
.pacte-time-label { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; text-align: left; margin: 0; }
.pacte-time-input { width: 100%; box-sizing: border-box; }
/* Pied de carte : durée à gauche, petite poubelle à droite (bien plus discrète qu'avant,
   pour gagner de la place maintenant que les colonnes sont étroites). */
.pacte-col-item-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 2px; }
.pacte-col-del-btn {
    background: none;
    border: none;
    padding: 0;
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--danger, #c0392b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.pacte-col-del-btn .icon { width: 12px; height: 12px; }
.pacte-col-del-btn:hover { background: rgba(192,57,43,0.12); }
/* Colonne verrouillée : grisée pour signaler qu'elle est protégée contre une
   modification par mégarde (voir togglePacteColLock() plus bas) — s'applique à la
   fois à la carte de saisie, à l'en-tête de colonne des tableaux, et à chaque case à
   cocher de cette colonne (elles restent lisibles, juste visuellement atténuées). */
.pacte-column-editor-item.pacte-col-locked { background: #f3f4f6; }
th.pacte-col-head-mini.pacte-col-locked, td.pacte-col-locked { background: #f3f4f6 !important; }
.pacte-col-duration {
    font-size: 0.7rem;
    font-weight: 700;
    color: #147a44;
    background: #e3f7ec;
    border-radius: 999px;
    padding: 1px 7px;
}
/* Gros bouton rond "+" en bout de ligne (dans la même bande que les colonnes existantes)
   pour ajouter une heure de pacte supplémentaire — la ligne se met à jour dynamiquement
   (rechargement de la page suffit) et une nouvelle colonne apparaît avec la date du jour
   déjà préremplie. */
.pacte-add-col-btn {
    flex: 0 0 auto;
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pacte-add-col-btn:hover { background: var(--brand-dark, #1e3a8a); }
.pacte-add-col-btn .icon { width: 20px; height: 20px; }
/* Espacement resserré entre les tableaux de classes successifs (2de/1re/Tle...) pour
   limiter le défilement de la page. */
.pacte-level-heading { margin: 2px 0 2px; font-size: 0.92rem; }
.pacte-level-table-wrap { margin-bottom: 6px; }
table.pacte-table th.pacte-col-head-mini { text-align: center; white-space: nowrap; font-size: 0.72rem; padding: 3px 5px !important; }
/* Largeurs FIXES et identiques d'un tableau de classe à l'autre (voir le colgroup de
   chaque tableau dans pacte.php) : Nom + Prénom = exactement la largeur de
   .pacte-columns-spacer ci-dessus, si bien que les cases à cocher tombent à la même
   position verticale dans TOUS les tableaux, quelle que soit la longueur des noms. */
table.pacte-table { table-layout: fixed; width: auto; }
.pacte-col-nom { width: 140px; }
.pacte-col-prenom { width: 100px; }
/* Petite colonne récap par élève : sur combien d'heures de pacte il/elle a été présent(e)
   et combien d'heures cela représente au total (voir pacte.php). */
.pacte-col-recap { width: 50px; }
table.pacte-table .pacte-col-recap-head, table.pacte-table .pacte-col-recap-cell { text-align: center; font-size: 0.72rem; }
.pacte-col-recap-cell { font-weight: 700; color: var(--brand); }
/* Tableau des élèves nettement plus compact (lignes plus fines, texte plus petit) pour
   que le professeur voie un maximum d'élèves sans avoir à faire défiler la page. */
table.pacte-table th, table.pacte-table td { padding: 2px 6px; font-size: 0.82rem; line-height: 1.2; overflow-wrap: break-word; }
table.pacte-table td input[type=checkbox] { width: 15px; height: 15px; }
@media (max-width: 900px) {
    .pacte-header-actions { margin-left: 0; }
}
/* Impression : très fortement compacté pour que les classes tiennent sur UNE SEULE page
   (le format paysage vient de la règle @page globale plus haut) même avec beaucoup de
   colonnes/élèves — sans ça, la police et les espacements habituels de l'écran font
   déborder sur une deuxième page. */
/* Nom du professeur + année scolaire, à côté du titre "Pacte" — visible aussi bien à
   l'écran qu'à l'impression/export (contrairement à .pacte-header-card, masquée à
   l'impression), pour toujours pouvoir identifier le professeur concerné sur un pacte
   imprimé ou exporté en PDF. */
.pacte-title-context { font-size: 0.62em; font-weight: 500; color: var(--text-muted); vertical-align: middle; }
@media print {
    h1 { margin: 0 0 2px; font-size: 13pt; }
    .pacte-title-context { font-size: 9pt; }
    .pacte-level-heading { margin: 3px 0 1px; font-size: 8.5pt; }
    .pacte-level-table-wrap { margin-bottom: 3px; }
    table.pacte-table th, table.pacte-table td { padding: 0 3px; font-size: 6.5pt; line-height: 1.1; }
    .pacte-col-head-mini { font-size: 6pt; padding: 1px 2px !important; }
    table.pacte-table td input[type=checkbox] { width: 8px; height: 8px; }
}

/* ---------------------------------------------------------------
 * Fiches publiques (pré-inscription / Chabbat découverte) — page sans connexion,
 * remplie par les familles depuis un ordinateur ou un smartphone (voir
 * includes/fiche_public_form.php, inclus par public_view.php). Volontairement sobre,
 * en une seule colonne, avec de grands champs faciles à toucher au doigt.
 * ------------------------------------------------------------- */
body.fiche-public-page { background: var(--bg); }
/* Bandeau vertical à gauche de la fiche publique (préinscription / Chabbat
 * découverte) : logo de l'établissement sur fond blanc en haut, puis un aplat bleu
 * marine avec "Fiche de renseignements" en dessous — d'après une maquette fournie
 * par l'établissement. --fiche-navy est repris ci-dessous pour les autres accents
 * de couleur de CETTE page (titres de section, bouton d'envoi…), sans toucher aux
 * couleurs bleues utilisées par le reste du logiciel (var(--brand) global). */
.fiche-page-layout { --fiche-navy: #0c3f58; display: flex; min-height: 100vh; align-items: stretch; }
.fiche-sidebar { display: flex; flex-direction: column; width: 220px; flex-shrink: 0; }
.fiche-sidebar-top { background: #fff; padding: 22px 18px; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid var(--fiche-navy); }
/* Le fichier source du logo (assets/logo-yechiva-aix.png) ne fait que 176×68px : l'affichage
 * en pleine largeur de la barre latérale (jusqu'à ~184px) l'agrandissait au-delà de sa
 * résolution native, ce qui le rendait flou. Réduit d'au moins 30% pour rester net. */
.fiche-sidebar-logo { max-width: 125px; height: auto; display: block; }
.fiche-sidebar-bottom { background: var(--fiche-navy); flex: 1; padding: 22px 18px; }
.fiche-sidebar-title { color: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0; }
.fiche-form-wrap { max-width: 640px; margin: 0 auto; flex: 1; padding: 24px 16px; }
.fiche-page-layout .fiche-section-title { border-bottom-color: var(--fiche-navy); color: var(--fiche-navy); }
.fiche-page-layout .fiche-submit-btn { background: var(--fiche-navy); }
.fiche-page-layout .fiche-submit-btn:hover { background: #082c3f; }
.fiche-page-layout .fiche-radio-pill input { accent-color: var(--fiche-navy); }
.fiche-page-layout .fiche-radio-pill:has(input:checked) { border-color: var(--fiche-navy); }
@media (max-width: 720px) {
    .fiche-page-layout { flex-direction: column; min-height: 0; }
    .fiche-sidebar { width: auto; flex-direction: row; }
    .fiche-sidebar-top { border-bottom: none; border-right: 3px solid var(--fiche-navy); padding: 14px 16px; }
    .fiche-sidebar-logo { max-height: 40px; width: auto; }
    .fiche-sidebar-bottom { flex: 1; display: flex; align-items: center; padding: 14px 16px; }
    .fiche-sidebar-title { font-size: 1.05rem; }
}
@media print { .fiche-sidebar { display: none; } }
.fiche-form-header { text-align: center; margin-bottom: 4px; }
.fiche-form-header h1 { font-size: 1.35rem; margin: 0 0 2px; }
.fiche-form-school { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 18px; }
.fiche-form-intro { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: var(--radius); padding: 12px 14px; font-size: 0.92rem; color: #312e81; margin-bottom: 18px; }
.fiche-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.fiche-section-title { font-size: 1.02rem; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); color: var(--brand-dark); }
.fiche-section-hint { font-size: 0.82rem; color: var(--text-muted); margin: 6px 0 10px; }
.fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.fiche-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.fiche-field-wide { grid-column: 1 / -1; }
.fiche-field input, .fiche-field select {
    font: inherit;
    font-weight: 400;
    color: var(--text);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    width: 100%;
}
.fiche-field input:focus, .fiche-field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.fiche-field-file input[type=file] { padding: 8px; font-size: 0.82rem; }
.fiche-history-table { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fiche-history-row { display: grid; grid-template-columns: 84px 1fr 90px; gap: 8px; align-items: center; }
.fiche-history-year { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.fiche-history-row input { font: inherit; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; width: 100%; box-sizing: border-box; }
.fiche-history-classe { text-align: center; }
.fiche-radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.fiche-radio-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); flex-basis: 100%; }
.fiche-radio-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; background: #f4f6fb; border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.fiche-radio-pill input { margin: 0; accent-color: var(--brand); }
.fiche-parents-hint { text-align: center; font-weight: 600; color: var(--brand-dark); }
.fiche-submit-bar { position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 60%, transparent); padding: 14px 0 6px; text-align: center; }
.fiche-submit-error { color: var(--danger); font-size: 0.85rem; font-weight: 600; margin: 0 0 8px; }
.fiche-submit-error:empty { display: none; }
.fiche-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: 999px;
    border: none;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(29,78,216,0.35);
}
.fiche-submit-btn:hover { background: var(--brand-dark); }
.fiche-form-thanks { text-align: center; background: #ecfdf3; border: 1px solid #a7e8c3; border-radius: var(--radius); padding: 32px 20px; }
.fiche-form-thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #1e824c; color: #fff; margin-bottom: 14px; }
.fiche-form-thanks-icon .icon { width: 28px; height: 28px; }
.fiche-form-thanks p { font-size: 1rem; color: #14532d; margin: 0; }
@media (max-width: 560px) {
    .fiche-grid { grid-template-columns: 1fr; }
    .fiche-history-row { grid-template-columns: 1fr; }
    .fiche-history-year { font-size: 0.78rem; }
}

/* Page form_manager.php : gestion des formulaires publics de pré-inscription /
   Chabbat découverte (texte d'accueil, message de remerciement, lien à partager). */
.form-manager-link-card, .form-manager-texts { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; max-width: 720px; }

/* Page enrollment_fiche.php : détail en lecture seule d'une fiche envoyée via un
   formulaire public (voir includes/fiche_public_form.php pour la version saisie). */
.fiche-detail-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; max-width: 900px; }
.fiche-detail-title { font-size: 1rem; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--brand); color: var(--brand-dark); }
.fiche-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.fiche-detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 0.9rem; }
.fiche-detail-label { color: var(--text-muted); font-weight: 600; }
.fiche-detail-value { text-align: right; }
.fiche-detail-bulletins { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.88rem; }
.fiche-detail-bulletin-item a { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
    .fiche-detail-grid { grid-template-columns: 1fr; }
}
/* Impression de la fiche (enrollment_fiche.php) sur UNE SEULE page : les sections sont
   réparties en 2 colonnes (comme la page imprimée tiendrait sinon sur 2 feuilles vu le
   nombre de sections) et fortement compactées (police/espacements réduits), avec le
   titre au-dessus des deux colonnes. break-inside:avoid évite qu'une section ne soit
   coupée au milieu entre deux colonnes/pages. */
@media print {
    body.fiche-detail-print-page { column-count: 2; column-gap: 14px; }
    body.fiche-detail-print-page h1 { column-span: all; text-align: center; font-size: 12pt; margin: 0 0 6px; }
    body.fiche-detail-print-page .fiche-detail-section { break-inside: avoid; padding: 6px 8px; margin-bottom: 6px; max-width: none; }
    body.fiche-detail-print-page .fiche-detail-title { font-size: 8.5pt; margin: 0 0 4px; padding-bottom: 3px; }
    body.fiche-detail-print-page .fiche-detail-grid { gap: 1px 10px; }
    body.fiche-detail-print-page .fiche-detail-row { padding: 1.5px 0; font-size: 7pt; }
    body.fiche-detail-print-page .fiche-detail-bulletins { font-size: 6.8pt; margin-top: 4px; }
    body.fiche-detail-print-page table.simple { font-size: 6.8pt; }
    body.fiche-detail-print-page table.simple th, body.fiche-detail-print-page table.simple td { padding: 1px 4px; }
}

/* form_manager.php : gestion des champs (visibilité/intitulé) et des champs
   personnalisés du formulaire public. */
.form-manager-field-section { margin-bottom: 18px; max-width: 720px; }
.form-manager-field-section h3 { font-size: 0.95rem; margin: 0 0 6px; color: var(--brand-dark); }
.form-manager-custom-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.form-manager-custom-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 0.85rem; }
.form-manager-custom-chip .btn-icon-only { width: 20px; height: 20px; min-height: 20px; padding: 0; }
.form-manager-add-custom { display: flex; gap: 8px; max-width: 560px; flex-wrap: wrap; }
.form-manager-add-custom input[type=text] { flex: 1; min-width: 220px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 0.9rem; }