/* ── Variables ── */
:root {
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #22263a;
  --border: #2e3250;
  --text: #e4e6f0;
  --muted: #6b7099;
  --primary: #4f6ef7;
  --primary-dark: #3a57e8;
  --success: #27ae60;
  --danger: #e74c3c;
  --warning: #f39c12;
  --orange: #e67e22;
  --sidebar-w: 230px;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); display: block; min-height: 100vh; font-size: 14px; }

/* ── Bandeau supérieur (barre de navigation) ── */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  background: #000; border-bottom: 1px solid var(--border); padding: 10px 20px;
  position: sticky; top: 0; z-index: 100; }
.topbar-left { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--primary); justify-self: start; }
.topbar-left i { font-size: 20px; }
.topbar-logo { height: 28px; width: auto; display: block; }
.ia-cost-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: #ffd166; background: rgba(255,209,102,0.1); border: 1px solid rgba(255,209,102,0.35);
  border-radius: 12px; padding: 3px 10px; font-variant-numeric: tabular-nums; cursor: default; }
.ia-cost-badge i { font-size: 12px; }
/* Dernier envoi groupe : en sourdine a cote du cumul, comme dans le Dictaphone. */
.ia-cost-badge--lot { color: #9aa3b2; background: rgba(154,163,178,0.10);
  border-color: rgba(154,163,178,0.30); font-weight: 500; }
.topbar-nav { display: flex; align-items: center; gap: 12px; justify-self: center; flex-wrap: wrap; }
.topbar-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px;
  color: var(--text); background: var(--bg2); border: 1px solid var(--border); text-decoration: none; font-weight: 600; transition: all .15s; white-space: nowrap; }
.topbar-btn:hover { border-color: var(--primary); color: #fff; }
.topbar-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.topbar-btn-spaced { margin-left: 140px; }
.topbar-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.topbar-pagename { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; }
.topbar-right .annee-select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: 13px; font-weight: 600; padding: 6px 10px; cursor: pointer; }
.topbar-right .annee-add { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-radius: 6px; text-decoration: none; }
.topbar-right .annee-add:hover { background: var(--primary-dark); }
.topbar-right .db-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; text-decoration: none; cursor: pointer; }
.topbar-right .db-btn:hover { background: var(--bg3); border-color: var(--primary); color: var(--primary); }
.topbar-right .db-btn-danger:hover { border-color: #e74c3c; color: #e74c3c; }
.topbar-right form { margin: 0; }

/* ── Main ── */
.main-content { padding: 24px; max-width: 100%; }

/* ── Page header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.page-header h1 i { color: var(--primary); }
.header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-header.page-header-eleve { display: grid; grid-template-columns: 1fr auto 1fr; }
.page-header.page-header-eleve .eleve-pager { justify-self: center; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-header.page-header-eleve .header-actions { justify-self: end; }
@media (max-width: 700px) {
  .page-header.page-header-eleve { display: flex; flex-direction: column; align-items: stretch; }
  .page-header.page-header-eleve .eleve-pager { justify-content: center; }
  .page-header.page-header-eleve .header-actions { justify-content: flex-end; }
}
.badge-annee { background: var(--primary); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 20px; margin-left: 10px; }

/* ── Alerts ── */
.alert { background: var(--bg3); border-left: 4px solid var(--primary); padding: 10px 16px; border-radius: var(--radius); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.alert-success { border-color: var(--success); }
.alert-danger { border-color: var(--danger); }
.alert-warning { border-color: var(--warning); }
.alert-info { border-color: var(--primary); }
.alert button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: all .15s; white-space: nowrap; }
.btn:disabled { background: #ccc; color: #888; cursor: not-allowed; opacity: .7; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #219150; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.active { background: var(--primary); color: #fff; }
.btn-delete { color: var(--danger); background: none; border: none; cursor: pointer; text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.btn-delete:hover { background: rgba(231,76,60,.15); }
.btn-edit { color: var(--primary); background: none; border: none; cursor: pointer; text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.btn-edit:hover { background: rgba(52,152,219,.15); }
.btn-warning { background: #f39c12; color: #fff; }
.btn-warning:hover { background: #e08e0b; }
.ml-auto { margin-left: auto; }

/* ── Edit inline forms ── */
.edit-form { display: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin: 8px 0; }
.edit-form.open { display: block; }
.edit-row { display: none; }
.edit-row.open { display: table-row; }
.edit-row td { background: var(--bg2); }
.edit-row .mini-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 0; }

/* ── Cards & Containers ── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.form-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; max-width: 480px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }

/* ── Collapsible form ── */
.collapsible-form { display: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.collapsible-form.open { display: block; }

/* ── Forms ── */
.form-inline-grid, .form-grid { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.form-group label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.form-group input, .form-group select, .form-group textarea {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: 7px; font-size: 13px; outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(--primary); }
.form-group input[type="color"] { padding: 3px; height: 34px; width: 60px; cursor: pointer; }
.form-group input[type="file"] { padding: 6px; }
.form-submit { align-self: flex-end; }
.form-full { flex: 1 1 100%; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.form-actions { display: flex; gap: 10px; margin-top: 16px; }
.inline-form { display: inline; }
.mini-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.mini-form input, .mini-form select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.import-info { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }

/* ── Table ── */
.table-container { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--bg3); padding: 10px 14px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(79,110,247,.05); }
.data-table tr.row-link { cursor: pointer; }
.data-table tr.row-link:hover .btn-outline { background: var(--primary); color: #fff; }
.data-table .row-active td { background: rgba(79,110,247,.08); }
.groupe-header td { background: var(--bg3); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; padding: 6px 14px; }
.table-footer { padding: 8px 14px; font-size: 12px; color: var(--muted); }

/* ── Badges ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-success { background: rgba(39,174,96,.2); color: var(--success); }
.badge-grey { background: var(--bg3); color: var(--muted); }
.badge-blue { background: rgba(79,110,247,.2); color: var(--primary); }
.badge-orange { background: rgba(230,126,34,.2); color: var(--orange); }
.badge-danger { background: rgba(231,76,60,.2); color: var(--danger); }
.badge-mini { background: var(--bg3); color: var(--muted); font-size: 11px; padding: 2px 7px; border-radius: 10px; }
.badge-jour { background: rgba(79,110,247,.2); color: var(--primary); font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.badge-groupe { background: rgba(39,174,96,.2); color: var(--success); font-size: 12px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }

/* ── Dashboard stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.stat-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.stat-classe { font-size: 16px; font-weight: 700; }
.stat-matiere { font-size: 12px; color: var(--muted); }
.stat-groupe { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #f39c12; border-radius: 4px; padding: 1px 6px; }
.stat-numbers { display: flex; gap: 20px; margin-bottom: 10px; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-size: 28px; font-weight: 800; line-height: 1; }
.stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.stat-next { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ── Dashboard : lignes par matière/groupe, regroupées par classe ── */
.classe-title { font-size: 16px; margin-top: 26px; }
.classe-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.stats-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.stat-row { display: flex; align-items: center; gap: 24px; padding: 12px 18px; }
.stat-row .stat-header { flex: 1; margin-bottom: 0; justify-content: flex-start; align-items: center; gap: 10px; min-width: 0; }
.stat-matiere-nom { font-size: 15px; font-weight: 700; }
.stat-row .stat-body { display: flex; align-items: center; gap: 20px; }
.stat-row .stat-numbers { margin-bottom: 0; }
.stat-row .stat-val { font-size: 24px; }
.stat-row .progress-bar { width: 120px; }
.stat-row .stat-next { margin-top: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .stat-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .stat-row .stat-body { flex-wrap: wrap; }
}

/* ── Progress ── */
.progress-bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }

/* ── Alertes ── */
.section-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.alertes-list { display: flex; flex-direction: column; gap: 6px; }
.alerte-item { background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.3); border-radius: 7px; padding: 8px 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.alerte-item i { color: var(--danger); }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state i { font-size: 48px; display: block; margin-bottom: 16px; opacity: .4; }
.empty-state h2 { font-size: 18px; margin-bottom: 8px; color: var(--text); }
.empty-state p { margin-bottom: 16px; }

/* ── Layout helpers ── */
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-cols-asym { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; }
.three-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.four-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Encarts de saisie plus compacts pour que les 4 tiennent sur une ligne */
.four-cols .card { padding: 12px; }
.four-cols .mini-form { gap: 6px; }
.four-cols .mini-form input, .four-cols .mini-form select { width: 100%; box-sizing: border-box; }
.four-cols .mini-form .btn { width: 100%; justify-content: center; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); font-size: 12px; }

/* ── Classes grid ── */
.classes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 28px; }
.class-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; position: relative; }
.class-card-topbar { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.class-card-header { margin-bottom: 18px; }
.class-card-header h2 { font-size: 38px; font-weight: 800; }
.class-card-header .text-muted { font-size: 20px; }
.class-card-stat { color: var(--muted); font-size: 24px; margin-bottom: 24px; }
.class-card-stat i { font-size: 26px; }
.class-card-stat .stat-grp { margin-left: 22px; font-size: 20px; font-weight: 600; color: var(--muted); }
.class-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.class-card-actions .btn { font-size: 19px; padding: 12px 18px; justify-content: center;
  white-space: normal; text-align: center; }
.class-card-actions .btn i { font-size: 21px; }
.class-card-actions .action-dashboard { grid-column: 1 / -1; justify-self: center; }

/* ── Matières ── */
.matiere-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.matiere-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.matiere-header strong { font-size: 15px; }
.matiere-footer { display: flex; align-items: center; justify-content: space-between; }
.matiere-actions { display: flex; gap: 6px; }

/* ── Stages ── */
.stage-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 10px 14px; margin-bottom: 8px; display: block; }

/* ── Séances ── */
.seance-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.seance-block-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; }
.seance-block-header h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.seance-stats { display: flex; gap: 20px; }
.seance-stat { text-align: center; }
.big-num { font-size: 26px; font-weight: 800; display: block; }
.big-num.green { color: var(--success); }
.big-num.grey { color: var(--muted); }
.seances-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 12px; }
.seance-item { background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
.seance-item.seance-realisee { border-color: var(--success); background: rgba(39,174,96,.08); }
.seance-item.seance-annulee { opacity: .45; }
.seance-item.seance-reportee { border-color: var(--warning); }
.seance-item.seance-today { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(79,110,247,.3); }
.seance-num { font-size: 11px; color: var(--muted); }
.seance-date { font-size: 13px; font-weight: 600; margin: 2px 0; }
.seance-tp { font-size: 11px; color: var(--primary); margin-bottom: 4px; }
.seance-groupe { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; background: #f39c12; border-radius: 4px; padding: 1px 6px; margin: 2px 0; }
.seance-groupe-header { font-size: 14px; font-weight: 700; color: var(--text); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.seance-groupe-header .text-muted { font-weight: 400; font-size: 12px; }
.select-statut { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; font-size: 11px; padding: 3px 5px; width: 100%; }

/* ── Notes ── */
.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.notes-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.notes-table { border-collapse: collapse; width: auto; background: var(--bg2); border-radius: var(--radius); table-layout: fixed; }
.notes-table th { background: var(--bg3); padding: 8px 4px; font-size: 11px; color: var(--muted); white-space: normal; word-break: break-word; border: 1px solid var(--border); text-align: center; line-height: 1.3; }
.notes-table td { border: 1px solid var(--border); padding: 4px; }
.col-eleve { width: 220px; padding: 6px 8px !important; white-space: nowrap; }
.eleve-nom-block { display: inline-flex; flex-direction: column; line-height: 1.3; vertical-align: middle; }
.eleve-prenom { font-size: 13px; color: var(--muted); font-weight: 650; }
.col-groupe { width: 50px; text-align: center; }
/* Colonnes TP : largeur fixe suffisante pour un intitulé lisible sur 2 lignes,
   plutôt qu'un partage à parts égales de 100% qui les écrase. */
.notes-table .col-tp { width: 92px; }
.header-cat th { background: var(--bg2) !important; font-size: 9px; padding: 3px 4px !important; }
.cat-label { color: var(--muted) !important; }
.note-cell { vertical-align: middle; }
.tp-head-line1 { font-weight: 700; }
.tp-head-line2 { font-weight: 400; text-transform: none; }
.note-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; }
.note-input { background: transparent; border: none; color: var(--text); text-align: center; width: 44px; min-width: 44px; flex: 1 1 44px; font-size: 13px; padding: 4px 2px; outline: none; border-radius: 4px; }
.note-input:focus { background: rgba(79,110,247,.15); }
.note-btns { display: flex; gap: 4px; justify-content: center; margin-top: 3px; }
.note-add, .note-del { width: 18px; height: 18px; line-height: 15px; padding: 0; font-size: 13px; border: 1px dashed var(--border); background: transparent; color: var(--muted); border-radius: 50%; cursor: pointer; }
.note-add:hover { border-color: var(--primary); color: var(--primary); }
.note-del:hover { border-color: var(--danger); color: var(--danger); }
.notes-footer { padding: 8px 0; }
.save-status { font-size: 12px; padding: 4px 0; }
.legende { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.8; }

/* ── Projets ── */
.projets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
/* Hauteur uniforme : la carte est une colonne flex de hauteur fixe ; seule la zone
   des membres absorbe la place restante (et défile si le binôme/trinôme déborde),
   de sorte que la longueur des noms n'influe plus sur la hauteur de l'encart. */
.projet-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
               display: flex; flex-direction: column; min-height: 230px; }
.projet-card.statut-termine { border-color: var(--success); }
.projet-card.statut-abandonne { opacity: .5; }
.projet-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 10px; }
.projet-header h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; min-width: 0; }
.projet-lien { color: inherit; text-decoration: none; }
.projet-lien:hover { color: var(--primary); }
.projet-header, .projet-desc, .projet-membres-head, .projet-actions { flex: 0 0 auto; }
/* Description limitée à 2 lignes (texte complet en infobulle au survol) */
.projet-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projet-membres-head { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
/* Un membre par ligne, tous alignés sur la même marge gauche (l'icône est sur sa
   propre ligne d'en-tête, elle ne décale donc plus le premier nom). */
.projet-membres { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
                  margin-bottom: 12px; font-size: 12px; flex: 1 1 auto; overflow-y: auto; }
.membre-badge { background: var(--bg3); border: 1px solid var(--border); padding: 2px 8px; border-radius: 10px; }
.projet-actions { display: flex; justify-content: flex-end; margin-top: auto; }
.projet-card .edit-form { flex: 0 0 auto; }
.projet-card { cursor: pointer; }
.projet-card:hover { border-color: var(--primary); }
/* Les zones interactives de la carte ne doivent pas ouvrir la fiche projet */
.projet-card a, .projet-card button, .projet-card select, .projet-card input,
.projet-card label, .projet-card textarea { cursor: auto; }
.projet-card a, .projet-card button { cursor: pointer; }

/* Alerte "tâche à réaliser" : tout le fond de l'encart passe lentement au rouge */
.projet-card.alerte-tache { animation: fond-alerte 2.6s ease-in-out infinite; }
@keyframes fond-alerte {
  0%, 100% { background: var(--bg2); border-color: var(--border); }
  50%      { background: rgba(231,76,60,.75); border-color: var(--danger); }
}
/* Sans animation (réglage système) : fond rouge fixe, l'alerte reste visible */
@media (prefers-reduced-motion: reduce) {
  .projet-card.alerte-tache { animation: none; background: rgba(231,76,60,.5); border-color: var(--danger); }
}

/* ── Fiche projet (notes + tâches) ── */
.projet-fiche-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.tache-form, .note-form { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.tache-item, .note-item { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; }
.tache-item.tache-retard { border-color: var(--danger); }
.tache-item.tache-faite { opacity: .55; }
.tache-item.tache-faite .tache-texte { text-decoration: line-through; }
.tache-check { color: var(--muted); font-size: 18px; text-decoration: none; flex: 0 0 auto; }
.tache-check:hover { color: var(--success); }
.tache-item.tache-faite .tache-check { color: var(--success); }
.tache-corps { flex: 1 1 auto; min-width: 0; }
.tache-texte { font-size: 13px; font-weight: 600; }
/* Explication libre : les retours à la ligne saisis sont conservés à l'affichage */
.tache-explication { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: pre-wrap; }
.tache-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; }
.note-texte { font-size: 13px; margin-top: 6px; white-space: pre-wrap; }
/* Encarts par professeur référent (1 ou 2 colonnes) */
.prof-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 16px; }
.prof-col .section-title { margin-top: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.eleves-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 5px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.checkbox-label:hover { border-color: var(--primary); }
.checkbox-label input { accent-color: var(--primary); }

/* ── Documents ── */
.doc-select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 5px; font-size: 12px; font-weight: 600; padding: 4px 6px; width: 100%; }
/* Options du popup : fond sombre + texte clair pour rester lisibles */
.doc-select option { background: var(--bg2); color: var(--text); font-weight: 600; }
.doc-select.statut-valide { border-color: var(--success); }
.doc-select.statut-recu { border-color: var(--primary); }
.doc-select.statut-incomplet { border-color: var(--warning); }
.doc-select.statut-manquant { border-color: var(--danger); }
.docs-scroll { overflow-x: auto; margin-top: 22px; }
.pastille-docs { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-left: 10px; vertical-align: middle; background: var(--border); box-shadow: 0 0 0 2px rgba(0,0,0,.15) inset; }
.pastille-docs.p-vert   { background: #2ecc71; }
.pastille-docs.p-jaune  { background: #ffeb3b; }
.pastille-docs.p-orange { background: #e67e22; }
.pastille-docs.p-rouge  { background: #e74c3c; }

/* Pastille devant l'élève : vert = tous ses documents validés, rouge = au moins un manquant */
.pastille-eleve { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--border); }
.pastille-eleve.p-vert  { background: #2ecc71; }
.pastille-eleve.p-rouge { background: #e74c3c; }
.doc-cell { display: flex; align-items: center; gap: 6px; }
.doc-cell .doc-select { flex: 1 1 auto; min-width: 0; }
.doc-date { flex: 0 0 auto; width: 132px; box-sizing: border-box; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 5px; font-size: 11px; padding: 4px 6px; }

.rotation-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.seance-link { color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.seance-link:hover { text-decoration: underline; }
.seance-link i { font-size: 11px; opacity: .7; }

/* Cellules de note à remplir (venant d'une séance de rotation) : clignotement */
@keyframes note-blink {
  0%, 100% { background: #fff3cd; box-shadow: inset 0 0 0 2px #f39c12; }
  50%      { background: #ffd75e; box-shadow: inset 0 0 0 3px #e67e22; }
}
.note-input.note-highlight { animation: note-blink 1s ease-in-out infinite; color: #222; font-weight: 700; }

/* ── Couleur des notes selon la valeur ── */
@keyframes note-rouge-blink {
  0%, 100% { background: rgba(231,76,60,.85); }
  50%      { background: rgba(231,76,60,.35); }
}
.note-input.note-rouge  { animation: note-rouge-blink 2.6s ease-in-out infinite; color: #fff; font-weight: 700; }
.note-input.note-jaune  { background: rgba(241,196,15,.85); color: #222; font-weight: 700; }
.note-input.note-verte  { background: rgba(46,204,113,.80); color: #fff; font-weight: 700; }

/* ── Pastille de moyenne devant le nom de l'élève (même code couleur) ── */
@keyframes pastille-rouge-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.pastille-moyenne { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: middle; background: var(--border); }
.pastille-moyenne.note-jaune { background: #f1c40f; }
.pastille-moyenne.note-verte { background: #2ecc71; }
.pastille-moyenne.note-rouge { background: #e74c3c; animation: pastille-rouge-blink 2.6s ease-in-out infinite; }

/* ── Grille de rotation : colonnes de binômes à largeur égale (5 tiennent à l'écran) ── */
.rotation-table { table-layout: fixed; width: 100%; }
.rotation-table .col-seance { width: 90px; }
.rotation-table th, .rotation-table td { white-space: normal; word-break: break-word; }
.rotation-table thead th { vertical-align: bottom; font-size: 12px; line-height: 1.25; }
.rotation-table thead th .btn-delete { display: inline-block; margin-top: 2px; }
.rotation-table .rot-select { width: 100%; box-sizing: border-box; background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; font-size: 12px; padding: 5px 4px; }
.legende-statuts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); padding: 10px; background: var(--bg3); border-radius: 7px; }
.statut-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.statut-dot.manquant { background: var(--danger); }
.statut-dot.recu { background: var(--primary); }
.statut-dot.incomplet { background: var(--warning); }
.statut-dot.valide { background: var(--success); }

/* ── Item list ── */
.item-list { list-style: none; }
.item-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; gap: 8px; }
.item-list li:last-child { border-bottom: none; }
.item-list .text-muted { font-style: italic; }
.item-list li.item-block { display: block; }
.item-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Liste des types de documents : jusqu'à 6 colonnes, retour à la ligne au-delà ou si fenêtre trop étroite */
.docs-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.docs-grid li.item-block {
  flex: 1 1 calc((100% - 5 * 10px) / 6);
  max-width: calc((100% - 5 * 10px) / 6);
  min-width: 170px;
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  padding: 8px 10px;
}
.item-actions { display: flex; align-items: center; gap: 2px; }

/* ── Strip Calendar (5 mois) ── */
.strip-viewport {
  overflow: hidden;
  cursor: grab;
  position: relative;
}
.strip-viewport.grabbing { cursor: grabbing; }
.strip-pan {
  transform-origin: 0 0;
  transition: transform .05s linear;
  width: 100%;
}
.strip-viewport.grabbing .strip-pan { transition: none; }
/* Contrôles de zoom dans l'en-tête */
.zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
#zoom-level {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  min-width: 42px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.strip-calendar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
  min-width: 600px;
}
.sc-month {
  background: var(--bg2);
  display: flex;
  flex-direction: column;
}
.sc-month-hdr {
  background: var(--bg3);
  text-align: center;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.sc-day {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(46,50,80,.5);
  min-height: 24px;
  position: relative;
}
.sc-day:last-child { border-bottom: none; }
.sc-weekend { background: rgba(0,0,0,.18); }
/* Vacances : bande verticale (~1cm) centrée dans la largeur de la cellule */
.sc-vacance {
  background-image: linear-gradient(to right,
    transparent calc(50% - 0.5cm),
    rgba(26,188,156,.75) calc(50% - 0.5cm),
    rgba(26,188,156,.75) calc(50% + 0.5cm),
    transparent calc(50% + 0.5cm));
}
.sc-ferie   { background: rgba(231,76,60,.12); }
.sc-special { background: rgba(243,156,18,.12); }
/* Stage : bande verticale violette, moitié moins large que les vacances (0.5cm),
   plaquée à droite de la cellule. Les stages qui se chevauchent sont décalés
   côte à côte via la variable --lane (0 = le plus à droite). */
.sc-stage-band {
  position: absolute;
  top: 0; bottom: 0;
  width: 0.5cm;
  right: calc(var(--lane, 0) * 0.5cm);
  background: rgba(142,68,173,.75);
  pointer-events: none;
}
/* Semaine active (lundi → dimanche autour d'aujourd'hui) */
.sc-semaine-active { background: rgba(52,152,219,.28); box-shadow: inset 3px 0 0 var(--primary); }
.sc-semaine-active .sc-num { color: #fff; }
.sc-today { box-shadow: inset 3px 0 0 var(--primary), inset 0 0 0 2px var(--primary); border-radius: 3px; }
.sc-today .sc-num { color: #fff; font-weight: 800; }
.sc-letter {
  width: 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  text-align: center;
}
.sc-weekend .sc-letter { color: #6b7099; }
.sc-num {
  width: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  flex-shrink: 0;
}
.sc-cours {
  flex: 1;
  font-size: 10px;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clignotement doux du jour courant (bande 5 mois + vue semaine) */
@keyframes today-pulse-bg {
  0%, 100% { background-color: rgba(79,110,247,.08); }
  50%      { background-color: rgba(79,110,247,.32); }
}
@keyframes today-pulse-hdr {
  0%, 100% { background-color: var(--bg3); }
  50%      { background-color: rgba(79,110,247,.55); }
}
.sc-today { animation: today-pulse-bg 2.8s ease-in-out infinite; }

/* ── Vue Semaine (planning horaire, lundi → dimanche) ── */
.view-switch { display: inline-flex; gap: 6px; margin-right: 4px; }
.week-grid { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 7px; }
.week-hours-wrap { position: sticky; left: 0; z-index: 3; flex-shrink: 0; width: 46px;
  display: flex; flex-direction: column; background: var(--bg2); border-right: 1px solid var(--border); }
.week-corner { height: 44px; box-sizing: border-box; background: var(--bg3); border-bottom: 1px solid var(--border); }
.week-hours { display: flex; flex-direction: column; }
.week-hour-label { font-size: 10px; color: var(--muted); text-align: right; padding-right: 6px;
  box-sizing: border-box; transform: translateY(-6px); }
.week-day-wrap { flex: 1 1 110px; min-width: 110px; display: flex; flex-direction: column;
  border-left: 1px solid var(--border); }
.week-day-hdr { height: 44px; box-sizing: border-box; text-align: center; padding: 5px 4px;
  background: var(--bg3); border-bottom: 1px solid var(--border); }
.week-day-name { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.week-day-num { font-size: 15px; font-weight: 700; margin-top: 1px; }
.week-weekend .week-day-hdr .week-day-name,
.week-weekend .week-day-hdr .week-day-num { color: var(--muted); }
.week-day-dots { display: flex; justify-content: center; gap: 3px; margin-top: 3px; height: 6px; }
.week-day-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.week-day-col { position: relative; }
.week-weekend .week-day-col { background: rgba(0,0,0,.16); }
.week-event { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 3px 5px;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.week-event-time { font-size: 14px; font-weight: 600; opacity: .85; white-space: nowrap; }
.week-event-title { font-size: 13px; font-weight: 700; line-height: 1.15; white-space: normal; word-break: break-word; }
.week-day-hdr.week-day-today { animation: today-pulse-hdr 2.8s ease-in-out infinite; }
.week-day-col.week-day-today { animation: today-pulse-bg 2.8s ease-in-out infinite; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .two-cols, .three-cols, .two-cols-asym { grid-template-columns: 1fr; }
  .four-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .topbar { grid-template-columns: 1fr; gap: 10px; }
  .topbar-left, .topbar-nav, .topbar-right { justify-self: stretch; flex-wrap: wrap; }
  .topbar-nav { justify-content: center; }
  .topbar-right { justify-content: flex-end; }
  .main-content { padding: 16px; }
}

/* ── Compétences ── */
.comp-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.comp-domaine { margin: 0; padding: 12px 14px; background: var(--bg3); border-bottom: 1px solid var(--border); }
.comp-table td { vertical-align: top; }
.comp-titre { font-weight: 700; font-size: 14px; }
.comp-desc { margin-top: 3px; line-height: 1.4; }
.comp-comment { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 12px; box-sizing: border-box; }

.niv-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; color: #fff; }

.niv-selector { display: flex; gap: 6px; flex-wrap: wrap; }
.niv-opt { position: relative; cursor: pointer; }
.niv-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.niv-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--muted);
  background: var(--bg3); transition: all .12s; }
.niv-opt:hover span { border-color: var(--primary); }

/* Couleurs par niveau quand sélectionné */
.niv-1 { background: var(--danger); }
.niv-2 { background: var(--orange); }
.niv-3 { background: var(--success); }
.niv-4 { background: var(--primary); }

.table-container.comp-scroll { overflow-x: auto; }
.comp-recap-table { table-layout: fixed; }
.comp-recap-table .comp-eleve-col { width: 260px; }
.comp-recap-table .comp-col-th, .comp-recap-table .comp-col-td { width: 110px; text-align: center; box-sizing: border-box; }
.comp-recap-table .comp-col-th { font-size: 11px; font-weight: 700; padding: 6px; line-height: 1.3;
  text-transform: none; letter-spacing: normal; white-space: normal; vertical-align: middle; }
.comp-col-td { padding: 8px 3px; }
.comp-recap { display: flex; flex-wrap: wrap; gap: 4px; }
.comp-mini { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px; border-radius: 4px; font-size: 10px; font-weight: 700;
  color: #fff; cursor: default; flex-shrink: 0; }
.comp-mini.niv-none { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); }
.comp-mini.niv-1 { animation: comp-blink 2s ease-in-out infinite; }
@keyframes comp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.appr-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 20px; background: var(--bg3); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text); margin-right: 6px; white-space: nowrap; }
.appr-count i { font-size: 11px; color: var(--muted); }

.absence-counter { display: inline-flex; align-items: center; gap: 8px; }
.absence-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg3); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.absence-btn:hover { border-color: var(--primary); color: var(--primary); }
.absence-valeur { width: 50px; text-align: center; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 4px; font-size: 13px; font-weight: 700; }
.niv-opt.niv-1 input:checked + span { background: var(--danger); color: #fff; border-color: var(--danger); }
.niv-opt.niv-2 input:checked + span { background: var(--orange); color: #fff; border-color: var(--orange); }
.niv-opt.niv-3 input:checked + span { background: var(--success); color: #fff; border-color: var(--success); }
.niv-opt.niv-4 input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.niv-opt.niv-0 input:checked + span { background: var(--bg2); color: var(--text); border-color: var(--muted); }

.text-right { text-align: right; }

/* ── Compétences : session + historique ── */
.comp-session { margin-bottom: 14px; }
.comp-session .mini-form { align-items: flex-end; }
.comp-session .mini-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.comp-session .mini-form input { margin: 0; }

.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; font-size: 12px; padding: 4px 0; margin-top: 4px; display: inline-flex; align-items: center; gap: 5px; }
.btn-link:hover { text-decoration: underline; }

.comp-hist-title { font-weight: 700; font-size: 13px; margin: 4px 0 8px; color: var(--text); }
.comp-hist-table { width: 100%; border-collapse: collapse; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.comp-hist-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.comp-hist-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.comp-hist-table tr:last-child td { border-bottom: none; }

/* Bouton désactivé (navigation élève précédent/suivant) */
.btn.is-disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Appréciations par période ── */
.periode-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.periode-title { font-size: 16px; font-weight: 700; color: var(--primary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.appreciation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.appreciation-encart { display: flex; flex-direction: column; gap: 6px; }
.encart-label { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.appreciation-encart textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.appreciation-encart textarea:focus { outline: none; border-color: var(--primary); }
@media (max-width: 900px) { .appreciation-grid { grid-template-columns: 1fr; } }

/* ── Appréciations : historique daté ── */
.appr-section-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 10px; display: flex; align-items: center; gap: 6px; }
.appr-resume-label { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); color: var(--success); }

.appr-add { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.appr-add-date { display: flex; flex-direction: column; gap: 6px; }
.appr-add-date label { font-size: 12px; color: var(--muted); }
.appr-add-date input { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; }
.appr-add-submit { display: flex; margin-left: auto; }

/* TP rattaché à l'appréciation */
.appr-add-seance { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
.appr-add-seance > label { font-size: 12px; color: var(--muted); }
.appr-add-seance select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; }
.appr-hist-tp { font-weight: 600; color: var(--primary); }
.appr-add-texte { flex: 1 1 260px; }

.appr-hist-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.appr-hist-item { background: var(--bg3); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 7px; padding: 10px 12px; }
.appr-hist-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.appr-hist-date { font-weight: 700; font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.appr-hist-line { font-size: 13px; line-height: 1.5; margin-top: 3px; }
.tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; color: #fff; margin-right: 6px; }
.tag-disc { background: var(--warning); }
.tag-trav { background: var(--primary); }
.tag-absence { background: var(--danger); }
.tag-retard { background: var(--warning); }
@media (max-width: 900px) { .appr-add { grid-template-columns: 1fr; } }

/* ── Appréciations : compteur de caractères ── */
.char-counter { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; }
.char-counter.over { color: var(--danger); font-weight: 700; }
.appr-maxlen-note { font-size: 11px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.mb-2 { margin-bottom: 10px; }

/* Actions sur une appréciation datée (modifier / supprimer) */
.appr-hist-actions { display: flex; gap: 4px; align-items: center; }
.appr-hist-item .edit-form { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   ── Mobile (téléphone, ≤700px) ──
   Section additive : ne modifie rien au-delà de 700px, l'affichage
   PC reste strictement identique.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body { font-size: 13px; }
  .main-content { padding: 10px; }

  /* Bandeau supérieur : compact, logo réduit au pictogramme, nav en scroll horizontal */
  .topbar { padding: 8px 10px; gap: 6px; }
  .topbar-left span { display: none; }
  .topbar-left i { font-size: 18px; }
  .topbar-logo { height: 22px; }
  .ia-cost-badge { font-size: 11px; padding: 2px 8px; }
  .topbar-btn-spaced { margin-left: 0; }
  .topbar-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-btn { padding: 7px 12px; font-size: 12px; flex-shrink: 0; }
  .topbar-pagename { display: none; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; gap: 6px; row-gap: 6px; }
  .topbar-right .annee-select { font-size: 12px; padding: 5px 8px; }

  .page-header h1 { font-size: 18px; }
  .page-header.page-header-eleve { gap: 8px; }

  /* Grilles → une seule colonne pour un défilement vertical normal */
  .four-cols, .three-cols, .two-cols, .two-cols-asym { grid-template-columns: 1fr; }
  .classes-grid { grid-template-columns: 1fr; gap: 16px; }
  .class-card { padding: 18px; }
  .class-card-header h2 { font-size: 26px; }
  .class-card-header .text-muted { font-size: 14px; }
  .class-card-stat { font-size: 15px; margin-bottom: 16px; }
  .class-card-stat i { font-size: 17px; }
  .class-card-stat .stat-grp { margin-left: 12px; font-size: 13px; }
  .class-card-actions .btn { font-size: 13px; padding: 10px 6px; }
  .class-card-actions .btn i { font-size: 15px; }
  .class-card-topbar { top: 10px; right: 10px; }

  /* Tableaux : on préfère le défilement horizontal à un texte illisible */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; }

  /* Formulaires : champs qui se répartissent pleine largeur au lieu de rester minuscules */
  .form-group { min-width: 0; flex: 1 1 140px; }
  .mini-form input, .mini-form select { flex: 1 1 130px; }
  .form-card { padding: 20px; }

  .item-row { flex-wrap: wrap; row-gap: 6px; }
  .item-actions { margin-left: auto; }

  /* ── Calendrier : bande de 5 mois → liste verticale unique, défilement tactile normal ── */
  .zoom-controls { display: none; }
  .strip-viewport { cursor: default; }
  .strip-calendar { grid-template-columns: 1fr; min-width: 0; }
  .sc-day { min-height: 30px; padding: 4px 8px; gap: 8px; }
  .sc-letter { width: 16px; font-size: 11px; }
  .sc-num { width: 22px; font-size: 13px; }
  .sc-cours { font-size: 12px; white-space: normal; }
}
.appr-hist-item .edit-form .appr-add { margin-bottom: 0; }