/* Izyprof — feuille de style principale */
/* Transitoire : à remplacer par un <link rel=stylesheet> dans partials/head.php (meilleure perf). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
:root {
    --bg: #f7f4ed;           /* ivoire chaud — Lin (--sb-bg #efeadf) éclairci : même teinte H~42° S~34%, +4 pts de luminosité (démarcation nette avec la sidebar) */
    --surface: #fffdf9;      /* blanc chaud, accordé à l'ivoire */
    --border: #e3ddd1;
    --text: #2C2C2C;
    --text-fort: #101520;   /* encre plus dense : titres de contenu */
    --muted: #726a5d;
    --accent: #021d56;          /* bleu nuit Izyprof (dominante) */
    --accent-soft: #e7ecf5;     /* teinte claire de la dominante */
    --accent-2: #d85d18;        /* orange Izyprof (secondaire) */
    --accent-2-soft: #fdeee3;
    --c1: #10b981;          /* cycle 1 - maternelle */
    --c2: #3b82f6;          /* cycle 2 */
    --c3: #f59e0b;          /* cycle 3 */
    /* ---- Thème « Languettes » : fond Lin, démarcation par l'ombre ---- */
    --sb-bg: #efeadf;           /* Lin — le fond de la sidebar */
    --sb-bg-grad: linear-gradient(180deg, #f5f1e8 0%, #eee8dc 45%, #e9e2d3 100%); /* dégradé lin doux (light) */
    --sb-fg: #38312a;           /* libellés au repos (gris chaud dense, bon contraste sur le lin) */
    --sb-strong: #2C2C2C;       /* libellé de l'onglet ouvert (encre du logo) */
    --sb-active-bg: #fffdf9;    /* l'onglet ouvert */
    --sb-hover: rgba(255, 255, 255, .66);
    --sb-line: #ddd6c7;         /* filets internes (séparateurs, bord d'onglet) */
    --sb-rail: #cec6b3;         /* languette d'un module sans teinte propre */
    --sb-shadow: 2px 0 4px rgba(72, 58, 36, .07), 9px 0 22px rgba(72, 58, 36, .085);
    --sb-btn-bg: #f9f6ee;       /* boutons d'en-tête : un ton plus clair que le panneau */
    --sb-ctx-bg: #f9f6ee;       /* bandeau de repère scolaire */
    --sb-ctx-sub: #6c6553;
    --sb-badge: #c0561d;        /* pastilles et jauges du menu */

    /* ---- Teintes d'intercalaire, par module ----
     * Source unique : toute entrée de menu et toute page tirent leur couleur d'ici.
     * Les sous-entrées héritent de la teinte de leur parent (registre → eleves…). */
    --c-dashboard: #d6741a; --c-dashboard-soft: #fbecd8; --c-dashboard-line: #f0cd9d; /* orange charté (bouton login), foncé d'un cran : accueil dans la teinte de marque */
    --c-edt: #0f7a80; --c-edt-soft: #dbebec; --c-edt-line: #b2d4d6;
    --c-journal: #bd5624; --c-journal-soft: #f5e6de; --c-journal-line: #eac9b9;
    --c-binome: #3f74b8; --c-binome-soft: #e4ebf5; --c-binome-line: #c3d3ea; /* bleu azur (échanges binôme) */
    --c-assistant: #6d5599; --c-assistant-soft: #e9e6f0; --c-assistant-line: #d0c9de;
    --c-eleves: #2c7350; --c-eleves-soft: #dfeae5; --c-eleves-line: #bbd2c7;
    --c-registre: #2c7350; --c-registre-soft: #dfeae5; --c-registre-line: #bbd2c7;
    --c-stats: #2c7350; --c-stats-soft: #dfeae5; --c-stats-line: #bbd2c7;
    --c-absences: #2c7350; --c-absences-soft: #dfeae5; --c-absences-line: #bbd2c7;
    --c-checklist: #2c7350; --c-checklist-soft: #dfeae5; --c-checklist-line: #bbd2c7;
    --c-responsabilites: #2c7350; --c-responsabilites-soft: #dfeae5; --c-responsabilites-line: #bbd2c7;
    --c-fiche: var(--c-sequences); --c-fiche-soft: var(--c-sequences-soft); --c-fiche-line: var(--c-sequences-line); /* /fiche = même module que /sequences → même accent (olive) */
    --c-livrets: #9c4270; --c-livrets-soft: #f0e3ea; --c-livrets-line: #dfc3d1;
    --c-bilans: #9c4270; --c-bilans-soft: #f0e3ea; --c-bilans-line: #dfc3d1;
    --c-programmations: #87661b; --c-programmations-soft: #ede8dd; --c-programmations-line: #d9ceb6;
    --c-sequences: #6b6a2c; --c-sequences-soft: #e9e9df; --c-sequences-line: #d0cfbb;
    --c-plannings: #3a5a92; --c-plannings-soft: #e1e6ef; --c-plannings-line: #c0cadc; /* bleu franc (ex-dashboard) */
    --c-calendrier: #8f4034; --c-calendrier-soft: #eee2e1; --c-calendrier-line: #dbc2be; /* famille « organisation » (obligations, budgets) */
    --c-obligations: #8f4034; --c-obligations-soft: #eee2e1; --c-obligations-line: #dbc2be;
    --c-budgets: #8f4034; --c-budgets-soft: #eee2e1; --c-budgets-line: #dbc2be;
    --c-bibliotheque: #3c6a8c; --c-bibliotheque-soft: #e2e9ee; --c-bibliotheque-line: #c1cfda;
    --c-fichiers: #3c6a8c; --c-fichiers-soft: #e2e9ee; --c-fichiers-line: #c1cfda;
    --c-config: #5b6472; --c-config-soft: #e6e8ea; --c-config-line: #cbcdd2;
    --c-programmes: #5b6472; --c-programmes-soft: #e6e8ea; --c-programmes-line: #cbcdd2;
    --c-corbeille: #5b6472; --c-corbeille-soft: #e6e8ea; --c-corbeille-line: #cbcdd2;
    --c-superadmin: #5b6472; --c-superadmin-soft: #e6e8ea; --c-superadmin-line: #cbcdd2;
    --c-etablissements: #5b6472; --c-etablissements-soft: #e6e8ea; --c-etablissements-line: #cbcdd2;
    --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-title: "Outfit", "Public Sans", system-ui, sans-serif;
    /* ---- Échelle neutre chaude ----
     * Transposition à luminosité constante des gris froids (slate) qui viraient au
     * violacé sur fond ivoire. Même contraste qu'avant, teinte accordée au thème. */
    --n-900: #2b2721; --n-700: #453f36; --n-600: #5c554a; --n-500: #7d7466;
    --n-400: #a8a094; --n-300: #d6cfc2; --n-200: #e8e3d9; --n-100: #f5f1e9; --n-50: #faf7f1;
    /* ---- Sémantique : une seule valeur par rôle ---- */
    --danger: #b3402f; --danger-strong: #8f3324; --danger-bg: #fbeae6; --danger-bd: #f2d6ce;
    --ok: #2c7350;     --ok-bg: #e7f1ea;
    --ok-vif: #31855c;  /* etat « fait » : le vert le plus clair encore lisible en blanc (4,5:1) */
    --warn: #c07a1e;   --warn-bg: #fbf1e2;
    /* ---- Rayons : trois paliers au lieu de neuf valeurs dispersées ---- */
    --r-sm: 5px;    /* petits contrôles, puces */
    --r-md: 6px;    /* champs, boutons, cellules */
    --r-lg: 8px;    /* cards et grandes surfaces */
    --radius: 8px;  /* alias historique */
    /* Le thème pose les surfaces à plat : la bordure 1 px suffit à les détacher,
     * l'ombre portée est réservée aux éléments flottants (menus, modales). */
    --shadow: none;
    --shadow-float: 0 6px 22px rgba(72, 58, 36, .13);
    font-synthesis: none;
}

* { box-sizing: border-box; }

/* Les contrôles de formulaire n'héritent pas de la police du document : sans cette règle,
 * boutons, listes déroulantes et champs rendent dans la police par défaut du navigateur. */
button, input, select, textarea { font-family: inherit; }

/* L'attribut hidden ne s'impose que via une règle du navigateur, sans poids : la moindre
 * classe posant un display la neutralise. On la rétablit une fois pour toutes. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}

/* Barre supérieure */
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px; color: var(--mod, var(--accent)); text-decoration: none; display: inline-flex; align-items: center; }
.brand-logo { height: 44px; width: auto; display: block; }
.brand span { color: var(--text); font-weight: 500; font-size: .85rem; margin-left: 8px; }
.badge-officiel {
    margin-left: auto;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft));
    padding: 4px 10px; border-radius: 999px;
}

/* Tous les écrans sont en pleine largeur : le titre de page reste ainsi aligné à gauche,
 * comme dans la maquette. .full et .narrow sont conservés en alias sans effet, pour ne pas
 * avoir à retoucher les 22 pages qui les portent. */
.wrap { max-width: none; margin: 0; padding: 20px 22px 60px; }

/* Sélecteur de niveaux */
.niveau-groups { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 8px; }
.niveau-group { display: flex; flex-direction: column; gap: 6px; }
.niveau-group > .lbl {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--muted);
}
.chips { display: flex; gap: 6px; }
.chip {
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    padding: 7px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: all .12s ease;
}
.chip:hover { border-color: var(--mod, var(--accent)); }
.chip.active { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.hint-inline { font-weight: 400; color: var(--muted); font-size: .74rem; }

/* Barre outils */
.toolbar { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.search {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 9px 14px;
}
.search input { border: 0; outline: 0; width: 100%; font-size: .95rem; background: transparent; color: var(--text); }
.search svg { flex: none; color: var(--muted); }
.btn-mini {
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    border-radius: var(--r-md); padding: 8px 12px; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.btn-mini:hover { color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
.count-summary { font-size: .85rem; color: var(--muted); }
.count-summary b { color: var(--text); }

/* Arbre — rendu à plat, indenté par profondeur */
.tree-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.tline {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .93rem; line-height: 1.4;
}
.tline:last-child { border-bottom: 0; }
.tline.is-branch { cursor: pointer; user-select: none; }
.tline.is-branch:hover { background: #fafaff; }

.chev { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); transition: transform .15s ease; }
.chev.open { transform: rotate(90deg); }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mod, var(--accent)); margin-top: 7px; }
.tline-nochev { flex: none; width: 16px; }
.tline .ptree-ic { margin-top: -1px; }
.tline .label { flex: 1; }
.pill-count {
    flex: none; font-size: .72rem; font-weight: 700; color: var(--muted);
    background: var(--bg); border-radius: 999px; padding: 2px 9px; margin-top: 1px;
}

/* Styles par type de nœud */
.tline.type-discipline { font-weight: 700; font-size: 1.02rem; background: #fbfbff; }
.tline.type-domaine { font-weight: 600; }
.tline.type-sous_domaine { color: var(--n-700); }
.tline.is-leaf { font-weight: 400; }
.tline.is-branch.type-sous_domaine { font-weight: 600; }

.age-tag {
    flex: none; font-size: .7rem; font-weight: 700; color: #92400e;
    background: #fef3c7; border-radius: var(--r-sm); padding: 2px 7px; margin-top: 1px;
}
.empty { text-align: center; color: var(--muted); padding: 40px; }
.loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; color: var(--muted); font-weight: 600; padding: 40px 30px;
}
.loading::before {
    content: ""; width: 32px; height: 32px;
    border: 3.5px solid var(--mod-soft, var(--accent-soft)); border-top-color: var(--mod, var(--accent));
    border-radius: 50%; animation: ef-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .loading::before { animation-duration: 2s; } }
mark { background: #fff3a3; border-radius: 3px; padding: 0 1px; }

/* ---- Navigation principale ---- */
.mainnav { display: flex; gap: 4px; margin-left: 10px; }
.mainnav a {
    text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
    padding: 8px 14px; border-radius: var(--r-md);
}
.mainnav a:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.mainnav a.active { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.nav-toggle {
    display: none; margin-left: auto; background: transparent; border: 0;
    color: var(--text); cursor: pointer; padding: 6px; border-radius: var(--r-md); line-height: 0;
}
.nav-toggle:hover { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }

@media (max-width: 760px) {
    .topbar { flex-wrap: wrap; padding: 8px 16px; gap: 8px; }
    .nav-toggle { display: inline-flex; }
    .mainnav { display: none; flex-direction: column; width: 100%; margin: 6px 0 0; gap: 2px; order: 3; }
    .mainnav.open { display: flex; }
    .mainnav a { padding: 12px 14px; }
    .badge-officiel { display: none; }
    .wrap { padding: 16px 14px 48px; }
    .edt-head { flex-direction: column; align-items: stretch; }
    .edt-actions { flex-wrap: wrap; }
    .edt-actions .btn-primary, .edt-actions .btn-ghost { flex: 1; }
}

/* ---- Page configuration ---- */
.wrap.narrow { max-width: none; }
.wrap.full { max-width: none; }
/* Les paragraphes d'explication gardent une longueur de ligne lisible. */
.page-sub { max-width: 78ch; }
.page-title { font-size: 1.62rem; font-weight: 600; letter-spacing: -.022em; margin: 6px 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 20px; font-size: .95rem; }

.card-blk {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    /* Coins hauts droits : le liseré d'intercalaire (::before) se lit posé sur la card,
     * pas rogné par un arrondi. Même géométrie que les boîtes du cahier journal. */
    border-radius: 2px 2px var(--radius) var(--radius); box-shadow: var(--shadow);
    padding: 18px 20px; margin-bottom: 16px;
}
/* Liseré de l'intercalaire en tête de card. */
.card-blk::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: var(--mod, var(--accent));
}
.card-blk-head { font-weight: 700; font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--mod, var(--accent)); color: #fff; font-size: .82rem; font-weight: 700;
}
.hint { color: var(--muted); font-size: .84rem; margin: -6px 0 12px; }

.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fld > span { font-size: .8rem; font-weight: 700; color: var(--n-700); }
.fld input[type=text], .fld input[type=time] {
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px;
    font-size: .95rem; background: var(--surface); color: var(--text); outline: none;
}
.fld input:focus { border-color: var(--mod, var(--accent)); }
.fld textarea {
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px;
    font-size: .95rem; line-height: 1.45; background: var(--surface); color: var(--text);
    outline: none; resize: vertical; min-height: 92px; box-sizing: border-box; width: 100%;
}
.fld textarea:focus { border-color: var(--mod, var(--accent)); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 16px; align-items: end; }
.wrap-chips { flex-wrap: wrap; }

/* Aperçu des plages */
.preview .card-blk-head .step { background: var(--c1); }
table.bands { width: 100%; border-collapse: collapse; }
table.bands td { padding: 8px 6px; border-bottom: 1px dashed var(--border); font-size: .95rem; }
table.bands tr:last-child td { border-bottom: 0; }
.b-idx { color: var(--muted); width: 90px; }
.b-time b { color: var(--text); }
.b-dur { text-align: right; color: var(--muted); }
.totaux { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.totaux b { color: var(--mod, var(--accent)); }

/* Volumes de référence */
table.vols { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.vols th { text-align: left; padding: 6px 8px; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--border); }
table.vols td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
table.vols td:first-child { display: flex; align-items: center; gap: 8px; }
.mtag { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* Actions */
.actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; margin-top: 8px; }
.btn-primary {
    /* --mod est posé par <body data-module="…"> : chaque écran prend la teinte de son
     * intercalaire, et retombe sur la couleur de marque si le module n'en a pas. */
    background: var(--mod, var(--accent)); color: #fff; border: 0; border-radius: var(--r-sm);
    padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.actions .err { color: var(--danger); font-weight: 600; font-size: .9rem; }
.actions .ok { color: var(--ok); font-weight: 700; font-size: .9rem; }

@media (max-width: 640px) {
    .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* ---- Champs select ---- */
.fld select {
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px;
    font-size: .95rem; background: var(--surface); color: var(--text); outline: none;
}
.fld select:focus { border-color: var(--mod, var(--accent)); }

/* ---- Emploi du temps ---- */
.edt-wrap { max-width: 1240px; }
.edt-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.edt-add { flex: none; white-space: nowrap; }
.edt-layout { display: flex; gap: 18px; align-items: flex-start; }
.edt-cal {
    flex: 1; min-width: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px;
}
.edt-side {
    width: 300px; flex: none; position: sticky; top: 78px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
}
.side-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 12px; }
.vol-niveau { margin-bottom: 16px; }
.vol-niveau:last-child { margin-bottom: 0; }
.vol-niveau-head {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 2px solid var(--border); padding-bottom: 5px; margin-bottom: 8px;
}
.vol-niveau-head b { font-size: 1rem; color: var(--mod, var(--accent)); }
.vol-total { font-size: .78rem; color: var(--muted); }
.vol-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: .82rem; }
.vol-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vol-bar { flex: none; width: 46px; height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.vol-bar-in { display: block; height: 100%; border-radius: 4px; }
.vol-num { flex: none; font-size: .75rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.vol-num.ok { color: var(--ok); }
.vol-num.sous { color: #d97706; }
.vol-num.vide { color: var(--n-400); }
.vol-empty { font-size: .82rem; color: var(--muted); }

/* Réglages FullCalendar */
/* ---- Grille emploi du temps sur-mesure (écran = impression) ---- */
.tt { display: flex; align-items: stretch; gap: 7px; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px; user-select: none; background: #e9edf4; box-shadow: var(--shadow); }
.tt-axis { flex: none; width: 60px; background: #fcfcfe; border-radius: var(--r-md); overflow: hidden; }
.tt-axis-head { height: 42px; }
.tt-axis-body { position: relative; }
.tt-tick { position: absolute; right: 8px; transform: translateY(-50%); font-size: .8rem; font-weight: 600; color: #667085; white-space: nowrap; }
.tt-tick-major { color: var(--text); font-weight: 800; }
.tt-tick-first { transform: translateY(0); }
.tt-tick-last { transform: translateY(-100%); }
.tt-col { flex: 1; min-width: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.tt-col-head { height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; background: #fbfbfe; font-size: .9rem; letter-spacing: .2px; }
.tt-body { position: relative; }
.tt-col.phantom .tt-body { background-color: #fbf7f0; }
/* EDT — vue mobile « 1 jour » : barre de navigation + une seule colonne pleine largeur.
   Les colonnes-jour tassées (4-5 sur 390px) devenaient illisibles ; on n'en montre qu'une. */
.edt-mobday { display: none; }
@media (max-width: 640px) {
    .edt-mobday { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 12px; }
    .edt-mobday-nav { flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
    .edt-mobday-nav:active { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod, var(--accent)); }
    .edt-mobday-cur { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .tt { gap: 5px; }
    .tt-col { display: none; }
    .tt-col.mob-on { display: block; }
    /* Le jour est déjà dans la barre de nav → on masque les en-têtes (les deux spacers 42px
       ensemble, l'axe horaire reste aligné avec le corps de la colonne). */
    .tt-axis-head, .tt-col-head { display: none; }
}
.tt-hline { position: absolute; left: 0; right: 0; border-top: 1px solid #e6e9f2; pointer-events: none; }
.tt-hline-minor { border-top-color: #f2f4f9; }
.tt-break { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #e9edf6, #e9edf6 6px, #eef1fa 6px, #eef1fa 12px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tt-break-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #97a1b4; pointer-events: none; background: rgba(255, 255, 255, .55); padding: 1px 8px; border-radius: 999px; }
/* Récrés/pauses : clic = éditer (mini-modale) ; style « aménagé » */
.tt-break { cursor: pointer; }
.tt-break-h { position: absolute; left: 0; right: 0; height: 10px; cursor: ns-resize; z-index: 3; touch-action: none; }
.tt-break-h-top { top: -2px; }
.tt-break-h-bot { bottom: -2px; }
.tt-break-exc { background: repeating-linear-gradient(45deg, #fdf1dc, #fdf1dc 6px, #fbe8c6 6px, #fbe8c6 12px); outline: 1px dashed #e0a94a; outline-offset: -1px; }
.tt-break-exc .tt-break-lbl { color: #b26a00; background: rgba(255, 255, 255, .72); }
.tt-break-exc-tag { color: #b26a00; text-transform: none; font-weight: 700; }

/* Prise de tirette MUTUALISÉE (récrés + séances d'agenda) : masquée, révélée au survol de l'item, barre blanche */
.tt-break-h, .tt-ev-resize { opacity: 0; transition: opacity .12s ease; }
.tt-break:hover .tt-break-h, .tt-ev:hover .tt-ev-resize { opacity: 1; }
.tt-break-h::after, .tt-ev-resize::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 4px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .22); }
.tt-break:hover .tt-break-h::after, .tt-ev:hover .tt-ev-resize::after { width: 30px; }
.tt-ghost { position: absolute; left: 3px; right: 3px; background: var(--mod-soft, var(--accent-soft)); border: 1.5px dashed var(--mod, var(--accent)); border-radius: var(--r-md); opacity: .9; pointer-events: none; }
.tt-ev { position: absolute; border-radius: var(--r-md); color: #fff; overflow: hidden; cursor: grab; box-sizing: border-box; box-shadow: 0 1px 2px rgba(20, 20, 50, .18); transition: box-shadow .12s ease, filter .12s ease; }
.tt-ev::after { content: none; }
.tt-ev:hover { filter: brightness(1.06) saturate(1.04); box-shadow: 0 5px 13px rgba(20, 20, 50, .26); z-index: 3; }
.tt-ev.dragging { opacity: .93; cursor: grabbing; z-index: 6; box-shadow: 0 10px 22px rgba(20, 20, 50, .32); }
.tt-ev.locked { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 1px 2px rgba(20, 20, 50, .18); }
.tt-ev-in { position: relative; z-index: 1; padding: 5px 8px; }
.tt-ev-m { font-weight: 700; font-size: .85rem; line-height: 1.28; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.tt-ev.ev-dense .tt-ev-m { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-ev-tin { font-weight: 600; font-size: .82em; opacity: .72; margin-left: 6px; white-space: nowrap; }
.tt-ev-niv { font-size: .62rem; background: color-mix(in srgb, currentColor 24%, transparent); border-radius: 4px; padding: 0 5px; font-weight: 700; }
.tt-ev-sub { font-size: .69rem; font-weight: 600; opacity: .82; line-height: 1.2; margin-top: 1px; }
.tt-ev-t { font-size: .66rem; font-weight: 600; opacity: .8; letter-spacing: .2px; margin-top: 2px; }
/* intervenant / décloisonnement posé sur le créneau : ligne discrète avec icône « personnes » */
.tt-ev-interv { display: flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 600; font-style: italic; opacity: .88; line-height: 1.2; margin-top: 2px; }
.tt-ev-interv svg { flex: none; opacity: .9; }
.tt-ev.ev-dense .tt-ev-interv { margin-top: 0; line-height: 1.12; }
.tt-ev-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; z-index: 2; }
.binome-tag {
    font-size: .6rem; background: #f3e6cf; color: #92600e; padding: 1px 6px;
    border-radius: var(--r-sm); font-weight: 700; text-transform: none; margin-left: 5px; vertical-align: middle;
}

/* Case à cocher (modale) */
.chk { display: flex; align-items: flex-start; gap: 9px; font-size: .86rem; color: var(--n-700); margin: 2px 0 16px; cursor: pointer; }
.chk input { margin-top: 3px; flex: none; }

@media (max-width: 1024px) {
    .edt-layout { flex-direction: column; }
    .edt-cal { width: 100%; }
}

/* ---- Suivi des volumes : colonne sur PC (host transparent), modale sur tablette/mobile ---- */
.edt-side-host { display: contents; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.side-head .side-title { margin-bottom: 0; }
.side-modal-close { display: none; flex: none; background: transparent; border: 0; cursor: pointer; font-size: 1.7rem; line-height: 1; color: var(--muted); width: 40px; height: 40px; border-radius: var(--r-md); }
.side-modal-close:hover { background: var(--bg); color: var(--text); }
@media (min-width: 1025px) {
    .edt-side.is-collapsed { display: none; }   /* repli de la colonne sur PC */
}
@media (max-width: 1024px) {
    .edt-side-host { display: none; }            /* volumes hors flux → accessibles via la modale */
    .edt-side-host.vol-open {
        display: flex; position: fixed; inset: 0; z-index: 1000;
        background: rgba(20, 22, 40, .45); padding: 16px; overflow-y: auto;
        align-items: center; align-items: safe center; justify-content: center;
    }
    .edt-side-host.vol-open .edt-side {
        width: 100%; max-width: 480px; max-height: 90vh; max-height: 90dvh;
        overflow-y: auto; position: static; top: auto; margin: 0;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    }
    .edt-side-host.vol-open .side-modal-close { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- Modale ---- */
.modal-back {
    position: fixed; inset: 0; background: rgba(20, 22, 40, .45);
    display: flex; align-items: center; align-items: safe center; justify-content: center; z-index: 1000;
    padding: 16px; overflow-y: auto;
}
.modal-box {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.25);
    width: 100%; max-width: 520px; padding: 22px 24px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overflow-x: hidden;
}
.modal-box--edt { max-width: 600px; }
/* EDT — Jour / Début / Fin en trois colonnes égales. La 3e colonne de .grid3 est « auto »
   (calée sur le contenu) ; l'input horaire étant désormais enveloppé dans .ef-timepick-wrap,
   ce calcul « auto » faisait gonfler la colonne Fin. Trois 1fr = largeurs stables et égales. */
.modal-box--edt .grid3 { grid-template-columns: 1fr 1fr 1fr; }
/* Champ heure flatpickr (x-fptime) : cohérent avec les autres champs, curseur texte.
   width:100% + min-width:0 : sans ça la largeur intrinsèque du <input type=text>
   (~20 car.) déborde la colonne de grille (grid2/grid3) et sort du cadre. */
.ef-timepick { cursor: text; width: 100%; min-width: 0; box-sizing: border-box; }
.flatpickr-calendar.noCalendar { width: auto; }
.flatpickr-time { border-radius: 0 0 10px 10px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 1.15rem; font-weight: 700; }
.modal-close {
    flex: none; background: transparent; border: 0; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: var(--muted);
    width: 32px; height: 32px; border-radius: var(--r-md); margin: -4px -6px 0 0;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.btn-ghost { background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 16px; font-weight: 600; cursor: pointer; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.card-blk.danger-zone { margin-top: 24px; border-color: var(--danger-bd); background: #fffafa; }
.card-blk.danger-zone .card-blk-head { color: var(--danger); }
.btn-del { background: var(--danger-bd); color: var(--danger-strong); border: 0; border-radius: var(--r-md); padding: 10px 16px; font-weight: 700; cursor: pointer; }
.btn-del:hover { background: var(--danger-bd); }

/* Barre d'actions EDT + assistant de génération */
.edt-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Barre EDT : sur écran étroit (largeur RÉELLE de la barre, container query → robuste
   avec/sans sidebar), les actions secondaires se replient sous le menu « Plus ». */
.edt-head { container-type: inline-size; }
.dd.edt-more { display: none; }   /* .dd.edt-more bat .dd { display:inline-block } (défini plus bas) */
@container (max-width: 860px) {
    .edt-actions .edt-sec { display: none; }
    .dd.edt-more { display: inline-block; }
}
.gen-block { margin-bottom: 16px; }
.gen-step-lbl { font-weight: 700; font-size: .9rem; margin-bottom: 8px; color: var(--mod, var(--accent)); }
.gen-warn {
    background: var(--warn-bg); border: 1px solid var(--warn-bg); color: #9a3412;
    padding: 10px 12px; border-radius: var(--r-md); font-size: .85rem; margin: 4px 0 16px;
}

/* ---- Gestion des étiquettes ---- */
.etq-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.etq-add input[type=text] { flex: 1; min-width: 180px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; font-size: .95rem; outline: none; }
.etq-add input[type=text]:focus { border-color: var(--mod, var(--accent)); }
.etq-add select, .etq-editing select { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; background: var(--surface); color: var(--text); font-size: .9rem; }
.etq-color { width: 44px; height: 40px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; flex: none; }
.etq-color.sm { width: 38px; height: 34px; }
.etq-flash { min-height: 20px; margin: 4px 2px 10px; }
.etq-flash .err { color: var(--danger); font-weight: 600; font-size: .88rem; }
.etq-flash .ok { color: var(--ok); font-weight: 700; font-size: .88rem; }

.etq-list { display: flex; flex-direction: column; gap: 8px; }
.etq-card {
    display: flex; align-items: center; gap: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--etq, var(--mod, var(--accent)));
    border-radius: var(--r-md); padding: 4px 10px 4px 6px;
    box-shadow: 0 1px 2px rgba(20, 20, 50, .04); transition: box-shadow .12s;
}
.etq-card:hover { box-shadow: var(--shadow); }
.etq-card.is-editing { box-shadow: 0 0 0 2px var(--mod-soft, var(--accent-soft)); }
.etq-drag { flex: none; display: inline-flex; align-items: center; color: #c3c8d6; cursor: grab; padding: 8px 4px; border-radius: var(--r-sm); }
.etq-drag:hover { color: var(--mod, var(--accent)); }
.etq-drag:active { cursor: grabbing; }
.etq-ghost { opacity: .35; }
.etq-chosen { box-shadow: 0 10px 26px rgba(20, 20, 50, .16); }

.etq-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 0; }
.etq-swatch { width: 18px; height: 18px; border-radius: var(--r-sm); flex: none; background: var(--etq, var(--mod, var(--accent))); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.etq-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etq-nom-input { flex: 1; min-width: 120px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: .95rem; outline: none; }
.etq-nom-input:focus { border-color: var(--mod, var(--accent)); }
.etq-type { font-size: .72rem; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 3px 10px; flex: none; }
.etq-badge { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 999px; padding: 3px 9px; flex: none; }
.etq-badge.sys { background: #eef2ff; color: #4f46e5; }
.etq-badge.use { background: #ecfdf5; color: #047857; }
.etq-spacer { flex: 1; }
.etq-ico { flex: none; display: inline-flex; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 7px; border-radius: var(--r-md); }
.etq-ico:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.etq-ico-del:hover { color: var(--danger); background: var(--danger-bd); }
.etq-ico.is-off { opacity: .3; pointer-events: none; }
.btn-mini-p { padding: 8px 14px; border: 0; font-size: .85rem; }

@media (max-width: 640px) {
    .etq-type { display: none; }
    .etq-body { flex-wrap: wrap; }
}

/* ---- Sélecteur d'étiquettes inline (modale) ---- */
.etqpick { position: relative; }
.etqpick-btn { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; background: var(--surface); cursor: pointer; text-align: left; font-size: .95rem; color: var(--text); }
.etqpick-btn:hover { border-color: var(--mod, var(--accent)); }
.etqpick-name { flex: 1; }
.etqpick-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 14px 34px rgba(20, 20, 50, .18); overflow: hidden; }
.etqpick-list { max-height: 230px; overflow-y: auto; padding: 4px; }
.etqpick-item { display: flex; align-items: center; border-radius: var(--r-sm); }
.etqpick-drag { flex: none; display: inline-flex; align-items: center; color: #c3c8d6; cursor: grab; padding: 8px 2px 8px 8px; }
.etqpick-drag:hover { color: var(--mod, var(--accent)); }
.etqpick-drag:active { cursor: grabbing; }
.etqpick-item.sel { background: var(--mod-soft, var(--accent-soft)); }
.etqpick-item:hover { background: var(--bg); }
.etqpick-pick { flex: 1; display: flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 8px 10px; cursor: pointer; text-align: left; font-size: .92rem; color: var(--text); min-width: 0; }
.etqpick-pick > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etqpick-edit { flex: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 6px 9px; border-radius: var(--r-sm); }
.etqpick-edit:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.etqpick-add { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-top: 1px solid var(--border); background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-weight: 700; cursor: pointer; font-size: .9rem; }
.etqpick-add:hover { filter: brightness(.97); }
.etqpick-form { padding: 10px 12px; border-top: 1px solid var(--border); background: #fbfbff; }
.etqpick-form-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.etqpick-form-row input[type=text] { flex: 1; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: .92rem; outline: none; }
.etqpick-form-row input[type=text]:focus { border-color: var(--mod, var(--accent)); }
.etqpick-ratt { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--n-700); margin-bottom: 8px; }
.etqpick-ratt select { border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; background: var(--surface); color: var(--text); }
.etqpick-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Modale d'édition d'étiquette (superposée au-dessus de la modale créneau) */
.etq-modal-back { z-index: 1100; }
.etq-col-row { display: flex; align-items: center; gap: 10px; }
.etq-col-row code { color: var(--muted); font-size: .85rem; }

/* ---- Cahier journal ---- */
.jour-wrap { max-width: 900px; }
.jour-datebar { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px; }
.btn-nav { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); font-size: 1.4rem; line-height: 1; color: var(--muted); cursor: pointer; }
.btn-nav:hover { color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
.jour-date { text-align: center; }
.jour-date-label { font-weight: 700; font-size: 1.15rem; text-transform: capitalize; }
.jour-date input[type=date] { border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 8px; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.jour-empty { text-align: center; color: var(--muted); padding: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }

.seance { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; }
/* Bandeau-titre coloré (façon Teetsh) : fond teinté + texte foncé de la même teinte */
.seance-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--et, var(--mod, var(--accent))); color: var(--et-fg, #fff); font-weight: 800; cursor: default; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.seance-bar-t { font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seance-bar-sp { flex: 1; }
.seance-bar-click { cursor: pointer; }
.seance-bar-click:hover { filter: brightness(.94); }
.jour-vacances { display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; padding: 11px 14px; border-radius: var(--r-md); background: var(--warn-bg); color: #c2410c; font-weight: 700; border: 1px solid var(--warn-bg); }
.jour-vacances svg { flex: none; }

/* Panneau « Obligations du jour » (cahier journal + widget d'accueil) — lecture seule, lien vers Obligations */
/* Les obligations de service ne sont pas des séances : le panneau se distingue par une
 * teinte, pas par une boîte de plus. Elle vient de la dominante de la page (--mod-soft,
 * table des teintes par module) — le blanc bleuté en dur d'avant jurait sur l'ivoire. */
.ods-panel {
    margin: 8px 0 6px; padding: 10px 12px 11px;
    /* Teinte du module éclaircie (mélange avec du blanc) pour un fond plus léger. */
    background: color-mix(in srgb, var(--mod-soft, var(--accent-soft)) 58%, #fff);
    /* Même géométrie que les séances du fil : liseré de tête, coins hauts droits. */
    border: 1px solid var(--mod-line, var(--border));
    border-top: 2px solid var(--mod, var(--accent));
    border-radius: 2px 2px var(--r-lg) var(--r-lg);
}
.db-ods-band.ods-panel { margin: 2px 0 14px; }
.ods-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--n-500); font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ods-panel-head svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ods-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ods-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 11px; border-radius: var(--r-md); text-decoration: none; font-size: .78rem; line-height: 1.3; color: var(--n-700); background: #f4f6f8; border: 1px solid #eceef1; transition: filter .15s ease; }
.ods-badge { background: color-mix(in srgb, var(--oc, var(--n-500)) 12%, #fff); border-color: color-mix(in srgb, var(--oc, var(--n-500)) 26%, #eceef1); }
.ods-badge:hover { filter: brightness(.97); }
.ods-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oc, var(--n-500)); flex: 0 0 auto; }
.ods-badge-time { font-weight: 800; color: var(--oc, var(--n-700)); flex: 0 0 auto; }
.ods-badge-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ods-badge.is-shared { border-style: dashed; }
.ods-chip-share { width: 12px; height: 12px; opacity: .55; flex: 0 0 auto; }

/* Obligation horodatée insérée dans le fil chronologique du cahier journal */
.seance-ods { display: flex; align-items: center; gap: 10px; text-decoration: none; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--n-200); border-left: 3px solid var(--oc, var(--n-500)); border-radius: var(--r-md); background: #fff; color: var(--n-700); transition: background .15s ease; }
.seance-ods:hover { background: var(--n-50); }
.seance-ods.is-shared { border-left-style: dashed; }
.seance-ods-time { font-weight: 800; color: var(--oc, var(--n-700)); font-size: .82rem; min-width: 44px; flex: 0 0 auto; }
.seance-ods-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--oc, var(--n-500)); flex: 0 0 auto; }
.seance-ods-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.seance-ods-title { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seance-ods-cat { font-size: .72rem; color: var(--n-500); }

/* Nudge binôme : modale de réglage des jours de présence personnels */
.pn-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.pn-later { background: none; border: none; color: var(--n-500); font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 4px; }
.pn-later:hover { color: var(--n-700); }

.seance-body { padding: 10px 13px 12px; }
.seance-dur { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.seance-inti { color: var(--muted); }

/* Contenu textuel en lecture seule (dans la carte) */
.ro-block { margin-top: 9px; }
.ro-lbl { display: block; font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.ro-txt { font-size: .86rem; white-space: pre-wrap; }
.ro-obj { margin: 0; padding-left: 18px; font-size: .86rem; }
.ro-obj li { margin: 1px 0; }
.ro-html { font-size: .88rem; line-height: 1.5; }
.ro-html p { margin: 0 0 6px; }
.ro-html ul, .ro-html ol { margin: 4px 0 6px; padding-left: 22px; }
.ro-html h2, .ro-html h3, .ro-html h4 { margin: 8px 0 4px; line-height: 1.25; }
.ro-html blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }
.ro-html img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.ro-html figure { margin: 8px 0; }
.ro-html figure.image { display: table; }
.ro-html table { border-collapse: collapse; width: auto; max-width: 100%; }
.ro-html td, .ro-html th { border: 1px solid var(--border); padding: 4px 8px; font-size: .84rem; }
.ro-html .todo-list { list-style: none; padding-left: 2px; }
.ro-html .todo-list li { display: flex; align-items: baseline; gap: 7px; }
.ro-html .todo-list__label > input { flex: none; }
.ro-html a { color: var(--mod, var(--accent)); }

.seance-obj { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; align-items: center; }
.obj-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: .82rem; }
.obj-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.obj-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 50%; }
.obj-x:hover { color: var(--danger); }
.obj-add { border: 1px dashed var(--mod, var(--accent)); color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; }

/* Zones de texte simples (Matériel / Différenciation / Observations) — dans la modale */
.edit-field textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; font-size: .88rem; resize: vertical; outline: none; box-sizing: border-box; }
.edit-field textarea:focus { border-color: var(--mod, var(--accent)); }

/* Éditeur riche CKEditor 5 (Déroulé) */
.rt { --ck-border-radius: var(--r-md); }
.rt .ck.ck-editor__main > .ck-editor__editable { min-height: 130px; max-height: 440px; overflow-y: auto; }
.rt .ck-content { font-size: .9rem; line-height: 1.5; }

/* Pièces jointes */
.seance-pj { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 9px; }
.pj-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px 6px 3px 10px; font-size: .8rem; max-width: 100%; }
.pj-chip a { color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pj-chip a:hover { color: var(--mod, var(--accent)); text-decoration: underline; }
.pj-size { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.pj-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 50%; }
.pj-x:hover { color: var(--danger); }
.pj-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--border); color: var(--muted); background: var(--surface); border-radius: var(--r-md); padding: 3px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.pj-add:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.pj-add svg { width: 14px; height: 14px; }

/* Barre d'action flottante en bas à droite de la séance (hors flux → pas d'espace réservé).
   Alignée à droite pour ne pas recouvrir les pièces jointes, qui s'écoulent depuis la gauche. */
.seance-actions { position: absolute; right: 7px; bottom: 7px; z-index: 2; display: flex; align-items: center; gap: 5px; margin-top: 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(2px);
    border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px 5px; box-shadow: 0 2px 8px rgba(20, 20, 50, .14); }
/* Visibles au survol / focus seulement (appareils avec souris) ; sur tactile : toujours affichées */
@media (hover: hover) {
    .seance-actions { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
    .seance:hover .seance-actions, .seance:focus-within .seance-actions { opacity: 1; pointer-events: auto; }
}
/* Bouton d'action primaire (couleur dominante) — utilisé pour tous les « Ajouter / Nouveau … » */
.btn-green { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--mod, var(--accent)); color: #fff; border: 0; border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none; }
.btn-green svg { flex: none; }
.btn-green:hover { filter: brightness(1.12); }
.btn-green:disabled { opacity: .6; }

/* Sélecteur d'objectifs (cahier journal) */
.picker-box { max-width: 640px; display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; }
.picker-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.picker-tools select { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface); }
.picker-tree { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; min-height: 200px; }
.ptree-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--r-md); }
.ptree-row:hover { background: var(--bg); }
.ptree-row.ptree-picked { background: var(--mod-soft, var(--accent-soft)); }
.ptree-chev { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; flex: none; }
.ptree-chev svg { transition: transform .15s ease; }
.ptree-nochev { width: 18px; flex: none; }
/* Badge d'icône par type de nœud (style Teetsh : fond teinté + icône colorée) */
.ptic { display: contents; }
.ptree-ic { flex: none; width: 26px; height: 26px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.ptree-ic svg { width: 15px; height: 15px; }
.ptree-ic.t-matiere { background: #e6f4ea; color: #1e8e3e; }
.ptree-ic.t-domaine { background: #fce7f0; color: #d81b60; }
.ptree-ic.t-competence { background: #e8f0fe; color: #1a73e8; }
.ptree-ic.t-objectif { background: #fef0e3; color: #e8710a; }
/* Item de programme dans le journal (lecture / export) : TOUT l'élément = un label teinté par type (icône + type + texte) */
.ro-obj.prog-list, .jx-obj.prog-list { list-style: none; padding-left: 0; margin-left: 0; }
.prog-item { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; padding: 7px 12px; border-radius: var(--r-md); font-size: .9rem; line-height: 1.45; }
.prog-item .ptree-ic { flex: none; width: 16px; height: 16px; border-radius: 0; background: transparent !important; position: relative; top: -1.5px; }
.prog-item .ptree-ic svg { width: 15px; height: 15px; }
.prog-item-type { flex: none; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.prog-item-lbl { min-width: 0; color: var(--text); }
.prog-item.t-matiere    { background: #ecf6f0; } .prog-item.t-matiere    .prog-item-type { color: #1e8e3e; }
.prog-item.t-domaine    { background: #fce9f1; } .prog-item.t-domaine    .prog-item-type { color: #d81b60; }
.prog-item.t-competence { background: #eaf1fd; } .prog-item.t-competence .prog-item-type { color: #1a73e8; }
.prog-item.t-objectif   { background: #fdf1e6; } .prog-item.t-objectif   .prog-item-type { color: #e8710a; }

/* Séance — éléments du programme (matière / domaine / compétence / objectif) :
 * affichage compact, descriptif passé À LA LIGNE sous l'étiquette de type, police calée sur le
 * contexte (jamais les .9rem absolus de l'arbre, trop gros surtout à l'impression), et un peu
 * d'air sous chaque item. Vaut pour l'affichage jour (.ro-obj) ET l'export/impression (.jx-obj). */
.ro-obj .prog-item, .jx-obj .prog-item { flex-wrap: wrap; align-items: center; gap: 2px 7px; border: 1px solid transparent; }
.ro-obj .prog-item-lbl, .jx-obj .prog-item-lbl { flex-basis: 100%; }
/* Affichage jour (écran) */
.ro-obj .prog-item { padding: 6px 10px; margin: 4px 0 9px; font-size: .8rem; line-height: 1.225; }
.ro-obj .prog-item-type { font-size: .64rem; }
.ro-obj .prog-item .ptic svg { width: 14px; height: 14px; }
/* Export / impression (tailles en em → suivent la police d'export) */
.jx-obj .prog-item { padding: 4px 8px; margin: 3px 0 7px; font-size: .82em; line-height: 1.1; }
.jx-obj .prog-item-type { font-size: .82em; }
.jx-obj .prog-item .ptic svg { width: 1em; height: 1em; }
/* Petite bordure teintée par type (couleurs en dur → fiables à l'impression). */
.ro-obj .prog-item.t-matiere,    .jx-obj .prog-item.t-matiere    { border-color: #bfe0cb; }
.ro-obj .prog-item.t-domaine,    .jx-obj .prog-item.t-domaine    { border-color: #f3c4d6; }
.ro-obj .prog-item.t-competence, .jx-obj .prog-item.t-competence { border-color: #c6dbf7; }
.ro-obj .prog-item.t-objectif,   .jx-obj .prog-item.t-objectif   { border-color: #f5d3b0; }
/* Affichage écran : les encarts programme passent en largeur auto et s'écoulent côte à
 * côte (flex-wrap) quand leur taille le permet ; un intitulé long prend la ligne entière.
 * Gain de place vertical. L'export/impression (.jx-obj) reste empilé pleine largeur. */
.ro-obj.prog-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; }
.ro-obj .prog-item { width: auto; max-width: 100%; margin: 0; }

.obj-chip .ptree-ic { width: 18px; height: 18px; border-radius: var(--r-sm); }
.obj-chip .ptree-ic svg { width: 11px; height: 11px; }
.ptree-lbl { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; font-size: .9rem; padding: 2px 0; min-width: 0; }
.ptree-lbl input { flex: none; }
.ptype-discipline .ptree-lbl { font-weight: 700; }
.ptype-domaine .ptree-lbl { font-weight: 600; }
.ptype-sous_domaine .ptree-lbl { font-weight: 500; }
/* Légende des types de nœuds */
.ptree-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: .8rem; color: var(--muted); padding: 0 2px 10px; }
.ptree-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.ptree-legend .ptree-ic { width: 22px; height: 22px; border-radius: var(--r-sm); }
.ptree-legend .ptree-ic svg { width: 13px; height: 13px; }
.picker-count { font-size: .85rem; color: var(--muted); }

/* ---- Cahier journal : vues multi-jours + impression (surcharge) ---- */
/* overflow-x: clip → empêche une info-bulle invisible (::after de [data-tip]) d'un bouton
   de la colonne de droite, en mode Semaine, de créer une scrollbar horizontale « fantôme ».
   `clip` (et non `hidden`) n'établit pas de conteneur de défilement : sticky/scroll vertical intacts. */
.jour-wrap { max-width: 1300px; overflow-x: clip; }
.jour-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.jour-toolbar > .jour-right { margin-left: auto; }
.jour-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-nav { width: 34px; height: 34px; font-size: 1.3rem; }
.dp { position: relative; display: inline-flex; }
.dp-hidden { display: none; }
.dp-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.btn-mini.is-on { color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
/* Toggle « Cahier journal du binôme » : état actif (partagé) bien visible */
.jr-binome.is-on { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); font-weight: 700; }
.jour-range { font-weight: 700; font-size: 1.05rem; text-transform: capitalize; text-align: center; min-width: 150px; }
.jour-right { display: flex; align-items: center; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.seg button { border: 0; background: var(--surface); color: var(--muted); padding: 7px 14px; font-size: .83rem; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--mod, var(--accent)); color: #fff; }
.btn-white { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: none; }
.btn-white:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.print-title { display: none; }

/* Dropdown générique (menu « Imprimer », menu du jour) */
.dd { position: relative; display: inline-block; }
.dd-caret { margin-left: 1px; opacity: .7; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 200; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(20, 20, 50, .16); padding: 6px; }
.dd-menu button, .dd-menu a { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--r-md); padding: 8px 10px; font-size: .88rem; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box; }
.dd-menu button:hover, .dd-menu a:hover { background: var(--bg); color: var(--mod, var(--accent)); }
.dd-menu button svg { flex: none; opacity: .8; }
.dd-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.dd-menu .dd-danger { color: var(--danger); }
.dd-menu .dd-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Info-bulles data-tip — rendues par ui.js dans une bulle UNIQUE en position: fixed, attachée au
   <body> (voir le moteur efTooltip dans ui.js). En sortant du flux, elles échappent à tout conteneur
   scrollable : plus de scrollbar « fantôme » ni de clipping par un parent overflow:hidden, quel que
   soit le contexte. Positionnement (au-dessus/dessous + flèche) calculé en JS depuis le viewport. */
.ef-tip {
    position: fixed; top: 0; left: 0; z-index: 100090;
    background: #1f2430; color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.2;
    white-space: normal; max-width: min(340px, 92vw); word-break: break-word; padding: 5px 8px; border-radius: var(--r-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}
.ef-tip.show { opacity: 1; transform: translateY(0); }
.ef-tip-arrow { position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.ef-tip.pos-top .ef-tip-arrow { bottom: -10px; border-top-color: #1f2430; }
.ef-tip.pos-bottom .ef-tip-arrow { top: -10px; border-bottom-color: #1f2430; }
@media print { .ef-tip { display: none !important; } }

/* SweetAlert2 — accord visuel avec les modales de l'app (rayons identiques) */
.swal2-container .swal2-popup { border-radius: var(--r-lg); }
.swal2-container .swal2-actions .swal2-styled { border-radius: var(--r-md); font-weight: 700; font-size: .9rem; }

/* Calendrier flatpickr — thème Izyprof (couleurs du site) */
#ef-cal { min-height: 0; }
.flatpickr-calendar { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--surface); }
.flatpickr-calendar.inline { box-shadow: none; margin: 6px auto 0; }
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--border); }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--border); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months { color: var(--text); fill: var(--text); background: transparent; }
.flatpickr-monthDropdown-months { font-weight: 700; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: var(--mod-soft, var(--accent-soft)); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--muted); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--mod, var(--accent)); }
.flatpickr-weekday { color: var(--muted); font-weight: 700; }
.flatpickr-day { color: var(--text); border-radius: var(--r-md); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod-soft, var(--accent-soft)); }
.flatpickr-day.today { border-color: var(--mod, var(--accent)); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--mod-soft, var(--accent-soft)); color: var(--text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus,
.flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.flatpickr-day.inRange { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod-soft, var(--accent-soft)); box-shadow: -5px 0 0 var(--mod-soft, var(--accent-soft)), 5px 0 0 var(--mod-soft, var(--accent-soft)); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--muted); opacity: .5; }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--muted); }
.numInputWrapper:hover { background: var(--mod-soft, var(--accent-soft)); }

/* Export PDF : mise en page de capture (html2canvas via html2pdf) */
.pdf-export .topbar, .pdf-export .jour-toolbar, .pdf-export .no-print, .pdf-export .edt-actions, .pdf-export .edt-side, .pdf-export .edt-head { display: none !important; }
.pdf-export .print-title { display: block !important; font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; }
.pdf-export .jour-cols { display: block !important; }
.pdf-export .jour-col { break-inside: avoid; margin-bottom: 12px; }
.pdf-export .edt-layout { display: block !important; }
/* html2canvas rend mal les box-shadow (halo pâle, surtout sur les créneaux verrouillés) → à plat */
.pdf-export .tt-ev, .pdf-export .tt-ev.locked { box-shadow: none !important; }
/* Titre du PDF de l'EDT : masqué à l'écran, visible seulement dans la capture PDF */
.edt-pdf-title { display: none; }
.pdf-export .edt-pdf-title { display: block; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.pdf-export .edt-cal { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.jour-cols { display: grid; gap: 14px; align-items: start; }
.jour-cols.mode-jour { grid-template-columns: minmax(0, 850px); justify-content: center; }
.jour-cols.mode-2jours { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.jour-cols.mode-semaine { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.jour-col {
    /* La journée n'est plus une surface : un simple conteneur, sur le fond de page. Ce sont
     * les boîtes de séance qui portent la matière, l'en-tête qui coiffe la colonne. */
    min-width: 0; position: relative; overflow: hidden;
    border-radius: var(--r-lg);
}
.jour-col > *:last-child { margin-bottom: 12px; }
/* Bandeau pleine largeur : c'est lui qui coiffe la colonne, donc c'est lui qui porte le
 * filet — la journée elle-même n'a plus ni fond ni bordure. */
.jour-col-head { display: flex; align-items: center; gap: 6px; font-weight: 700; padding: 8px 6px 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 10px; }
/* Accentuation de l'EN-TÊTE de colonne du jour désactivée pour l'instant : le bouton
 * « Aujourd'hui » (au-dessus) reste, lui, en surbrillance — inutile de doubler la couleur ici.
.jour-col-head.is-today { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); } */
.jour-col-day { text-transform: capitalize; }
.jour-custom { color: var(--mod, var(--accent)); font-size: .85rem; }
.jour-head-sp { flex: 1; }
.jour-menu-btn { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-md); cursor: pointer; }
.jour-menu-btn:hover { background: var(--bg); color: var(--mod, var(--accent)); }

/* Boutons d'action par séance (centrés) */
.seance-actions { justify-content: center !important; gap: 8px !important; }
.sbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); cursor: pointer; }
.sbtn:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.sbtn-danger:hover { border-color: #fca5a5; color: var(--danger); background: var(--danger-bg); }
.sbtn-edit { color: var(--ok); }
.sbtn-edit:hover { border-color: var(--ok); color: #15803d; background: var(--ok-bg); }

/* Bilan de journée */
.jour-bilan { margin-top: 8px; }
.jour-bilan .bilan-box { padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-md); }
.jour-bilan .bilan-box .ro-lbl { color: #b45309; }
.bilan-edit { margin-top: 6px; border: 0; background: transparent; color: var(--mod, var(--accent)); font-weight: 600; font-size: .8rem; cursor: pointer; padding: 0; }
.bilan-edit:hover { text-decoration: underline; }
.bilan-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: var(--r-md); padding: 7px 10px; font-weight: 600; font-size: .82rem; cursor: pointer; }
.bilan-add:hover { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.bilan-add svg { flex: none; }

/* Champs de formulaire des modales (nouvelle séance, bilan) */
.ef-input { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: .9rem; background: var(--surface); outline: none; box-sizing: border-box; }
.ef-input:focus { border-color: var(--mod, var(--accent)); }
.ns-times { display: flex; gap: 12px; }
.ns-times .edit-field { flex: 1; }
.bilan-ta { resize: vertical; }
.jour-col-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 16px; }
.seance { margin-bottom: 12px; }
.seance-inti { margin-top: 5px; font-size: 1rem; font-weight: 700; color: var(--text); }
.seance-obj { gap: 5px; margin: 9px 0; }
.obj-chip { padding: 2px 5px 2px 9px; font-size: .76rem; }
.obj-chip > span { max-width: 200px; }
.obj-add { padding: 3px 10px; font-size: .76rem; }
.fiche-field { margin-bottom: 7px; }
.fiche-lbl { display: block; font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
/* Suffixe « (facultatif) » inline dans un libellé : plus petit que le libellé, léger, sans marge ni majuscules. */
.fiche-lbl .hint, .fiche-lbl .hint-inline { display: inline; font-size: .82em; font-weight: 400; text-transform: none; letter-spacing: normal; margin: 0; }
.fiche-section { display: block; font-size: .82rem; font-weight: 800; color: var(--mod, var(--accent)); letter-spacing: 0; margin: 16px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.rt .ck.ck-editor__main > .ck-editor__editable { min-height: 110px; }
.btn-green.btn-sm { padding: 6px 11px; font-size: .8rem; }
.picker-scope { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--n-700); margin-bottom: 8px; cursor: pointer; }
.seance-state { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: .72rem; font-weight: 700; cursor: pointer; flex: none; white-space: nowrap; }
.seance-state svg { width: 12px; height: 12px; opacity: .45; }
.seance-state:hover { border-color: #a7f3d0; }
.seance-state.done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.seance-state.done svg { opacity: 1; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* Modale d'édition de séance */
.edit-box { display: flex; flex-direction: column; max-height: 90vh; max-height: 90dvh; max-width: 770px; width: 100%; }
.edit-inner { display: contents; }
.edit-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.edit-title .etq-swatch { align-self: center; }
.edit-sub { font-size: .85rem; font-weight: 600; color: var(--muted); }
.edit-inti { margin-bottom: 6px; }
.edit-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 4px; }
.edit-field { display: block; margin-bottom: 12px; }
.edit-actions-bar { border-top: 1px solid var(--border); padding-top: 12px; }
.edit-actions-bar .ok { color: #047857; font-weight: 700; font-size: .85rem; }
.edit-hint { font-size: .82rem; color: var(--muted); background: var(--bg); border-radius: var(--r-md); padding: 8px 10px; margin: 0 0 12px; }
.picker-back { z-index: 1200; }

/* ---- Impression (journal + emploi du temps) ---- */
.edt-print { display: none !important; }
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .topbar, .no-print, .jour-toolbar, .seance-actions, .obj-add, .obj-x, .btn-white,
    .edt-actions, .edt-side, .edt-head { display: none !important; }
    body { background: #fff; }
    .wrap, .edt-wrap { max-width: none; padding: 0; }
    .print-title { display: block !important; font-size: 1.2rem; font-weight: 800; margin: 0 0 10px; }
    /* Cahier journal : cartes lecture seule empilées */
    .jour-cols { display: block !important; }
    .jour-col { margin-bottom: 14px; break-inside: avoid; }
    .jour-col-head { text-align: left; background: #eef !important; }
    .seance { box-shadow: none; break-inside: avoid; margin-bottom: 8px; }
    /* Emploi du temps : la grille sur-mesure s'imprime telle quelle (écran = papier), sur UNE A4 */
    .edt-layout { display: block !important; }
    .edt-cal { border: 0 !important; box-shadow: none !important; padding: 0 !important; break-inside: avoid; }
    .tt { border-radius: 0 !important; break-inside: avoid; }
    .tt-ev-resize { display: none !important; }
}
/* Grille EDT imprimable (colonnes fidèles) */
.pg { display: flex; align-items: stretch; }
.pg-axis { position: relative; width: 30px; flex: none; }
.pg-tick { position: absolute; right: 4px; font-size: 8px; color: #666; transform: translateY(-50%); }
.pg-col { flex: 1; border-left: 1px solid #bbb; min-width: 0; }
.pg-col:last-child { border-right: 1px solid #bbb; }
.pg-col.phantom .pg-body { background: #faf6ef; }
.pg-col-head { text-align: center; font-weight: 700; font-size: 10px; padding: 4px 2px; border-bottom: 1px solid #999; background: #eceefb; height: 22px; box-sizing: border-box; }
.pg-body { position: relative; }
.pg-break { position: absolute; left: 0; right: 0; background: #e7eaf3; }
.pg-ev { position: absolute; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 3px; color: #fff; padding: 1px 3px; box-sizing: border-box; font-size: 8px; line-height: 1.12; }
.pg-ev-t { font-weight: 700; font-size: 7px; opacity: .9; }
.pg-ev-m { font-weight: 700; }
.pg-ev-i { font-size: 7.5px; }

/* ---- Écran de connexion ---- */
/* flex-direction: column est indispensable : le corps contient la carte ET les liens
   légaux. En ligne (défaut), les deux enfants se répartissent la largeur et la carte
   se retrouve collée à gauche. */
.auth-body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.auth-card { width: 100%; max-width: 380px; flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 30px 28px; text-align: center; }
.auth-logo { height: 72px; width: auto; margin-bottom: 16px; }
.auth-title { font-size: 1.35rem; margin: 0 0 4px; }
.auth-sub { color: var(--muted); margin: 0 0 20px; font-size: .92rem; }
.auth-error { background: var(--danger-bg); color: var(--danger-strong); border: 1px solid #fca5a5; border-radius: var(--r-md); padding: 9px 12px; font-size: .85rem; margin-bottom: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.auth-field input { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 11px; font-size: .95rem; color: var(--text); outline: none; }
.auth-field input:focus { border-color: var(--mod, var(--accent)); }
.auth-submit { margin-top: 6px; width: 100%; }

/* Nav : bloc utilisateur + déconnexion (poussé à droite) */
.mainnav { flex: 1; }
.nav-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* Pastille d'identité de l'utilisateur connecté : initiale sur fond du thème.
   Plus personnel qu'une icône générique, et ça ancre visuellement la zone de droite. */
.nav-avatar {
    /* Centrage par la grille : avec inline-flex + line-height: 1, les initiales se
       décalent d'un pixel vers le haut selon la police. Valeurs de la maquette. */
    display: grid; place-items: center;
    width: 33px; height: 33px; flex: none; border-radius: 50%;
    background: var(--mod, var(--accent)); color: #fff;
    font-size: .78rem; font-weight: 700; line-height: 1rem; user-select: none;
}
.nav-user { color: var(--text); font-size: .875rem; font-weight: 600; padding: 4px; line-height: 1; white-space: nowrap; }
/* Le badge de rôle prend la dominante de la page (repli sur la couleur de marque). */
.nav-role {
    font-size: .72rem; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px;
    background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent));
    white-space: nowrap;
}
.nav-role.dir { background: var(--warn-bg); color: #c2410c; }
/* Bouton de déconnexion : même traitement que le bouton de repli de la colonne
   de gauche (.sb-toggle) — contour fin au repos, rouge au survol. Sans bordure il
   flottait sans structure, juste à côté de la pastille de rôle qui, elle, est colorée. */
.nav-logout {
    display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; color: var(--muted);
    font-weight: 500; font-size: .875rem;
    padding: 7px 13px; border-radius: var(--r-md);
    border: 1px solid var(--border); background: transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-logout > svg { opacity: .75; transition: opacity .15s ease; }
.nav-logout:hover { color: var(--danger); border-color: #fca5a5; background: var(--danger-bg); }
.nav-logout:hover > svg { opacity: 1; }
.nav-logout:focus-visible { outline: 2px solid var(--mod, var(--accent)); outline-offset: 2px; }
/* Mobile : barre du haut compacte — l'avatar suffit à identifier, on masque nom + rôle (qui débordaient). */
@media (max-width: 640px) { .nav-user, .nav-role { display: none; } }
/* Bandeau « connecté en tant que » (imposture superadmin) — barre fixe en bas, toujours visible. */
.imp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; background: #ff9800; color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 -3px 14px rgba(0, 0, 0, .16); }
.imp-bar b { font-weight: 800; }
.imp-back { border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .14); color: #fff; border-radius: var(--r-md); padding: 6px 14px; font-size: .86rem; font-weight: 700; cursor: pointer; transition: background .12s ease, color .12s ease; }
.imp-back:hover { background: #fff; color: #b45309; }
@media (max-width: 760px) { .nav-right { margin-left: 0; flex-direction: column; align-items: stretch; width: 100%; } .nav-user { padding: 8px 14px; } .nav-logout { padding: 12px 14px; } }

/* ---- Superadmin : table des utilisateurs ---- */
.utable { width: 100%; border-collapse: collapse; }
.utable th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.utable td { padding: 10px; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: middle; }
.utable tr.u-off td { opacity: .55; }
/* Mobile : un tableau marqué .cards-sm devient des cartes empilées (plus de scroll horizontal).
   Chaque <tr> = une carte ; cellule .u-card-title = titre ; autres cellules = « Libellé : valeur »
   via data-label ; .u-empty masque une cellule vide (badge conditionnel absent). Opt-in par table. */
@media (max-width: 640px) {
    .cards-sm, .cards-sm tbody { display: block; width: 100%; }
    .cards-sm thead { display: none; }
    .cards-sm tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 2px 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
    .cards-sm td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .92rem; min-height: 20px; text-align: left; }
    .cards-sm tr td:last-child { border-bottom: none; }
    .cards-sm td::before { content: attr(data-label); flex: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; }
    .cards-sm td:not([data-label])::before { content: none; }
    .cards-sm td.u-empty { display: none; }
    .cards-sm td.u-card-title { order: -1; justify-content: flex-start; padding: 12px 0 9px; font-size: 1rem; font-weight: 700; }
    .cards-sm td.u-card-title::before { content: none; }
    .cards-sm td.u-actions { justify-content: flex-end; gap: 6px; }
    .cards-sm td.u-actions::before { content: none; }
}
.u-me { margin-left: 6px; font-size: .68rem; font-weight: 700; color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); border-radius: 999px; padding: 1px 7px; }
.u-badge { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.u-badge.adm { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.u-badge.usr { background: var(--bg); color: var(--muted); }
.u-badge.dir { background: var(--warn-bg); color: #c2410c; }
.u-badge.on { background: #ecfdf5; color: #047857; }
.u-badge.off { background: var(--danger-bg); color: var(--danger-strong); }
.u-actions { text-align: right; }
.u-empty { text-align: center; color: var(--muted); padding: 22px; }
.u-check { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin-bottom: 12px; cursor: pointer; }
/* Pré-rattachement de classes (création de compte superadmin) */
.u-classpick { border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.u-classpick .u-check { margin-bottom: 0; }

/* Écran de connexion — étape MFA */
.auth-dev { background: #eef9f0; color: #047857; border: 1px dashed #86efac; border-radius: var(--r-md); padding: 8px 12px; font-size: .85rem; margin-bottom: 12px; }
.auth-info { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); border-radius: var(--r-md); padding: 8px 12px; font-size: .85rem; margin-bottom: 12px; }
.auth-check { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--muted); text-align: left; cursor: pointer; }
.auth-links { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.auth-link { background: none; border: 0; color: var(--mod, var(--accent)); font: inherit; cursor: pointer; text-decoration: none; padding: 0; }
.auth-link:hover { text-decoration: underline; }

/* ---- Partage de classe (membres / invitations) ---- */
.invite-zone { margin-top: 18px; }
.invite-zone .hint { margin-top: 10px; }
.invite-box { display: flex; gap: 8px; margin: 12px 0 6px; }
.invite-box .ef-input { flex: 1; font-size: .82rem; }
.pending { margin-top: 16px; }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--muted); padding: 7px 0; border-top: 1px solid var(--border); }

/* ---- Sélecteur de classe (topbar) ---- */
.classe-switch { position: relative; }
.cs-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 6px 12px; font-weight: 700; font-size: .85rem; cursor: pointer; max-width: 250px; line-height: 1.5; min-height: 34px; }
.cs-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-btn svg:first-child { color: var(--mod, var(--accent)); flex: none; }
.cs-btn:hover { border-color: var(--mod, var(--accent)); }
.cs-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 200; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(20, 20, 50, .16); padding: 6px; }
.cs-menu button, .cs-menu a { display: block; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--r-md); padding: 8px 10px; font-size: .88rem; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.cs-menu button:hover, .cs-menu a:hover { background: var(--bg); color: var(--mod, var(--accent)); }
.cs-menu button.on { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.cs-year { opacity: .55; font-weight: 500; font-size: .9em; margin-left: 6px; }
/* Annotation « Partagée par / avec » dans le sélecteur de classe */
.cs-menu { max-width: 340px; }
.cs-menu button.cs-item-shared { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: normal; }
.cs-shared { font-size: .72rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs-btn .cs-cur { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.cs-cur-sub { font-size: .68rem; font-weight: 500; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Écran étroit : la barre du haut ne doit jamais déborder. Le sélecteur de classe est le
 * seul élément élastique → on le rend compressible (min-width:0) et son libellé s'ellipse,
 * au lieu de pousser le bouton de déconnexion hors de l'écran. */
@media (max-width: 640px) {
    .classe-switch { min-width: 0; }
    .cs-btn { max-width: 100%; min-width: 0; }
    .cs-btn .cs-cur { min-width: 0; }
    /* Rendu net : on garde le nom de la classe, on masque le millésime et le sous-titre
     * de partage (secondaires ; visibles sur écran large et dans le menu déroulant). */
    .cs-btn .cs-year, .cs-cur-sub { display: none; }
}

.auth-accent { color: var(--mod, var(--accent)); font-size: 1.05rem; }

.fld select { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; font-size: .95rem; background: var(--surface); color: var(--text); outline: none; }
.fld select:focus { border-color: var(--mod, var(--accent)); }

/* Couleur secondaire (orange) — repères « aujourd'hui » */
/* En-tête de colonne du jour : accentuation désactivée pour l'instant (cf. plus haut).
   Le bouton « Aujourd'hui » .btn-mini.is-on garde, lui, sa surbrillance orange.
.jour-col-head.is-today { background: var(--accent-2-soft); color: var(--accent-2); border-color: var(--accent-2); } */
.btn-mini.is-on { color: var(--accent-2); border-color: var(--accent-2); }

/* ---- Élèves (liste + trombinoscope) ---- */
.el-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Bouton Exporter : toujours tout à droite de la barre (peu importe sa position dans le DOM). */
.el-toolbar .btn-export { order: 10; }
.el-count { color: var(--muted); font-weight: 600; font-size: .9rem; }
/* Corbeille */
.trash-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.trash-type { flex: none; font-size: .72rem; font-weight: 700; color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.trash-label { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.trash-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.trash-soon { color: #c2410c; font-weight: 700; }
.trash-sp { flex: 1; }
/* Calendrier scolaire (réglages) */
.cal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; margin-top: 10px; }
.cal-block-h { font-weight: 700; font-size: .92rem; margin-bottom: 6px; color: var(--text); }
.cal-block { container-type: inline-size; }
.cal-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: .86rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: 0; }
.cal-dates { color: var(--muted); white-space: nowrap; font-size: .8rem; }
/* Libellé + dates sur UNE ligne seulement si la COLONNE est assez large (container query →
   basé sur la largeur réelle de la colonne, pas du viewport : robuste avec/sans sidebar,
   petit écran PC inclus). Sinon empilé. Repli des vieux navigateurs = empilé (sûr). */
@container (min-width: 310px) {
    .cal-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
    .cal-dates { font-size: .82rem; }
}
@media (max-width: 640px) { .cal-cols { grid-template-columns: 1fr; } }
.prog-gen-off { margin-bottom: 12px; }
.prog-gen-off .hint { margin: 6px 2px 0; }
/* Bouton de visibilité (œil) — mis en avant quand l'élément est visible dans la grille */
.vis-toggle { flex: none; }
.vis-toggle.vis-on { border-color: #ea580c; color: #ea580c; background: var(--warn-bg); }
.vis-toggle.vis-on:hover { background: var(--warn-bg); }
@media (max-width: 620px) { .trash-row { flex-wrap: wrap; } .trash-meta { flex-basis: 100%; order: 3; } .trash-label { max-width: 60vw; } }
.el-name { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800; flex: none; }
.avatar-lg { width: 76px; height: 76px; border-radius: var(--r-lg); font-size: 1.5rem; }
.trombi { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 12px; padding: 6px 0; }
.trombi-card { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.trombi-card:hover .avatar-lg { box-shadow: 0 3px 10px rgba(20, 20, 50, .18); }
.trombi-name { text-align: center; font-size: .82rem; line-height: 1.25; color: var(--text); }
.trombi-name b { text-transform: uppercase; font-size: .78rem; }
@media print {
    .el-toolbar { display: none !important; }
    .trombi { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .trombi-card { cursor: default; break-inside: avoid; }
}

/* Élèves — photo & consultation */
.avatar-md { width: 44px; height: 44px; border-radius: var(--r-md); font-size: 1rem; }
.fiche-photo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fiche-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-white.btn-sm, .btn-ghost.btn-sm { padding: 6px 11px; font-size: .8rem; }

/* ---- Groupes d'élèves ---- */
.grp-filter { width: auto; min-width: 150px; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.grp-chips.center { justify-content: center; margin-top: 2px; }
.grp-chip { display: inline-block; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.grp-chip.sm { padding: 1px 7px; font-size: .68rem; }
.grp-chip.pick { cursor: pointer; transition: filter .12s; }
.grp-chip.pick:hover { filter: brightness(.97); }
.grp-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.grp-add { display: flex; gap: 8px; margin-top: 8px; }
.grp-add .ef-input { flex: 1; }
/* Variante riche (compétence personnalisée du picker) : éditeur pleine largeur + bouton dessous */
.grp-add-rich { flex-direction: column; align-items: stretch; }
.grp-add-rich .prog-rt-host { width: 100%; }
.grp-add-rich > .btn-sm { align-self: flex-end; }
.row-hidden { opacity: .5; }
.grp-manage-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.grp-manage-row .ef-input { flex: 1; min-width: 0; }
.grp-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.grp-swatches { display: flex; gap: 3px; flex: none; }
.grp-sw { width: 18px; height: 18px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; padding: 0; }
.grp-sw.on { border-color: var(--text); box-shadow: 0 0 0 1px #fff inset; }
.grp-count { font-size: .74rem; color: var(--muted); white-space: nowrap; flex: none; }
@media print {
    .grp-chip { border-color: #ccc !important; }
}

/* ---- Registre d'appel ---- */
.reg-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.reg-nav { display: inline-flex; align-items: center; gap: 6px; }
.reg-date { font-size: 1rem; font-weight: 600; color: var(--muted); margin: -2px 0 12px; text-transform: capitalize; }
.pres-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.pc { padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid var(--border); }
.pc b { font-weight: 800; margin-right: 3px; }
.pc-present { color: var(--ok); background: var(--ok)12; border-color: var(--ok)40; }
.pc-retard  { color: var(--warn); background: var(--warn)12; border-color: var(--warn)40; }
.pc-absent  { color: var(--danger); background: var(--danger)12; border-color: var(--danger)40; }
.pc-non     { color: var(--n-500); background: var(--n-500)12; border-color: var(--n-500)40; }
.pc-cantine { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); border-color: #02185640; }

/* ---- Statistiques d'assiduité ---- */
.stats-toolbar { flex-wrap: wrap; gap: 8px; align-items: center; }
.stats-range { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.stats-range .ef-input { width: 132px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.stat-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 13px 16px; box-shadow: var(--shadow); }
.stat-val { font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.stat-card.sc-red .stat-val { color: var(--danger); }
.stat-card.sc-green .stat-val { color: var(--ok); }
.stat-card.sc-orange .stat-val { color: var(--warn); }
.stat-card.sc-accent .stat-val { color: var(--mod, var(--accent)); }
.stats-h2 { font-size: 1.05rem; font-weight: 800; margin: 22px 0 10px; }

/* ===== Statistiques d'absence (directeur) : signalements légaux ===== */
.abs-etab { font-size: .85rem; font-weight: 600; color: var(--muted); }
.abs-legal { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid #fde3c4; background: #fff8ef; border-radius: var(--r-lg); font-size: .86rem; line-height: 1.5; color: #7c4a12; }
.abs-legal svg { flex: none; color: var(--warn); margin-top: 1px; }
.abs-tabs, .ef-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.abs-tabs button, .ef-tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 15px; font-size: .86rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.abs-tabs button:hover, .ef-tabs button:hover:not(:disabled) { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.abs-tabs button.on, .ef-tabs button.on { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.abs-tab-n { background: var(--danger); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; }
.abs-tabs button.on .abs-tab-n, .ef-tabs button.on .abs-tab-n { background: #fff; color: var(--mod, var(--accent)); }
.abs-tab-n-mut { background: var(--n-400); }
.abs-empty { color: var(--muted); padding: 20px 4px; text-align: center; }
.abs-list { display: flex; flex-direction: column; gap: 12px; }
.abs-card { border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: var(--r-lg); background: var(--surface); padding: 14px 16px; box-shadow: var(--shadow); }
.abs-card.st-traite { border-left-color: var(--ok); opacity: .9; }
.abs-card.st-ignore { border-left-color: var(--n-400); opacity: .75; }
.abs-card-main { display: flex; align-items: center; gap: 14px; }
.abs-avatar { width: 46px; height: 46px; border-radius: var(--r-lg); font-size: 1rem; flex: none; }
.abs-card-id { flex: 1; min-width: 0; }
.abs-card-name { font-weight: 800; font-size: 1.02rem; }
.abs-card-sub { font-size: .84rem; color: var(--muted); margin-top: 1px; }
.abs-card-mois { text-transform: capitalize; }
.abs-card-demi { flex: none; text-align: center; padding: 4px 12px; background: var(--danger-bg); border-radius: var(--r-md); }
.abs-card.st-traite .abs-card-demi, .abs-card.st-ignore .abs-card-demi { background: var(--bg); }
.abs-demi-val { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--danger); font-variant-numeric: tabular-nums; }
.abs-card.st-traite .abs-demi-val { color: var(--ok); }
.abs-card.st-ignore .abs-demi-val { color: var(--n-500); }
.abs-demi-lbl { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; color: var(--muted); margin-top: 3px; line-height: 1.15; }
.abs-card-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.abs-date { font-size: .78rem; font-weight: 600; background: var(--danger-bg); color: var(--danger-strong); border-radius: var(--r-sm); padding: 3px 9px; }
.abs-date.abs-date-just { background: #f0f4f8; color: var(--n-500); }
.abs-card-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: .85rem; color: var(--n-600); background: var(--bg); border-radius: var(--r-md); padding: 7px 10px; }
.abs-card-note svg { flex: none; color: var(--muted); }
.abs-card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.abs-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.abs-chip { font-size: .74rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.abs-chip.chip-nouveau { background: var(--danger-bg); color: var(--danger); }
.abs-chip.chip-traite { background: #eaf6ea; color: var(--ok); }
.abs-chip.chip-ignore { background: #eef1f5; color: var(--n-500); }
.abs-overview { overflow-x: auto; }
.abs-ov-sig { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--bg); color: var(--muted); font-weight: 800; font-size: .82rem; }
.abs-ov-sig.on { background: var(--danger-bg); color: var(--danger); }
.abs-ov-ens { display: block; font-size: .76rem; color: var(--muted); font-weight: 500; margin-top: 1px; }

/* ===== Listes à cocher (grille élèves × colonnes cochables, imprimable) ===== */
.chk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.chk-title { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; font-weight: 800; }
.chk-tip { font-size: .85rem; color: var(--muted); margin: 2px 0 12px; line-height: 1.45; }
.chk-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
/* Dans une card (ex. /responsabilites), la card fournit déjà le cadre : pas de double bordure. */
.card-blk .chk-wrap { border: 0; border-radius: 0; background: transparent; }
.chk-print { padding: 4px; }
.chk-grid { border-collapse: collapse; }
/* Bordures nettes (indépendantes du thème) : le gris clair --border s'efface sur certains écrans peu contrastés */
.chk-grid th, .chk-grid td { border: 1px solid var(--n-300); }
.chk-corner { text-align: left; vertical-align: bottom; padding: 8px 12px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); background: var(--n-50); white-space: nowrap; }
.chk-name { padding: 7px 12px; font-size: .9rem; font-weight: 600; white-space: nowrap; background: var(--surface); }
/* Zebra franc (lignes clairement distinctes même sur écran peu contrasté) */
.chk-grid tbody tr:nth-child(even) .chk-name { background: var(--n-50); }
/* En-têtes de colonnes : texte vertical (lecture bas → haut) pour caser un maximum de colonnes */
.chk-colhead { position: relative; width: 34px; min-width: 34px; min-height: 120px; vertical-align: bottom; background: var(--n-50); padding: 0; }
/* Dès qu'une colonne est vide (à écrire à la main) : en-tête plus haute pour laisser la place d'écrire.
   NB : sur une cellule de tableau, `height` agit comme hauteur minimale (`min-height` est ignoré). */
.chk-grid.chk-has-empty .chk-colhead { height: 150px; }
.chk-colhead-txt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; cursor: pointer; font-weight: 700; font-size: .82rem; line-height: 34px; padding: 10px 0; margin: 0 auto; }
.chk-col-ph { color: var(--n-400); font-weight: 500; font-size: .74rem; font-style: italic; }
.chk-col-del { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--n-300); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0; z-index: 2; }
.chk-colhead:hover .chk-col-del { color: var(--n-400); }
.chk-col-del:hover { background: var(--danger-bd); color: var(--danger); }
/* Cases cochables */
.chk-cell { width: 34px; min-width: 34px; height: 34px; cursor: pointer; background: var(--surface); position: relative; }
.chk-grid tbody tr:nth-child(even) .chk-cell { background: var(--n-50); }
.chk-cell:hover { background: var(--n-200); }
.chk-cell.on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 16px; border: solid var(--ok); border-width: 0 3px 3px 0; transform: translate(-50%, -62%) rotate(45deg); }
/* Impression : cadre plein noir léger pour des cases nettes sur papier */
.pt-sheet .chk-grid th, .pt-sheet .chk-grid td { border-color: var(--n-400); }
.pt-sheet .chk-corner, .pt-sheet .chk-colhead, .pt-sheet .chk-name { background: #fff; }
/* Impression : la grille COUVRE toute la largeur de la feuille, sans jamais la dépasser.
   Colonne des noms = largeur du contenu ; colonnes de cases = se partagent le reste à égalité.
   Compact (hauteur réduite) pour tenir sur une page A4 portrait. */
.pt-sheet .chk-print { padding: 0; }
.pt-sheet .chk-grid { width: 100%; table-layout: auto; }
.pt-sheet .chk-name, .pt-sheet .chk-corner { width: 1%; white-space: nowrap; }
/* Colonnes de cases : rétrécissables (min-width:0) pour que la grille tienne TOUJOURS dans la
   largeur de la feuille, quel que soit le nombre de colonnes ; bande de texte verticale fine
   (line-height normal, non forcé à 34px) → l'en-tête n'impose plus 34px de large par colonne. */
.pt-sheet .chk-cell, .pt-sheet .chk-colhead { width: auto; min-width: 0; }
.pt-sheet .chk-colhead-txt { line-height: 1.15; }
.pt-sheet .chk-name { padding: 2px 8px; font-size: .82rem; }
.pt-sheet .chk-corner { padding: 3px 8px; font-size: .72rem; }
.pt-sheet .chk-colhead { min-height: 84px; }
.pt-sheet .chk-grid.chk-has-empty .chk-colhead { height: 165px; }   /* place pour écrire à la main les colonnes vides */

/* ===== Assistant IA ===== */
.asst-beta { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-size: .64rem; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }
.asst-rgpd { font-size: .82rem; color: #7c4a12; background: #fff8ef; border: 1px solid #fde3c4; border-radius: var(--r-md); padding: 8px 12px; margin: 6px 0 14px; line-height: 1.45; }
.asst-recipes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.asst-recipe { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 9px 14px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.asst-recipe:hover { border-color: var(--mod, var(--accent)); }
.asst-recipe.on { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.asst-recipe-ic { display: inline-flex; }
.asst-form { max-width: 720px; }
.asst-form .fld { margin-bottom: 12px; }
.asst-actions { margin-top: 4px; }
.asst-error { max-width: 720px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger-strong); font-size: .88rem; }
.asst-result { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.asst-result-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); font-weight: 700; font-size: .9rem; }
.asst-md { padding: 16px 20px; line-height: 1.55; color: var(--text); }
.asst-md h2 { font-size: 1.15rem; font-weight: 800; margin: 16px 0 6px; }
.asst-md h3 { font-size: 1rem; font-weight: 800; margin: 14px 0 5px; }
.asst-md h4 { font-size: .92rem; font-weight: 800; margin: 12px 0 4px; color: var(--muted); }
.asst-md p { margin: 0 0 9px; }
.asst-md ul, .asst-md ol { margin: 4px 0 10px; padding-left: 22px; }
.asst-md li { margin: 2px 0; }
.asst-md strong { font-weight: 800; }
.asst-md code { background: var(--bg); padding: 1px 5px; border-radius: var(--r-sm); font-size: .9em; }
.asst-md a { color: var(--mod, var(--accent)); text-decoration: underline; word-break: break-word; }
.asst-md > :first-child { margin-top: 0; }
/* Tableaux Markdown */
.asst-tbl-wrap { overflow-x: auto; margin: 6px 0 12px; }
.asst-tbl { border-collapse: collapse; width: 100%; font-size: .88rem; }
.asst-tbl th, .asst-tbl td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.asst-tbl th { background: var(--bg); font-weight: 800; }
.asst-tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 55%, transparent); }
/* Historique des conversations (localStorage) */
.asst-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-white.on { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.asst-hist-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-size: .7rem; font-weight: 800; margin-left: 2px; }
.modal-box--hist { max-width: 560px; }
/* overflow-x: clip → le scroll vertical ne promeut PAS overflow-x en `auto` (règle CSS), donc pas de
   scrollbar horizontale « fantôme ». La corbeille utilise un title natif (surcouche navigateur, hors
   flux) plutôt qu'une info-bulle ::after positionnée qui, dans ce conteneur scrollable, ajouterait
   du débordement (h. ET v.) et ferait clignoter une scrollbar au survol. */
.asst-hist { max-height: 62vh; max-height: 62dvh; overflow-y: auto; overflow-x: clip; margin: 0 -6px; }
.asst-hist-empty { text-align: center; color: var(--muted); font-size: .9rem; padding: 22px 8px; margin: 0; }
.asst-hist-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--border); border-radius: var(--r-md); transition: background .12s ease; }
.asst-hist-item:last-child { border-bottom: none; }
.asst-hist-item:hover { background: var(--bg); }
.asst-hist-item.on { background: var(--mod-soft, var(--accent-soft)); }
.asst-hist-main { flex: 1; min-width: 0; cursor: pointer; }
.asst-hist-title { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-hist-meta { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.asst-hist-del { flex: none; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 5px; border-radius: var(--r-md); display: inline-flex; }
.asst-hist-del:hover { color: var(--danger-strong); background: var(--danger-bg); }
.asst-hist-ren { flex: none; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 5px; border-radius: var(--r-md); display: inline-flex; }
.asst-hist-ren:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.asst-rename-input { width: 100%; box-sizing: border-box; font-weight: 700; font-size: .9rem; padding: 3px 7px; color: #1f2430; border: 1px solid var(--mod, var(--accent)); border-radius: var(--r-sm); outline: none; }
/* Barre « Nouveau dossier » + saisie inline */
.asst-hist-toolbar { display: flex; justify-content: flex-end; margin: 2px 0 6px; }
.asst-newfolder-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: var(--r-md); padding: 6px 11px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.asst-newfolder-btn:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.asst-newfolder { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; }
.asst-newfolder input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; font-size: .9rem; background: var(--surface); color: var(--text); outline: none; }
.asst-newfolder input:focus { border-color: var(--mod, var(--accent)); }
.asst-newfolder-ok { flex: none; padding: 8px 14px; }
.asst-newfolder-x { flex: none; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-md); width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer; }
.asst-newfolder-x:hover { color: var(--text); }
/* Sections par dossier */
.asst-folder + .asst-folder { margin-top: 4px; }
.asst-folder-head { display: flex; align-items: center; gap: 7px; padding: 8px 8px; border-radius: var(--r-md); cursor: pointer; user-select: none; }
.asst-folder-head:hover { background: var(--bg); }
.asst-folder-head--none { cursor: default; margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 12px; }
.asst-folder-head--none:hover { background: transparent; }
.asst-folder-chev { flex: none; color: var(--muted); transition: transform .15s ease; }
.asst-folder-chev.open { transform: rotate(90deg); }
.asst-folder-ic { flex: none; color: var(--mod, var(--accent)); }
.asst-folder-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-folder-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-size: .7rem; font-weight: 800; }
.asst-folder-sp { flex: 1; }
.asst-folder-del { flex: none; border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--r-sm); display: inline-flex; }
.asst-folder-del:hover { color: var(--danger-strong); background: var(--danger-bg); }
.asst-folder-body { padding-left: 16px; }
.asst-folder-empty { font-size: .8rem; color: var(--muted); padding: 6px 10px; margin: 0; }
/* Sélecteur de déplacement par conversation */
.asst-move { flex: none; max-width: 130px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 5px 7px; font-size: .78rem; color: var(--muted); background: var(--surface); cursor: pointer; outline: none; }
.asst-move:hover, .asst-move:focus { border-color: var(--mod, var(--accent)); color: var(--text); }
/* Fil de discussion */
.asst-thread { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 4px; }
.asst-msg-role { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin-bottom: 4px; }
.asst-msg.asst-user .asst-usertext { background: var(--mod-soft, var(--accent-soft)); color: var(--text); border-radius: var(--r-lg); padding: 10px 14px; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; }
.asst-msg.asst-assistant .asst-md { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.asst-msg-tools { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.asst-tool { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 5px 8px; cursor: pointer; color: var(--muted); }
.asst-tool:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.asst-tool--label { gap: 5px; padding: 5px 10px; }
.asst-tool--label span { font-size: .78rem; font-weight: 700; }
.asst-tool:disabled { opacity: .5; cursor: default; }
.asst-tool:disabled:hover { border-color: var(--border); color: var(--muted); }
.asst-typing { display: inline-flex; gap: 5px; padding: 8px 4px; }
.asst-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: asstBlink 1.2s infinite; }
.asst-typing span:nth-child(2) { animation-delay: .2s; }
.asst-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes asstBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Zone de réponse (collée en bas) */
.asst-reply { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; padding: 10px 0 4px; background: linear-gradient(to top, var(--bg) 72%, rgba(0,0,0,0)); }
.asst-reply textarea { flex: 1; resize: vertical; min-height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 14px; font-size: .95rem; line-height: 1.45; background: var(--surface); color: var(--text); outline: none; box-sizing: border-box; }
.asst-reply textarea:focus { border-color: var(--mod, var(--accent)); }
.asst-send { flex: none; width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.pt-sheet .chk-colhead-txt { font-size: .78rem; padding: 6px 0; }
/* Grandes classes : pagination propre (lignes jamais coupées ; en-tête répétée à l'impression papier). */
.pt-sheet .chk-grid thead { display: table-header-group; }
.pt-sheet .chk-grid tbody tr { break-inside: avoid; }
/* Options d'export (classes posées sur .pt-sheet via xoClass) */
.pt-sheet.chk-x-notitle .print-title { display: none !important; }
.pt-sheet.chk-x-name-sm .chk-name { font-size: .72rem; padding: 1px 8px; }
.pt-sheet.chk-x-name-xs .chk-name { font-size: .62rem; padding: 0 7px; }
.stats-abs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stats-abs-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) auto 2fr; gap: 8px 14px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); break-inside: avoid; }
.stats-abs-who { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.stats-abs-count { display: flex; gap: 6px; flex-wrap: wrap; }
.stats-abs-dates { display: flex; flex-wrap: wrap; gap: 5px; }
.stats-abs-date { font-size: .74rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px; white-space: nowrap; color: var(--muted); }
.stats-note { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
.stats-daterange { text-transform: none; }
@media (max-width: 720px) { .stats-abs-row { grid-template-columns: 1fr; gap: 6px; } }
.pres-list { display: flex; flex-direction: column; }
.pres-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 4px 9px 8px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.pres-row.st-absent { border-left-color: var(--danger); }
.pres-row.st-retard { border-left-color: var(--warn); }
.pres-row.st-non_compte { border-left-color: var(--n-400); }
.pres-who { flex: 1; min-width: 180px; }
.pres-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pres-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pres-seg button { border: none; background: #fff; padding: 6px 11px; font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; border-right: 1px solid var(--border); }
.pres-seg button:last-child { border-right: none; }
.pres-seg button:hover { background: var(--mod-soft, var(--accent-soft)); }
.ps-present.on { background: var(--ok); color: #fff; }
.ps-retard.on  { background: var(--warn); color: #fff; }
.ps-absent.on  { background: var(--danger); color: #fff; }
.ps-non.on     { background: var(--n-500); color: #fff; }
.pres-icbtn { width: 34px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pres-icbtn:hover { background: var(--mod-soft, var(--accent-soft)); }
.pres-icbtn.on { background: var(--mod, var(--accent)); color: #fff; border-color: var(--mod, var(--accent)); }
.pres-icbtn2.on { background: var(--accent-2); border-color: var(--accent-2); }
/* Ligne motif/commentaire : compacte (proportionnée aux boutons) et détachée de l'élève suivant. */
.pres-extra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 0 9px 46px; }
.pres-extra .ef-input, .pres-extra select { flex: 0 1 240px; max-width: 240px; height: auto; padding: 5px 9px; font-size: .82rem; }
/* L'avertissement occupe sa propre ligne : sans cela il devient une troisième
   colonne du flex et écrase le motif et le commentaire. */
.pres-extra .field-warn { flex-basis: 100%; margin: 0; font-size: .72rem; line-height: 1.35; }
.pres-print { display: none; }
/* ---- Registre : demi-journées (matin / après-midi) — disposition en tableau aligné ---- */
.pres-head-row, .pres-row {
    display: grid;
    /* Dernière colonne FIXE (icônes cantine/commentaire = 2×34 + 8 de gap) : indispensable pour que
       la colonne « nom » (souple) fasse la même largeur en en-tête et en ligne → « Matin » / « Après-midi »
       tombent exactement au-dessus de leurs boutons. */
    /* minmax(0,1fr) sur le nom (et non minmax(160px,…)) : sinon, si le conteneur est un peu juste,
       la piste « nom » refuse de descendre sous 160px et POUSSE la dernière colonne (icônes) hors
       du cadre de quelques pixels. Avec 0, le nom se comprime et tout rentre pile. */
    grid-template-columns: minmax(0, 1fr) 224px 224px 74px;
    align-items: center;
    column-gap: 10px; row-gap: 4px;
}
/* Alignement en-tête ↔ lignes : les deux sont des grilles INDÉPENDANTES ; pour que leur colonne
   souple (« nom ») fasse la même largeur, l'en-tête doit avoir EXACTEMENT le même modèle de boîte
   que les lignes — même bord gauche (3px) et même padding gauche/droit (8/4). */
.pres-head-row { padding: 0 4px 0 8px; border-left: 3px solid transparent; }
/* Deux colonnes VISUELLES : bandes teintées continues matin + après-midi (le gap blanc du milieu
   marque nettement la séparation entre les deux demi-journées). */
.pres-col-h { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
    background: rgba(2, 29, 86, .045); border-radius: var(--r-md) 9px 0 0; padding: 7px 0 8px; }
.pres-who { min-width: 0; }
.pres-mcol { min-width: 0; align-self: stretch; display: flex; align-items: center; background: rgba(2, 29, 86, .045); padding: 0 6px; }
.pres-row { min-height: 46px; padding-top: 0; padding-bottom: 0; }
/* Arrondi bas de la bande sur le dernier élève. */
.pres-list .pres-row:last-child .pres-mcol { border-radius: 0 0 9px 9px; }
.pres-seg-lbl { display: none; }
.pres-seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.pres-seg button { padding: 6px 3px; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-side { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.pres-extra, .pres-print { grid-column: 1 / -1; }
.pres-counts { flex-direction: column; align-items: flex-start; }
.pres-counts-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-moment { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); min-width: 82px; }
/* Tablette / mobile : on empile (nom + icônes en tête, puis chaque demi-journée avec son libellé). */
@media (max-width: 860px) {
    .pres-head-row { display: none; }
    .pres-row { grid-template-columns: 1fr auto; }
    .pres-who { grid-column: 1; }
    .pres-side { grid-column: 2; grid-row: 1; }
    .pres-mcol { grid-column: 1 / -1; }
    .pres-seg-lbl { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 3px; }
    .pres-seg { max-width: 440px; }
}
@media print {
    .pres-head-row { display: none; }
    .pres-row { border-left-color: transparent; padding: 5px 4px; display: block; }
    .pres-extra { display: none; }
    .pres-print { display: block; font-size: .85rem; color: #333; }
    .pres-print-st, .pres-print-half b { font-weight: 700; }
    .pres-print-half { margin-right: 12px; }
}

/* ---- Sous-menus de navigation ---- */
.nav-group { position: relative; }
/* Badge de notification (signalements d'absence directeur) */
.nav-parent { position: relative; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-md); background: var(--danger); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; flex: none; }
.nav-parent > .nav-badge { position: absolute; top: 50%; right: 42px; transform: translateY(-50%); box-shadow: 0 0 0 2px var(--surface); }
/* Sidebar réduite (icône seule, hors survol) : le chevron est masqué → badge collé au coin de l'icône. */
body.sb-collapsed .sidebar:not(.sb-expanded) .nav-parent > .nav-badge { top: 4px; right: 6px; transform: none; }
.nav-sub-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 760px) {
    .nav-group { width: 100%; }
    .nav-parent { width: 100%; justify-content: space-between; padding: 12px 14px; }
    .nav-sub { position: static; box-shadow: none; border: 0; padding: 2px 0 2px 14px; margin: 0; min-width: 0; }
    .nav-sub a { padding: 10px 14px; }
}
/* Lien-bouton discret (ex : « Gérer » les groupes dans la fiche) */
.lnk-btn { background: transparent; border: 0; color: var(--mod, var(--accent)); font-weight: 700; font-size: .78rem; cursor: pointer; padding: 0; }
.lnk-btn:hover { text-decoration: underline; }

/* Convention : le bouton « Imprimer » est toujours le plus à droite de sa barre d'outils */
.tb-print { order: 100; margin-left: auto; }

/* ---- Programmations (grille Domaines × Périodes) ---- */
.dd-menu button.on { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.prog-titlebar { display: flex; align-items: center; min-width: 0; }
.prog-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.prog-title svg { opacity: .45; flex: none; }
.prog-title:hover svg { opacity: 1; color: var(--mod, var(--accent)); }
.prog-title-input { font-size: 1.02rem; font-weight: 700; max-width: 420px; }
.prog-grid-wrap { overflow-x: auto; }
/* Barre de nav « 1 période » (mobile) — base masquée ; la vue mobile complète est définie
   plus bas (après les règles tablette ≤820px) pour gagner par ordre source à ≤640px. */
.prog-mobper { display: none; }
.prog-grid { border-collapse: collapse; width: 100%; min-width: 720px; }
.prog-grid th, .prog-grid td { border: 1px solid var(--border); vertical-align: top; }
.prog-grid thead th { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); padding: 8px 10px; text-align: left; font-size: .85rem; }
.prog-corner { width: 160px; min-width: 160px; }
.prog-per-nom { font-weight: 800; }
.prog-per-dates { font-weight: 500; font-size: .74rem; color: var(--muted); }
.prog-dom { background: var(--bg); font-weight: 700; font-size: .88rem; padding: 8px 10px; text-align: left; min-width: 150px; max-width: 190px; }
.prog-cell { padding: 5px; min-width: 190px; }
.pe { display: flex; align-items: flex-start; gap: 6px; padding: 3px 4px; border-radius: var(--r-sm); }
.pe:hover { background: var(--mod-soft, var(--accent-soft)); }
.pe-status { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cbd2e0; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; color: #fff; padding: 0; margin-top: 1px; }
.pe-status svg { opacity: 0; }
.st-wip .pe-status { border-color: var(--warn); background: var(--warn); }
.st-done .pe-status { border-color: var(--ok); background: var(--ok); }
.st-done .pe-status svg { opacity: 1; }
.pe-text { flex: 1; font-size: .84rem; line-height: 1.3; outline: none; min-width: 0; word-break: break-word; }
/* Contenu riche (CKEditor) rendu dans la case : compact, pas de marges de <p> ni de listes larges */
.pe-text > *:first-child { margin-top: 0; }
.pe-text > *:last-child { margin-bottom: 0; }
.pe-text p { margin: 0 0 .2em; }
.pe-text ul, .pe-text ol { margin: .15em 0 .15em; padding-left: 1.15em; }
.pe-text li { margin: 0; }
.pe-empty { color: var(--muted); font-style: italic; }
.pe-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 2px; opacity: 0; flex: none; }
.pe:hover .pe-x { opacity: 1; }
.prog-add { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--muted); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px; border-radius: var(--r-sm); margin-top: 2px; }
.prog-add:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.prog-move { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.prog-move .sbtn { width: 22px; height: 15px; font-size: .55rem; padding: 0; line-height: 1; }
.prog-per-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.prog-per-name { max-width: 150px; }
@media print {
    .prog-add, .pe-x { display: none !important; }
    .pe:hover { background: transparent; }
}

/* ---- Programmations : listing en cartes ---- */
.prog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.prog-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; transition: box-shadow .12s, border-color .12s; }
.prog-card:hover { box-shadow: 0 4px 16px rgba(20, 20, 50, .1); border-color: #cdd4e6; }
.prog-card-body { padding: 14px 16px 12px; cursor: pointer; flex: 1; }
.prog-card-title { font-weight: 700; font-size: 1rem; color: var(--mod, var(--accent)); margin-bottom: 6px; }
.prog-card-title .ef-input { font-weight: 700; }
.prog-card-meta { font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.prog-prog { display: flex; align-items: center; gap: 8px; }
.prog-prog-bar { flex: 1; height: 7px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.prog-prog-fill { height: 100%; background: var(--ok); border-radius: 999px; }
.prog-prog-lbl { font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.prog-card-actions { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border); }
/* Partage volontaire d'une programmation : badge Privée/Partagée + bouton partage actif */
.prog-badge { display: inline-block; vertical-align: middle; font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 8px; white-space: nowrap; }
.prog-badge--private { background: var(--bg); color: var(--muted); }
.prog-badge--shared { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.sbtn.sbtn-on { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }

/* ============================ SIDEBAR VERTICALE + BARRE DU HAUT ============================
 * Piste « Languettes » : chaque module porte sa teinte d'intercalaire au ras du bord gauche ;
 * l'onglet actif s'ouvre sur le contenu. Fond « Lin », démarcation par l'ombre portée.
 * Toutes les valeurs viennent des tokens de :root — aucune couleur en dur ici.
 * ========================================================================================== */
:root { --sbw: 236px; --sbw-min: 68px; }
body.has-sidebar { padding-left: var(--sbw); }
body.has-sidebar.sb-collapsed { padding-left: var(--sbw-min); }

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sbw); z-index: 40;
    /* Fond sidebar : dégradé tokenisé (--sb-bg-grad) → clair en light, sombre en dark. */
    background: var(--sb-bg-grad); color: var(--sb-fg);
    box-shadow: var(--sb-shadow);
    display: flex; flex-direction: column; padding: 5px 0; overflow-y: auto; overflow-x: hidden;
    line-height: 1.5;
    transition: width .16s ease;
}

/* ---- Menu réduit (icônes seules) + déploiement au survol (overlay) — bureau (≥1025px) ---- */
@media (min-width: 1025px) {
    body.sb-collapsed .sidebar { width: var(--sbw-min); }
    /* :not(.np-left) — sans quoi les entrées à sous-menu (Élèves, Livrets) perdent
     * aussi leur icône, .np-left étant un span enfant direct de .sn-item. */
    body.sb-collapsed .sidebar:not(.sb-expanded) .sn-item > span:not(.np-left),
    body.sb-collapsed .sidebar:not(.sb-expanded) .np-left span,
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-caret,
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-sub,
    body.sb-collapsed .sidebar:not(.sb-expanded) .sidenav-sep,
    body.sb-collapsed .sidebar:not(.sb-expanded) .brand,
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-prefs { display: none; }
    /* la languette de teinte survit au repli : on continue de se repérer sans libellé */
    body.sb-collapsed .sidebar:not(.sb-expanded) .sn-item,
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-parent { justify-content: center; padding-left: 7px; padding-right: 0; gap: 0; }
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-head { justify-content: center; padding: 4px 0 12px; }
    /* 68 px : le repère se réduit à « P1 / s.3 », les indicateurs à texte disparaissent */
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-ctx { margin: 2px 9px 12px; padding: 7px 4px; text-align: center; }
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-ctx b,
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-ctx span,
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-chip,
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-gauge { display: none; }
    body.sb-collapsed .sidebar:not(.sb-expanded) .sb-ctx-court { display: block; }
    body.sb-collapsed .sidebar:not(.sb-expanded) .nav-dot { position: absolute; top: 7px; right: 13px; }
    body.sb-collapsed .sidebar.sb-expanded { width: var(--sbw); box-shadow: 6px 0 30px rgba(15, 18, 40, .16); z-index: 60; }
}
@media (max-width: 1024px) {
    body.has-sidebar.sb-collapsed { padding-left: 0; }
    .sb-toggle { display: none; }
}
.sb-head { display: flex; align-items: center; gap: 4px; padding: 4px 14px 4px; }
.sidebar .brand { padding: 0 0 0 8px; display: flex; justify-content: flex-start; align-items: center; flex: 1; min-width: 0; overflow: hidden; position: relative; top: -3.5px; }
.sidebar .brand-logo { height: 40px; width: auto; display: block; }
@media (min-width: 1025px) {
    body:not(.sb-collapsed) .sidebar .brand { padding: 0 0 0 8px; position: relative; }
}
.sb-toggle { flex: none; background: var(--sb-btn-bg); border: 1px solid var(--sb-line); color: var(--sb-fg); cursor: pointer; padding: 6px; border-radius: var(--r-md); line-height: 0; }
.sb-toggle:hover { background: var(--sb-hover); color: var(--sb-strong); border-color: var(--sb-rail); }

.sidenav { display: flex; flex-direction: column; gap: 1px; }

/* ---- Entrée de menu = un onglet d'intercalaire ---- */
.sn-item {
    position: relative;
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 10px 14px 10px 19px; border-radius: 0; text-decoration: none;
    color: var(--sb-fg); font-weight: 500; font-size: 0.9375rem;
    /* les items sont des <a> ici, des <button> dans la maquette : sans ça ils héritent
     * du line-height du panneau et gagnent 2 px de hauteur chacun. */
    line-height: normal;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    /* l'onglet « ressort » au survol : ancré sur la languette (gauche), il glisse et grossit un chouïa */
    transform-origin: left center;
    transition: transform .16s cubic-bezier(.34, 1.1, .64, 1), box-shadow .16s ease, background .12s ease, color .12s ease;
}
/* la languette : bout adouci au repos… */
.sn-item::before {
    content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 7px;
    border-radius: 0 3px 3px 0; background: var(--tab, var(--sb-rail));
}
.sn-item > svg, .np-left svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.sn-item:hover { background: var(--sb-active-bg); color: var(--sb-active-fg, var(--sb-strong)); transform: translateX(4px) scale(1.025); box-shadow: 0 6px 16px -5px rgba(20, 18, 12, .28); z-index: 2; }
/* item déroulable DÉPLIÉ : on retire le « ressort » (il jure avec l'accordéon ouvert), on garde le surlignage */
.sn-item.nav-parent[aria-expanded="true"]:hover { transform: none; box-shadow: none; z-index: auto; }
.sn-item:hover::before { top: 0; bottom: 0; border-radius: 0; }
.sn-item:hover > svg, .sn-item:hover .np-left svg { opacity: 1; color: var(--tab, var(--sb-rail)); }
/* accessibilité : pas de mouvement si l'utilisateur le refuse */
@media (prefers-reduced-motion: reduce) {
    .sn-item { transition: background .12s ease, color .12s ease; }
    .sn-item:hover { transform: none; box-shadow: none; }
}
.sn-item.active { background: var(--sb-active-bg); color: var(--sb-active-fg, var(--sb-strong)); font-family: var(--font-title); font-weight: 800; box-shadow: 0 -1px 0 var(--sb-line), 0 1px 0 var(--sb-line); }
/* …et pleine hauteur, à bord franc, quand le module est ouvert */
.sn-item.active::before { top: 0; bottom: 0; border-radius: 0; }
.sn-item.active > svg, .sn-item.active .np-left svg { opacity: 1; color: var(--tab, var(--sb-rail)); }
.sn-item.active .nav-badge, .sn-item.active .nav-chip { color: var(--sb-active-fg, var(--sb-strong)); }

/* Accordéon (sous-menus Élèves, Livrets) */
.sidebar .nav-group { display: block; position: static; }
.nav-parent { justify-content: space-between; }
.np-left { display: inline-flex; align-items: center; gap: 11px; }
.nav-caret { width: 13px; height: 13px; opacity: .7; transition: transform .15s; }
.nav-caret.open { transform: rotate(180deg); }
.nav-sub {
    position: static; box-shadow: none; border: 0; background: transparent;
    padding: 2px 0 4px 7px; margin: 0; min-width: 0; border-radius: 0;
    display: flex; flex-direction: column; gap: 1px;
}
/* Accordéon déplié mais pas courant : éclairci, sans aller jusqu'au blanc de l'onglet actif. */
.nav-parent[aria-expanded="true"]:not(.active) { background: var(--sb-hover); color: var(--sb-strong); }
.nav-group:has(.nav-parent[aria-expanded="true"]:not(.active)) .nav-sub { background: var(--sb-hover); }

/* le sous-menu prolonge l'onglet ouvert */
.nav-group:has(.nav-parent.active) .nav-sub { background: var(--sb-active-bg); box-shadow: 0 1px 0 var(--sb-line); }
.nav-sub a { text-decoration: none; color: var(--sb-fg); font-weight: 400; font-size: .82rem; padding: 6px 11px 6px 41px; border-radius: 0; }
.nav-sub a:hover { background: var(--sb-hover); color: var(--sb-strong); }
.nav-sub a.active { color: var(--sb-strong); font-weight: 600; background: var(--sb-hover); }

/* barre de défilement discrète du panneau */
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sb-rail); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Teinte de la languette de chaque entrée, et du module de la page courante. */
.sn-item[data-mod="dashboard"] { --tab: var(--c-dashboard); }
.sn-item[data-mod="edt"] { --tab: var(--c-edt); }
.sn-item[data-mod="journal"] { --tab: var(--c-journal); }
.sn-item[data-mod="binome"] { --tab: var(--c-binome); }
.sn-item[data-mod="assistant"] { --tab: var(--c-assistant); }
.sn-item[data-mod="eleves"] { --tab: var(--c-eleves); }
.sn-item[data-mod="registre"] { --tab: var(--c-registre); }
.sn-item[data-mod="stats"] { --tab: var(--c-stats); }
.sn-item[data-mod="absences"] { --tab: var(--c-absences); }
.sn-item[data-mod="checklist"] { --tab: var(--c-checklist); }
.sn-item[data-mod="responsabilites"] { --tab: var(--c-responsabilites); }
.sn-item[data-mod="fiche"] { --tab: var(--c-fiche); }
.sn-item[data-mod="livrets"] { --tab: var(--c-livrets); }
.sn-item[data-mod="bilans"] { --tab: var(--c-bilans); }
.sn-item[data-mod="programmations"] { --tab: var(--c-programmations); }
.sn-item[data-mod="sequences"] { --tab: var(--c-sequences); }
.sn-item[data-mod="plannings"] { --tab: var(--c-plannings); }
.sn-item[data-mod="calendrier"] { --tab: var(--c-calendrier); }
.sn-item[data-mod="obligations"] { --tab: var(--c-obligations); }
.sn-item[data-mod="budgets"] { --tab: var(--c-budgets); }
.sn-item[data-mod="bibliotheque"] { --tab: var(--c-bibliotheque); }
.sn-item[data-mod="fichiers"] { --tab: var(--c-fichiers); }
.sn-item[data-mod="config"] { --tab: var(--c-config); }
.sn-item[data-mod="programmes"] { --tab: var(--c-programmes); }
.sn-item[data-mod="corbeille"] { --tab: var(--c-corbeille); }
.sn-item[data-mod="superadmin"] { --tab: var(--c-superadmin); }
.sn-item[data-mod="etablissements"] { --tab: var(--c-etablissements); }
body[data-module="dashboard"] { --mod: var(--c-dashboard); --mod-soft: var(--c-dashboard-soft); --mod-line: var(--c-dashboard-line); }
body[data-module="edt"] { --mod: var(--c-edt); --mod-soft: var(--c-edt-soft); --mod-line: var(--c-edt-line); }
body[data-module="journal"] { --mod: var(--c-journal); --mod-soft: var(--c-journal-soft); --mod-line: var(--c-journal-line); }
body[data-module="binome"] { --mod: var(--c-binome); --mod-soft: var(--c-binome-soft); --mod-line: var(--c-binome-line); }
body[data-module="assistant"] { --mod: var(--c-assistant); --mod-soft: var(--c-assistant-soft); --mod-line: var(--c-assistant-line); }
body[data-module="eleves"] { --mod: var(--c-eleves); --mod-soft: var(--c-eleves-soft); --mod-line: var(--c-eleves-line); }
body[data-module="registre"] { --mod: var(--c-registre); --mod-soft: var(--c-registre-soft); --mod-line: var(--c-registre-line); }
body[data-module="stats"] { --mod: var(--c-stats); --mod-soft: var(--c-stats-soft); --mod-line: var(--c-stats-line); }
body[data-module="absences"] { --mod: var(--c-absences); --mod-soft: var(--c-absences-soft); --mod-line: var(--c-absences-line); }
body[data-module="checklist"] { --mod: var(--c-checklist); --mod-soft: var(--c-checklist-soft); --mod-line: var(--c-checklist-line); }
body[data-module="responsabilites"] { --mod: var(--c-responsabilites); --mod-soft: var(--c-responsabilites-soft); --mod-line: var(--c-responsabilites-line); }
body[data-module="fiche"] { --mod: var(--c-fiche); --mod-soft: var(--c-fiche-soft); --mod-line: var(--c-fiche-line); }
body[data-module="livrets"] { --mod: var(--c-livrets); --mod-soft: var(--c-livrets-soft); --mod-line: var(--c-livrets-line); }
body[data-module="bilans"] { --mod: var(--c-bilans); --mod-soft: var(--c-bilans-soft); --mod-line: var(--c-bilans-line); }
body[data-module="programmations"] { --mod: var(--c-programmations); --mod-soft: var(--c-programmations-soft); --mod-line: var(--c-programmations-line); }
body[data-module="sequences"] { --mod: var(--c-sequences); --mod-soft: var(--c-sequences-soft); --mod-line: var(--c-sequences-line); }
body[data-module="plannings"] { --mod: var(--c-plannings); --mod-soft: var(--c-plannings-soft); --mod-line: var(--c-plannings-line); }
body[data-module="calendrier"] { --mod: var(--c-calendrier); --mod-soft: var(--c-calendrier-soft); --mod-line: var(--c-calendrier-line); }
body[data-module="obligations"] { --mod: var(--c-obligations); --mod-soft: var(--c-obligations-soft); --mod-line: var(--c-obligations-line); }
body[data-module="budgets"] { --mod: var(--c-budgets); --mod-soft: var(--c-budgets-soft); --mod-line: var(--c-budgets-line); }
body[data-module="bibliotheque"] { --mod: var(--c-bibliotheque); --mod-soft: var(--c-bibliotheque-soft); --mod-line: var(--c-bibliotheque-line); }
body[data-module="fichiers"] { --mod: var(--c-fichiers); --mod-soft: var(--c-fichiers-soft); --mod-line: var(--c-fichiers-line); }
body[data-module="config"] { --mod: var(--c-config); --mod-soft: var(--c-config-soft); --mod-line: var(--c-config-line); }
body[data-module="programmes"] { --mod: var(--c-programmes); --mod-soft: var(--c-programmes-soft); --mod-line: var(--c-programmes-line); }
body[data-module="corbeille"] { --mod: var(--c-corbeille); --mod-soft: var(--c-corbeille-soft); --mod-line: var(--c-corbeille-line); }
body[data-module="superadmin"] { --mod: var(--c-superadmin); --mod-soft: var(--c-superadmin-soft); --mod-line: var(--c-superadmin-line); }
body[data-module="etablissements"] { --mod: var(--c-etablissements); --mod-soft: var(--c-etablissements-soft); --mod-line: var(--c-etablissements-line); }

/* ---- Typographie des titres d'écran ----
 * Une seule règle pour tous les titres de l'interface : ils passent en Outfit,
 * poids 600 et interlettrage resserré. Les titres d'impression (.print-title, .bl-print-title,
 * .edt-pdf-title) et l'écran de connexion (.auth-title) gardent leur traitement propre. */
.page-title, .asst-hist-title, .bl-sec-title, .cbh-title, .chk-title, .dl-prev-title,
.edit-title, .edt-title, .empty-state-title, .jx-day-title, .jx-title, .modal-title,
.prog-card-title, .prog-title, .pt-title, .seq-title, .side-title {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: -.015em;
}
.page-title { color: var(--text); }

/* ---- En-tête de page — composant unique ----
 * Reprend la mise en forme de la maquette : un carré à la teinte de l'intercalaire,
 * le titre, un sous-titre discret, et les outils repoussés à droite.
 * S'applique au premier en-tête de chaque écran (classe .page-head) et à .page-title. */
.page-head {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
/* Seul le titre prend la police de titre : appliquée au conteneur, elle contaminait
   les boutons et les listes déroulantes de la barre d'outils. */
.page-head > :first-child {
    margin-right: auto;
    font-family: var(--font-title); font-weight: 800; letter-spacing: -.022em;
    font-size: 1.62rem;
}
.ph-titre {
    font-family: var(--font-title); font-weight: 800; letter-spacing: -.022em;
    font-size: 1.62rem; display: inline-flex; align-items: center; gap: 10px;
}
.page-head::before,
.page-title::before,
.ph-titre::before {
    content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px;
    background: var(--mod, var(--accent));
}
/* Éditeurs pleine page (planning…) : entête en colonne → pas de carré d'intercalaire flottant. */
.page-head-editor::before { content: none; }
.page-title { display: flex; align-items: center; gap: 10px; }
/* les compteurs et précisions restent discrets à côté du titre */
.page-head .el-count, .page-head small, .page-head .sub {
    font-family: var(--font-body); font-weight: 500; font-size: 1.15rem; color: var(--muted);
}

/* ---- Fil du jour (barre du haut) ----
 * Rappelle en permanence où l'on en est dans la journée, quel que soit l'écran ouvert. */
.fil-jour {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 13px; border-radius: 999px;
    background: var(--mod-soft, var(--accent-soft));
    border: 1px solid var(--mod-line, var(--border));
    font-size: .8rem; line-height: 1.5; color: var(--text); white-space: nowrap;
}
.fil-jour b { font-weight: 700; color: var(--mod, var(--accent)); font-variant-numeric: tabular-nums; }
.fil-jour em {
    font-style: normal; color: var(--muted);
    display: inline-block; vertical-align: bottom;
    max-width: 32ch; overflow: hidden; text-overflow: ellipsis;
}
.fil-jour s {
    flex: none; width: 6px; height: 6px; border-radius: 50%; text-decoration: none;
}

/* ---- Repère scolaire et indicateurs des modules ---- */
.sb-ctx {
    margin: 2px 14px 10px; padding: 9px 11px;
    background: var(--sb-ctx-bg); border-radius: var(--r-sm); border: 1px solid var(--sb-line);
}
.sb-ctx b { display: block; font-family: var(--font-title); font-size: .78rem; font-weight: 600; color: var(--sb-strong); }
.sb-ctx span { display: flex; align-items: center; gap: 3px; font-size: .7rem; color: var(--sb-ctx-sub); margin-top: 2px; line-height: 1.25; }
.sb-ctx-ico { flex: none; font-size: 1.35em !important; position: relative; top: -4px; }
.sb-ctx-court { display: none; font-style: normal; font-family: var(--font-title); font-size: .7rem; font-weight: 700; line-height: 1.25; color: var(--sb-strong); }

.nav-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sb-badge); }
.nav-chip {
    flex: none; padding: 1px 7px; border-radius: var(--r-md); font-size: .68rem; font-weight: 600;
    background: var(--sb-rail); color: var(--sb-strong); font-variant-numeric: tabular-nums;
}
.nav-gauge { flex: none; width: 34px; height: 3px; border-radius: 2px; background: var(--sb-rail); overflow: hidden; }
.nav-gauge s { display: block; height: 100%; background: var(--sb-badge); border-radius: 2px; text-decoration: none; }
/* les libellés poussent les indicateurs à droite */
.sn-item > span:not(.np-left):not(.nav-dot):not(.nav-chip):not(.nav-gauge) { flex: 1; min-width: 0; }

/* Barre du haut conservée */
.topbar2 {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    height: 58px; padding: 0 20px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
/* Liseré de l'intercalaire : la couleur du module court sous la barre du haut. */
.topbar2::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--mod, var(--accent));
}
.topbar2 .tb-spacer { flex: 1; }
.topbar2 .nav-toggle { display: none; margin-left: 0; }
.sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 18, 40, .4); z-index: 35; }

@media (max-width: 1024px) {
    body.has-sidebar { padding-left: 0; }
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .22); }
    .sidebar.open { transform: none; }
    .topbar2 .nav-toggle { display: inline-flex; align-items: center; background: transparent; border: 0; color: var(--text); cursor: pointer; padding: 6px; border-radius: var(--r-md); line-height: 0; }
    .topbar2 .nav-toggle:hover { background: var(--accent-soft); color: var(--accent); }
}
@media (min-width: 1025px) { .sidebar-overlay { display: none !important; } }
@media print {
    body.has-sidebar { padding-left: 0 !important; }
    .sidebar, .topbar2, .sidebar-overlay { display: none !important; }
}

/* ---- Sélecteur programme (saisie guidée) ---- */
.picker-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.picker-tools .ef-input { flex: 1; min-width: 180px; }
.picker-list { max-height: 36vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.picker-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; }
.picker-item:hover { border-color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.picker-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cbd2e0; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; margin-top: 1px; }
.picker-check svg { opacity: 0; }
.picker-item.picked { opacity: .75; cursor: default; background: #f3faf3; border-color: var(--ok)55; }
.picker-item.picked .picker-check { background: var(--ok); border-color: var(--ok); }
.picker-item.picked .picker-check svg { opacity: 1; }
.picker-txt { display: flex; flex-direction: column; min-width: 0; }
.picker-label { font-size: .87rem; font-weight: 600; color: var(--text); }
.picker-ctx { font-size: .72rem; color: var(--muted); }

/* ---- Domaines : suggestions issues du programme ---- */
.prog-ref { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }
.prog-ref-grp { margin-bottom: 10px; }
.prog-ref-disc { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.grp-chip.pick.on { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
.grp-chip.pick:disabled { cursor: default; }

/* Portée du picker (compétences limitées au domaine) */
.picker-scope { font-size: .8rem; color: var(--muted); margin-bottom: 10px; background: var(--mod-soft, var(--accent-soft)); padding: 7px 11px; border-radius: var(--r-md); }
.picker-scope b { color: var(--mod, var(--accent)); }

/* Picker mode domaine : arborescence discipline → domaines */
.picker-tree { max-height: 32vh; overflow-y: auto; }
.pt-group { border-bottom: 1px solid var(--border); }
.pt-disc { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; cursor: pointer; padding: 9px 6px; font-weight: 700; font-size: .9rem; color: var(--text); text-align: left; }
.pt-disc:hover { color: var(--mod, var(--accent)); }
.pt-caret { flex: none; transition: transform .15s; opacity: .7; }
.pt-caret.open { transform: rotate(90deg); }
.pt-disc-lbl { flex: 1; }
.pt-count { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
.pt-items { padding: 2px 0 8px 22px; display: flex; flex-direction: column; gap: 3px; }

/* ---- Programmations : rendu en bandeaux colorés ---- */
.prog-grid.banded { table-layout: fixed; }
.pg-perhead { text-align: left; color: #33384d !important; }
.pg-per-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pg-per-nom { font-weight: 800; }
.pg-per-dates { font-weight: 600; font-size: .74rem; opacity: .8; white-space: nowrap; }
.pg-domband { padding: 9px 12px; font-weight: 800; color: #33384d; font-size: .92rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pg-perhead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pg-cell { padding: 5px; vertical-align: top; background: var(--surface); }
/* Drag & drop des domaines */
.dom-sort { display: flex; flex-direction: column; }
.grp-manage-row { flex-wrap: wrap; }
.grp-manage-row .ef-input { flex: 1 1 150px; }
.pt-handle { cursor: grab; color: var(--muted); display: inline-flex; align-items: center; flex: none; }
.pt-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }
.sortable-chosen { background: var(--mod-soft, var(--accent-soft)); border-radius: var(--r-md); }
.prog-per-row { flex-wrap: wrap; }

/* ---- Programmations : grille modernisée (cartes espacées, pas de quadrillage) ---- */
.prog-grid.banded { border-collapse: separate; border-spacing: 8px 7px; min-width: 760px; }
.prog-grid.banded th, .prog-grid.banded td { border: 0; }
.prog-grid.banded thead th.pg-perhead { border-radius: var(--r-md); padding: 10px 14px; box-shadow: 0 1px 2px rgba(20, 20, 50, .06); vertical-align: middle; }
.pg-per-nom { font-weight: 800; font-size: .92rem; }
.pg-domband { border-radius: var(--r-md); padding: 10px 16px; box-shadow: 0 1px 3px rgba(20, 20, 50, .08); letter-spacing: .2px; }
.pg-cell { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 7px; box-shadow: 0 1px 2px rgba(20, 20, 50, .04); transition: border-color .12s, box-shadow .12s; }
.pg-cell:hover { border-color: #cdd4e6; }
.pg-cell .pe { border-radius: var(--r-md); }
.pg-cell .pe + .pe { margin-top: 1px; }
.pg-cell .prog-add { width: 100%; justify-content: center; margin-top: 3px; border: 1px dashed transparent; }
.pg-cell:hover .prog-add { border-color: var(--border); }

/* ---- Sélecteur de couleur unifié ---- */
.color-dot { width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid rgba(0, 0, 0, .14); cursor: pointer; padding: 0; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.color-dot:hover { box-shadow: 0 0 0 3px var(--mod-soft, var(--accent-soft)); }
.ef-colorpop { position: fixed; z-index: 100050; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 14px 44px rgba(20, 20, 50, .24); padding: 10px; }
.ef-colorgrid { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; }
.ef-color-sw { width: 22px; height: 22px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); transition: transform .1s; }
.ef-color-sw:hover { transform: scale(1.15); }
.ef-color-sw.on { border-color: var(--text); }
.ef-color-auto { display: block; width: 100%; margin-bottom: 8px; font-size: .8rem; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px; cursor: pointer; }
.ef-color-auto:hover { color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }

/* Modale Périodes : chaque période sur UNE seule ligne (nom · début · fin · couleur · suppr) */
.prog-per-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.prog-per-row .prog-per-name { flex: 1 1 200px; width: auto; max-width: none; min-width: 0; margin-bottom: 0; }
.prog-per-line2 { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.prog-per-line2 .ef-input { flex: 0 0 128px; min-width: 0; }
.prog-per-line2 .color-dot, .prog-per-line2 .sbtn { flex: none; }

/* ---- Programmations : pièces jointes sur les éléments ---- */
.pe { flex-direction: column; align-items: stretch; gap: 2px; position: relative; cursor: grab; }
.pe:active { cursor: grabbing; }
.pe.pe-ghost { cursor: grabbing; }
.pe button, .pe a { cursor: pointer; }   /* les contrôles gardent un curseur clic malgré le bloc draggable */
.pe-row { display: flex; align-items: flex-start; gap: 6px; }
.pe-drag { flex: none; display: inline-flex; align-items: center; margin-top: 2px; color: var(--n-400); cursor: grab; opacity: 0; transition: opacity .12s ease; }
.pe:hover .pe-drag, .pe:focus-within .pe-drag { opacity: .7; }
.pe-drag:active { cursor: grabbing; }
.pe-ghost { opacity: .45; }
.pe-clip { cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; opacity: 0; flex: none; margin-top: 1px; background: none; border: 0; padding: 0; }
.pe:hover .pe-clip { opacity: 1; }
.pe-clip:hover { color: var(--mod, var(--accent)); }
.pe-edit { cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; flex: none; background: none; border: 0; padding: 0; }
.pe-edit:hover { color: var(--mod, var(--accent)); }
/* Cluster d'actions (crayon, trombone, ×) : hors flux pour ne pas rogner la largeur du texte.
   Flottant en haut à droite, révélé au survol (desktop). Le texte occupe toute la case. */
.pe-actions {
    position: absolute; top: 2px; right: 3px; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0; transition: opacity .12s ease;
    background: var(--surface); border-radius: var(--r-sm); padding: 2px 5px;
    box-shadow: -10px 0 8px -6px var(--surface);
}
.pe:hover .pe-actions, .pe:focus-within .pe-actions { opacity: 1; }
.pe-actions .pe-edit, .pe-actions .pe-clip, .pe-actions .pe-x { opacity: 1; margin-top: 0; }
/* Hôte CKEditor de la modale d'édition de compétence */
.prog-rt-host .ck-editor__editable { min-height: 140px; }
/* Modale du crayon : éditeur un peu plus haut (ne s'applique pas au champ du picker) */
.prog-rt-lg .ck-editor__editable { min-height: 220px; }
/* Zone « Documents joints » dans la modale d'édition */
.prog-modal-pj { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prog-pj-add { display: inline-flex; align-items: center; gap: 6px; }
.pe-clip.is-up { opacity: 1; color: var(--mod, var(--accent)); cursor: progress; animation: pe-clip-pulse .8s ease-in-out infinite; }
@keyframes pe-clip-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pe-pieces { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 3px 0 2px 26px; }
.pe-pieces .pj-chip { font-size: .74rem; padding: 2px 5px 2px 8px; max-width: 100%; }
.pe-pieces .pj-chip a { max-width: 140px; }

/* ---- Séquences / Fiches de préparation (sommaire) ---- */
.seq-list { display: flex; flex-direction: column; gap: 14px; }
/* Chaque séquence = card standard (.card-blk, classe posée dans le HTML) : liseré du
 * module, coins et ombre communs. On n'annule que padding/marge — l'en-tête et la liste
 * de fiches gèrent leur propre espacement. */
.seq-block.card-blk { padding: 0; margin-bottom: 0; }
/* En-tête = motif standard .card-blk-head : titre gras encre + icône accent (.cbh-ic),
 * sans barre teintée ni bordure. */
.seq-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.seq-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--text); cursor: pointer; }
.seq-title svg { width: 20px; height: 20px; color: var(--mod, var(--accent)); flex: none; }
.seq-head .ef-input { max-width: 340px; font-weight: 700; }
.seq-fiches { display: flex; flex-direction: column; }
.fiche-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; text-decoration: none; color: var(--text); border-top: 1px solid var(--border); }
.fiche-row:hover { background: var(--bg); color: var(--mod, var(--accent)); }
.fiche-nom { flex: 1; font-weight: 600; font-size: .92rem; }
.fiche-nivs { display: flex; gap: 3px; flex-wrap: wrap; }
.fiche-add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 8px 18px 14px; background: transparent; border: 1px dashed var(--border); border-radius: var(--r-md); padding: 7px 12px; color: var(--muted); font-weight: 600; font-size: .85rem; cursor: pointer; }
.fiche-add:hover { color: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }

/* ---- Éditeur de fiche de préparation ---- */
.fiche-breadcrumb { font-size: .82rem; color: var(--muted); font-weight: 600; margin: -4px 0 10px; }
.niv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.niv-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.niv-chip:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.niv-chip.on { background: var(--mod, var(--accent)); color: #fff; border-color: var(--mod, var(--accent)); }
.obj-list { display: flex; flex-direction: column; gap: 4px; }
.obj-item { display: flex; align-items: center; gap: 8px; font-size: .9rem; padding: 5px 8px; background: var(--bg); border-radius: var(--r-md); }
.obj-item span { flex: 1; }
.phases { display: flex; flex-direction: column; gap: 14px; }
.phase { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; }
.phase-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.phase-titre { flex: 1; font-weight: 700; }
.phase-move { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.phase-move .sbtn { width: 22px; height: 15px; font-size: .55rem; padding: 0; line-height: 1; }
.phase-duree { display: flex; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.ph-desc .ck-editor__editable { min-height: 90px; }
.print-only { display: none; }
@media print {
    .print-only { display: inline; }
    .ck-toolbar { display: none !important; }
    .ph-desc .ck-editor__editable { border: 0 !important; min-height: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .phase { break-inside: avoid; }
}

/* ---- Budgets ---- */
.bud-solde { font-size: 1.4rem; font-weight: 800; margin: 4px 0 6px; }
.bud-solde.pos { color: var(--ok); }
.bud-solde.neg { color: var(--danger); }
.bud-mini { display: flex; gap: 12px; font-size: .78rem; font-weight: 600; }
.bud-mini-in { color: var(--ok); }
.bud-mini-out { color: var(--danger); }
.bud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.bud-stat { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.bud-stat-lbl { font-size: .74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.bud-stat-val { font-size: 1.25rem; font-weight: 800; }
.bud-stat.in .bud-stat-val { color: var(--ok); }
.bud-stat.out .bud-stat-val { color: var(--danger); }
.bud-stat.solde.pos .bud-stat-val { color: var(--ok); }
.bud-stat.solde.neg .bud-stat-val { color: var(--danger); }
.bud-table-wrap { overflow-x: auto; }
.bud-table { width: 100%; border-collapse: collapse; }
.bud-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--border); }
.bud-table td { padding: 10px; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.bud-table .ta-right { text-align: right; }
.bud-desc-main { font-weight: 600; display: block; }
.bud-desc-sub { font-size: .8rem; color: var(--muted); }
.bud-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.bud-tag.entree { background: var(--ok)18; color: var(--ok); }
.bud-tag.depense { background: var(--danger)18; color: var(--danger); }
.bud-in { color: var(--ok); font-weight: 700; white-space: nowrap; }
.bud-out { color: var(--danger); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) { .bud-stats { grid-template-columns: 1fr; } }

/* PJ dans les phases de fiche */
.phase-pj { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }

/* ---- Partage de fichiers (explorateur) ---- */
.fm-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fm-crumb { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; color: var(--mod, var(--accent)); font-weight: 700; font-size: 1rem; padding: 2px 6px; border-radius: var(--r-sm); }
.fm-crumb:hover { background: var(--mod-soft, var(--accent-soft)); }
.fm-crumb-sep { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
/* Crumb racine = titre de la card « fichiers » (pattern widget accueil : texte foncé, seule l'icône est colorée) */
.fm-crumb-root { color: var(--text); font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; }
.fm-crumb-root svg { width: 19px; height: 19px; color: var(--mod, var(--accent)); flex: none; }
.fm-list { display: flex; flex-direction: column; }
.fm-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.fm-row:hover { background: var(--bg); }
.fm-main { flex: 1; display: flex; align-items: center; gap: 12px; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 10px 0; min-width: 0; }
.fm-ico { flex: none; }
.fm-txt { display: flex; flex-direction: column; min-width: 0; }
.fm-nom { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: .93rem; color: var(--text); }
.fm-nom-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fm-folder .fm-nom { color: var(--mod, var(--accent)); }
.fm-meta { font-size: .76rem; color: var(--muted); }
.fm-actions { display: flex; gap: 3px; padding-right: 6px; opacity: 0; }
.fm-row:hover .fm-actions { opacity: 1; }
@media (max-width: 640px) { .fm-actions { opacity: 1; } }
/* Menu d'actions « ⋯ » ouvert : garder la barre visible même si la souris quitte la ligne. */
.fm-cell-actions.actions-open, .fm-actions.actions-open { opacity: 1 !important; }
.fm-cell-actions .dd-menu, .fm-actions .dd-menu { min-width: 200px; }
/* Jeton de synchro (Réglages) */
.sync-tok-box { background: var(--mod-soft, var(--accent-soft)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin: 8px 0 4px; }
.sync-tok-lbl { margin: 0 0 8px; font-size: .85rem; }
.sync-tok-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sync-tok { flex: 1 1 auto; min-width: 220px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; user-select: all; word-break: break-all; }
.sync-tok-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* Séparateur métier / technique dans la sidebar */
.sidenav-sep { height: 1px; background: var(--sb-line); margin: 10px 10px; }

/* Selects dans les toolbars d'actions : même hauteur que les boutons */
.el-toolbar .ef-input { width: auto; height: 34px; padding: 0 28px 0 12px; font-size: .85rem; line-height: 1; }

/* ---------- Import Teetsh (import_journal) ---------- */
.imp-steps { margin: 0 0 14px; padding-left: 20px; color: var(--n-700); font-size: .86rem; line-height: 1.7; }
.imp-steps li { margin: 2px 0; }
.imp-src { width: 100%; min-height: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.45; resize: vertical; white-space: pre; }
.imp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.imp-map { display: flex; flex-direction: column; gap: 8px; }
.imp-map-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imp-tag { font-weight: 600; color: var(--n-900); min-width: 180px; flex: 1 1 180px; }
.imp-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.imp-arrow { color: var(--muted); flex: none; }
.imp-dot { width: 20px; height: 20px; border-radius: var(--r-sm); cursor: default; }
.imp-map-row .ef-input { flex: 1 1 220px; max-width: 320px; height: 36px; }

.imp-day { margin-bottom: 16px; }
.imp-day-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--mod, var(--accent)); border-bottom: 2px solid var(--border); padding-bottom: 5px; margin-bottom: 8px; }
.imp-day-n { font-size: .76rem; font-weight: 600; color: var(--muted); }
.imp-seance { display: grid; grid-template-columns: 108px 160px minmax(120px, 1fr) 2fr; gap: 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: .84rem; }
.imp-seance.is-skip { opacity: .5; }
.imp-time { font-variant-numeric: tabular-nums; color: var(--n-700); white-space: nowrap; }
.imp-time-warn { color: #b45309; }
.imp-etq { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; justify-self: start; }
.imp-etq-skip { background: var(--n-100); color: var(--n-400); text-decoration: line-through; }
.imp-inti { font-weight: 600; color: var(--n-900); }
.imp-der { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.imp-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.imp-mode { display: flex; flex-direction: column; gap: 2px; }
.imp-mode .chk { margin: 0; }
.imp-done-msg { font-size: 1rem; margin: 0 0 12px; }

@media (max-width: 760px) {
    .imp-seance { grid-template-columns: 1fr 1fr; }
    .imp-der { display: none; }
}

/* ---------- Réinitialisation EDT (lien discret dans la modale Générer) ---------- */
.gen-reset { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.btn-linkdanger { background: none; border: 0; color: var(--danger-strong); font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 4px 6px; opacity: .82; }
.btn-linkdanger:hover { opacity: 1; }
.btn-linkdanger:disabled { opacity: .4; cursor: default; }

/* ---------- Import EDT (import_edt) ---------- */
.imp-cadre { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .85rem; color: var(--n-700); }
.imp-cadre-it b { color: var(--mod, var(--accent)); }
.imp-edt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.imp-edt-day { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 10px 8px; }
.imp-edt-day .imp-day-h { border-bottom: 2px solid var(--border); }
.imp-edt-cr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 5px 4px 5px 8px; border-left: 3px solid var(--border); border-bottom: 1px solid var(--border); font-size: .82rem; }
.imp-edt-cr:last-child { border-bottom: 0; }
.imp-edt-cr.is-skip { opacity: .5; }
.imp-edt-titre { color: var(--muted); font-size: .78rem; flex-basis: 100%; }
.imp-edt-titre:empty { display: none; }

/* ---------- EDT : échelle plus lisible ---------- */
.tt-ev.ev-dense { display: flex; align-items: center; }
.tt-ev.ev-dense .tt-ev-in { padding: 2px 7px; width: 100%; }
.tt-ev.ev-dense .tt-ev-m { font-size: .8rem; line-height: 1.15; }
.tt-ev.ev-dense .tt-ev-sub, .tt-ev.ev-dense .tt-ev-t { margin-top: 0; line-height: 1.12; }

/* ---------- EDT : en-tête (nom d'EDT + sélecteur + retour listing) ---------- */
.edt-titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.edt-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); color: var(--mod, var(--accent)); background: var(--surface, #fff); border: 1px solid var(--border); flex: none; text-decoration: none; }
.edt-back:hover { background: var(--accent-soft, #eef); }
.edt-title-row { display: flex; align-items: center; gap: 4px; }
.edt-title-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 2px 4px; cursor: pointer; font-size: 1.5rem; font-weight: 800; color: var(--mod, var(--accent)); letter-spacing: -.2px; max-width: 52vw; }
.edt-title-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edt-title-btn:hover { color: var(--accent-2, #d85d18); }
.edt-rename { flex: none; }
.edt-subtitle { font-size: .82rem; color: var(--muted); font-weight: 600; margin-left: 4px; }
.dd-menu button.on { font-weight: 800; color: var(--mod, var(--accent)); }

.imp-dest-sub { margin: -4px 0 14px 26px; }

/* ---------- Modale d'aperçu d'impression EDT ---------- */
.print-modal { position: fixed; inset: 0; z-index: 3000; display: flex; background: #eef0f6; }
.pm-panel { width: 322px; flex: none; background: #fff; border-right: 1px solid var(--border); overflow-y: auto; padding: 14px 16px 48px; }
.pm-panel-top { margin-bottom: 10px; }
.pm-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font-size: .95rem; font-weight: 600; cursor: pointer; padding: 4px 0; }
.pm-back:hover { color: var(--mod, var(--accent)); }
.pm-cta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pm-cta .btn-green, .pm-cta .btn-white { justify-content: center; width: 100%; }
.pm-sec { border-top: 1px solid var(--border); }
.pm-sec-h { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 14px 2px; cursor: pointer; font-weight: 700; font-size: .98rem; color: var(--n-900); }
.pm-caret { transition: transform .15s ease; flex: none; }
.pm-caret.open { transform: rotate(180deg); }
.pm-sec-b { padding: 0 2px 14px; }
.pm-lbl { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); margin: 12px 0 6px; }
.pm-sec-b > .ef-input { width: 100%; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip { border: 1px solid var(--border); background: #fff; border-radius: var(--r-md); padding: 5px 12px; font-weight: 600; font-size: .82rem; cursor: pointer; color: var(--n-500); }
.pm-chip.on { background: var(--mod, var(--accent)); color: #fff; border-color: var(--mod, var(--accent)); }
.pm-check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; cursor: pointer; margin-right: 6px; }
.pm-sw { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--n-700); padding: 6px 0; cursor: pointer; }
.pm-sw input { flex: none; width: 16px; height: 16px; }
.pm-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pm-stepper button { width: 34px; height: 32px; border: 0; background: var(--n-50); font-size: 1.1rem; cursor: pointer; }
.pm-stepper span { min-width: 40px; text-align: center; font-weight: 700; }
.pm-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pm-seg button { border: 0; background: #fff; padding: 7px 14px; font-weight: 600; font-size: .84rem; cursor: pointer; color: var(--n-500); border-left: 1px solid var(--border); }
.pm-seg button:first-child { border-left: 0; }
.pm-seg button.on { background: var(--mod, var(--accent)); color: #fff; }
.pm-preview { flex: 1; overflow: auto; padding: 24px; display: flex; justify-content: center; align-items: flex-start; }

/* Feuille imprimable (table EDT type Teetsh) */
/* Feuille = format A4 plein (96 dpi) ; les marges d'impression sont le padding (html2pdf margin:0 → image bord-à-bord, jamais rognée) */
.pt-sheet { background: #fff; box-shadow: 0 4px 24px rgba(20, 20, 50, .12); padding: 34px; box-sizing: border-box; color: var(--n-900); overflow-wrap: break-word; }
.pt-portrait { width: 794px; }
.pt-paysage { width: 1123px; }
.pt-sheet table { max-width: 100%; }
.pt-head { position: relative; text-align: center; margin-bottom: 12px; min-height: 20px; }
.pt-brand { position: absolute; left: 0; top: 6px; font-size: .72rem; color: var(--n-400); font-weight: 600; }
.pt-title { font-size: 1.6em; font-weight: 800; color: var(--n-900); margin: 0; }
.pt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pt-table th, .pt-table td { border: 1px solid var(--n-300); overflow: hidden; }
.pt-corner { width: 94px; }
.pt-dayhead { background: #fff; font-weight: 800; color: var(--n-900); padding: 5px 4px; font-size: 1.05em; }
.pt-resrow th { padding: 1px; }
.pt-res { background: var(--n-100); font-weight: 700; color: var(--n-600); font-size: .8em; }
.pt-time { background: var(--n-50); font-weight: 700; color: var(--n-700); font-size: .82em; text-align: center; white-space: nowrap; width: 94px; }
.pt-cell-ev { text-align: center; vertical-align: middle; padding: 2px 6px; }
.pt-cell-empty { background: #fff; }
.pt-cell-brk { background: var(--n-300); color: var(--n-700); text-align: center; vertical-align: middle; font-size: .84em; }
.pt-nocolor .pt-cell-brk { background: #e5e7eb; }
.pt-ev { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pt-ev-t { font-weight: 700; }
.pt-ev-interv { font-size: .8em; font-style: italic; opacity: .85; }
.pt-ev-meta { font-size: .78em; opacity: .82; display: flex; gap: 6px; justify-content: center; }
.pt-brk-lbl { font-weight: 600; }
.pt-legend { margin-top: 14px; }
.pt-legend-h { font-weight: 800; color: var(--n-900); margin-bottom: 6px; font-size: 1.02em; }
.pt-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 5px; }
.pt-legend-niv { font-weight: 800; color: var(--n-700); font-size: .9em; margin-right: 4px; }
.pt-chip { border-radius: 999px; padding: 2px 10px; font-size: .82em; color: var(--n-900); }

@media (max-width: 720px) {
    .print-modal { flex-direction: column; }
    .pm-panel { width: auto; max-height: 46vh; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* Aperçu portal : le contenu imprimable existant déplacé dans la feuille */
.pt-sheet .no-print { display: none !important; }       /* masque le chrome interactif (barres d'outils, boutons, crayons…) */
.pt-sheet .print-title { display: block !important; text-align: center; font-size: 1.4em; font-weight: 800; margin: 0 0 12px; color: var(--n-900); }
.x-sheet-body { min-height: 40px; }
.x-sheet-body .card-blk { box-shadow: none; border: 0; padding: 0; margin: 0; background: none; }
.x-sheet-body .wrap { padding: 0; max-width: none; }

/* Impression : ne garder que la feuille (générique, quelle que soit la page) */
@media print {
    body.pm-open .topbar2, body.pm-open .sidebar, body.pm-open .sidebar-overlay { display: none !important; }
    body.pm-open .wrap > *:not(.print-modal) { display: none !important; }
    body.pm-open .pm-panel { display: none !important; }
    body.pm-open .print-modal { position: static; background: #fff; display: block; }
    body.pm-open .pm-preview { overflow: visible; padding: 0; display: block; }
    body.pm-open .pt-sheet { box-shadow: none; width: auto; padding: 0; }
    body.pm-open .pt-page + .pt-page { margin-top: 0; padding-top: 0; border-top: 0; }
    body.pm-open .pt-pagebreak { display: none; }
}

/* Séparation matin / après-midi : saut de page (écran = séparateur pointillé ; impression + PDF = vraie page) */
.pt-pagebreak { height: 0; }
.pt-page + .pt-page { break-before: page; margin-top: 26px; padding-top: 20px; border-top: 2px dashed var(--n-300); }
.pdf-export .pt-page + .pt-page { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Feuille cahier journal (aperçu export) ---------- */
.jx-day { break-inside: avoid; margin-bottom: 20px; }
.jx-day + .jx-day { border-top: 1px solid #e5e7eb; padding-top: 14px; }
.jx-day-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.jx-day-title { font-size: 1.5em; font-weight: 800; color: var(--n-900); }
.jx-day-date { font-size: 1.05em; font-weight: 700; color: var(--n-600); }
.jx-day-niv { font-size: .8em; font-weight: 700; color: var(--n-500); background: var(--n-100); border-radius: 999px; padding: 2px 10px; }
.jx-hspacer { flex: 1 1 auto; }
.jx-empty { color: var(--n-400); font-style: italic; margin: 2px 0 8px; }

.jx-bilan-box { border: 1px solid var(--n-300); border-radius: var(--r-md); padding: 9px 12px 12px; margin: 12px 0 14px; break-inside: avoid; }
.jx-bilan-tag { display: inline-block; background: #fde68a; color: #92400e; font-weight: 700; font-size: .78em; border-radius: var(--r-sm); padding: 1px 9px; margin-bottom: 6px; }
.jx-bilan-txt { font-size: .92em; color: var(--n-900); white-space: pre-wrap; }
.jx-bilan-empty { min-height: 110px; background-image: repeating-linear-gradient(transparent, transparent 21px, #e5e7eb 22px); }

.jx-row { display: contents; }   /* wrapper transparent : n'affecte pas la mise en page d'impression */
/* Obligation de service horodatée sur la feuille imprimée (fil du jour) */
.jx-ods { display: flex; align-items: baseline; gap: 8px; border-left: 4px solid var(--n-300); padding: 3px 0 3px 10px; margin-bottom: 10px; break-inside: avoid; color: var(--n-600); font-size: .92em; }
.jx-ods-label { font-weight: 700; }
.jx-seance { border-left: 4px solid var(--n-300); padding: 4px 0 8px 10px; margin-bottom: 10px; break-inside: avoid; }
.jx-seance + .jx-seance { border-top: 1px solid #eef0f4; padding-top: 8px; }
.jx-seance-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.jx-time { font-variant-numeric: tabular-nums; color: var(--n-700); font-weight: 700; font-size: .82em; white-space: nowrap; }
.jx-title { font-weight: 800; color: var(--n-900); text-decoration: underline; text-underline-offset: 2px; }
.jx-pill { border-radius: 999px; padding: 2px 10px; font-size: .78em; font-weight: 700; white-space: nowrap; background: #eef2f7; color: var(--n-600); }
.jx-dur { display: inline-flex; align-items: center; gap: 3px; font-size: .78em; color: var(--n-500); white-space: nowrap; }
.jx-block { margin: 3px 0; font-size: .92em; color: var(--n-900); }
.jx-lbl { display: block; font-size: .7em; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--n-400); margin-bottom: 1px; }
.jx-obj { margin: 1px 0 2px 18px; padding: 0; }
.jx-html { line-height: 1.35; }
.jx-html p { margin: 2px 0; }
.jx-html ul, .jx-html ol { margin: 2px 0 2px 18px; padding: 0; }

/* ---------- Cahier journal : appel à l'action sur un jour vide ---------- */
.jour-col-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; text-align: center; }
.jce-hint { font-size: .82rem; color: var(--n-400); margin-bottom: 2px; }
.jce-btn { width: 100%; max-width: 270px; justify-content: center; }
.jce-link { background: none; border: 0; color: var(--muted); font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 2px; }
.jce-link:hover { color: var(--mod, var(--accent)); }
.jce-print { display: none; }
@media print { .jce-print { display: block; color: var(--n-400); font-style: italic; } }

/* ---------- Aperçu export : révélation du contenu « impression seule » dans la feuille ---------- */
/* Registre : masque les inputs interactifs, révèle le résumé imprimable */
.pt-sheet .pres-extra { display: none !important; }
.pt-sheet .pres-print { display: block !important; }
.pt-sheet .pres-counts { margin-bottom: 12px; }
/* Trombinoscope : colonnes fixes comme à l'impression */
.pt-sheet .trombi { grid-template-columns: repeat(4, 1fr) !important; }
.pt-sheet .trombi-card { cursor: default; }

/* Aperçu export : rendre l'aperçu inerte + révéler le contenu « impression seule » + masquer le chrome CKEditor */
.x-sheet-body { pointer-events: none; }
.pt-sheet .print-only { display: inline !important; }
.pt-sheet .ck.ck-editor__top, .pt-sheet .ck-toolbar, .pt-sheet .ck-toolbar-container, .pt-sheet .ck-sticky-panel { display: none !important; }
.pt-sheet .ck-editor__editable, .pt-sheet .ck-content { border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; background: none !important; }

/* ===== Emploi du temps personnel (multi-classes) : modale de composition ===== */
.pp-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.pp-class { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; background: var(--surface); transition: opacity .15s ease; }
.pp-class.off { opacity: .6; background: var(--bg); }
.pp-class-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pp-class-head input[type=checkbox] { flex: none; }
.pp-class-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pp-class-name b { font-size: .98rem; }
.pp-class-sub { font-size: .78rem; color: var(--muted); }
.pp-class-body { margin: 10px 0 2px; padding-left: 30px; display: flex; flex-direction: column; gap: 10px; }
.pp-field { display: flex; flex-direction: column; gap: 5px; }
.pp-lbl { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); }
.pp-days { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-day { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 7px 12px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .12s ease; }
.pp-day:hover { border-color: var(--mod, var(--accent)); }
.pp-day.on { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.pp-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 2px; }
.pp-summary-lbl { font-weight: 700; font-size: .82rem; color: var(--text); margin-right: 2px; }
.pp-chip { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); border-radius: 999px; padding: 3px 11px; font-size: .8rem; font-weight: 700; }
.pp-empty { color: var(--muted); font-size: .85rem; margin: 12px 0 0; }
.pp-warn { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-md); background: var(--warn-bg); border: 1px solid var(--warn-bg); color: #9a3412; font-size: .84rem; line-height: 1.4; }
.pm-hint { font-size: .78rem; color: var(--muted); margin: 10px 2px 4px; line-height: 1.4; }
/* En-tête d'impression : école sous le nom de la classe (2e ligne du bandeau jour) */
.pp-res-ecole { display: block; font-weight: 500; color: var(--n-400); font-size: .82em; }

/* ---------- Cases à cocher & boutons radio (style charté, couleur dominante) ---------- */
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 18px; height: 18px; flex: none; margin: 0; padding: 0; box-sizing: border-box;
    border: 2px solid #c4cad8; background: #fff; cursor: pointer; position: relative;
    vertical-align: middle; transition: background-color .12s ease, border-color .12s ease;
}
input[type="checkbox"] { border-radius: var(--r-sm); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--mod, var(--accent)); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked { background: #fff; }
input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--mod, var(--accent));
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--mod, var(--accent)); outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: default; }
/* Cases natives résiduelles (range, etc.) */
input[type="range"] { accent-color: var(--mod, var(--accent)); }

/* Export PDF « par jour » (colonne seule, hors feuille .pt-sheet) : marge interne pendant la capture */
.pdf-export .jour-col { padding: 26px; box-sizing: border-box; background: #fff; }

/* ---------- Overlay de génération PDF ---------- */
.ef-pdf-loader { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 40, .45); }
.ef-pdf-loader-box { background: #fff; border-radius: var(--r-lg); padding: 22px 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 12px 44px rgba(0, 0, 0, .28); font-weight: 700; color: var(--mod, var(--accent)); font-size: .95rem; }
.ef-spinner { width: 38px; height: 38px; border: 4px solid var(--mod-soft, var(--accent-soft)); border-top-color: var(--mod, var(--accent)); border-radius: 50%; animation: ef-spin .8s linear infinite; }
@keyframes ef-spin { to { transform: rotate(360deg); } }
@media print { .ef-pdf-loader { display: none !important; } }

/* ---------- Obligations de service (108 h) ---------- */
.ods-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ods-global { font-size: .9rem; color: var(--muted); }
.ods-global b { color: var(--text); font-weight: 800; }
.ods-global-tot { color: var(--muted); }
.ods-gbar { height: 6px; border-radius: 999px; background: var(--mod-soft, var(--accent-soft)); margin-top: 8px; max-width: 420px; overflow: hidden; }
.ods-gbar-fill { height: 100%; background: var(--mod, var(--accent)); border-radius: 999px; transition: width .2s ease; }

/* Modale « S'abonner à mon agenda » (flux ICS) */
.cal-url-row { display: flex; gap: 8px; }
.cal-url-row .ef-input { flex: 1; font-size: .8rem; }
.cal-open { margin: 10px 0 2px; }
.cal-help { margin: 22px 0 20px; font-size: .84rem; color: var(--n-600); }
.cal-help summary { cursor: pointer; font-weight: 700; color: var(--n-700); }
.cal-help ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.65; }
.cal-help li { margin-bottom: 4px; }

.ods-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1024px) { .ods-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ods-board { grid-template-columns: 1fr; } }
.ods-cat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 12px; }
.ods-cat-head { display: flex; align-items: center; gap: 8px; }
.ods-cat-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--cc, var(--mod, var(--accent))); flex: none; }
.ods-cat-nom { font-weight: 800; color: var(--text); font-size: 1.02rem; }
.ods-cat-hrs { margin-left: auto; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.ods-cat-hrs b { color: var(--cc, var(--mod, var(--accent))); }
.ods-cat-edit { flex: none; opacity: .55; }
.ods-cat-edit:hover { opacity: 1; }
.ods-cat-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--cc, var(--mod, var(--accent))) 15%, #fff); margin: 8px 0 6px; overflow: hidden; }
.ods-cat-bar-fill { height: 100%; background: var(--cc, var(--mod, var(--accent))); border-radius: 999px; transition: width .2s ease; }

.ods-entries { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ods-entry { position: relative; display: flex; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s; }
.ods-entry:hover { border-color: var(--cc, var(--mod, var(--accent))); box-shadow: 0 2px 8px rgba(20, 20, 50, .08); }
.ods-entry-date { flex: none; width: 44px; text-align: center; font-size: .72rem; font-weight: 800; color: var(--cc, var(--mod, var(--accent))); background: color-mix(in srgb, var(--cc, var(--mod, var(--accent))) 12%, #fff); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; line-height: 1.15; padding: 4px; }
.ods-entry-main { min-width: 0; flex: 1; }
.ods-entry-titre { font-weight: 700; color: var(--text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ods-entry-meta { font-size: .76rem; color: var(--muted); display: flex; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.ods-entry-desc { font-size: .76rem; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ods-entry-del { flex: none; align-self: flex-start; opacity: 0; transition: opacity .12s; }
.ods-entry:hover .ods-entry-del { opacity: .8; }
.ods-add { display: inline-flex; align-items: center; gap: 6px; width: 100%; justify-content: center; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: var(--r-md); padding: 8px; font-weight: 600; font-size: .84rem; cursor: pointer; }
.ods-add:hover { border-color: var(--cc, var(--mod, var(--accent))); color: var(--cc, var(--mod, var(--accent))); }

.ods-dur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ods-dur-custom { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); }
.ods-dur-custom .ef-input { width: 74px; }

/* ---------- Plannings (grille éditable + table imprimable) ---------- */
.planning-print { display: none; }   /* visible seulement clonée dans la feuille d'export */
/* La grille défile à l'intérieur (bornée au viewport) : sur petit écran, la page ne scrolle
   plus verticalement ; un contenu court n'affiche aucune scrollbar (max-height = plafond). */
.pl-editor-wrap { overflow: auto; max-height: calc(100vh - 300px); min-height: 200px; }
.pl-grid { border-collapse: collapse; width: 100%; min-width: 640px; }
.pl-grid th, .pl-grid td { border: 1px solid var(--border); vertical-align: top; }
.pl-corner { width: 96px; background: var(--n-50); font-size: .8rem; color: var(--muted); padding: 6px; text-align: center; }
.pl-col { background: var(--n-50); padding: 4px 6px; min-width: 150px; }
.pl-col-input { width: 100%; border: 0; background: transparent; font-weight: 700; text-align: center; font-size: .9rem; padding: 4px; }
.pl-col-input:focus { outline: 2px solid var(--mod-soft, var(--accent-soft)); border-radius: var(--r-sm); }
.pl-col-act { display: flex; justify-content: center; gap: 2px; }
.pl-col-act button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: .9rem; padding: 1px 6px; border-radius: var(--r-sm); }
.pl-col-act button:hover:not(:disabled) { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.pl-col-act button:disabled { opacity: .3; cursor: default; }
.pl-col-act .pl-del:hover { background: var(--danger-bd); color: var(--danger); }
.pl-addcol { width: 46px; background: var(--n-50); text-align: center; }
.pl-addcol button { border: 1px dashed var(--border); background: #fff; width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer; color: var(--muted); font-size: 1.1rem; }
.pl-addcol button:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.pl-addcol-sp { border: 0 !important; background: none; }
.pl-timecell { width: 100px; background: #fbfbfe; padding: 5px; }
.pl-time-inputs { display: flex; align-items: center; gap: 3px; }
.pl-time-inputs input { width: 68px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; font-size: .78rem; }
.pl-time-inputs span { color: var(--muted); }
.pl-row-act { display: flex; gap: 2px; margin-top: 4px; }
.pl-row-act button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: .72rem; padding: 1px 5px; border-radius: var(--r-sm); }
.pl-row-act button:hover:not(:disabled) { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.pl-row-act button:disabled { opacity: .3; cursor: default; }
.pl-row-act .pl-del { font-size: 1rem; line-height: 1; }
.pl-row-act .pl-del:hover { background: var(--danger-bd); color: var(--danger); }
.pl-datacell { padding: 0; }
.pl-cell { width: 100%; min-height: 46px; border: 0; background: transparent; resize: vertical; padding: 6px 8px; font: inherit; font-size: .85rem; line-height: 1.3; box-sizing: border-box; }
.pl-cell:focus { outline: 2px solid var(--mod-soft, var(--accent-soft)); outline-offset: -2px; }
.pl-bannercell { background: var(--n-100); padding: 0; position: relative; }
.pl-banner-input { min-height: 34px; font-weight: 600; text-align: center; }

.pl-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pl-ptable th, .pl-ptable td { border: 1px solid var(--n-400); padding: 4px 6px; font-size: .82em; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.pl-ptable thead th { background: var(--n-100); font-weight: 800; text-align: center; }
.pl-pcorner, .pl-ptime { width: 84px; background: var(--n-50); font-weight: 700; text-align: center; white-space: nowrap; }
.pl-pbanner { background: #e8eefb; font-weight: 700; text-align: center; }
.pl-print-sub { text-align: center; font-weight: 600; color: var(--n-600); margin: 2px 0 12px; }
.pl-sub-view { cursor: pointer; color: var(--muted); font-size: .85rem; display: inline-flex; align-items: center; gap: 5px; }
.pl-sub-view:hover { color: var(--mod, var(--accent)); }
.pl-sub-empty { font-style: italic; opacity: .8; }

/* ---------- Plannings : drag & drop (poignées) ---------- */
.pl-col-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; min-height: 18px; }
.pl-cdrag, .pl-drag { cursor: grab; color: #b0b7c3; display: inline-flex; line-height: 0; padding: 2px; }
.pl-cdrag:hover, .pl-drag:hover { color: var(--mod, var(--accent)); }
.pl-cdrag:active, .pl-drag:active { cursor: grabbing; }
.pl-col-top .pl-del, .pl-row-act .pl-del { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 5px; border-radius: var(--r-sm); }
.pl-col-top .pl-del:hover, .pl-row-act .pl-del:hover { background: var(--danger-bd); color: var(--danger); }
.pl-row-act { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.pl-bannercell .pl-row-act { position: absolute; top: 3px; right: 6px; margin-top: 0; }
.pl-ghost { opacity: .5; }
.pl-ghost td, .pl-ghost.pl-col { background: var(--mod-soft, var(--accent-soft)) !important; }

/* ---------- Plannings : barres uniques (drag · champ centré · suppression) + cellules centrées ---------- */
.pl-hrow { display: flex; align-items: center; gap: 4px; width: 100%; }
.pl-hrow .pl-col-input, .pl-hrow .pl-time-input, .pl-hrow .pl-banner-input { flex: 1; min-width: 0; }
.pl-col { padding: 5px 7px; vertical-align: middle; }
.pl-col-input { width: auto; }
.pl-corner { width: 160px; }
.pl-timecell { width: 160px; vertical-align: middle; }
.pl-time-input { border: 0; background: transparent; text-align: center; font-weight: 700; font-size: .84rem; padding: 4px; color: var(--text); }
.pl-time-input:focus, .pl-banner-input:focus { outline: 2px solid var(--mod-soft, var(--accent-soft)); border-radius: var(--r-sm); }
.pl-bannercell { padding: 5px 8px; }
.pl-cell { text-align: center; field-sizing: content; min-height: 30px; }
.pl-datacell { vertical-align: middle; }
.pl-cell::placeholder, .pl-time-input::placeholder, .pl-col-input::placeholder { color: var(--n-400); }
.pl-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: #c2c8d4; cursor: pointer; transition: background .12s ease, color .12s ease; }
.pl-del svg { width: 13px; height: 13px; display: block; }
.pl-del:hover, .pl-del:focus-visible { background: var(--danger-bd); color: var(--danger); outline: none; }
/* Mobile : la grille planning (matrice éditable) ne se « carte » pas — scroll horizontal
   contenu à son wrapper (jamais la page), 1re colonne (horaires) collante pour garder le repère. */
@media (max-width: 640px) {
    .pl-editor-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
    .pl-corner, .pl-timecell { width: 118px; }
    .pl-grid .pl-corner, .pl-grid .pl-timecell { position: sticky; left: 0; z-index: 2; }
    .pl-grid thead .pl-corner { z-index: 3; }
}
.pl-cdrag, .pl-drag { flex: none; }

/* ============================ Tableau de bord ============================ */
.db-shell { max-width: none; margin: 0; }
.db-hello { display: block; margin: 4px 2px 18px; }
.db-greeting {
    font-family: var(--font-title); font-size: 1.62rem; margin: 0; font-weight: 800;
    letter-spacing: -.022em; color: var(--text);
}
/* Carré de l'intercalaire — en inline-block et non en flex : le titre est composé de
 * plusieurs nœuds (« Bonjour », « , prénom », l'emoji) qu'un gap séparerait à tort. */
.db-greeting::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 13px; height: 13px; border-radius: 3px; margin-right: 11px; top: -2px;
    position: relative; background: var(--mod, var(--accent));
}
/* Ligne du « Bonjour » : titre + date à gauche, chip de la classe poussé à droite */
.db-head-top { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.db-date { margin: 0; color: var(--muted); font-size: .95rem; position: relative; padding-left: 15px; }
.db-date::before { content: "·"; position: absolute; left: 4px; color: var(--muted); }
/* Ligne période/vacances : chips + « prochaines vacances » à gauche, citation poussée à droite */
.db-cal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.db-cal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); border-radius: 999px; padding: 4px 12px; }
.db-cal-chip.vac { color: var(--warn); background: var(--warn-bg); }
.db-cal-chip svg { flex: none; }
.db-cal-next { font-size: .82rem; color: var(--muted); }
.db-cal-next b { color: var(--text); }
/* Petit mot d'encouragement (humour) — pastille douce alignée à droite de la ligne vacances… */
.db-cal-courage { margin-left: auto; flex: 0 1 auto; font-size: .84rem; color: var(--text); background: var(--mod-soft, var(--accent-soft)); border-radius: var(--r-md); padding: 7px 12px; }
/* …mais si elle ne tient pas sur la ligne, elle passe seule en dessous, alignée à GAUCHE (classe posée en JS, cf. initCourageFit) */
.db-cal-courage.is-wrapped { margin-left: 0; flex-basis: 100%; text-align: left; }
.db-classe { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; align-self: center; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-weight: 700; font-size: .85rem; padding: 7px 13px; border-radius: 999px; }
.db-classe svg { flex: none; }

/* Écrans « boxed » : au-delà de cette largeur le contenu s'étire sans rien gagner en
 * lisibilité. Le reste de l'application garde la pleine largeur — la borne est posée écran
 * par écran (essai).
 * Le `:not(.full)` exclut les éditeurs, qui partagent le module de leur liste et réclament
 * toute la place : emplois-du-temps.php / edt.php, programmations.php / programmation.php.
 * Le tableau de bord fait exception : son wrap porte lui-même la classe « full ». */
body[data-module="dashboard"] .wrap,
body[data-module="edt"] .wrap:not(.full),
body[data-module="programmations"] .wrap:not(.full),
body[data-module="budgets"] .wrap:not(.full),
body[data-module="eleves"] .wrap:not(.full),
body[data-module="checklist"] .wrap:not(.full),
body[data-module="responsabilites"] .wrap:not(.full),
body[data-module="sequences"] .wrap:not(.full),
body[data-module="plannings"] .wrap:not(.full) { max-width: 1320px; margin-inline: auto; }

.db-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.db-col { min-width: 0; }
.db-card { margin-bottom: 16px; }
/* Obligations de la semaine : la ligne porte une date complète (« ven. 11 · 16:30 »), un
 * titre et une catégorie — trois informations que la largeur d'une colonne de tableau de
 * bord ne tient pas de front, d'où des titres réduits à « Conseil des… ». La catégorie passe
 * sous le titre, qui récupère toute la largeur et peut se replier au lieu d'être coupé. */
.db-seances-ods .db-seance-body { flex-direction: column; align-items: flex-start; gap: 3px; }
.db-seances-ods .db-seance-title { white-space: normal; overflow: visible; text-overflow: clip; }
/* La pastille se cale sur la première ligne du titre : centrée, elle flottait entre le titre
 * replié et l'étiquette de catégorie. */
.db-seances-ods .db-dot { align-self: flex-start; margin-top: 5px; }
.db-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.db-card-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; color: var(--text); }
.db-card-title svg { width: 19px; height: 19px; color: var(--mod, var(--accent)); flex: none; }
.db-link { color: var(--mod, var(--accent)); text-decoration: none; font-weight: 600; font-size: .81rem; white-space: nowrap; }
.db-link:hover { text-decoration: underline; }
.db-muted { color: var(--muted); }
.db-hint { font-size: .85rem; margin: 0 0 12px; }

/* Séances du jour */
.db-seances { display: flex; flex-direction: column; }
.db-seance { display: flex; align-items: baseline; gap: 11px; padding: 8px; }
.db-seance:not(:last-child) { border-bottom: 1px solid var(--border); }
.db-seance:hover { background: var(--n-50); }
.db-time { flex: none; width: 100px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .8rem; color: var(--text); letter-spacing: -.2px; }
/* Filet vertical à la couleur de la matière (la maquette a remplacé la pastille ronde). */
/* Pastille ronde, comme avant la refonte : le filet vertical est le vocabulaire du cahier
 * journal, pas celui des listes du tableau de bord. */
.db-dot { flex: none; width: 14px; height: auto; align-self: center; min-height: 14px; border-radius: 3px; }
.db-seance-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.db-seance-title { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-niv { flex: none; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--r-sm); }
.db-check { flex: none; color: var(--ok); }
.db-wip { flex: none; color: var(--warn); }
.db-seance.is-done .db-seance-title { color: var(--muted); }
.db-ghost { opacity: .72; }
.db-cta { margin-top: 14px; }
.db-empty { text-align: center; padding: 26px 10px; color: var(--muted); }
.db-empty > svg { color: #cbd2e0; margin-bottom: 8px; }
.db-empty p { margin: 0 0 12px; }
.db-empty.sm { padding: 14px 6px; }

/* Obligations à venir (semaine courante) */
.db-when { width: auto; min-width: 96px; white-space: nowrap; }
.db-dur { flex: none; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-seance.db-today { background: var(--mod-soft, var(--accent-soft)); border-radius: var(--r-md); }
.db-seance.db-today .db-when { color: var(--mod, var(--accent)); }

/* Mémos */
.db-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--mod, var(--accent)); border-radius: var(--r-md); cursor: pointer; }
.db-icon-btn:hover { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod, var(--accent)); }
.db-memos { display: flex; flex-direction: column; gap: 10px; }
.db-memo { border: 1px solid; border-radius: var(--r-md); padding: 10px 12px 8px; }
.db-memo-txt { width: 100%; border: 0; background: transparent; resize: none; font: inherit; font-size: .9rem; color: var(--text); outline: none; field-sizing: content; min-height: 38px; line-height: 1.4; }
.db-memo-txt::placeholder { color: var(--n-400); }
.db-memo-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; opacity: 0; transition: opacity .12s ease; }
.db-memo:hover .db-memo-tools, .db-memo:focus-within .db-memo-tools { opacity: 1; }
.db-swatches { display: flex; gap: 5px; }
.db-swatch { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.db-swatch.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.db-memo-del { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; }
.db-memo-del svg { width: 12px; height: 12px; }
.db-memo-del:hover { background: rgba(0, 0, 0, .06); color: var(--danger); }
.db-memos-empty { text-align: center; font-size: .86rem; padding: 10px 0; margin: 0; }

@media (max-width: 900px) {
    .db-grid { grid-template-columns: 1fr; }
    .db-greeting { font-size: 1.4rem; }
}


/* ============================ Écrans d'auth (connexion / invitation) — thème « lin » ============================
 * Dérivé de la couleur dominante lin #efeadf (éclaircie / foncée selon l'usage). On conserve les
 * dégradés et le relief de l'ancien écran, en tons chauds ; l'accent orange (rappel du logo) est gardé. */
.auth-body {
    background: linear-gradient(150deg, #f7f4ed 0%, #efeadf 48%, #e6ddcc 100%);
}
.auth-card {
    background: linear-gradient(160deg, #fffefb 0%, #f6f1e7 48%, #efe8d9 100%);
    border: 1px solid rgba(110, 95, 60, .18);
    box-shadow: 0 24px 60px rgba(85, 70, 40, .26);
    color: #443e2d;
}
.auth-logo { height: 84px; margin-bottom: 18px; margin-left: -7.5px; }
.auth-title, .auth-accent { color: #3f3928; }
.auth-sub { color: #7c715a; }
.auth-sub a { color: #b5651d; text-decoration: underline; }
.auth-sub a:hover { color: #8a4d13; }
.auth-field { color: #6b6149; }
.auth-field input {
    background: #fffdf9;
    border: 1px solid #dbd2bf;
    color: #3f3a2e;
}
.auth-field input::placeholder { color: #a89e86; }
.auth-field input:focus { border-color: var(--accent-2); background: #fff; }
.auth-check { color: #6b6149; }
.auth-check input[type="checkbox"]:hover { border-color: var(--accent-2); }
.auth-check input[type="checkbox"]:checked { background: var(--accent-2); border-color: var(--accent-2); }
.auth-links { color: #8a7f66; }
.auth-link { color: #b5651d; }
.auth-submit { background: linear-gradient(180deg, #f0912f 0%, #e37d18 100%); color: #fff; padding: 10px 14px; font-size: .9rem; }
.auth-submit:hover { filter: brightness(1.05); }
.auth-error { background: #fdeceb; color: #a02724; border-color: #f2bfbc; }
.auth-info { background: #f8f0df; color: #8a6d2e; }
.auth-dev { background: #eef7ef; color: #2f7d4f; border-color: #bfe3c8; }
.auth-card code { background: #efe7d6; color: #443e2d; padding: 1px 5px; border-radius: 5px; }

/* Anniversaires (tableau de bord) */
.db-bdays { display: flex; flex-direction: column; }
.db-bday { display: flex; align-items: center; gap: 11px; padding: 9px 8px; }
.db-bday:not(:last-child) { border-bottom: 1px solid var(--border); }
.db-bday.db-today { background: var(--mod-soft, var(--accent-soft)); border-radius: var(--r-md); }
.db-avatar {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent));
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; overflow: hidden;
}
.db-bday-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.db-bday-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bday-age { font-size: .76rem; color: var(--muted); }
.db-bday-when { flex: none; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.db-bday-when.db-bday-today { color: var(--accent-2); font-weight: 700; }

/* To-do (tableau de bord) */
.db-todo-count { font-size: .76rem; font-weight: 700; color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.db-todo-add { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.db-todo-input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 11px; font: inherit; font-size: .9rem; color: var(--text); outline: none; background: var(--surface); }
.db-todo-input:focus { border-color: var(--mod, var(--accent)); }
.db-todos { display: flex; flex-direction: column; }
.db-todo { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.db-todo:not(:last-child) { border-bottom: 1px solid var(--border); }
.db-todo-check { flex: none; margin: 0; }
.db-todo-text { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--text); outline: none; padding: 3px 0; }
.db-todo-text:focus { box-shadow: inset 0 -1px 0 var(--mod, var(--accent)); }
.db-todo.is-done .db-todo-text { text-decoration: line-through; color: var(--muted); }
.db-todo-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; }
.db-todo-del svg { width: 12px; height: 12px; }
.db-todo:hover .db-todo-del, .db-todo:focus-within .db-todo-del { opacity: 1; }
.db-todo-del:hover { background: var(--danger-bd); color: var(--danger); }
.db-todo-empty { text-align: center; font-size: .86rem; padding: 8px 0; margin: 0; }

/* Modale « Gérer les étiquettes » : cadre autour de la liste (comme le popover du sélecteur) */
.etq-manage-box { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.etq-manage-box .etqpick-list { max-height: 52vh; }

/* Sélecteur d'item (titre-dropdown façon EDT) réutilisé dans les en-têtes de card
   (programmation, planning, budget, fiche) — taille adaptée au contexte card. */
.card-blk-head .edt-title-btn { font-size: 1.2rem; }

/* Programmation : ouvrir la modale d'édition d'un item au clic + drag des lignes de domaines */
.pg-clickable { cursor: pointer; }
.pg-perhead.pg-clickable:hover { filter: brightness(.97); }
.pg-perhead.pg-clickable:hover .pg-per-nom { text-decoration: underline; text-underline-offset: 3px; }
.pg-domband-inner { display: flex; align-items: center; gap: 8px; width: 100%; }
.pg-domband-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-domband-txt:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg-dom-drag { flex: none; display: inline-flex; align-items: center; color: inherit; opacity: .5; cursor: grab; line-height: 0; }
.pg-dom-drag:hover { opacity: 1; }
.pg-dom-drag:active { cursor: grabbing; }
.prog-grid.banded tbody.pg-dom-ghost { opacity: .45; }

/* Modale Domaines : nom affiché en texte (édition via le crayon → modale unique) */
.dom-name { flex: 1 1 150px; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.dom-name:hover { color: var(--mod, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }

/* ============================ Animations d'apparition des modales ============================ */
@keyframes ef-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ef-modal-pop  { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-back { animation: ef-modal-fade .16s ease-out; }
.modal-box  { animation: ef-modal-pop .24s cubic-bezier(.22, .9, .28, 1); }
@media (prefers-reduced-motion: reduce) {
    .modal-back, .modal-box { animation: none; }
}
/* Disparition douce des modales (transition de sortie Alpine, façon SweetAlert) :
   l'apparition reste gérée par les animations CSS ci-dessus ; seule la sortie est ajoutée. */
@keyframes ef-modal-hide { from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } to { transform: translate3d(0, -50px, 0) scale(.9); opacity: 0; } }
.ef-mleave { transition: background-color .15s; }
.ef-mleave-b { background-color: transparent; }
.ef-mleave .modal-box { animation: ef-modal-hide .15s forwards; }
@media (prefers-reduced-motion: reduce) { .ef-mleave, .ef-mleave .modal-box { animation: none; transition: none; } }

/* SweetAlert : même apparition douce que les modales de l'app (hors toasts) */
.swal2-container.swal2-backdrop-show { animation: ef-modal-fade .16s ease-out; }
.swal2-popup.swal2-show:not(.swal2-toast) { animation: ef-modal-pop .24s cubic-bezier(.22, .9, .28, 1); }
@media (prefers-reduced-motion: reduce) {
    .swal2-container.swal2-backdrop-show, .swal2-popup.swal2-show:not(.swal2-toast) { animation: none; }
}

/* ============ Auto-contraste : texte blanc sur fond personnalisé sombre ============ */
.pg-domband.on-dark,
.pg-domband.on-dark .pg-domband-txt { color: #fff; }
.pg-perhead.on-dark,
.pg-perhead.on-dark .pg-per-nom,
.pg-perhead.on-dark .pg-per-dates { color: #fff !important; }

/* ============ Croix de suppression des datepickers (flatpickr) ============ */
.fp-clear-wrap { position: relative; display: block; }
.fp-clear-wrap > .ef-input,
.fp-clear-wrap > input { width: 100%; }
.fp-clear-wrap.has-val > .ef-input,
.fp-clear-wrap.has-val > input { padding-right: 28px; }
.fp-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: none; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(100, 116, 139, .16); color: var(--n-600); cursor: pointer;
    line-height: 0; transition: background .15s, color .15s;
}
.fp-clear:hover { background: rgba(239, 68, 68, .16); color: var(--danger); }
.fp-clear-wrap.has-val .fp-clear { display: inline-flex; }
/* Programmation — conserver le dimensionnement des dates en flex après enveloppement */
.prog-per-line2 .fp-clear-wrap { flex: 0 0 128px; min-width: 0; }
@media print { .fp-clear { display: none !important; } }

/* ============ Champ horaire — icône horloge + timepicker custom ============ */
.ef-timepick-wrap { position: relative; display: block; }
.ef-timepick-wrap > input.ef-timepick { width: 100%; padding-right: 32px; }
.ef-timepick-ico {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--n-500); cursor: pointer; line-height: 0;
    transition: background .15s, color .15s;
}
.ef-timepick-ico:hover, .ef-timepick-ico.open { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.ef-tp-pop {
    position: fixed; z-index: 100060; display: none; gap: 8px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .20); padding: 8px;
}
.ef-tp-pop.open { display: flex; }
.ef-tp-col { display: flex; flex-direction: column; }
.ef-tp-col-h { font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--n-400); text-align: center; padding: 0 0 5px; }
.ef-tp-scroll { position: relative; width: 54px; max-height: 194px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px; }
.ef-tp-item { text-align: center; padding: 6px 0; font-size: .9rem; border-radius: var(--r-md); cursor: pointer; color: var(--text); user-select: none; }
.ef-tp-item:hover { background: var(--mod-soft, var(--accent-soft)); }
.ef-tp-item.sel { background: var(--mod, var(--accent)); color: #fff; font-weight: 700; }
@media print { .ef-timepick-ico, .ef-tp-pop { display: none !important; } }

/* ============ Bibliothèque / Documents partagés — deux volets ============ */
.dl-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
/* Card mutualisée (.card-blk) — ici on ne garde que le layout propre au panneau. */
.dl-tree { padding: 8px; margin-bottom: 0; }
.dl-tree-body { max-height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto; }
.dl-node, .dl-node-btn { max-width: 100%; box-sizing: border-box; }
.dl-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
/* Titre de la card « Dossiers » — même charte que les widgets d'accueil (texte foncé, icône colorée) */
.dl-tree-title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; text-transform: none; color: var(--text); }
.dl-tree-title svg { width: 19px; height: 19px; color: var(--mod, var(--accent)); flex: none; }
.dl-node { display: flex; align-items: center; gap: 1px; border-radius: var(--r-md); }
.dl-node.on { background: var(--mod-soft, var(--accent-soft)); }
.dl-node-main, .dl-node-btn { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; background: transparent; border: 0; padding: 6px; cursor: pointer; text-align: left; color: var(--text); font-size: .86rem; border-radius: var(--r-md); }
.dl-node-btn { width: 100%; }
.dl-node-main:hover, .dl-node-btn:hover { background: rgba(0, 0, 0, .035); }
.dl-node.on .dl-node-main, .dl-node.on .dl-node-btn { font-weight: 700; }
.dl-caret { background: transparent; border: 0; padding: 3px; cursor: pointer; color: var(--muted); display: inline-flex; line-height: 0; border-radius: var(--r-sm); }
.dl-caret:hover { background: rgba(0, 0, 0, .06); }
.dl-caret svg { transition: transform .12s ease; }
.dl-caret svg.open { transform: rotate(90deg); }
.dl-caret-spacer { width: 18px; flex: none; }
.dl-fico { flex: none; }
.dl-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }

.dl-main { padding: 14px 16px; margin-bottom: 0; min-height: 340px; container-type: inline-size; }
.dl-main.dl-dragover { outline: 2px dashed var(--mod, var(--accent)); outline-offset: -6px; }
.dl-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.dl-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 46px 12px; color: var(--mod, var(--accent)); font-weight: 700; border: 2px dashed var(--mod, var(--accent)); border-radius: var(--r-lg); background: var(--mod-soft, var(--accent-soft)); }
.dl-share-row { display: flex; gap: 8px; margin-top: 10px; }
.dl-share-row .ef-input { flex: 1; min-width: 0; }
.dl-shared-badge { display: inline-flex; vertical-align: middle; flex: none; color: var(--mod, var(--accent)); }
.sbtn.sbtn-on { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.btn-ghost.dl-revoke { color: var(--danger); }

@media (max-width: 820px) {
    .dl-wrap { grid-template-columns: 1fr; }
    .dl-tree { position: static; max-height: 260px; }
}

/* ============ Sélecteur de document (modale de rattachement PJ) ============ */
/* Modale en colonne flex : en-tête + corps scrollable + footer TOUJOURS visible (collant).
   Sinon, à largeur étroite (dp-cols height:auto) ou avec beaucoup de fichiers, le box grandissait
   et poussait « Joindre »/« Annuler » hors de la fenêtre (injoignables). */
.dp-box { max-width: 780px; width: 94vw; box-sizing: border-box; display: flex; flex-direction: column; height: min(86vh, 640px); max-height: 92dvh; overflow: hidden; }
.dp-box > .modal-head, .dp-box > .modal-actions { flex: none; }
.dp-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dp-body.dl-dragover { outline: 2px dashed var(--mod, var(--accent)); outline-offset: -6px; border-radius: var(--r-md); }
.dp-cols { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.dp-tree { max-height: none; height: 100%; min-height: 0; position: static; box-shadow: none; overflow: visible; display: flex; flex-direction: column; }
.dp-tree .dl-tree-body { flex: 1; min-height: 0; max-height: none; overflow: auto; }
.dp-files { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.dp-files > .dp-search, .dp-files > .dp-crumbs { flex: none; }
.dp-crumbs { margin-bottom: 8px; }
.dp-list { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Recherche globale dans le sélecteur de document */
.dp-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); }
.dp-search:focus-within { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.dp-search svg { flex: none; }
.dp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: .9rem; color: var(--text); }
.dp-search input::placeholder { color: var(--muted); }
.dp-search-clear { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.dp-search-res { font-weight: 600; color: var(--text); }
.dp-nom { display: flex; flex-direction: column; white-space: normal; }
.dp-nom-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-path { font-size: .74rem; color: var(--mod, var(--accent)); opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-row { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 0; border-radius: var(--r-md); padding: 8px; cursor: pointer; text-align: left; color: var(--text); font-size: .88rem; }
.dp-row:hover { background: rgba(0, 0, 0, .035); }
.dp-row.sel { background: var(--mod-soft, var(--accent-soft)); }
.dp-check { width: 18px; height: 18px; flex: none; border: 1.5px solid #cbd2e0; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.dp-row.sel .dp-check { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); }
.dp-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-size { flex: none; color: var(--muted); font-size: .78rem; }
.dp-folder .dp-check { border: 0; background: transparent; }
.dp-go { color: var(--muted); flex: none; }
.dp-dropzone { margin: 6px 0; }
@media (max-width: 640px) { .dp-cols { grid-template-columns: 1fr; height: auto; } .dp-tree { max-height: 180px; } }

/* ============ Modale « Ajouter une compétence » : PJ des compétences de la case ============ */
.prog-cell-pj { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); max-height: 24vh; overflow-y: auto; }
.prog-cell-pj .fiche-lbl { display: block; margin-bottom: 6px; }
.pcpj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; }
.pcpj-nom { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 600; order: 1; }
.pcpj-btn { flex: none; order: 2; }
.pcpj-pieces { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; order: 3; }

/* ============ Bibliothèque/Documents : multi-sélection + annotation drag&drop ============ */
.fm-check { flex: none; padding: 0 2px 0 8px; display: inline-flex; align-items: center; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.fm-row:hover .fm-check, .fm-row.fm-sel .fm-check, .dl-selecting .fm-check { opacity: 1; }
.fm-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--mod, var(--accent)); margin: 0; }
.fm-row.fm-sel { background: var(--mod-soft, var(--accent-soft)); }
/* Toolbar du dossier : filtre à la même hauteur que les boutons */
.dl-bar .el-toolbar { align-items: stretch; }
.fm-search { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; color: var(--muted); }
.fm-search:focus-within { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.fm-search svg { flex: none; }
.fm-search input { border: 0; outline: 0; background: none; font-size: .88rem; color: var(--text); width: 150px; max-width: 40vw; padding: 0; }
.fm-search input::placeholder { color: var(--muted); }
.fm-search-clear { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.15rem; line-height: 1; padding: 0 2px; }
.fm-search-clear:hover { color: var(--text); }
/* Dropdown « Importer » (fichiers / dossier) */
.dl-dd { position: relative; display: inline-flex; }
.dl-dd-caret { margin-left: 1px; }
.dl-dd-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 600; min-width: 252px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); display: flex; flex-direction: column; gap: 2px; }
.dl-dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: none; border: 0; border-radius: var(--r-md); cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text); text-align: left; white-space: nowrap; }
.dl-dd-item:hover { background: var(--bg); color: var(--mod, var(--accent)); }
.dl-dd-item svg { flex: none; color: var(--muted); }
.dl-dd-item:hover svg { color: var(--mod, var(--accent)); }
.dl-dd-note { display: flex; align-items: flex-start; gap: 9px; margin: 6px 2px 2px; padding: 10px 11px; background: var(--bg); border-radius: var(--r-md); font-size: .77rem; line-height: 1.4; color: var(--muted); white-space: normal; }
.dl-dd-note svg { flex: none; margin-top: 1px; color: var(--mod, var(--accent)); }
.dl-dd-note strong { color: var(--text); font-weight: 700; }
.dl-dd-sep { height: 1px; background: var(--border); margin: 6px 4px; }
/* Barre de progression d'import de dossier */
.dl-upbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px; background: var(--mod-soft, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--mod, var(--accent)) 30%, transparent); border-radius: var(--r-md); font-size: .88rem; font-weight: 600; color: var(--text); }
.dl-upbar .dl-spin { width: 18px; height: 18px; border-width: 2px; }
/* État vide unifié : pastille d'icône + titre + sous-texte, centré.
   .empty-state = générique (toutes les pages) ; .dl-empty = variante bibliothèque (plus haute). */
.empty-state, .dl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 240px; padding: 28px 16px; }
.dl-empty { min-height: 300px; }
.empty-state-badge, .dl-empty-badge { width: 74px; height: 74px; border-radius: 50%; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.empty-state-badge svg, .dl-empty-badge svg { flex: none; }
.empty-state-title, .dl-empty-title { margin: 0 0 3px; font-weight: 700; font-size: 1rem; color: var(--text); }
.empty-state-sub, .dl-empty-sub { margin: 0; font-size: .86rem; color: var(--muted); max-width: 460px; line-height: 1.45; }

/* Explorateur en colonnes : ☑ / Nom / Taille / Ajouté le / Actions */
.fm-explorer { margin-top: 25px; --fm-act: 160px; }
/* Largeur de la colonne Actions selon le nb de boutons du contexte → laisse plus de place au nom */
.fm-explorer.fm-etab { --fm-act: 112px; }   /* étab : éditer / télécharger / ⋯ (≤3 boutons) */
.fm-explorer.fm-perso { --fm-act: 180px; }  /* perso : favori / partage / éditer / télécharger / ⋯ (≤5) */
.fm-thead, .fm-explorer .fm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 100px 150px var(--fm-act); align-items: center; column-gap: 14px; }
.fm-thead { padding: 0 0 8px; margin-bottom: 4px; border-bottom: 2px solid var(--border); }
.fm-th { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: left; }
.fm-th:hover { color: var(--mod, var(--accent)); }
.fm-th--size, .fm-th--date { justify-content: flex-end; }
.fm-th--act { justify-content: flex-end; padding-right: 6px; cursor: default; }
.fm-th--act:hover { color: var(--muted); }
.fm-sort { font-size: .68rem; line-height: 1; transition: transform .12s ease; }
.fm-sort.desc { transform: rotate(180deg); }
.fm-cell-check { display: inline-flex; align-items: center; padding-left: 6px; cursor: pointer; }
.fm-cell-check input { width: 16px; height: 16px; accent-color: var(--mod, var(--accent)); cursor: pointer; margin: 0; }
.fm-cell-size, .fm-cell-date { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.fm-dash { color: var(--border); }
.fm-cell-actions { justify-content: flex-end; padding-right: 6px; }
.fm-rowmeta { display: none; font-size: .76rem; color: var(--muted); }

/* Recherche globale : input toolbar un peu plus large (placeholder long) */
.fm-search-global input { width: 250px; max-width: 46vw; }
/* Bandeau « Résultats pour … » (recherche globale active) */
.fm-crumbs-search { gap: 8px; color: var(--text); font-weight: 600; }
.fm-crumbs-search > svg { color: var(--mod, var(--accent)); flex: none; }
.fm-crumbs-search b { color: var(--mod, var(--accent)); }
.fm-search-count { color: var(--muted); font-weight: 500; }
.fm-crumb-back { background: none; border: 0; cursor: pointer; color: var(--mod, var(--accent)); font-size: .85rem; font-weight: 600; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.fm-crumb-back:hover { background: var(--mod-soft, var(--accent-soft)); }
/* En-tête « Nom » : bouton de tri + filtre inline dans la même cellule */
.fm-th-nom { display: flex; align-items: center; gap: 10px; cursor: default; }
.fm-th-nom:hover { color: var(--muted); }
.fm-th-sort { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.fm-th-sort:hover { color: var(--mod, var(--accent)); }
.fm-th-filter { display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0; max-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px 8px; color: var(--muted); transition: border-color .12s ease, color .12s ease; }
.fm-th-filter:focus-within, .fm-th-filter.active { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.fm-th-filter svg { flex: none; }
.fm-th-filter input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; padding: 0; font-size: .82rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--text); }
.fm-th-filter input::placeholder { color: var(--muted); }
.fm-th-filter-clear { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 1px; }
.fm-th-filter-clear:hover { color: var(--text); }
/* Chemin du dossier sous le nom (mode recherche globale) */
.fm-path { display: block; margin-top: 1px; font-size: .74rem; font-weight: 500; color: var(--mod, var(--accent)); opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Case + actions toujours présentes, atténuées au repos, pleine opacité au survol/sélection */
.fm-explorer .fm-row .fm-cell-check { opacity: .5; transition: opacity .12s ease; }
.fm-explorer .fm-cell-actions { opacity: .45; transition: opacity .12s ease; }
.fm-explorer .fm-row:hover .fm-cell-check,
.fm-explorer .fm-row:hover .fm-cell-actions,
.fm-explorer .fm-row.fm-sel .fm-cell-check,
.fm-explorer .fm-row.fm-sel .fm-cell-actions { opacity: 1; }
@media (hover: none), (pointer: coarse) {
    .fm-explorer .fm-row .fm-cell-check, .fm-explorer .fm-cell-actions { opacity: 1; }
}
@container (max-width: 720px) {
    .fm-thead, .fm-explorer .fm-row { grid-template-columns: 34px minmax(0, 1fr) 92px var(--fm-act); }
    .fm-cell-date, .fm-th--date { display: none; }
}
@container (max-width: 540px) {
    .fm-thead, .fm-explorer .fm-row { grid-template-columns: 32px minmax(0, 1fr) var(--fm-act); }
    .fm-cell-size, .fm-th--size { display: none; }
    .fm-rowmeta { display: block; }
    /* Boutons d'action compacts sur petit écran → colonne plus fine, nom plus large */
    .fm-explorer.fm-perso { --fm-act: 156px; }
    .fm-explorer .fm-cell-actions .sbtn { width: 28px; height: 28px; }
    .fm-explorer .fm-cell-actions { gap: 2px; }
}
.dl-selbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 10px; background: var(--mod-soft, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--mod, var(--accent)) 32%, transparent); border-radius: var(--r-md); }
.dl-selcount { font-size: .88rem; }
.dl-drop-note { font-size: .74rem; line-height: 1; color: var(--muted); font-weight: 500; margin-left: 8px; white-space: nowrap; align-self: center; transform: translateY(1.5px); }

/* Aperçu de fichier en modale */
.dl-prev-box { max-width: 920px; width: 100%; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; }
.dl-prev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-prev-body { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; }
.dl-prev-img { max-width: 100%; max-height: 74vh; max-height: 74dvh; object-fit: contain; border-radius: var(--r-sm); }
.dl-prev-frame { width: 100%; height: 74vh; height: 74dvh; border: 0; border-radius: var(--r-sm); background: #fff; }
.dl-prev-video { max-width: 100%; max-height: 74vh; max-height: 74dvh; width: auto; display: block; margin: auto; background: #000; border-radius: var(--r-md); }
.dl-prev-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 34px 24px; color: var(--n-400); }
.dl-prev-audio audio { width: 100%; max-width: 440px; }
/* PDF : modale agrandie + visionneuse en pleine hauteur (ajustée à la largeur via #view=FitH) */
.dl-prev-box.is-pdf { max-width: 1120px; height: 92vh; height: 92dvh; }
.dl-prev-box.is-pdf .dl-prev-body { padding: 0; border: 0; background: transparent; align-items: stretch; }
.dl-prev-box.is-pdf .dl-prev-frame { height: 100%; }
.dl-prev-none { text-align: center; padding: 40px 20px; color: var(--muted); }
.dl-prev-none svg { color: #cbd2e0; margin-bottom: 8px; }
.dl-prev-none p { margin: 0 0 14px; }
.dl-prev-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dl-prev-actions button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: .88rem; font-weight: 600; line-height: 1; border-radius: var(--r-md); }
.dl-prev-actions .btn-del { font-weight: 700; }
.dl-prev-actions svg { flex: none; }

/* Aperçu riche (docx / xlsx / zip), rendu client à la demande */
.dl-prev-body.is-rich { align-items: stretch; justify-content: flex-start; padding: 16px; }
.dl-prev-rich { width: 100%; }
.dl-prev-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 20px; color: var(--muted); }
.dl-spin { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--mod, var(--accent)); border-radius: 50%; animation: dlspin .7s linear infinite; }
@keyframes dlspin { to { transform: rotate(360deg); } }
.dl-prev-muted { color: var(--muted); }
/* .doc (ancien Word binaire) → bandeau « aperçu texte » au-dessus de la feuille */
.dl-doc-note { max-width: 720px; margin: 0 auto 12px; padding: 9px 14px; font-size: .82rem; line-height: 1.4; color: #7a5a12; background: #fdf3dc; border: 1px solid #f0dfae; border-radius: var(--r-md); }
/* docx → « feuille » lisible */
.dl-doc-html { max-width: 720px; margin: 0 auto; padding: 28px 34px; background: #fff; color: #1f2430; border-radius: var(--r-md); box-shadow: 0 1px 4px rgba(0, 0, 0, .06); line-height: 1.55; }
.dl-doc-html h1, .dl-doc-html h2, .dl-doc-html h3 { line-height: 1.25; margin: 1.1em 0 .4em; }
.dl-doc-html p { margin: 0 0 .7em; }
.dl-doc-html img { max-width: 100%; height: auto; }
.dl-doc-html table { border-collapse: collapse; width: 100%; margin: .6em 0; }
.dl-doc-html td, .dl-doc-html th { border: 1px solid #d7dbe3; padding: 5px 8px; vertical-align: top; }
/* xlsx → tableau */
.dl-xlsx-note { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.dl-xlsx-table { overflow: auto; max-width: 100%; }
.dl-xlsx-table table { border-collapse: collapse; font-size: .84rem; background: #fff; }
.dl-xlsx-table td, .dl-xlsx-table th { border: 1px solid #d7dbe3; padding: 4px 8px; white-space: nowrap; color: #1f2430; }
/* zip → liste du contenu */
.dl-zip-head { font-weight: 700; margin-bottom: 10px; }
.dl-zip-list { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.dl-zip-item { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: .88rem; word-break: break-all; }
.dl-zip-dir { color: var(--muted); font-weight: 600; }
.btn-del.btn-sm { padding: 6px 11px; font-size: .8rem; }

/* Liens légaux sous la carte de connexion */
.auth-legal {
    margin: 22px auto 0;
    text-align: center;
    font-size: .85rem;
    color: #6a6049;
}
.auth-legal a { color: #574e39; text-decoration: none; }
.auth-legal a:hover { color: #3f3928; text-decoration: underline; }

/* Aide contextuelle sous un champ de formulaire (modale de gestion des comptes) */
.u-hint {
    margin: -6px 0 14px;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--n-500);
}

/* Accès aux pages légales : dernier élément de la colonne de gauche, volontairement discret.
   .sidenav doit s'étendre pour que le « margin-top: auto » pousse bien le lien en bas. */
.sidenav { flex: 1 0 auto; }
.sep-legal { margin-top: auto; }
.sn-legal { opacity: .55; font-size: .88rem; }
.sn-legal:hover { opacity: 1; }
.sn-legal > svg { width: 17px; height: 17px; }

/* Bouton d'action destructive dans la liste des comptes */
.sbtn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* Avertissement sous un champ libre susceptible de recevoir des données sensibles */
.field-warn {
    margin: -6px 0 14px;
    padding: 9px 12px;
    border-left: 3px solid #f0b429;
    background: #fff8e6;
    border-radius: 0 6px 6px 0;
    font-size: .84rem;
    line-height: 1.5;
    color: #7a5b00;
}

/* Bloc « Origine des données » en pied de la page Programmes (administrateurs) */
.ps-block {
    margin: 22px 0 40px; padding: 0 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.ps-summary {
    display: flex; align-items: center; gap: 9px;
    padding: 14px 0; cursor: pointer; list-style: none;
    font-size: .92rem; font-weight: 600; color: var(--muted);
}
.ps-summary::-webkit-details-marker { display: none; }
.ps-summary:hover { color: var(--mod, var(--accent)); }
.ps-summary > svg { width: 17px; height: 17px; flex: none; }
.ps-block[open] .ps-summary { border-bottom: 1px solid var(--border); }
/* Millésime du texte d'origine, sur une ligne de l'arbre. Discret : il ne
   concerne qu'une partie des objectifs, et seulement jusqu'à leur remplacement. */
.tag-millesime {
    margin-left: 8px; padding: 1px 6px; border-radius: 4px;
    background: rgba(180, 130, 20, .13); color: #8a6410;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    vertical-align: middle; flex: none;
}

/* Nombre d'éléments d'un millésime, en regard de son intitulé. */
.ps-badge {
    margin-left: auto; padding: 2px 9px; border-radius: 999px;
    background: var(--chip-bg, rgba(2, 29, 86, .06));
    color: var(--muted); font-size: .78rem; font-weight: 600;
}
.ps-body { padding: 16px 0 20px; }
.ps-body p { margin: 0 0 12px; line-height: 1.6; font-size: .93rem; }
.ps-note { color: var(--muted); font-size: .88rem; }
.ps-form { max-width: 640px; margin: 18px 0; }
.ps-table { margin-top: 18px; }
.ps-url { font-size: .8rem; color: var(--muted); word-break: break-all; }
.ps-hash { font-size: .7rem; word-break: break-all; color: var(--muted); }

/* ============================ TABLETTE / TACTILE (pointeur grossier) ============================
   Sur les appareils sans survol fiable (tablettes) : révéler les actions cachées au :hover et
   agrandir les cibles trop petites au doigt. N'affecte PAS les postes à souris. */
@media (hover: none), (pointer: coarse) {

    /* — Actions révélées uniquement au survol → toujours visibles/actionnables au doigt — */
    .pe-actions,
    .fm-actions,
    .ods-entry-del,
    .db-memo-tools,
    .db-todo-del {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* Au tactile : pas de recouvrement du texte — le cluster repasse dans le flux, sur une 2e ligne.
       min-width sur le texte : sans ça il se réduit à 0 (min-width:0) et les actions ne wrapent jamais. */
    .pe-row { flex-wrap: wrap; }
    .pe-text { min-width: 60%; }
    .pe-actions { position: static; margin-left: auto; box-shadow: none; padding: 0; }
    .pe-actions .pe-clip, .pe-actions .pe-edit { padding: 4px; }

    /* (Info-bulles data-tip au tactile : gérées par ui.js via touchstart — plus de règle CSS.) */

    /* — Cibles tactiles agrandies (recommandé ≥ 40px, priorité aux actions destructives) — */
    .btn-mini { min-height: 40px; }
    .modal-close { width: 42px; height: 42px; font-size: 1.85rem; }
    .prog-move .sbtn { width: 34px; height: 26px; }
    .pe-status { width: 28px; height: 28px; }
    .pe-x { min-width: 40px; min-height: 34px; font-size: 1.3rem; }
    .pl-del { width: 38px; height: 38px; }
    .pl-addcol button { width: 40px; height: 40px; }
    .db-icon-btn { width: 40px; height: 40px; }
    .db-memo-del { width: 36px; height: 36px; }
    .db-swatch { width: 24px; height: 24px; }
    .jour-menu-btn { width: 40px; height: 40px; }
    .sbtn { width: 40px; height: 40px; }
    .grp-sw, .etq-swatch { width: 26px; height: 26px; }
    .pj-x { min-width: 34px; min-height: 34px; }
    .ptree-chev { padding: 8px; }
    .chev { width: 26px; height: 26px; }
    .jour-menu-btn svg, .sbtn svg { pointer-events: none; }

    /* — EDT : au doigt (pas de survol), les prises de tirette (séances + récrés) restent toujours
       visibles et la zone tactile est élargie. La prise elle-même est mutualisée en global. — */
    .tt-ev-resize, .tt-break-h { opacity: 1; height: 16px; }
    /* Le déplacement/redimensionnement pilote le geste (pas de scroll parasite).
       Le tap simple (édition) et le tap sur zone vide (création) restent possibles. */
    .tt-ev, .tt-ev-resize, .tt-break-h { touch-action: none; }

    /* Cahier journal : la barre d'actions flottante (survol) recouvrait le contenu au doigt.
       On la remet DANS LE FLUX, en bas de la carte, en barre pleine largeur toujours visible. */
    .seance-actions {
        position: static; transform: none; left: auto; right: auto; bottom: auto;
        margin: 12px -13px -12px; padding: 8px; justify-content: center; gap: 10px;
        border: 0; border-top: 1px solid var(--border); border-radius: 0;
        background: var(--bg); box-shadow: none; backdrop-filter: none;
        opacity: 1; pointer-events: auto;
    }

}

/* Programmations — grille fluide en responsive (les boutons tactiles agrandis écrasaient
   sinon le texte dans les colonnes étroites). Colonnes en fraction du viewport → ~2 périodes
   visibles en tablette portrait, ~3 en paysage, le reste au scroll horizontal (comme Teetsh). */
@media (max-width: 820px) {
    .prog-grid.banded { table-layout: auto; }
    .pg-cell, .prog-grid.banded thead th.pg-perhead { min-width: 44vw; }
}
@media (min-width: 821px) and (max-width: 1024px) {
    .prog-grid.banded { table-layout: auto; }
    .pg-cell, .prog-grid.banded thead th.pg-perhead { min-width: 28vw; }
}
/* Smartphone : vue « 1 période à la fois » (barre de nav ‹ Période › + une seule colonne).
   Placé APRÈS le bloc tablette ≤820px pour l'emporter à ≤640px (les 44vw/760px sinon gagnaient).
   Chaque domaine devient une carte : bandeau coloré + cellule de la période active. */
@media (max-width: 640px) {
    .prog-mobper { display: flex; align-items: stretch; gap: 10px; margin: 2px 0 14px; }
    .prog-mobper-nav { flex: none; width: 46px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
    .prog-mobper-nav:active { filter: brightness(.95); }
    .prog-mobper-cur { flex: 1; min-width: 0; border-radius: var(--r-lg); padding: 9px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: var(--shadow); }
    .prog-mobper-nom { font-weight: 800; font-size: 1.05rem; }
    .prog-mobper-dates { font-weight: 600; font-size: .76rem; opacity: .85; }
    .prog-grid-wrap { overflow-x: visible; }
    .prog-grid.banded { table-layout: auto; min-width: 0; border-spacing: 0; }
    .prog-grid, .prog-grid tbody, .prog-grid tr, .prog-grid td { display: block; width: 100%; min-width: 0; }
    .prog-grid .pg-cell, .prog-grid.banded thead th.pg-perhead, .pg-domband { min-width: 0; max-width: 100%; }
    .prog-grid thead { display: none; }
    .prog-grid .pg-cell { display: none; }
    .prog-grid .pg-cell.mob-on { display: block; }
    .prog-grid tbody.pg-domaine { margin-bottom: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
    .prog-grid tbody.pg-domaine td { border: 0; }
}

/* ===== Sélecteur d'étiquette léger (pastille + nom) — partials/etq_select_light.php ===== */
.etqsel { position: relative; }
.etqsel-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.etqsel-btn .etqsel-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etqsel-caret { flex: none; color: var(--muted); transition: transform .12s ease; }
.etqsel-btn[aria-expanded="true"] .etqsel-caret { transform: rotate(180deg); }
.etqsel-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset; }
.etqsel-dot-none { background: transparent !important; box-shadow: 0 0 0 1px var(--border) inset; }
.etqsel-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: 260px; overflow: auto; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 30px rgba(20, 20, 50, .18); }
.etqsel-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; border-radius: var(--r-sm); padding: 8px 9px; cursor: pointer; font-size: .92rem; color: var(--text); }
.etqsel-opt:hover { background: var(--bg); }
.etqsel-opt.sel { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-weight: 600; }
.etqsel-opt-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Favoris & récents (bibliothèque) : nœuds épinglés + étoile ===== */
.dl-node-pin .dl-fico-fav { color: var(--warn); }
.dl-node-pin .dl-fico-recent { color: var(--muted); }
.dl-node-pin.on .dl-fico-fav, .dl-node-pin.on .dl-fico-recent { color: inherit; }
.dl-node-pin + .dl-node:not(.dl-node-pin), .dl-node-pin:last-of-type { margin-bottom: 2px; }
.sbtn-fav.is-fav { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.sbtn-fav.is-fav:hover { color: #d97706; }

/* Menu « dupliquer / copier » d'une séance (téléporté hors de .seance qui a overflow:hidden) */
.seance-dup { display: inline-flex; }
.seance-dup-menu { min-width: 232px; }

/* Séances au même créneau horaire côte à côte (double niveau) — empilées si la colonne est étroite (semaine) */
.seance-slot { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.seance-slot > .seance { flex: 1 1 220px; min-width: 0; }

/* Impression : séances au même créneau horaire côte à côte (double niveau) */
.jx-slot { break-inside: avoid; }
.jx-slot-multi { display: flex; gap: 10px; align-items: flex-start; }
.jx-slot-multi > .jx-seance { flex: 1 1 0; min-width: 0; }
.jx-slot-multi > .jx-seance + .jx-seance { border-top: 0; }

/* ============ Partage établissement (plannings / obligations) & consultation Directeur ============ */
/* Bandeau « lecture seule » (item partagé d'un collègue / budget consulté par le directeur). */
.ro-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 14px; border-radius: var(--r-md); background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-size: .88rem; font-weight: 600; }
.ro-banner svg { flex: none; }
.ro-banner b { font-weight: 800; }
/* Puce « Partagé » sur un item que J'AI partagé. */
.share-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; background: var(--ok-bg); color: #15803d; vertical-align: middle; }
.share-chip.sm { font-size: .62rem; padding: 0 6px; margin-left: 5px; }
/* Mention « Partagé par X » sur un item reçu. */
.share-by { color: var(--mod, var(--accent)); font-weight: 600; }
.share-by b, .ods-shared-by b { font-weight: 800; }
.ods-shared-by { color: var(--mod, var(--accent)); font-weight: 600; white-space: nowrap; }

/* Obligations : cluster d'actions par entrée + item partagé reçu. */
.ods-entry-tools { flex: none; display: flex; align-items: center; gap: 6px; align-self: flex-start; }
.ods-share-btn { opacity: .35; transition: opacity .12s; }
.ods-entry:hover .ods-share-btn, .ods-share-btn.sbtn-on { opacity: 1; }
.ods-entry-ro { cursor: default; background: #fbfcff; }
.ods-entry-ro:hover { border-color: var(--border); box-shadow: none; }
.ods-entry-excl { opacity: .55; }
.ods-entry-excl .ods-entry-titre span:first-child { text-decoration: line-through; }
.ods-count { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none; }
/* Pas de surcharge de taille : on garde la case standard du site (18px), dont la coche ::after est calibrée. */

/* Budgets — sélecteur Directeur « Voir : … ». */
.bud-owner-sel { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bud-owner-sel .ef-input { width: auto; min-width: 150px; }
@media print { .ro-banner, .ods-entry-tools, .bud-owner-sel { display: none !important; } }

/* ---------- Responsabilités (grille élèves × responsabilités) ---------- */
.chk-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; color: var(--mod, var(--accent)); }
.resp-cycle-badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); }
.resp-weekbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.resp-wk-nav { border: 1px solid var(--border); background: var(--surface); color: var(--mod, var(--accent)); cursor: pointer; width: 32px; height: 32px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.resp-wk-nav:hover { border-color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.resp-week-lbl { font-size: .95rem; color: var(--fg, #1f2430); }
.resp-week-now { margin-left: 8px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #166534; background: var(--ok-bg); padding: 2px 8px; border-radius: 999px; }
.resp-today { border: 0; background: transparent; color: var(--mod, var(--accent)); font-size: .8rem; font-weight: 700; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); }
.resp-today:hover { background: var(--mod-soft, var(--accent-soft)); }

.resp-grid .resp-colhead { width: 58px; min-width: 58px; min-height: 172px; vertical-align: bottom; background: var(--n-50); padding: 24px 0 6px; position: relative; text-align: center; }
.resp-grid .resp-colhead.resp-col-done { background: var(--ok-bg); }
.resp-colhead-txt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 700; font-size: .82rem; line-height: 58px; margin: 0 auto 6px; max-height: 108px; overflow: hidden; }
.resp-col-actions { position: absolute; top: 3px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; opacity: 0; transition: opacity .12s; }
.resp-colhead:hover .resp-col-actions { opacity: 1; }
.resp-col-btn { border: none; background: transparent; color: var(--n-400); cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); display: inline-flex; align-items: center; font-size: 15px; line-height: 1; }
.resp-col-btn:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.resp-col-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.resp-badge { font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); background: #eef2f7; color: var(--n-500); white-space: nowrap; }
.resp-badge.full { background: var(--ok-bg); color: #166534; }
.resp-badge.cyc { background: #e7ecf5; color: var(--mod, var(--accent)); }

.resp-cell.on { background: var(--ok-bg); }
.resp-cell.done { background: #eef2f7 !important; cursor: default; }
.resp-cell-wk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .56rem; font-weight: 700; color: var(--n-400); pointer-events: none; }

/* ---------- Responsabilités : historique (modale) ---------- */
.resp-hist-body { max-height: 62vh; overflow-y: auto; }
.resp-hist-cycle { font-weight: 800; color: var(--mod, var(--accent)); font-size: 1rem; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--mod-soft, var(--accent-soft)); }
.resp-hist-cycle:first-child { margin-top: 0; }
.resp-hist-week { font-weight: 700; font-size: .85rem; color: var(--n-600); margin: 12px 0 4px; }
.resp-hist-line { display: flex; gap: 10px; padding: 4px 0 4px 12px; font-size: .88rem; align-items: baseline; }
.resp-hist-resp { flex: none; min-width: 160px; font-weight: 600; color: var(--mod, var(--accent)); }
.resp-hist-elv { color: var(--n-700); }

/* ---------- Responsabilités : suggestion (modale Valider/Relancer) ---------- */
.resp-sugg-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; min-height: 32px; }
.resp-sugg-chip { background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); font-weight: 700; font-size: .9rem; padding: 6px 13px; border-radius: 999px; }
.resp-col-sugg:hover { color: #7c3aed; background: #f3e8ff; }

/* ---------- Responsabilités : modale d'attribution globale (pré-validation) ---------- */
.resp-gs-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.resp-gs-row:last-child { border-bottom: 0; }
.resp-gs-name { flex: none; width: 190px; font-weight: 700; color: var(--mod, var(--accent)); }
.resp-gs-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.resp-gs-roll { flex: none; color: #7c3aed; }
.resp-gs-roll:hover { color: #7c3aed; background: #f3e8ff; }

/* Historique responsabilités : navigation semaine (flèches désactivées aux extrémités) */
.resp-wk-nav:disabled { opacity: .35; cursor: default; }
.resp-wk-nav:disabled:hover { border-color: var(--border); background: var(--surface); }
.resp-hist-week-body { min-height: 70px; padding: 4px 0; }

/* ============================ Partage binôme ============================ */
/* Chip de non-lus sur un item de menu simple (<a class="sn-item">) */
.sn-item-badged { position: relative; }
.sn-item-badged > .nav-badge { margin-left: auto; }
body.sb-collapsed .sidebar:not(.sb-expanded) .sn-item-badged > .nav-badge { position: absolute; top: 4px; right: 6px; margin: 0; box-shadow: 0 0 0 2px var(--surface); }

/* Deux volets = cards principales : réutilisent le gabarit générique .card-blk (liseré
 * d'intercalaire, coins, ombre, overflow) — classe posée dans le HTML. On annule seulement
 * padding/marge : le contenu interne (liste, mur, en-têtes) gère son espacement, et les
 * panneaux sont des colonnes flex pleine hauteur dans .bin. */
.bin { display: flex; gap: 14px; align-items: stretch; height: calc(100vh - 172px); }
.bin-list.card-blk, .bin-main.card-blk { padding: 0; margin-bottom: 0; }
.bin-list { flex: 0 0 320px; display: flex; flex-direction: column; }
/* Chip « Partagée avec … » dans la toolbar du page-head (reprend .bin-tag). */
.bin-share-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: .78rem; font-family: var(--font-body); }
/* Groupe de tête « titre + chip de partage » aligné à gauche : c'est lui le premier enfant
 * du .page-head (donc il porte le margin-right:auto qui repousse la toolbar à droite, et la
 * police de titre). Le chip garde sa propre taille/police (surcharges ci-dessus). */
.ph-lead { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.bin-search { padding: 12px 12px 8px; }
.bin-search .ef-input { width: 100%; }
.bin-threads { list-style: none; margin: 0; padding: 4px 12px; overflow-y: auto; flex: 1; }
.bin-th { padding: 9px 10px; border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent; }
.bin-th:hover { background: var(--mod-soft, var(--accent-soft)); }
.bin-th.is-on { background: var(--mod-soft, var(--accent-soft)); border-color: var(--mod, var(--accent)); }
.bin-th-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.bin-th-titre { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Présentation homogène : icône élève + nom en gras, puis titre éventuel en secondaire. */
.bin-th-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-th-obj { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--muted); }
.bin-th.has-unread .bin-th-titre { font-weight: 800; }
.bin-th-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-md); background: var(--mod, var(--accent)); color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.bin-th-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-th-sub-empty { font-style: italic; }
.bin-tag { flex: none; background: var(--mod-soft, var(--accent-soft)); color: var(--mod, var(--accent)); border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
/* Dossier nommé d'après l'élève (sans titre) : petite icône élève devant le nom */
.bin-eleve-ic { flex: none; color: var(--mod, var(--accent)); }
/* Mention « (optionnel) » discrète dans un label de champ */
.bin-field-opt { font-weight: 400; color: var(--muted); font-size: .82rem; }

.bin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bin-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; }
.bin-main-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bin-main-titre { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
/* Titre tronqué au besoin, sans s'étirer : le crayon « renommer » reste collé à sa fin. */
.bin-main-titre-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-back { display: none; background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px; }
.bin-th-del, .bin-msg-del { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 3px; border-radius: var(--r-sm); flex: none; }
.bin-th-del:hover, .bin-msg-del:hover { color: var(--danger); background: rgba(198, 40, 40, .08); }
.bin-th-act { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 3px; border-radius: var(--r-sm); flex: none; }
.bin-th-act:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }

/* Champs de saisie (titre / élève) — réutilisés dans la modale « Nouveau dossier » */
.bin-field { display: block; margin-bottom: 14px; }
.bin-field-lbl { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; }
.bin-field-hint { display: block; font-size: .76rem; color: var(--muted); margin-top: 4px; }

/* Mur de messages (du plus ancien au plus récent) */
.bin-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bin-wall { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bin-msg { display: flex; gap: 10px; align-items: flex-start; }
.bin-msg-av { flex: none; width: 34px; height: 34px; font-size: .8rem; }
.bin-msg-body { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 12px; }
.bin-msg.is-mine .bin-msg-body { background: var(--mod-soft, var(--accent-soft)); }
.bin-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.bin-msg-auteur { font-weight: 700; font-size: .84rem; }
.bin-msg-time { font-size: .74rem; color: var(--muted); }
.bin-msg-del { margin-left: auto; padding: 1px; }
.bin-msg-content { font-size: .92rem; line-height: 1.5; word-wrap: break-word; }
.bin-msg-content p { margin: 0 0 6px; }
.bin-msg-content p:last-child { margin-bottom: 0; }
.bin-msg-content ul, .bin-msg-content ol { margin: 4px 0; padding-left: 22px; }

/* Composer */
.bin-composer { border-top: 1px solid var(--border); padding: 10px 12px; }
.bin-composer-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* Responsive : un seul volet à la fois sur mobile/tablette */
@media (max-width: 820px) {
    .bin { height: auto; flex-direction: column; }
    .bin-list { flex-basis: auto; }
    .bin-back { display: inline-flex; }
    .bin-list--hidden-mobile { display: none; }
    .bin-main { display: none; }
    .bin-main--active-mobile { display: flex; min-height: calc(100vh - 120px); }
}
/* Images inline dans un message binôme */
.bin-msg-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 4px 0; }
.bin-msg-content figure.image { margin: 6px 0; max-width: 100%; }
.bin-msg-content figure.image img { display: block; }
/* Pièces jointes binôme */
.bin-file-input { display: none; }
.bin-attach-btn { display: inline-flex; align-items: center; gap: 6px; }
.bin-composer-actions { display: flex; align-items: center; gap: 8px; }
.bin-composer-spacer { flex: 1; }
.bin-staged { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bin-staged-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: .8rem; max-width: 280px; }
.bin-staged-chip.is-up { opacity: .6; }
.bin-staged-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-staged-size, .bin-staged-up { color: var(--muted); font-size: .74rem; flex: none; }
.bin-staged-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .82rem; line-height: 1; padding: 2px 5px; border-radius: 50%; flex: none; }
.bin-staged-x:hover { color: var(--danger); background: rgba(198, 40, 40, .1); }
/* PJ téléchargeables dans un message */
.bin-attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bin-attach { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 5px 10px; font-size: .82rem; color: var(--text); }
.bin-attach:hover { border-color: var(--mod, var(--accent)); color: var(--mod, var(--accent)); }
.bin-attach-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.bin-attach-size { color: var(--muted); font-size: .74rem; flex: none; }

/* ---- Compte-rendu : carte à en-tête (auteur + date), contenu pleine largeur ---- */
/* Item compte-rendu : reprend le gabarit générique .card-blk (liseré, coins, ombre,
 * overflow) — classe card-blk posée dans le HTML. On n'override que le padding et la
 * marge (en-tête et contenu gèrent leur propre espacement, le mur utilise un gap). */
.bin-cr.card-blk { padding: 0; margin-bottom: 0; min-width: 0; overflow: initial; }
/* Pas de liseré d'intercalaire sur les messages : les panneaux le portent déjà, ça suffit. */
.bin-cr.card-blk::before { content: none; }
/* flex-wrap : sur écran étroit, la pastille de date (nowrap) + les boutons ne tiennent pas
 * sur une ligne. Sans wrap, l'en-tête déborde la carte et overflow:hidden rogne les boutons
 * éditer/supprimer (inaccessibles). On les laisse passer à la ligne. */
.bin-cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 14px; background: var(--bg); border-bottom: 1px solid var(--border); }
.bin-cr.is-mine .bin-cr-head { background: var(--mod-soft, var(--accent-soft)); }
.bin-cr-av { flex: none; width: 34px; height: 34px; font-size: .8rem; }
.bin-cr-auteur { font-weight: 700; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-cr-when { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; box-shadow: 0 1px 2px rgba(20, 20, 50, .05); }
.bin-cr-cal { flex: none; color: var(--mod, var(--accent)); }
.bin-cr-jour { font-weight: 700; font-size: .9rem; color: var(--text); }
.bin-cr-heure { font-size: .74rem; color: var(--muted); }
.bin-cr-heure::before { content: '·'; margin-right: 5px; }
.bin-cr-edit, .bin-cr-del { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; border-radius: var(--r-sm); flex: none; }
.bin-cr-edit:hover { color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft)); }
.bin-cr-del:hover { color: var(--danger); background: rgba(198, 40, 40, .08); }
.bin-cr-content { padding: 12px 14px; font-size: .94rem; line-height: 1.55; overflow-wrap: anywhere; }
.bin-cr-content > *:first-child { margin-top: 0; }
.bin-cr-content > *:last-child { margin-bottom: 0; }
.bin-cr-content p { margin: 0 0 8px; }
.bin-cr-content h3 { font-size: 1.05rem; margin: 10px 0 6px; }
.bin-cr-content h4 { font-size: .98rem; margin: 10px 0 6px; }
.bin-cr-content ul, .bin-cr-content ol { margin: 4px 0; padding-left: 22px; }
.bin-cr-content blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); }
.bin-cr-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 6px 0; }
.bin-cr .bin-attach-list { padding: 0 14px 12px; margin-top: 0; }

/* Bouton « Ajouter un compte-rendu » (pied du fil) */
.bin-cr-add { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; justify-content: center; }
.bin-cr-add-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Modale grand éditeur */
.bin-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bin-modal-back { position: absolute; inset: 0; background: rgba(2, 29, 86, .45); }
.bin-modal-card { position: relative; background: var(--surface); border-radius: var(--r-lg); width: min(1120px, 96vw); height: 90vh; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(20, 20, 50, .3); overflow: hidden; }
.bin-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.bin-modal-titre { margin: 0; font-size: 1.05rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bin-modal-x { background: none; border: 0; cursor: pointer; font-size: 1.1rem; color: var(--muted); line-height: 1; padding: 4px 9px; border-radius: var(--r-md); }
.bin-modal-x:hover { background: var(--bg); }
/* Corps en flex : l'éditeur remplit toute la hauteur disponible ; les PJ restent dessous. */
.bin-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* En-tête du dossier (élève + titre) : deux colonnes, hauteur naturelle, seul l'éditeur grandit. */
.bin-modal-fields { flex: none; margin-bottom: 10px; }
.bin-fields-intro { margin: 0 0 12px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.bin-fields-intro strong { color: var(--text); font-weight: 700; }
.bin-fields-row { display: flex; gap: 14px; align-items: flex-start; }
.bin-fields-row .bin-field { flex: 1; min-width: 0; margin-bottom: 0; }
.bin-modal-fields .bin-field-hint { margin-top: 8px; }
.bin-cr-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bin-cr-editor .ck.ck-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bin-cr-editor .ck-editor__main { flex: 1; display: flex; min-height: 0; }
.bin-cr-editor .ck-editor__editable { flex: 1; min-height: 300px; overflow-y: auto; }
.bin-modal-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 640px) {
    .bin-modal { padding: 0; }
    .bin-modal-card { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
    .bin-cr-editor .ck-editor__editable { min-height: 240px; }
    .bin-fields-row { flex-direction: column; gap: 0; }
    .bin-fields-row .bin-field { margin-bottom: 12px; }
}
/* Feuille d'impression/export d'un dossier (cachée en UI, clonée dans la feuille A4 par efExport) */
.bin-print { display: none; color: #1a1a2e; }
.bin-print .bin-print-sub { color: #555; font-size: 12px; margin: -6px 0 16px; }
.bin-print-cr { border: 1px solid #d9dbe4; border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 12px; break-inside: avoid; page-break-inside: avoid; }
.bin-print-crhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid #eceef4; padding-bottom: 6px; margin-bottom: 8px; }
.bin-print-auteur { font-weight: 700; font-size: 13px; color: #021d56; }
.bin-print-date { color: #666; font-size: 12px; white-space: nowrap; }
.bin-print-content { font-size: 13px; line-height: 1.55; word-wrap: break-word; }
.bin-print-content > *:first-child { margin-top: 0; }
.bin-print-content > *:last-child { margin-bottom: 0; }
.bin-print-content p { margin: 0 0 8px; }
.bin-print-content ul, .bin-print-content ol { margin: 4px 0; padding-left: 22px; }
.bin-print-content img { max-width: 100%; height: auto; }
.bin-print-attach { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.bin-print-attach-item { font-size: 11px; color: #444; background: #f2f3f7; border: 1px solid #e0e2ea; border-radius: var(--r-sm); padding: 2px 8px; }
.bin-print-attach-item::before { content: '📎 '; }

/* Entête de card avec icône (standard uniformisé : icône accent + titre dans .card-blk-head) */
.cbh-title { display: inline-flex; align-items: center; gap: 9px; }
.cbh-ic { width: 20px; height: 20px; color: var(--mod, var(--accent)); flex: none; }

/* ===== Module Livrets / LSU ===== */
.lsu-shell { max-width: 1100px; margin: 0 auto; }
.lsu-note { background: var(--mod-soft, var(--accent-soft)); border-radius: var(--r-lg); padding: 12px 16px; font-size: .9rem; color: var(--text); margin: 4px 0 16px; line-height: 1.5; }
.lsu-warn { background: var(--warn-bg); border: 1px solid var(--warn-bg); color: #9a3412; border-radius: var(--r-md); padding: 9px 13px; font-size: .86rem; margin-bottom: 12px; }
.lsu-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mod, var(--accent)); color: #fff; font-size: .8rem; font-weight: 800; flex: none; }
.lsu-help { font-size: .86rem; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.lsu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin-bottom: 12px; }
.lsu-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lsu-field.lsu-field-wide { grid-column: 1 / -1; }
.lsu-field > label { font-size: .8rem; font-weight: 700; color: var(--text); }
.lsu-ro { padding: 8px 10px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--border); font-size: .9rem; color: var(--muted); }
.lsu-hint { font-size: .78rem; font-weight: 500; color: var(--muted); }
.lsu-radio { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; color: var(--text); cursor: pointer; }
.lsu-radio input { flex: none; }
.lsu-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.lsu-roster { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lsu-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lsu-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lsu-preview { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.lsu-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; margin: 12px 0; }
.lsu-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.pill-ok { background: var(--ok-bg) !important; color: #166534 !important; }
.lsu-report-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.lsu-report { width: 100%; border-collapse: collapse; font-size: .84rem; }
.lsu-report th { position: sticky; top: 0; background: var(--bg); text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--border); }
.lsu-report td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.lsu-report tr:last-child td { border-bottom: 0; }
.lsu-report .lsu-ine { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.lsu-report .lsu-a-maj-ine { background: var(--ok-bg); }
.lsu-report .lsu-a-creation { background: #eff6ff; }
.lsu-report .lsu-a-ignore { color: var(--muted); }
#lsu-import { transition: box-shadow .35s ease; }
#lsu-import.lsu-focus { box-shadow: 0 0 0 3px rgba(2, 29, 86, .22); }
.lsu-codes { display: flex; flex-direction: column; }
.lsu-code-row { display: grid; grid-template-columns: 1fr 130px auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.lsu-code-lib { font-size: .9rem; min-width: 0; }
.lsu-code-in { text-transform: uppercase; letter-spacing: .5px; }
.lsu-code-miss { font-size: .72rem; font-weight: 700; color: #b45309; background: var(--warn-bg); border-radius: var(--r-sm); padding: 2px 7px; white-space: nowrap; }
.lsu-per-edit { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.lsu-per-row { display: grid; grid-template-columns: 1fr 160px 160px; gap: 10px; }
.lsu-empty-periodes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 620px) { .lsu-per-row { grid-template-columns: 1fr; } }

/* ===== Saisie des bilans (Lot 2) ===== */
.bl-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 2px 14px; }
.bl-periodes { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.bl-chip.on { background: var(--mod, var(--accent)); border-color: var(--mod, var(--accent)); color: #fff; }
.bl-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-bareme-list { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.bl-bareme-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: .9rem; }
.bl-bareme-edit { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bl-bareme-lvl { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bl-fiche-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.bl-eleve-sel { max-width: 340px; }
.bl-sec-title { font-weight: 800; font-size: .95rem; color: var(--text); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.bl-sec-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.bl-acq-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) auto minmax(160px, 1.4fr); align-items: center; gap: 10px 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.bl-acq-disc { font-weight: 600; font-size: .9rem; min-width: 0; }
.bl-acq-input { display: flex; align-items: center; gap: 6px; }
.bl-acq-appr { font-size: .84rem; }
.bl-lvl { display: inline-flex; gap: 4px; }
.bl-lvl-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); font-weight: 800; font-size: .85rem; cursor: pointer; }
.bl-lvl-btn.lv1.on { background: #e5484d; border-color: #e5484d; color: #fff; }
.bl-lvl-btn.lv2.on { background: #f2a400; border-color: #f2a400; color: #fff; }
.bl-lvl-btn.lv3.on { background: #9ac13c; border-color: #9ac13c; color: #fff; }
.bl-lvl-btn.lv4.on { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.bl-ne { width: 30px; height: 30px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); border-radius: var(--r-md); font-size: 1rem; line-height: 1; cursor: pointer; }
.bl-ne.on { background: var(--n-500); border-color: var(--n-500); color: #fff; }
.bl-num-wrap { display: inline-flex; align-items: center; gap: 6px; }
.bl-num { width: 74px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 8px; font-size: .9rem; background: var(--surface); color: var(--text); outline: none; }
.bl-num:disabled { opacity: .5; }
.bl-num-max { font-size: .82rem; color: var(--muted); }
.bl-socle-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.bl-socle-lib { font-size: .88rem; }
.bl-count { text-align: right; margin-top: 3px; }
.bl-parcours { margin-bottom: 10px; }
.bl-parcours > label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 4px; }
.bl-grille-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.bl-grille-nom { font-weight: 600; font-size: .9rem; }
@media (max-width: 680px) {
    .bl-acq-row { grid-template-columns: 1fr; gap: 6px; }
    .bl-eleve-sel { max-width: none; width: 100%; }
}
/* Version imprimable du bilan (famille) — masquée à l'écran ; à l'impression, seule elle reste visible.
   Scopée à body.page-bilans pour ne pas perturber l'impression des autres pages. */
.bl-print { display: none; }
.bl-print-title { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.bl-print-meta { font-size: .95rem; margin-top: 4px; line-height: 1.5; }
.bl-print-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 12px; }
.bl-print-tbl th, .bl-print-tbl td { border: 1px solid #888; padding: 5px 8px; text-align: left; vertical-align: top; }
.bl-print-tbl th { background: #eee; }
.bl-print-sec { margin-top: 14px; page-break-inside: avoid; }
.bl-print-sec h4 { margin: 0 0 4px; font-size: 1rem; }
@media print {
    body.page-bilans * { visibility: hidden; }
    body.page-bilans .bl-print, body.page-bilans .bl-print * { visibility: visible; }
    body.page-bilans .bl-print { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 10px 14px; }
}

/* ============================ BARRE LATÉRALE FONCÉE ============================
 * Fond « Encre » de la maquette. Seuls les tokens --sb-* sont redéfinis : le contenu,
 * la barre du haut et les cards restent en clair.
 * ============================================================================== */
body.theme-dark {
    --sb-bg: #242b29; --sb-fg: #a6b0aa; --sb-strong: #ffffff;
    --sb-bg-grad: linear-gradient(180deg, #39433f 0%, #272e2c 45%, #171c1a 100%);
    --sb-hover: rgba(255, 255, 255, .08);
    /* L'onglet actif prend le fond du contenu : il « sort » du panneau foncé. */
    --sb-active-bg: var(--bg); --sb-active-fg: #2C2C2C;
    --sb-line: rgba(255, 255, 255, .13); --sb-rail: rgba(255, 255, 255, .2);
    --sb-ctx-bg: rgba(255, 255, 255, .07); --sb-ctx-sub: rgba(255, 255, 255, .6);
    --sb-badge: #e2701f;
    --sb-btn-bg: rgba(255, 255, 255, .06);
    --sb-shadow: none;          /* pas d'ombre portée sur fond foncé */
    --sep-c: transparent;
}
/* Le sous-menu de l'onglet ouvert repose sur le fond clair : son texte doit suivre. */
body.theme-dark .nav-group:has(.nav-parent.active) .nav-sub a { color: #5b6472; }
body.theme-dark .nav-group:has(.nav-parent.active) .nav-sub a:hover,
body.theme-dark .nav-group:has(.nav-parent.active) .nav-sub a.active {
    color: #2C2C2C; background: rgba(0, 0, 0, .05);
}
/* Logo : version encre sur barre claire, version blanche sur barre foncée.
 * Sélecteurs préfixés par .sidebar : sans ça, « .sidebar .brand-logo { display: block } »
 * (spécificité 0,2,0) écrase le display:none et les deux logos s'affichent côte à côte. */
.sidebar .brand-logo-dark { display: none; }
body.theme-dark .sidebar .brand-logo-light { display: none; }
body.theme-dark .sidebar .brand-logo-dark { display: block; }

/* ============================ DENSITÉ « LARGE » ============================
 * Confort d'affichage : projection au tableau, grand écran, ou simple préférence.
 * L'essentiel passe par la taille de police racine — la feuille étant en rem,
 * tout suit proportionnellement, y compris les écrans non listés ici.
 * ========================================================================== */
body.dens-large { font-size: 17.5px; }
/* Réagencement — c'est ce qui distingue « Large » d'un simple zoom : les grilles
 * perdent une ou deux colonnes, les blocs s'empilent, chaque élément gagne en surface.
 * Sur les grilles auto-fit il suffit d'élargir le minimum : le nombre de colonnes suit. */
body.dens-large .db-grid { grid-template-columns: 1fr; }          /* tableau de bord sur une colonne */
body.dens-large .grid2 { grid-template-columns: 1fr; }
body.dens-large .ods-board { grid-template-columns: repeat(2, 1fr); }
body.dens-large .bud-stats { grid-template-columns: repeat(2, 1fr); }
/* Nombre de colonnes FIXE et non auto-fit : avec 3 ou 4 jours seulement, un auto-fit
 * les affiche déjà tous de front sur un écran large, et « Large » ne changerait rien.
 * En dessous de 1100 px, l'auto-fit d'origine reprend la main. */
@media (min-width: 1100px) {
    body.dens-large .jour-cols.mode-semaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.dens-large .jour-cols.mode-2jours { grid-template-columns: minmax(0, 1fr); }
}
body.dens-large .cal-cols { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
body.dens-large .trombi { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
body.dens-large .stat-cards { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
body.dens-large .prog-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
body.dens-large .imp-edt-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
body.dens-large .lsu-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
body.dens-large .lsu-map { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Cibles cliquables : elles ont des paddings en px, donc à reprendre à la main. */
body.dens-large .btn-white,
body.dens-large .btn-green,
body.dens-large .btn-primary { padding: 11px 18px; }
body.dens-large .seg button { padding: 10px 17px; }
body.dens-large .sn-item { padding: 12px 14px 12px 19px; }
body.dens-large .nav-sub a { padding: 9px 11px 9px 41px; }
body.dens-large .cs-btn { min-height: 40px; padding: 8px 14px; }
body.dens-large .nav-avatar { width: 38px; height: 38px; }
body.dens-large .card-blk { padding: 22px 24px; }
body.dens-large .fil-jour { padding: 7px 15px; }
body.dens-large .db-seance { padding: 14px 8px; }
body.dens-large .el { padding: 14px 16px; }
body.dens-large .ia { width: 36px; height: 36px; }

/* ============================ RÉGLAGES D'AFFICHAGE (popover) ============================ */
.sb-prefs { position: relative; flex: none; }
.sb-prefs-btn {
    /* Mêmes tokens que .sb-toggle, son voisin : --sb-btn-* n'existait que dans le bloc
       sombre, donc en clair la var() n'était pas résolue et la bordure disparaissait. */
    flex: none; background: var(--sb-btn-bg); border: 1px solid var(--sb-line); color: var(--sb-fg);
    cursor: pointer; padding: 6px; border-radius: var(--r-md); line-height: 0;
}
.sb-prefs-btn:hover { background: var(--sb-hover); color: var(--sb-strong); border-color: var(--sb-rail); }
.sb-prefs-btn[aria-expanded="true"] { background: var(--sb-hover); color: var(--sb-strong); }
.sb-prefs-pop {
    /* fixed et non absolute : la barre latérale a overflow-x: hidden (nécessaire au repli)
       et clippait le popover. */
    position: fixed; top: 58px; left: 12px; z-index: 70; width: 232px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-float); padding: 13px; color: var(--text);
}
.sb-prefs-pop h4 {
    margin: 0 0 7px; font-family: var(--font-title); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.sb-prefs-pop h4 + .sb-prefs-opts { margin-bottom: 14px; }
.sb-prefs-opts { display: flex; flex-direction: column; gap: 4px; }
.sb-prefs-opts button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    border: 1px solid transparent; background: transparent; color: var(--text);
    border-radius: var(--r-md); padding: 8px 10px; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.sb-prefs-opts button:hover { background: var(--mod-soft, var(--accent-soft)); }
.sb-prefs-opts button.on {
    background: var(--mod-soft, var(--accent-soft));
    border-color: var(--mod-line, var(--border));
    font-weight: 600;
}
.sb-prefs-opts button i {
    flex: none; width: 15px; height: 15px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--pv, var(--surface));
}
.sb-prefs-opts button .ck { margin-left: auto; opacity: 0; color: var(--mod, var(--accent)); }
.sb-prefs-opts button.on .ck { opacity: 1; }

/* Boutons d'ajout du cahier journal : contour pointillé, comme dans la maquette —
 * ils proposent une action de création, pas une action sur un contenu existant. */
.btn-white.jce-btn { border-style: dashed; }
.btn-white.jce-btn:hover { border-style: solid; }

/* Bibliothèque et documents partagés : les deux panneaux sont des cards standard
 * (classe .card-blk) → liseré d'intercalaire, coins hauts droits et ombre mutualisés. */
.dl-tree-head { padding-top: 10px; }

/* ============================ SÉANCES — disposition de la maquette ============================
 * Horaire en colonne à gauche, filet vertical à la couleur de la matière, puis le contenu.
 * Le bandeau plein coloré est remplacé par un libellé de matière en petites capitales.
 * ============================================================================================ */
/* Une séance = une boîte, coiffée d'un liseré à la couleur de la matière — en écho au
 * liseré d'intercalaire qui coiffe la card du jour. Le filet de 1 px qui séparait deux
 * séances jouait au même rang graphique que les filets internes des blocs (Déroulé,
 * Matériel…) : l'œil ne trouvait plus la limite entre deux séances. La barre verticale
 * du corps ne bouge pas pour autant — elle reste le repère de lecture, le liseré ne fait
 * qu'annoncer la découpe. */
.jour-col .seance {
    display: flex; align-items: stretch; gap: 11px;
    background: var(--surface); box-shadow: none;
    border: 1px solid var(--border);
    border-top: 2px solid var(--et, var(--mod, var(--accent)));
    border-radius: 2px 2px var(--r-lg) var(--r-lg);
    padding: 8px 12px 9px;
    margin-bottom: 10px;
}

/* L'obligation de service tombe dans le même fil que les séances : elle en reprend la
 * boîte et le liseré de tête, à sa propre couleur de catégorie. Son filet gauche n'aurait
 * plus fait que doubler le repère au mauvais endroit. */
.jour-col .seance-ods {
    margin: 0 0 10px;
    border: 1px solid var(--border);
    border-top: 2px solid var(--oc, var(--n-500));
    border-radius: 2px 2px var(--r-lg) var(--r-lg);
    background: var(--surface);
}

.seance-h {
    flex: none; width: 54px; display: flex; flex-direction: column; gap: 1px;
    font-size: .79rem; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums; padding-top: 1px;
}
.seance-h .seance-h2 { font-weight: 500; opacity: .7; }
.seance-h .seance-dur { font-size: .72rem; font-weight: 500; margin-top: 3px; }
.seance-corps {
    flex: 1; min-width: 0;
    border-left: 3px solid var(--et, var(--mod, var(--accent)));
    border-radius: 2px; padding-left: 11px;
}
/* Le bandeau devient une ligne de tête : matière en capitales colorées, état à droite. */
.jour-col .seance-bar {
    background: none; color: inherit; padding: 0 0 2px; gap: 8px;
    border-radius: 0; min-height: 0;
}
/* Le niveau (CE2, CM1) se lit dans la colonne des horaires, sous la durée : c'est une donnée
 * de cadrage de la séance, au même titre que l'heure, et le regard la trouve toujours au même
 * endroit quelle que soit la longueur du libellé. L'étiquette de matière garde ainsi son
 * libellé pour seul contenu — le texte doit rester le contenu DIRECT de .seance-bar-t, sans
 * quoi la césure automatique (hyphens: auto, plus bas) ne s'y applique plus. */
.jour-col .seance-h .seance-niv {
    align-self: flex-start; margin-top: 5px;
    background: var(--n-100); color: var(--n-600); border: 0;
    border-radius: 999px; padding: 1px 7px;
    font-size: .64rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.jour-col .seance-state {
    background: none; border: 1px solid var(--border); color: var(--muted);
    font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.jour-col .seance-body { padding: 0; }
.jour-col .seance-inti {
    /* Titre de la seance : c'est le contenu qu'on lit en premier dans la colonne. */
    display: inline-block;
    color: var(--text-fort, var(--text)); font-size: .96rem; font-weight: 700; line-height: 1.24;
    /* Seul l'etat reste hors flux en haut a droite. */
    padding-right: 0;
}
.jour-col .seance-actions { position: static; margin-top: 8px; background: none; }

/* Actions d'une séance : dans le flux, sans encadré, et en pointillé comme les boutons
 * d'ajout. Elles ne sont plus révélées au survol — l'encadré flottant (fond, bordure,
 * ombre) n'avait plus de sens une fois les séances passées en lignes. */
.jour-col .seance-actions {
    position: static; margin-top: 8px; padding: 0;
    background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible;
}
.jour-col .seance-actions .sbtn {
    width: 28px; height: 28px;
    background: none; border-style: dashed; color: var(--n-400);
}
.jour-col .seance-actions .sbtn:hover {
    border-style: solid;
    border-color: var(--mod, var(--accent));
    color: var(--mod, var(--accent));
    background: var(--mod-soft, var(--accent-soft));
}

/* En colonne étroite, le libellé de matière était tronqué par l'étiquette de niveau.
 * Il peut désormais passer à la ligne, et le niveau descend sur sa propre ligne :
 * le pseudo-élément d'ordre 8 est lui-même un flex item, il force le retour. */
.jour-col .seance-bar { flex-wrap: wrap; row-gap: 3px; }

/* Nom de la matière en étiquette pleine. La couleur du texte vient de --et-fg, que le
 * template calcule avec efTextOn() (ui.js) : blanc sur fond sombre, encre sinon —
 * indispensable, les couleurs de matières allant du #eceff1 au #bf360c. */
.jour-col .seance-bar-t {
    flex: 0 1 auto;
    background: var(--et, var(--mod, var(--accent)));
    color: var(--et-fg, #fff);
    padding: 5px 7.5px 4px;
    border-radius: var(--r-sm);
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    white-space: normal; overflow: visible; text-overflow: clip;
    /* Les noms de matières sont souvent un seul long mot (« MATHÉMATIQUES ») :
       sans césure autorisée, le mot déborde et se fait rogner en colonne étroite. */
    hyphens: auto; overflow-wrap: break-word;
    /* Evite d'isoler une lettre seule en fin de mot (« MATHEMATIQUE-S ») :
       au moins 6 caracteres pour cesurer, 3 avant et 3 apres. */
    hyphenate-limit-chars: 6 3 3;
    min-width: 0; line-height: 1.25; text-align: left;
}

/* Une URL collée dans un déroulé est un mot que rien ne permet de couper : elle dépasse la
 * boîte, et comme .seance porte overflow: hidden, la fin du lien disparaît purement et
 * simplement. « anywhere » plutôt que « break-word » : lui seul entre aussi dans le calcul de
 * la largeur min-content, donc empêche le corps de séance de réclamer la largeur du plus long
 * lien. La propriété étant héritée, elle couvre tout le contenu de la séance — déroulé,
 * observations, éléments de programme, noms de pièces jointes. */
.jour-col .seance-body { overflow-wrap: anywhere; }

/* ================= INTERSTICES — récréations, pause méridienne =================
 * Une pause n'est pas un item du fil, c'est ce qui sépare deux blocs de travail : ni boîte,
 * ni liseré de matière, ni bouton d'état (le template le masque déjà sur is_break). Reste une
 * ligne posée sur un filet qui traverse la colonne, et les actions — éditer, dupliquer,
 * supprimer restent utiles — révélées au survol.
 * `display: contents` sur le corps et le body fait remonter l'étiquette et les actions au
 * rang d'items du flex de la séance : les deux filets peuvent alors les encadrer. */
.jour-col .seance.is-break {
    display: flex; align-items: center; gap: 9px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 4px 0 10px;
    /* La ligne doit au moins faire la hauteur des boutons, sinon ils débordent
     * de part et d'autre et les cards voisines les rognent. */
    min-height: 26px;
}
.jour-col .seance.is-break::before,
.jour-col .seance.is-break::after {
    content: ""; flex: 1 1 0; min-width: 10px; height: 1px; background: var(--n-300);
}
.jour-col .seance.is-break .seance-corps,
.jour-col .seance.is-break .seance-body { display: contents; }

/* Horaire : sur une ligne, et sans la durée en troisième étage. */
.jour-col .seance.is-break .seance-h {
    flex: 0 0 auto; width: auto; flex-direction: row; align-items: baseline; gap: 4px;
    font-size: .72rem; font-weight: 600; color: var(--n-500); padding: 0;
}
.jour-col .seance.is-break .seance-h2::before { content: "–"; margin-right: 3px; }
.jour-col .seance.is-break .seance-dur { margin-top: 0; font-size: .72rem; }
.jour-col .seance.is-break .seance-dur::before { content: "·"; margin-right: 4px; color: var(--n-400); }

/* Libellé : plus d'étiquette pleine, la couleur ne sert plus à distinguer une matière. */
.jour-col .seance.is-break .seance-bar { flex: 0 0 auto; padding: 0; }
.jour-col .seance.is-break .seance-bar-t {
    background: none; color: var(--n-500); padding: 0; border-radius: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.jour-col .seance.is-break .seance-bar-t::before {
    content: "·"; margin-right: 5px; color: var(--n-400); font-weight: 400; letter-spacing: 0;
}
.jour-col .seance.is-break .seance-niv { display: none; }

/* Actions : dans le flux, en bout de ligne — le filet s'arrête à leur hauteur. L'`order`
 * les fait passer APRÈS le second filet, alors qu'en DOM elles précèdent le pseudo-élément. */
.jour-col .seance.is-break .seance-actions {
    position: static; order: 2; flex: 0 0 auto; margin: 0; padding: 0;
    opacity: 1; visibility: visible;
}
.jour-col .seance.is-break::after { order: 1; }
.jour-col .seance.is-break .seance-actions .sbtn { width: 24px; height: 24px; }

/* Vue semaine : la colonne est trop étroite pour l'heure de fin — le filet s'y réduisait à
 * deux tirets. On garde l'heure de début et la durée, qui disent la même chose en plus court. */
.jour-cols.mode-semaine .seance.is-break .seance-h2 { display: none; }

/* Deux séances sur le même créneau : elles s'écartaient de 26 px, sans quoi le texte de
 * gauche venait toucher le filet de droite. Chacune étant désormais dans sa boîte, la
 * surcharge n'a plus lieu d'être — le gap commun de .seance-slot (10 px) s'applique, et
 * répond à l'écart vertical entre deux séances. */

/* L'état « Fait / À faire » sort du flux de l'étiquette : ainsi il est toujours au même
 * endroit, en haut à droite, quelle que soit la longueur du nom de matière. Avant, une
 * étiquette longue le renvoyait à la ligne et deux séances voisines n'étaient plus alignées. */
.jour-col .seance-corps { position: relative; }
.jour-col .seance-bar { padding-right: 66px; }
.jour-col .seance-bar-sp { display: none; }
.jour-col .seance-state {
    position: absolute; top: 3px; right: 0; z-index: 1;
}

/* La ligne de titre ne porte plus que l'intitulé (le niveau est passé dans l'étiquette de
 * matière) : en bloc, pour que le titre dispose de toute la largeur. */
.jour-col .seance-titre-ligne { display: block; }

/* Vue semaine seulement : les colonnes sont trop etroites pour le libelle de l'etat.
 * On ne garde que la coche — le bouton reste annonce par son aria-label et son infobulle.
 * La zone reservee a droite se resserre d'autant. */
.jour-cols.mode-semaine .seance-state > span { display: none; }
.jour-cols.mode-semaine .seance-state { padding: 4px 6px; }
.jour-cols.mode-semaine .seance-bar { padding-right: 40px; }

/* Une seance faite etait estompee par « opacity: .8 » sur tout le bloc — ce qui delavait
 * aussi l'etiquette de matiere et le filet, alors que ces reperes de couleur doivent rester
 * fiables (deux seances de la meme matiere paraissaient de couleurs differentes).
 * On estompe le texte, on garde les reperes a pleine intensite : le badge « Fait » suffit. */

/* Bouton d'etat de la seance. Une seule declaration : elle etait eclatee en trois.
 * Coche « fait » = vert plein et texte blanc, pour se reperer d'un coup d'oeil dans la
 * colonne. C'est ce badge qui porte l'information, plus aucun estompage du bloc. */
.jour-col .seance-state {
    position: absolute; top: 3px; right: 0; z-index: 1;
    background: none; border: 1px solid var(--border); color: var(--muted);
    font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
/* Etat « fait » en vert pale, texte fonce. Valeurs fixes plutot que color-mix() :
 * equivalents exacts de color-mix(--ok 12%, #fff) et color-mix(--ok 26%, #eceef1),
 * mais color-mix n'est pas supporte partout et une var() invalide au calcul
 * reinitialise la propriete au lieu de retomber sur un repli. */
.jour-col .seance-state.done {
    background: #e6eeea;
    border-color: #bacec7;
    color: var(--ok);
}
/* Coche plus grasse : l'attribut stroke-width du SVG (2.5) est ecrase par le CSS. */
.jour-col .seance-state svg { stroke-width: 3.4; }
.jour-col .seance-state.done svg { opacity: 1; stroke-width: 3.6; }

/* Troisieme etat, « A finir » : seance entamee, a reprendre. Ambre, entre le neutre (a faire)
 * et le vert (fait) — memes valeurs fixes que ci-dessus, pour la meme raison. Le pictogramme
 * est un disque a moitie plein ; lui seul reste en vue semaine, ou le libelle est masque. */
.seance-state.wip, .jour-col .seance-state.wip { background: var(--warn-bg); border-color: #ecd3ae; color: var(--warn); }
.seance-state.wip svg, .jour-col .seance-state.wip svg { opacity: 1; stroke-width: 2.6; }
/* Le bouton garde son positionnement absolu : l'enveloppe (qui porte le menu) ne fait pas de boite. */
.seance-state-wrap { display: contents; }
/* Menu des trois etats, teleporte dans <body> : place en fixe sous le bouton (top/right calcules). */
.seance-state-menu { position: fixed; z-index: 1200; left: auto; bottom: auto; min-width: 150px; }
.etat-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--n-400); box-sizing: border-box; }
.etat-dot.wip { border-color: var(--warn); background: linear-gradient(90deg, transparent 50%, var(--warn) 50%); }
.etat-dot.done { border-color: var(--ok); background: var(--ok); }

/* Creneau double (deux seances a la meme heure, cote a cote) : on intervertit en glissant une
 * seance par sa colonne d'horaire. Poignee annoncee au curseur ; fantome estompe pendant le glisser. */
.seance-slot-multi .seance-h { cursor: grab; }
.seance-slot-multi .seance-h:active { cursor: grabbing; }
.seance-ghost { opacity: .4; }
/* …ou en un clic : bouton ⇄ dans la colonne d'horaire de la carte de droite — donc juste à côté
 * de celle avec laquelle il l'échange. Pointillé, comme les autres actions de séance. */
.seance-swap {
    align-self: flex-start; margin-top: 8px; width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px dashed var(--n-400); border-radius: var(--r-md);
    color: var(--n-500); cursor: pointer;
}
.seance-swap:hover, .seance-swap:focus-visible {
    border-style: solid; border-color: var(--mod, var(--accent));
    color: var(--mod, var(--accent)); background: var(--mod-soft, var(--accent-soft));
}
.seance-swap svg { width: 15px; height: 15px; pointer-events: none; }

/* Intitules de bloc (DEROULE, MATERIEL, OBSERVATIONS...) : renforcement de l'encre seul.
 * --muted donnait 5,2:1 sur le fond de card, --n-600 monte a 7,2:1. Les variantes avec
 * filet colore ou pastille ont ete essayees et ecartees : elles ajoutaient un motif
 * repete a chaque bloc, en concurrence avec l'etiquette de matiere. */
/* L'intitule adopte la police du texte qui suit — meme taille, casse normale, pas
 * d'interlettrage — et se distingue par le gras. Il coiffe sa rubrique sur sa
 * propre ligne, le contenu reprenant en dessous. */
.jour-col .ro-lbl {
    font-size: .88rem; font-weight: 700;
    text-transform: none; letter-spacing: 0;
    color: var(--text-fort, var(--text));
}

/* Intitule sur sa propre ligne, le contenu de la rubrique reprenant en dessous :
 *   DEROULE
 *   Recuperer les documents…
 * L'intitule reste un repere de debut de rubrique, sans souligne ni puce. */
.jour-col .ro-block { margin-top: 7px; }
.jour-col .ro-lbl { display: block; margin-bottom: 2px; }
/* Chevron d'accroche devant l'intitule. SVG masque plutot qu'un caractere : « ▸ » est
 * un glyphe geometrique absent de Public Sans, donc rendu par une police de repli — lourd
 * et mal aligne. Le masque prend currentColor, donc l'icone suit la couleur et le theme. */
.jour-col .ro-lbl::before {
    content: ""; display: inline-block;
    width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px;
    background: currentColor; color: var(--text-fort, var(--text));
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 6L8 2L10 2L16 8L10 14L8 14L8 10L0 10L0 6L8 6Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 6L8 2L10 2L16 8L10 14L8 14L8 10L0 10L0 6L8 6Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.jour-col .ro-txt { display: block; }
.jour-col .ro-html { display: block; }
.jour-col .ro-html > p:first-child { margin-top: 0; }


/* ======================= Calendrier (page + widget du tableau de bord) — FullCalendar, thème lin ======================= */
.cal-period { font-weight: 700; font-size: 1.02rem; color: var(--text); text-transform: capitalize; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: .8rem; color: var(--muted); }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cal-leg-ods .cal-leg-dot { background: var(--surface); border: 1px solid var(--muted); border-left-width: 3px; }
.cal-leg-vac .cal-leg-dot { background: repeating-linear-gradient(135deg, var(--n-300) 0 2px, var(--n-100) 2px 4px); }
.cal-tip { margin: 10px 0 0; }
.cal-host, .db-cal-host {
    --fc-border-color: var(--border); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--n-100);
    --fc-today-bg-color: var(--mod-soft); --fc-now-indicator-color: var(--mod, var(--accent)); --fc-highlight-color: var(--mod-soft);
    --fc-small-font-size: .78rem; --fc-list-event-hover-bg-color: var(--n-100); --fc-event-border-color: transparent;
}
.fc { font-family: inherit; }
.fc-theme-standard .fc-scrollgrid { border-radius: var(--r-lg); overflow: hidden; }
.fc .fc-col-header-cell-cushion { text-transform: capitalize; font-weight: 700; font-size: .8rem; color: var(--n-700); padding: 7px 4px; text-decoration: none; }
.fc .fc-daygrid-day { cursor: pointer; }
.fc .fc-daygrid-day-number { color: var(--muted); font-size: .8rem; padding: 5px 7px; text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--mod, var(--accent)); font-weight: 800; }
.fc .fc-day-other .fc-daygrid-day-top { opacity: .45; }
.fc .fc-timegrid-slot { height: 1.9em; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { color: var(--muted); font-size: .76rem; }
.fc .fc-event { border-radius: var(--r-sm); font-size: .78rem; cursor: pointer; }
.fc .fc-daygrid-block-event { padding: 1px 5px; }
.fc .fc-event-title { font-weight: 600; }
/* obligations de service : lecture seule, en « carte » neutre à liseré coloré */
.fc .fc-event.ef-fc-ods { background: var(--surface) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--oc) !important; }
.fc .fc-event.ef-fc-ods .fc-event-main, .fc .fc-event.ef-fc-ods .fc-event-title, .fc .fc-event.ef-fc-ods .fc-event-time { color: var(--text) !important; }
/* partagé par un collègue : même couleur, atténué et en italique */
.fc .fc-event.ef-fc-shared { opacity: .8; font-style: italic; }
.fc .ef-fc-vac { background: repeating-linear-gradient(135deg, rgba(114, 106, 93, .10) 0 6px, transparent 6px 12px); opacity: 1; }
.fc .ef-fc-ferie { background: var(--mod-soft); opacity: 1; }
.fc .fc-bg-event .fc-event-title { margin: 2px 5px 0; font-size: .68rem; font-weight: 600; font-style: normal; color: var(--muted); }
.fc .fc-more-link { color: var(--mod, var(--accent)); font-weight: 700; font-size: .75rem; }
.fc .fc-popover { border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.fc .fc-popover-header { background: var(--n-100); font-weight: 700; text-transform: capitalize; }
.fc .fc-list-day-cushion { background: var(--n-100) !important; text-transform: capitalize; }
.fc .fc-list-event-dot { border-color: var(--oc, var(--mod)); }
/* modale événement */
.cal-modal .modal-title { display: flex; align-items: center; gap: 10px; }
.cal-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.cal-fs:disabled .ef-input, .cal-fs:disabled textarea { background: var(--n-50); }
.cal-types { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-type { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--n-700); font-size: .83rem; font-weight: 600; cursor: pointer; }
.cal-type:hover { border-color: var(--tc); }
.cal-type.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--tc); }
.cal-fs:disabled .cal-type { cursor: default; }
.cal-chks { display: flex; flex-wrap: wrap; gap: 0 18px; }
.cal-chks .chk { margin-bottom: 12px; }
/* widget du tableau de bord */
.db-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 10px; }
.db-cal-nav { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.db-cal-nav .btn-nav { width: 28px; height: 28px; font-size: 1.1rem; }
.db-cal-title { font-weight: 700; font-size: .84rem; color: var(--text); text-transform: capitalize; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-cal-bar .seg button { padding: 4px 9px; font-size: .74rem; }
/* mois, widget ÉTROIT (.is-compact) = mini-calendrier : pastilles centrées sous le numéro du jour. ⚠ FullCalendar pose `.fc`
   SUR l'hôte (pas dessous) et injecte sa CSS après app.css → sélecteurs `.db-cal-host.fc …` */
.db-cal-host.is-compact.fc .fc-daygrid-day-frame { min-height: 0; }
.db-cal-host.is-compact.fc .fc-daygrid-day-top { justify-content: center; }
.db-cal-host.is-compact.fc .fc-daygrid-day-number { padding: 4px 0 1px; }
.db-cal-host.is-compact.fc .fc-daygrid-body .fc-daygrid-day-events { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; min-height: 9px; margin: 0 2px 5px; }
.db-cal-host.is-compact.fc .fc-daygrid-event-harness { margin: 0; }
.db-cal-host.is-compact.fc .fc-daygrid-event { background: transparent; border: 0; padding: 0; margin: 0; }
.db-cal-dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.db-cal-host.fc .fc-list { border-radius: var(--r-md); font-size: .82rem; }
/* événements horaires en vue mois : « ● heure » puis le titre dessous, pleine largeur, 2 lignes max
   (au lieu d'une seule ligne coupée net) — page Calendrier + widget large */
.fc .fc-daygrid-dot-event { flex-wrap: wrap; align-items: center; row-gap: 0; }
.fc .fc-daygrid-dot-event .fc-event-time { flex: none; font-weight: 700; }
.fc .fc-daygrid-dot-event .fc-event-title { flex: 1 0 100%; padding-left: 3px; white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc .fc-daygrid-block-event .fc-event-title { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* widget du tableau de bord : police des événements un peu réduite → plus de lettres par case */
.db-cal-host.fc .fc-daygrid-event, .db-cal-host.fc .fc-list-event { font-size: .7rem; }

/* ======================= Cahier journal — grille horaire (Jour / 2 jours / Semaine) =======================
 * Les séances sont les MÊMES cartes que la liste (liseré de matière, colonne d'horaire, étiquette
 * pleine, pastille d'état), posées à leur heure et hautes de leur durée. Une seule grille CSS pour
 * tous les jours affichés : rangée 1 les têtes de jour, rangée 2 l'échelle horaire, rangée 3 les
 * bilans — ainsi les journées restent alignées sur la même heure quelle que soit la hauteur de
 * leur tête (bandeau d'obligations, vacances…). */
.seg-vue button { display: inline-flex; align-items: center; gap: 6px; }
.seg-vue svg { flex: none; }
/* Téléphone : avec la bascule Liste / Grille, la barre de droite ne tient plus sur une ligne —
 * elle passe à la ligne au lieu de rogner le bouton Exporter. */
@media (max-width: 640px) { .jour-right { flex-wrap: wrap; row-gap: 8px; } }

.jour-col.jg-cal {
    display: grid; grid-template-columns: 46px repeat(var(--jg-n, 1), minmax(170px, 1fr));
    column-gap: 10px; align-items: start;
    /* Semaine sur petit écran : on fait défiler les jours plutôt que de les écraser. */
    overflow-x: auto; overflow-y: hidden; border-radius: 0;
}
.jour-col.jg-cal.mode-jour { max-width: 910px; margin: 0 auto; }
.jg-corner { grid-row: 1; grid-column: 1; }
/* Au-dessus de l'échelle : le menu « Actions du jour » s'y déroule. */
.jg-head { grid-row: 1; min-width: 0; position: relative; z-index: 4; padding-bottom: 10px; }
.jg-head .jour-col-head { margin-bottom: 0; }
.jg-head .ods-panel, .jg-head .jour-vacances { margin-top: 8px; margin-bottom: 0; }
.jg-foot { grid-row: 3; min-width: 0; padding-top: 12px; }

/* Échelle : collée à gauche quand les jours défilent. */
.jg-axis { grid-row: 2; grid-column: 1; position: sticky; left: 0; z-index: 5; background: var(--bg); }
.jg-tick {
    position: absolute; right: 4px; transform: translateY(-50%);
    font-size: .72rem; font-weight: 600; line-height: 1; color: var(--n-500);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jg-tick.is-major { color: var(--text-fort, var(--text)); font-weight: 800; }
.jg-tick.is-first { transform: none; }
.jg-tick.is-last { transform: translateY(-100%); }

.jg-body { grid-row: 2; position: relative; min-width: 0; touch-action: pan-x pan-y; }
/* Fond de colonne à peine marqué : la journée se lit comme une bande, sans cadre. */
.jg-body::before { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .45; border-radius: var(--r-lg); pointer-events: none; }
.jg-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--n-200); pointer-events: none; }
.jg-line.is-major { border-top-style: solid; border-top-color: var(--n-300); }

/* Pauses : hachures légères + libellé, comme le filet de pause de la liste. */
.jg-band {
    position: absolute; left: 0; right: 0; z-index: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, var(--n-100) 0 6px, transparent 6px 12px);
    border-radius: var(--r-md);
}
.jg-band.is-edit { cursor: pointer; }
.jg-band-lbl {
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--n-500);
    background: var(--surface); padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 8px);
}

.jg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; }
.jg-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.jg-ghost {
    position: absolute; left: 2px; right: 2px; z-index: 3; pointer-events: none;
    background: var(--mod-soft, var(--accent-soft)); border: 1.5px dashed var(--mod, var(--accent)); border-radius: var(--r-md);
    display: flex; align-items: flex-start; justify-content: center;
    font-size: .74rem; font-weight: 700; color: var(--mod, var(--accent)); padding-top: 3px; box-sizing: border-box;
}
/* Journée vide : les boutons de la liste (récupérer depuis l'EDT…), posés en haut de la colonne. */
.jg-vide { position: absolute; top: 10px; left: 6px; right: 6px; z-index: 2; }
.jg-vide .jour-col-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-lg); }

/* --- La carte de séance dans la grille --- */
.jour-col .seance.jg-ev {
    position: absolute; margin: 0; box-sizing: border-box; z-index: 1;
    cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    container-type: inline-size;
    transition: box-shadow .12s ease;
}
.jour-col .seance.jg-ev:hover { z-index: 2; box-shadow: 0 4px 12px rgba(20, 20, 50, .12); }
.jour-col .seance.jg-ev:focus-visible { outline: 2px solid var(--mod, var(--accent)); outline-offset: 1px; }
.jour-col .seance.jg-ev.is-dragging { z-index: 6; cursor: grabbing; box-shadow: 0 10px 24px rgba(20, 20, 50, .24); }
.jg-ev img { -webkit-user-drag: none; }
/* Contenu plus long que le créneau : fondu en bas plutôt qu'une coupe franche. */
.jour-col .seance.jg-ev::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
    background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none;
}
.jg-niv { display: none; }

/* Poignée de durée : le bas de la carte. Révélée au survol, toujours visible au doigt. */
.jg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; z-index: 3; cursor: ns-resize; touch-action: none; }
.jg-resize::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
    width: 28px; height: 4px; border-radius: 3px; background: var(--n-400);
    opacity: 0; transition: opacity .12s ease;
}
.jg-ev:hover .jg-resize::after, .jg-ev.is-dragging .jg-resize::after { opacity: 1; }

/* Actions (éditer, ajouter, copier, supprimer) : flottantes en bas à droite, au survol. */
.jour-col .jg-ev .seance-actions {
    position: absolute; right: 6px; bottom: 8px; z-index: 4; margin: 0; padding: 3px 4px; gap: 4px !important;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 2px 8px rgba(20, 20, 50, .14);
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.jour-col .jg-ev:hover .seance-actions, .jour-col .jg-ev:focus-within .seance-actions { opacity: 1; pointer-events: auto; }
.jour-col .jg-ev.is-dragging .seance-actions { opacity: 0; pointer-events: none; }
.jour-col .jg-ev .seance-actions .sbtn { width: 26px; height: 26px; }

/* Créneau moyen (≈ 15 à 25 min) : carte resserrée. */
.jour-col .seance.jg-ev.jg-m { padding: 5px 10px 5px; }
/* Créneau court (moins d'un quart d'heure) : tout sur une ligne — heure, niveau, matière, titre. */
.jour-col .seance.jg-ev.jg-s { padding: 2px 8px; align-items: center; gap: 8px; }
.jour-col .seance.jg-ev.jg-s::after { display: none; }
.jour-col .jg-s .seance-h { flex-direction: row; align-items: center; gap: 6px; width: auto; padding: 0; }
.jour-col .jg-s .seance-h2, .jour-col .jg-s .seance-dur { display: none; }
.jour-col .jg-s .seance-h .seance-niv { margin-top: 0; }
.jour-col .jg-s .seance-corps { display: flex; align-items: center; gap: 8px; align-self: stretch; padding-left: 8px; padding-right: 30px; }
.jour-col .jg-s .seance-bar { flex: none; padding: 0; }
.jour-col .jg-s .seance-bar-t { padding: 3px 6px 2px; font-size: .6rem; white-space: nowrap; }
.jour-col .jg-s .seance-body { flex: 1; min-width: 0; }
.jour-col .jg-s .seance-inti { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jour-col .jg-s .ro-block, .jour-col .jg-s .seance-pj { display: none; }
.jour-col .jg-s .seance-state > span { display: none; }
.jour-col .jg-s .seance-state { padding: 2px 5px; top: 50%; transform: translateY(-50%); }
.jour-col .jg-ev.jg-s .seance-actions { bottom: 50%; transform: translateY(50%); }

/* Carte étroite (semaine, double niveau) : l'échelle donne déjà l'heure, la colonne d'horaire
 * s'efface et le niveau rejoint l'étiquette de matière ; l'état se réduit à son pictogramme. */
@container (max-width: 250px) {
    .jour-col .jg-ev .seance-h { display: none; }
    .jour-col .jg-ev .jg-niv {
        display: inline-block; align-self: center;
        background: var(--n-100); color: var(--n-600); border-radius: 999px; padding: 1px 7px;
        font-size: .64rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
    }
    .jour-col .jg-ev .seance-corps { padding-left: 8px; }
    .jour-col .jg-ev .seance-bar { padding-right: 30px; }
    .jour-col .jg-ev .seance-state > span { display: none; }
    .jour-col .jg-ev .seance-state { padding: 2px 5px; }
    .jour-col .jg-ev.jg-s .seance-corps { padding-left: 6px; }
}
/* Très étroite (cours double en semaine sur téléphone) : la matière tient sur une ligne,
 * tronquée — sinon « MATHÉMATIQUES » s'empilait lettre par lettre. État et actions s'effacent :
 * un toucher ouvre la séance. */
@container (max-width: 140px) {
    .jour-col .jg-ev .seance-bar { padding-right: 0; }
    .jour-col .jg-ev .seance-bar-t { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; hyphens: none; }
    .jour-col .jg-ev .seance-state, .jour-col .jg-ev .seance-actions { display: none; }
}

/* Obligation / événement horodaté dans la grille : la boîte de la liste, compacte. */
.jour-col .seance-ods.jg-ods {
    position: absolute; margin: 0; z-index: 1; box-sizing: border-box; overflow: hidden;
    align-items: flex-start; gap: 7px; padding: 3px 8px;
}
.jg-ods .seance-ods-time { min-width: 0; font-size: .74rem; }
.jg-ods .seance-ods-title { font-size: .8rem; }
.jg-ods .seance-ods-cat { font-size: .68rem; }

@media (hover: none), (pointer: coarse) {
    .jg-resize { height: 16px; }
    .jg-resize::after { opacity: .8; }
    /* Pas de survol au doigt : les actions restent visibles sur les cartes assez hautes. */
    .jour-col .jg-ev.jg-l .seance-actions { opacity: 1; pointer-events: auto; }
}

/* ======================= Cahier journal — lecture seule (classe partagée) =======================
 * Chacun ne modifie que ses jours de présence ; ceux du binôme, visibles quand le journal est
 * partagé, se consultent seulement. Le serveur refuse l'écriture (ef_assert_journal_date) :
 * l'écran se contente de ne plus proposer les actions, et de dire pourquoi. */
.jour-ro {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 8px 0 4px; padding: 7px 12px; border-radius: var(--r-md);
    background: var(--n-100); color: var(--n-600); font-size: .82rem; font-weight: 600;
}
.jour-ro svg { flex: none; }
.jour-ro-alerte {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r-md);
    background: var(--warn-bg); border: 1px solid #ecd3ae; color: var(--text); font-size: .88rem;
}
.jour-ro-alerte svg { flex: none; color: var(--warn); }
.jour-ro-alerte span { flex: 1 1 260px; }
/* État affiché mais non modifiable : ni survol, ni curseur de bouton. */
.seance-state:disabled { cursor: default; pointer-events: none; }
.jour-col .seance.jg-ev.is-ro, .jg-body.is-ro { cursor: default; }

/* ======================= Fiche élève : onglets Fiche / Suivi extérieur / Suivi scolaire ======================= */
/* .ef-tabs = composant d'onglets commun (mêmes règles que .abs-tabs, page Absences) */
.ef-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.fiche-tabs { flex: none; margin: -4px 0 14px; }
/* Suivi extérieur */
.sx { border: 0; padding: 0; margin: 0; min-width: 0; }
.sx-list { display: flex; flex-direction: column; gap: 8px; }
.sx-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; background: var(--surface); }
.sx-item.is-on { border-color: var(--mod-line, var(--border)); background: var(--mod-soft, var(--n-50)); }
.sx-check { margin-bottom: 0; font-weight: 600; }
.sx-com { margin-top: 8px; }
.sx-ro { margin: 4px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.6; }
.sx-none { margin: 12px 0 0; }
/* Suivi scolaire (cartes et modale = module binôme) */
.ss-intro { margin: 0 0 12px; font-size: .84rem; color: var(--muted); }
.ss-wall { display: flex; flex-direction: column; gap: 12px; }
.ss .bin-cr-add { border-top: 0; padding: 14px 0 4px; }
.ss .empty-state { min-height: 180px; }
.bin-cr-dossier { flex: none; background: var(--n-100); color: var(--n-700); border-radius: 999px; padding: 1px 9px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) { .fiche-tabs { gap: 6px; } .fiche-tabs button { padding: 6px 10px; font-size: .8rem; } }