/* ── Variables ── */
:root {
  --bg: #0f1117;
  --bg2: #1a1d27;
  --bg3: #22263a;
  --border: #2e3250;
  --text: #e4e6f0;
  /* Texte secondaire de toute l'application (legendes, en-tetes de colonnes,
     sous-titres, mentions de bas de page). Eclairci pour rester lisible sur le
     fond sombre, sans se confondre avec le texte courant --text. */
  --muted: #a8adcf;
  --primary: #4f6ef7;
  --primary-dark: #3a57e8;
  --success: #27ae60;
  --danger: #e74c3c;
  --warning: #f39c12;
  --orange: #e67e22;
  /* Couleurs des niveaux de competence, reprises des grilles d'evaluation.
     --niv1 est propre aux niveaux : --danger sert aux boutons de suppression
     et aux alertes dans tout le logiciel, on n'y touche pas. */
  --niv1: #e11a1a;          /* rgb(225,26,26)   - non acquis */
  --niv3: #c2e28b;          /* rgb(194,226,139) - acquis */
  --niv4: #648f1c;          /* rgb(100,143,28)  - expert */
  --niv-ne: #008ed0;        /* rgb(0,142,208)   - non evalue */
  --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; }
/* Le smiley de SMYLNOTE, dans le bandeau et sur les pages d'accueil. */
.topbar-logo { width: 30px; height: 30px; display: block; }
.login-logo { width: 64px; height: 64px; display: block; margin: 0 auto 10px; }
/* Le nom reprend le lettrage epais et large de SMYLNOTE.png. On le compose
   plutot que d'afficher l'image : ses lettres y sont presque noires, elles
   disparaitraient sur le fond sombre du logiciel. */
.topbar-nom, .login-box h1 {
  font-family: 'Arial Black', 'Segoe UI Black', Impact, Haettenschweiler, sans-serif;
  letter-spacing: 1.5px; }
.topbar-nom { font-size: 18px; }
/* Mention beta : collee au nom, en petit, pour qu'elle se lise sans prendre
   la place du logo ni pousser la barre de navigation. */
.topbar-beta { font-family: var(--font, inherit); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: lowercase; color: #ffd166;
  background: rgba(255,209,102,0.12); border: 1px solid rgba(255,209,102,0.35);
  border-radius: 8px; padding: 1px 5px; margin-left: 5px; top: -.5em; }
.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; }
/* « display: inline-flex » ci-dessus l'emporte sur l'attribut « hidden » : sans
   cette regle, les tuiles non favorites restaient toutes affichees a la suite
   des favorites. */
.topbar-btn[hidden] { display: none !important; }
.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-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; }

/* Reglages : un bouton par volet, au centre de la page, descendus sous le
   titre et assez grands pour se voir de loin. Les volets qu'ils deplient se
   centrent avec eux. */
.reglages-menu { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin: 60px 0 36px; }
.reglages-menu .btn { font-size: 16px; padding: 18px 30px; min-width: 280px;
  justify-content: center; }
.reglages-menu .btn i { font-size: 19px; }
.reglages-menu ~ .collapsible-form { margin-left: auto; margin-right: auto; }

/* ── 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: 13px; 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: 13px; 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: 13px; color: var(--muted); }
/* Zone de depot des photos : le seul mode ou l'utilisateur voit les vignettes
   au moment de choisir, puisque c'est l'Explorateur qui les affiche. */
/* La zone occupe toute la largeur du formulaire et se centre ; les deux
   selecteurs classiques s'alignent en dessous, a parts egales. */
/* Page « Une idee » : un formulaire seul au milieu, pour inviter a ecrire. */
/* On y decrit une situation en plusieurs phrases, pas un mot-cle : une
   colonne etroite decourage avant meme d'avoir commence. */
.sugg-carte { background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px; max-width: 1520px;
  margin-left: auto; margin-right: auto; }
/* Dans un conteneur en flex, « grid-column » ne s'applique pas : c'est la
   base de flex qui fait prendre toute la largeur a un champ. */
.sugg-carte .form-group-large { flex: 1 1 100%; }
.sugg-carte .form-group-large input { width: 100%; box-sizing: border-box; }
/* Ensemble de competences : un intertitre dans la grille, sans note. Il
   separe les familles d'une meme epreuve (CT1, C2.1...) pour que l'oeil
   retrouve la structure de la grille officielle. */
.ligne-groupe-comp td { background: var(--bg3); font-weight: 700; font-size: 13px;
  color: var(--primary); padding: 7px 12px;
  border-top: 2px solid var(--border); border-bottom: 1px solid var(--border); }
.ligne-groupe-comp td i { margin-right: 7px; opacity: .8; }
.ligne-groupe-fin td { padding: 0; height: 3px; background: var(--border); }
.ligne-groupe-comp:hover td { background: var(--bg3); }

/* Grilles CCF : formulaire de la classe, et reperes de cellules. */
.ccf-section { grid-column: 1 / -1; font-size: 14px; margin: 10px 0 0;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--primary); }
.ccf-bloc { background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.ccf-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 14px; margin-top: 12px; }
.ccf-cases label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--muted); }
.ccf-cases input { flex: 0 0 78px; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 5px 8px; border-radius: 6px; font-size: 12.5px;
  font-family: Consolas, monospace; text-align: center; }
/* Voile de fabrication des grilles CCF. */
.ccf-voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; background: rgba(10, 12, 16, .82); }
/* L'attribut « hidden » cache par « display: none », que la regle ci-dessus
   ecrasait : le voile restait donc affiche en permanence, par-dessus le
   formulaire, et le bouton Fermer ne pouvait rien y faire. */
.ccf-voile[hidden] { display: none !important; }
.ccf-travail { background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 34px; width: min(460px, 90vw);
  text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.ccf-travail h2 { font-size: 17px; margin: 12px 0 18px; }
.ccf-rouage i { font-size: 34px; color: var(--primary); animation: ccf-battement 1.4s ease-in-out infinite; }
@keyframes ccf-battement { 0%, 100% { transform: scale(1); opacity: .85; }
                           50% { transform: scale(1.16); opacity: 1; } }
.ccf-barre { height: 10px; border-radius: 6px; background: var(--bg3);
  border: 1px solid var(--border); overflow: hidden; }
.ccf-barre span { display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--primary), #64b5f6);
  transition: width .35s ease; }
.ccf-barre.rate span { background: var(--danger); }
.ccf-chiffres { margin-top: 12px; font-size: 14px; display: flex; gap: 8px;
  justify-content: center; flex-wrap: wrap; }
.ccf-chiffres span { color: var(--muted); }
.ccf-detail { margin-top: 6px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.ccf-travail .btn { margin-top: 16px; }
.ccf-lignes input { width: 90px; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 4px 8px; border-radius: 5px; text-align: center;
  font-family: Consolas, monospace; }
.ccf-lignes td { font-size: 12.5px; }
.ccf-repli { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.ccf-repli input { width: 17px; height: 17px; accent-color: var(--primary); }
.ccf-competences { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ccf-competences label { color: var(--text); font-weight: 600; }

.sugg-identite { list-style: none; margin: 0; padding: 10px 14px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; }
.sugg-identite li { padding: 2px 0; }
.sugg-identite span { display: inline-block; min-width: 130px; color: var(--muted); }
.sugg-carte textarea { width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.5; min-height: 220px; }

.binome-actuel { background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px; font-weight: 600; }

/* Comptes professeurs : etat d'un compte revoque, et rappel du compte connecte. */
.compte-revoque td { opacity: .55; }
.compte-actif { font-size: 12px; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.petite { font-size: 11px; }

/* Date de fin d'acces, dans la colonne Licence : le champ et son bouton sur
   une seule ligne, sans deborder de la cellule. */
.form-echeance { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.form-echeance input { font-size: 12px; padding: 3px 5px; }

/* PAP / PAI / PPS : une pastille sobre, lisible d'un coup d'oeil dans la liste
   des eleves sans attirer l'oeil plus que de raison. */
.badge-dispositif { display: inline-block; background: var(--bg3);
  border: 1px solid var(--primary); color: var(--primary); border-radius: 9px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }

/* Outils d'administration : trois cartes cote a cote, qui passent l'une sous
   l'autre des que la fenetre se resserre. */
.admin-outils { display: grid; gap: 14px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.admin-carte { background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; }
.admin-carte h2 { font-size: 15px; margin: 0 0 6px; }
.admin-carte p { margin: 4px 0; }
.liste-modeles { list-style: none; margin: 6px 0; padding: 0; }
.liste-modeles li { display: flex; align-items: center; gap: 6px;
  padding: 3px 0; border-bottom: 1px dotted var(--border); }
.badge-danger { background: var(--danger); color: #fff; border-radius: 9px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; }

/* Page etroite et centree : pour les listes qui n'ont que deux ou trois
   colonnes, ou la pleine largeur eloigne inutilement les informations. */
.page-etroite { width: 34%; min-width: min(100%, 430px); max-width: 100%;
  margin-left: auto; margin-right: auto; }

/* Etoile de favori, en haut au centre de chaque tuile de classe. En lisere
   tant que la tuile n'est pas choisie, pleine et jaune ensuite. */
.class-card-actions [data-tuile] { position: relative; }
/* Coin superieur gauche, symetrique de la pastille de rappel qui occupe le
   coin droit : les deux reperes d'une tuile se repondent sans se gener. */
.tuile-etoile { position: absolute; top: -2px; left: -2px;
  line-height: 1; color: var(--muted); opacity: .5; padding: 5px 7px;
  border-radius: 4px; cursor: pointer; transition: color .15s, opacity .15s; z-index: 2; }
/* Discrete : une etoile trop grande mangeait le libelle de la tuile, et son
   trait s'affine en meme temps qu'elle diminue. La zone cliquable, elle,
   reste large grace au calage interieur. */
/* Dessinee plutot qu'ecrite : l'epaisseur du trait se regle au centieme,
   ce que ne permet pas une police d'icones. Rapportee a la boite de 24 du
   dessin, la ligne fait moins d'un demi-pixel a l'ecran. */
.tuile-etoile .etoile-icone { width: 18px; height: 18px; display: block;
  pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linejoin: round; }
.tuile-etoile.favori .etoile-icone { fill: #ffd166; stroke: #e3a700; stroke-width: 1; }
.tuile-etoile:hover { opacity: 1; color: #ffd166; }
/* Allumee mais discrete : elle marque un choix, elle n'a pas a attirer l'oeil
   autant que le libelle de la tuile. Elle reprend toute sa densite au survol. */
.tuile-etoile.favori { color: #ffd166; opacity: .5; }
.tuile-etoile.favori:hover { opacity: 1; }

/* Reglage du logo : l'apercu, et l'invitation quand il n'y en a pas. */
.logo-actuel { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin-bottom: 14px; }
.logo-actuel img { max-height: 90px; max-width: 260px; }
.logo-absent { min-width: 220px; height: 90px; display: flex; align-items: center;
  justify-content: center; border: 2px dashed var(--border); border-radius: 8px;
  color: var(--muted); font-style: italic; font-size: 14px; }
.logo-etat { font-size: 13px; margin-bottom: 8px; }
.logo-consignes ul { margin: 8px 0 0; padding-left: 20px; }
.logo-consignes li { padding: 3px 0; line-height: 1.45; }
#depotLogo { margin-bottom: 14px; }

/* Page Impression : une case a cocher par tableau imprimable. */
.impr-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 18px; }
.impr-choix { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px;
  align-items: center; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.impr-choix:hover { border-color: var(--primary); }
.impr-choix:has(input:checked) { border-color: var(--primary); background: var(--bg3); }
.impr-choix input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.impr-choix > i { font-size: 18px; color: var(--primary); }
.impr-titre { font-weight: 700; font-size: 14px; }
.impr-detail { grid-column: 3; font-size: 12px; color: var(--muted); }
.impr-pied { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 14px; }
.impr-sens { display: flex; gap: 14px; margin-right: auto; font-size: 13px; color: var(--muted); }
.impr-sens label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.impr-sens input { accent-color: var(--primary); }
.btn-photo-suppr { display: inline-block; margin: 0 0 8px; }
.trombi-depot { flex: 1 1 100%; }
.trombi-choix { flex: 1 1 100%; display: flex; gap: 14px; align-items: flex-start;
  flex-wrap: wrap; }
.trombi-choix > .form-group { flex: 1 1 280px; }
.depot-photos { max-width: 620px; margin: 0 auto;
  border: 2px dashed var(--border); border-radius: 10px; padding: 22px 16px;
  text-align: center; color: var(--muted); cursor: pointer; background: var(--bg3);
  transition: border-color .15s, background .15s, color .15s; }
.depot-photos:hover { border-color: var(--primary); color: var(--text); }
.depot-photos.survol { border-color: var(--success); background: rgba(46,160,67,.10); color: var(--text); }
.depot-photos > i { font-size: 26px; display: block; margin-bottom: 8px; color: var(--primary); }
.depot-titre { font-size: 15px; font-weight: 700; color: var(--text); }
.depot-sous { font-size: 12.5px; margin-top: 4px; }
.depot-etat:not(:empty) { margin-top: 8px; }

/* ── 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: 13px; 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; }
/* Survoler la ligne allume les boutons qui menent au meme endroit qu'elle.
   Le menu « Editer Bilan » fait autre chose : il reste eteint tant qu'on ne
   le vise pas lui-meme. */
.data-table tr.row-link:hover .menu-bilan > summary:not(:hover) {
  background: transparent; color: var(--primary); }
/* Et reciproquement : souris sur le menu bilan, la ligne n'est plus la
   destination visee, son bouton « Evaluer » s'eteint. Les navigateurs sans
   :has() ignorent simplement la regle, sans rien casser. */
.data-table tr.row-link:has(.menu-bilan > summary:hover) .btn-outline:not(summary) {
  background: transparent; color: var(--primary); }
.data-table .row-active td { background: rgba(79,110,247,.08); }
.groupe-header td { background: var(--bg3); font-size: 13px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; padding: 6px 14px; }
.table-footer { padding: 8px 14px; font-size: 13px; 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: 13px; 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-salle { background: rgba(61,143,209,.18); color: #79bdf0; font-size: 12px;
  padding: 2px 8px; border-radius: 10px; margin-left: 8px; font-weight: 600; }
.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: 13px; 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: 12px; color: var(--muted); text-transform: uppercase; }
.stat-next { font-size: 13px; 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: 13px; }

/* ── 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); }
/* minmax(0, 1fr) et non 1fr : sinon une colonne s'élargit au gré du libellé
   le plus long qu'elle contient et les trois colonnes cessent d'être égales. */
.class-card-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 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; }

/* ── Réorganisation par glisser-déposer (page Classes) ──
   Deux niveaux : les tuiles dans un encart (toutes sauf "Tableau de bord"),
   et les encarts de classe eux-mêmes dans la grille. L'élément saisi suit le
   curseur ; les autres se décalent pour lui faire place. */
/* Toutes les tuiles déplaçables ont exactement la même taille : la largeur
   vient des colonnes minmax(0, 1fr), la hauteur est fixée ici pour que les libellés qui
   passent sur deux lignes ("Abs & Retards", "Bilan Parents") n'agrandissent
   plus leur rangée. La tuile "Tableau de bord" garde sa taille propre. */
.class-card-actions [data-tuile] { height: 80px; }
.reorg-mobile { cursor: grab; touch-action: pan-y; -webkit-user-drag: none; }
.reorg-mobile:active { cursor: grabbing; }
/* Quand le nombre de tuiles mobiles laisse la dernière seule sur sa ligne,
   on la centre (comportement d'origine de la tuile Commandes). */
.class-card-actions .tuile-seule-fin { grid-column: 2; }
/* Élément en cours de déplacement : au-dessus des autres, légèrement soulevé. */
.reorg-saisi { cursor: grabbing; z-index: 5; opacity: .93;
  border-color: var(--primary); box-shadow: 0 12px 26px rgba(0,0,0,.45); }
/* Pendant le glissement : pas de sélection de texte parasite. */
.reorg-en-cours { user-select: none; }
/* Les encarts de classe se saisissent par leur fond ou leur titre ; les liens
   et boutons qu'ils contiennent gardent leur curseur habituel. */
.classes-grid .class-card.reorg-mobile { cursor: grab; }
.classes-grid .class-card .class-card-actions,
.classes-grid .class-card .edit-form { cursor: default; }
.page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 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: 13px; 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: 13px; 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; }
/* Coefficient du TP, saisi directement dans l'en-tete de sa colonne : c'est
   la ou on lit le nom du TP, donc la ou on decide de son poids.
   Il est cale au bas de la cellule plutot qu'a la suite du nom : les noms de
   TP tiennent sur une ou deux lignes selon les cas, et tous les coefficients
   se retrouveraient a des hauteurs differentes. Ancres en bas, ils s'alignent
   sur une seule ligne quelle que soit la longueur des noms au-dessus. */
.notes-table th.col-tp { position: relative; padding-bottom: 34px; }
.tp-coef { position: absolute; left: 4px; right: 4px; bottom: 7px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); }
.tp-coef-input { width: 36px; text-align: center; background: var(--bg2);
  border: 1px solid var(--border); color: var(--text); border-radius: 4px;
  font-size: 12px; font-weight: 700; padding: 1px 2px; }
.tp-coef-input:focus { outline: none; border-color: #3d8fd1; }
.tp-coef-input.coef-refuse { border-color: var(--danger); color: var(--danger); }
.header-cat th { background: var(--bg2) !important; font-size: 11px; 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: 13px; 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: 13px; color: var(--muted); margin-bottom: 10px;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projet-membres-head { font-size: 13px; 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: 13px; 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%; }
/* De la hauteur pour les fleches etirees, qui debordraient sinon sur la
   premiere ligne de la grille. */
.rotation-table .col-seance { position: relative; width: 120px; font-size: 13px;
  font-weight: 800; line-height: 1.15; letter-spacing: .3px;
  padding-top: 8px; padding-bottom: 14px; }
/* Fleches de la colonne des seances : meme respiration lente que le chevron
   des notes de competences, pour dire « c'est ici qu'on ouvre ». */
/* Etirees en hauteur seulement : le glyphe est mis a l'echelle sur son axe
   vertical, ce qui l'allonge sans l'epaissir. Le deplacement du battement est
   divise d'autant, l'echelle le multipliant. */
@keyframes seance-fleche-halo {
  0%, 100% { opacity: .35; transform: scaleY(1.5) translateY(0); }
  50%      { opacity: 1;   transform: scaleY(1.5) translateY(1.4px); }
}
/* Les fleches montent sur toute la hauteur du titre : « align-items: stretch »
   etire leur boite, le centrage interieur pose le glyphe au milieu. Selecteur
   en deux classes car Font Awesome, charge apres, impose sinon son propre
   affichage aux icones. */
/* Fleches posees dans les deux coins du bas de la cellule, de part et d'autre
   du titre : sorties du flux, elles se calent sur la cellule entiere plutot
   que sur la ligne de texte. */
.rotation-table .seance-entete { display: block; }
.rotation-table .seance-fleche { display: flex; align-items: center;
  font-size: 26px; line-height: 1; color: var(--primary);
  transform: scaleY(1.5); transform-origin: bottom;
  position: absolute; bottom: -4px;
  animation: seance-fleche-halo 2.1s ease-in-out infinite; }
.rotation-table .seance-fleche:first-child { left: 8px; }
.rotation-table .seance-fleche:last-child { right: 8px; }
@media (prefers-reduced-motion: reduce) {
  .rotation-table .seance-fleche { animation: none; opacity: .9; transform: scaleY(1.5); }
}
.rotation-table th, .rotation-table td { white-space: normal; overflow-wrap: break-word; }
/* Cale par le haut : tous les noms de binomes commencent ainsi sur la meme
   ligne, et seuls les trop longs se poursuivent en dessous. Cale par le bas,
   c'etait l'inverse — un nom court se retrouvait decroche de ses voisins. */
.rotation-table thead th { vertical-align: top; font-size: 12px; line-height: 1.25;
  padding-top: 8px; }
/* Le nom occupe sa ligne, les boutons la suivante : alignes d'une colonne a
   l'autre par construction, sans dependre de la hauteur des noms. */
/* Le nom et ses boutons forment une seule case a l'oeil : le trait qui les
   separait coupait l'en-tete en deux etages. */
.rotation-table .gt-nom-case { padding-bottom: 2px; border-bottom: none; }
.rotation-table .gt-ligne-actions th { padding-top: 0; padding-bottom: 6px;
  border-top: none; vertical-align: top; }
.rotation-table .gt-actions { display: flex; gap: 10px; justify-content: center; }
.rotation-table thead th .btn-delete,
.rotation-table thead th .btn-edit { display: inline-block; }
.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: 13px; 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: 12px; 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: 13px; 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-event-salle { font-size: 12px; font-weight: 600; opacity: .85; white-space: nowrap;
  margin-top: 1px; }
.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 ── */
/* Legende des niveaux : cale a droite, elle n'a pas besoin d'ouvrir la page. */
.comp-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end; margin-bottom: 8px; }
/* Le bouton reste a gauche de la ligne, la legende gardant sa place a droite. */
.btn-enregistrer-haut { margin-right: auto; }
.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; }

/* Pastilles de niveau (legende, derniere evaluation) : texte noir sur la
   couleur, comme les cases de competence et le bilan imprime. */
.niv-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; color: #111; }

.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(--niv1); }
.niv-2 { background: var(--orange); }
.niv-3 { background: var(--niv3); color: #1b2a10; }
.niv-4 { background: var(--niv4); }
.niv-0 { background: var(--niv-ne); }

.table-container.comp-scroll { overflow-x: auto; }
.comp-recap-table { table-layout: fixed; }
/* Seules les deux colonnes de bout ont une largeur : les compétences se
   partagent tout le reste a parts egales, sinon les boutons prenaient la
   moitie de l'ecran et les pastilles se serraient dans un coin. */
.comp-recap-table .comp-eleve-col { width: 200px; }
.comp-recap-table .comp-actions-col { width: 124px; }
.comp-recap-table .comp-col-th, .comp-recap-table .comp-col-td { text-align: center; box-sizing: border-box; }
/* Intitules penches a 45 deg : la colonne n'a plus a etre large, et le texte
   deborde vers le haut a droite, ou la colonne des boutons lui laisse la
   place.

   Deux lignes au maximum, la suite en points de suspension : un intitule
   penche occupe, perpendiculairement a lui-meme, toute sa hauteur de texte.
   Passe deux lignes, cette epaisseur depasse l'ecart entre deux colonnes et
   les intitules voisins se chevauchent — illisible.

   Meme raison pour la largeur minimale : avec une trentaine de competences,
   les colonnes se serreraient jusqu'a ce que les intitules se croisent de
   nouveau. Le tableau deborde alors, et son cadre defile lateralement. */
.comp-recap-table .comp-col-th { height: 150px; padding: 0; position: relative;
  vertical-align: bottom; min-width: 48px; }
.comp-recap-table .comp-col-td { min-width: 48px; }
/* Le fond se pose sur la ligne entiere et non case par case : sinon la case
   suivante repeint par-dessus l'intitule penche de la precedente, qui se
   retrouve coupe en plein mot. */
.comp-recap-table thead tr { background: var(--bg3); }
.comp-recap-table thead th { background: transparent; }
.comp-recap-table .comp-col-lib { position: absolute; left: 50%; bottom: 6px;
  width: 185px; max-height: 30px; overflow: hidden; text-align: left;
  transform-origin: 0 100%; transform: rotate(-45deg);
  font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--text);
  text-transform: none; letter-spacing: normal; white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp-col-td { padding: 8px 3px; }
.comp-recap { display: flex; flex-wrap: wrap; gap: 4px; }
/* Pastille de competence du tableau de classe : des qu'elle est coloree,
   le code s'ecrit en noir — le blanc disparait sur le vert clair et le
   jaune, et le document imprime suit deja cette regle. */
.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: #111; 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: 13px; 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(--niv1); color: #111; border-color: var(--niv1); }
.niv-opt.niv-2 input:checked + span { background: var(--orange); color: #111; border-color: var(--orange); }
.niv-opt.niv-3 input:checked + span { background: var(--niv3); color: #111; border-color: var(--niv3); }
.niv-opt.niv-4 input:checked + span { background: var(--niv4); color: #111; border-color: var(--niv4); }
/* Non evalue : c'est la valeur par defaut, elle doit se lire comme un etat
   a part entiere et non comme une case vide. */
.niv-opt.niv-0 input:checked + span { background: var(--niv-ne); color: #111; border-color: var(--niv-ne); }

.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: 13px; 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: 13px; 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: 13px; 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: 13px; 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: 13px; color: var(--muted); text-align: right; margin-top: 4px; }
.char-counter.over { color: var(--danger); font-weight: 700; }
.appr-maxlen-note { font-size: 13px; 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; }

/* ── Fiche élève : rappels / alertes ── */
/* Ligne d'élève cliquable dans la liste de la classe */
.eleve-row { cursor: pointer; }
.eleve-row:hover > td { background: rgba(79,110,247,.08); }

/* Un rappel non traité : la ligne clignote lentement en rouge jusqu'à résolution */
@keyframes eleve-alerte-blink {
  0%, 100% { background: rgba(231,76,60,.08); }
  50%      { background: rgba(231,76,60,.45); }
}
.eleve-row.eleve-alerte > td { animation: eleve-alerte-blink 3s ease-in-out infinite; }
.eleve-row.eleve-alerte > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.eleve-row.eleve-alerte:hover > td { animation-play-state: paused; background: rgba(231,76,60,.35); }
@media (prefers-reduced-motion: reduce) {
  .eleve-row.eleve-alerte > td { animation: none; background: rgba(231,76,60,.3); }
}

/* Pastille du nombre de rappels en attente */
.rappel-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
.rappel-badge i { font-size: 10px; }

.fiche-infos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fiche-liens { display: flex; flex-wrap: wrap; gap: 8px; }

.appr-hist-item.rappel-actif { border-left-color: var(--danger); }
.appr-hist-item.rappel-resolu { border-left-color: var(--success); opacity: .75; }
.tag-demande { background: var(--danger); }
.tag-info-eleve { background: var(--primary); }
.rappel-note { margin-top: 5px; font-size: 13px; color: var(--muted); font-style: italic; }
.rappel-resoudre { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.rappel-resoudre input { flex: 1 1 220px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.rappel-resoudre input:focus { outline: none; border-color: var(--primary); }

/* ── Tuiles de la page Classes : pastille rouge d'alerte ── */
/* Une info reste à traiter (rappel élève non résolu, tâche projet non réalisée) :
   la tuile concernée porte une pastille rouge qui clignote lentement. */
@keyframes tuile-pastille-blink {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(231,76,60,.55); }
  50%      { opacity: .3; box-shadow: 0 0 0 5px rgba(231,76,60,0); }
}
.btn.tuile-alerte { position: relative; border-color: var(--danger); color: #ff8a7a; }
.tuile-pastille { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  animation: tuile-pastille-blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tuile-pastille { animation: none; }
}
/* Les tuiles de la page Classes sont grandes : pastille agrandie en proportion. */
.class-card-actions .tuile-pastille { min-width: 24px; height: 24px; line-height: 24px;
  border-radius: 12px; font-size: 14px; top: -9px; right: -9px; }

/* Pastille dans un titre de section (tableau de bord) : dans le flux, pas en coin. */
.tuile-pastille.pastille-inline { position: static; top: auto; right: auto; }

/* Section « À traiter » du tableau de bord : les lignes sont cliquables. */
.alerte-item.alerte-lien { color: var(--text); text-decoration: none; flex-wrap: wrap; }
.alerte-item.alerte-lien:hover { background: rgba(231,76,60,.18); border-color: var(--danger); }
.alerte-item .tag { margin-right: 0; }
.tag-projet { background: var(--orange); }

/* ══════════════════════════════════════════════════════════════
   ── 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-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 [data-tuile] { height: 60px; }
  .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; }

/* ── Notes : colonnes issues des compétences ── */
/* Colonne toujours presente, meme sans aucun TP : c'est la note du
   referentiel, elle ne depend pas des TP saisis. */
.notes-table .col-comp { background: rgba(61,143,209,.10); cursor: pointer;
  border-left: 2px solid #3d8fd1; border-right: 2px solid #3d8fd1;
  min-width: 172px; width: 172px; text-align: center; vertical-align: middle; }
/* Colonne etroite : le titre se replie sur plusieurs lignes plutot que
   d'imposer sa largeur, et tout le contenu est compacte en consequence. */
.notes-table th.col-comp .comp-head { white-space: normal; line-height: 1.15; }
.notes-table th.col-comp .comp-head span { font-size: 12px; }
/* Bande de sous-titres de la colonne : un libelle par carre, calculee a
   gauche, proposee a droite. Meme repartition que .deux-moyennes pour qu'ils
   tombent pile au-dessus du carre qu'ils designent. */
.comp-sous-titres { display: flex; gap: 2px; text-transform: none; letter-spacing: 0; }
.comp-sous-titres em { flex: 1 1 0; min-width: 0; font-style: normal;
  text-align: center; white-space: nowrap; }
/* Les deux moyennes cote a cote : calculee a gauche, proposee a droite. */
.deux-moyennes { display: flex; gap: 2px; justify-content: center; }
.deux-moyennes .note-carre { min-width: 0; flex: 1 1 0; padding: 2px 1px;
  font-size: 11px; border-width: 2px; }
.notes-table td.col-comp { cursor: default; }
.notes-table th.col-comp:hover { background: rgba(61,143,209,.20); }
.comp-head { display: flex; align-items: center; gap: 6px; justify-content: center;
  line-height: 1.2; }
/* Le chevron de depliage passait inapercu et personne ne pensait a cliquer :
   un halo bleu bat lentement derriere lui pour signaler l'en-tete cliquable. */
/* Le chevron s'eclaircit jusqu'a un bleu clair au sommet du battement : le
   glyphe bascule alors en sombre, sans quoi il s'y perdrait. */
@keyframes comp-chevron-halo {
  0%, 100% { background: rgba(61,143,209,.18); color: var(--text);
             box-shadow: 0 0 0 0 rgba(198,224,255,0); }
  50%      { background: rgba(186,211,243,.82); color: #0e2138;
             box-shadow: 0 0 0 5px rgba(198,224,255,.26); }
}
/* align-self: stretch — la pastille prend toute la hauteur du bandeau,
   quel que soit le nombre de lignes du titre a cote.
   Selecteur en deux classes : Font Awesome est charge apres cette feuille et
   son ".fas { display: inline-block }" annulerait sinon le centrage du glyphe,
   qui se collerait en haut de la pastille. */
.comp-head .comp-chevron { font-size: 13px; color: var(--text); flex: 0 0 auto;
  width: 22px; align-self: stretch; border-radius: 999px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  animation: comp-chevron-halo 4.2s ease-in-out infinite; }
/* Reglage systeme "reduire les animations" : la pastille reste, mais fixe. */
@media (prefers-reduced-motion: reduce) {
  .comp-head .comp-chevron { animation: none; background: rgba(186,211,243,.75); color: #0e2138; }
}
.notes-table .col-epr { background: rgba(61,143,209,.05); min-width: 108px; text-align: center; }
.notes-table .note-comp { font-size: 15px; }
/* Cadre epais a la couleur du niveau, pour rattacher la note a la legende
   des competences sans avoir a la convertir de tete. */
.note-carre { display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; padding: 4px 8px; border-radius: 6px; border: 3px solid;
  font-size: 17px; font-weight: 300; }
.nc-1 { border-color: var(--niv1); color: var(--niv1); }
.nc-2 { border-color: var(--orange); color: var(--orange); }
.nc-3 { border-color: var(--niv3); color: var(--niv3); }
.nc-4 { border-color: var(--niv4); color: #8fc63d; }
.nc-0 { border-color: var(--niv-ne); color: var(--niv-ne); font-size: 14px; }
.notes-table .col-cachee { display: none; }

/* ── Notes de competences au niveau 1 (non acquis) : meme battement rouge
   que les notes de TP en dessous de 8. Deux variantes, selon que la note
   se presente en lisere (calculee) ou sur fond plein (proposee). ── */
/* Seul le lisere bat : le chiffre garde sa couleur pleine, il doit rester
   lisible en permanence. */
@keyframes nc1-lisere-blink {
  0%, 100% { border-color: var(--niv1); }
  50%      { border-color: rgba(225,26,26,.22); }
}
@keyframes nc1-plein-blink {
  0%, 100% { background: var(--niv1); }
  50%      { background: rgba(225,26,26,.35); }
}
/* :not(.moy-proposee) — la moyenne proposee est un .note-carre mais elle
   s'affiche sur fond plein : c'est l'autre battement qui la concerne. */
.note-carre.nc-1:not(.moy-proposee) { animation: nc1-lisere-blink 2.6s ease-in-out infinite; }
.notes-table .note-proposee.nc-1,
.deux-moyennes .moy-proposee.nc-1 { animation: nc1-plein-blink 2.6s ease-in-out infinite; }
/* La moyenne des TP en dessous de 8 bat elle aussi, dans sa propre teinte. */
@keyframes moy-tp-rouge-blink {
  0%, 100% { border-color: #e74c3c; }
  50%      { border-color: rgba(231,76,60,.22); }
}
.moy-tp.note-rouge { animation: moy-tp-rouge-blink 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .note-carre.nc-1, .notes-table .note-proposee.nc-1,
  .deux-moyennes .moy-proposee.nc-1, .moy-tp.note-rouge { animation: none; }
}
.epr-calc { min-width: 0; padding: 2px 0; border-width: 2px; border-radius: 4px;
  font-size: 12px; font-weight: 700; }
/* Chaque colonne d'epreuve porte les deux notes de l'epreuve, dans le meme
   ordre que les deux moyennes de la colonne de gauche : la note calculee a
   gauche en simple lisere, la note proposee a droite sur fond plein, la
   seule des deux que l'on saisit. */
.epr-cellule { display: flex; gap: 3px; align-items: stretch; }
.epr-cellule > * { flex: 1 1 0; min-width: 0; }
.notes-table .note-proposee { width: 100%; text-align: center; font-size: 11px;
  font-weight: 700; color: #111; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 0; }
.notes-table .note-proposee::placeholder { color: var(--muted); font-weight: 400; }
.notes-table .note-proposee:focus { outline: none; border-color: #3d8fd1; }
.notes-table .note-proposee.note-refusee { border-color: var(--danger); color: var(--danger); }
/* Les cases vides gardent le fond sombre : le bleu « non evalue » ne
   s'applique qu'aux notes reellement saisies. */
.notes-table .note-proposee.nc-0 { background: var(--bg3); color: var(--text); }
.notes-table .note-proposee.nc-1 { background: var(--niv1); border-color: var(--niv1); }
.notes-table .note-proposee.nc-2 { background: var(--orange); border-color: var(--orange); }
.notes-table .note-proposee.nc-3 { background: var(--niv3); border-color: var(--niv3); }
.notes-table .note-proposee.nc-4 { background: var(--niv4); border-color: var(--niv4); }
/* La moyenne proposee decoule des notes saisies : elle se lit comme elles,
   fond plein a la couleur du niveau. La moyenne calculee, elle, garde son
   simple lisere. Sans aucune saisie (nc-0) la case reste sombre, comme une
   case de note proposee encore vide. */
.deux-moyennes .moy-proposee { font-weight: 700; }
.deux-moyennes .moy-proposee.nc-1 { background: var(--niv1); color: #111; }
.deux-moyennes .moy-proposee.nc-2 { background: var(--orange); color: #111; }
.deux-moyennes .moy-proposee.nc-3 { background: var(--niv3); color: #111; }
.deux-moyennes .moy-proposee.nc-4 { background: var(--niv4); color: #111; }

/* ── Notes : moyenne des colonnes de TP, tout a droite du tableau ── */
/* Valeur calculee a la volee dans le navigateur a partir des notes chiffrees
   de la ligne (les appreciations litterales et les "Abs" sont ignorees).
   Etant calculee, elle porte un lisere et non un fond plein, comme le reste
   du tableau. Les couleurs sont celles des notes de TP :
   moins de 8 rouge, 8 a 12 jaune, au-dela vert. */
.notes-table .col-moy-tp { background: rgba(61,143,209,.10); width: 96px;
  border-left: 2px solid #3d8fd1; text-align: center; vertical-align: middle; }
.moy-tp { width: 100%; min-width: 0; font-size: 15px; font-weight: 700;
  border-color: var(--muted); color: var(--muted); }
.moy-tp.note-rouge { border-color: #e74c3c; color: #e74c3c; }
.moy-tp.note-jaune { border-color: #f1c40f; color: #f1c40f; }
.moy-tp.note-verte { border-color: #2ecc71; color: #2ecc71; }



/* ── Référentiels de compétences ── */
.ref-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 22px; }
/* Chevron de repli : tourne d'un quart de tour quand le bloc est ferme. */
.pli-btn { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: transform .15s, color .15s; }
.pli-btn:hover { color: var(--text); background: var(--bg3); }
.replie > .ref-header .pli-btn,
.replie > .ref-epreuve-hdr .pli-btn { transform: rotate(-90deg); }
.replie > .pli-corps { display: none; }
/* Un referentiel replie masque aussi ses formulaires d'ajout et d'edition. */
.replie > .edit-form { display: none; }
.ref-card.replie { padding-bottom: 14px; }
.ref-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ref-header h2 { font-size: 22px; font-weight: 800; }
.ref-header-actions { margin-left: auto; display: flex; gap: 8px; }
/* Sous-competences : le detail d'une competence, une ligne chacune. Le poids
   n'est montre que lorsqu'il varie d'une ligne a l'autre (grilles ponderees
   comme l'aeronautique) ; sinon il n'apprend rien et encombre. */
.sous-liste { list-style: none; margin: 0; padding: 0; }
.sous-liste li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0;
  border-bottom: 1px dotted var(--border); flex-wrap: wrap; }
.sous-liste li:last-child { border-bottom: none; }
.sous-coef { flex: 0 0 auto; min-width: 24px; text-align: center; font-weight: 700;
  font-size: 12px; color: #79bdf0; background: rgba(61,143,209,.16);
  border-radius: 4px; padding: 1px 5px; }
.sous-texte { flex: 1 1 260px; color: var(--muted); line-height: 1.4; }
.sous-actions { flex: 0 0 auto; opacity: .55; }
.sous-liste li:hover .sous-actions { opacity: 1; }
.sous-liste .edit-form { flex: 1 1 100%; }
.sous-ajout { margin-top: 8px; opacity: .6; }
.sous-ajout:focus-within { opacity: 1; }
.ref-sous { min-width: 340px; }
/* Les deux encarts du haut de la fiche competences, cote a cote et de meme
   largeur : saisir une nouvelle session a gauche, reprendre une evaluation
   deja enregistree a droite. */
/* align-items: stretch (defaut) : les deux encarts font toujours la meme
   hauteur, celle du plus haut, quel que soit leur contenu. */
.comp-bandeau { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
/* min-width:0 indispensable : sans lui, la longueur des options du menu de
   reprise elargit sa colonne au-dela de sa moitie et ecrase l'encart de
   gauche. Meme raison pour le max-width du select. */
.comp-bandeau > * { min-width: 0; }
.comp-bandeau .card { margin: 0; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; }
.comp-bandeau select { max-width: 100%; }
.comp-bandeau .mini-form { flex-wrap: wrap; }
.comp-bandeau .mini-form input[type=text] { min-width: 140px; max-width: 100%; }
.comp-bandeau .mini-form label { max-width: 100%; }
/* .mini-form declare display:flex, ce qui l'emporterait sur l'attribut
   hidden : on le neutralise explicitement partout dans ce bandeau. */
.comp-bandeau .mini-form[hidden] { display: none !important; }
/* Nom de l'evaluation rouverte, annonce au-dessus de la premiere epreuve. */
.session-titre { font-size: 30px; font-weight: 800; margin: 18px 0 4px;
  color: #79bdf0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.session-titre::before { content: '\f07c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 24px; opacity: .8; }
.session-titre[hidden] { display: none !important; }
@media (max-width: 1100px) { .comp-bandeau { grid-template-columns: 1fr; } }

/* Rappel des coefficients pendant l'evaluation : le prof doit voir ce que
   pese l'epreuve et ce que pese la competence dedans, sans quitter la page. */
.badge-coef { display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: rgba(61,143,209,.16); color: #79bdf0; font-size: 12px; font-weight: 700;
  white-space: nowrap; }
.comp-domaine .badge-coef { margin-left: 10px; vertical-align: middle; }
/* Moyenne vive de l'epreuve : grise tant que rien n'est coche, mise en avant
   des qu'un niveau est saisi. */
.epr-moy { float: right; font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--bg3); border-radius: 999px; padding: 2px 12px; }
.epr-moy.epr-moy-active { color: #79bdf0; background: rgba(61,143,209,.18); }
.badge-coef-comp { margin-top: 4px; font-size: 11px; padding: 1px 6px; }

/* Menus « Éditer Bilan » : un details/summary, pour ne pas dependre de JS. */
.menu-bilan { position: relative; display: inline-block; margin-left: 22px; }
/* Colonne d'actions d'un eleve : les deux boutons l'un sous l'autre, meme
   largeur, alignes a gauche comme a droite, et separes par un vrai espace. */
.comp-actions { white-space: nowrap; }
.comp-actions > * { display: flex; }
.comp-actions .btn-sm,
.comp-actions .menu-bilan > summary {
  width: 100%; justify-content: center; }
.comp-actions .menu-bilan { margin-left: 0; margin-top: 8px; display: block; }
.menu-bilan > summary { list-style: none; cursor: pointer; display: inline-flex; }
.menu-bilan > summary::-webkit-details-marker { display: none; }
.menu-bilan-choix { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 250px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.menu-bilan-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 4px 8px 6px; border-bottom: 1px dashed var(--border);
  margin-bottom: 4px; }
.menu-bilan-choix a { display: block; padding: 7px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap; }
.menu-bilan-choix a:hover { background: var(--bg3); color: #79bdf0; }

/* Champ d'import du trombinoscope : il porte deux lignes d'aide, il lui faut
   plus de place que les autres champs de la grille. */
.form-group-large { grid-column: 1 / -1; }
/* Trois lignes de saisie dans un seul champ : les professeurs qui encadrent
   l'atelier, tels qu'ils s'impriment en tete des bilans. */
.form-group-profs { min-width: 210px; }
.info-champ { font-size: 12px; opacity: .75; cursor: help; margin-left: 3px; }
.form-group .compteur-photos { font-weight: 600; }

/* Bandeau de la fiche competences : la photo prend place a gauche du nom, le
   bandeau grandit pour l'accueillir. */
.titre-eleve { display: flex; align-items: center; gap: 16px; line-height: 1.2; }
.titre-eleve-sous { font-size: 14px; font-weight: 600; color: var(--muted); }
.photo-eleve { width: 72px; height: 72px; border-radius: 8px; object-fit: cover;
  border: 2px solid var(--border); background: var(--bg3); flex: 0 0 auto; }
.photo-absente { display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 30px; }
/* Vignette de la liste des eleves, premiere colonne. */
.col-photo { width: 104px; padding-right: 0 !important; }
.photo-liste { width: 88px; height: 88px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border); background: var(--bg3); display: block; }
.photo-liste.photo-absente { font-size: 36px; }
.page-header-eleve { align-items: center; }

/* Case de choix du mode de saisie, dans l'encart de nouvelle session. */
.case-fine { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 600; color: #79bdf0; background: rgba(61,143,209,.12);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.case-fine input { accent-color: #3d8fd1; }
/* Les deux modes coexistent dans la page : hidden doit l'emporter sur les
   display des selecteurs. */
.saisie-fine[hidden], .saisie-simple[hidden] { display: none !important; }
.notes-table .col-niveau, .comp-table .col-niveau { min-width: 300px; }

/* Saisie sous-competence par sous-competence (referentiels ponderes). */
.sous-eval { display: flex; flex-direction: column; gap: 4px; }
.sous-eval-ligne { display: flex; align-items: center; gap: 8px;
  padding: 3px 0; border-bottom: 1px dotted var(--border); }
.sous-eval-ligne:last-child { border-bottom: none; }
.sous-eval-texte { flex: 1 1 auto; font-size: 13px; color: var(--muted); line-height: 1.35; }
.sous-eval-der { flex: 0 0 auto; }
.niv-selector-mini { flex: 0 0 auto; display: inline-flex; gap: 3px; }
.niv-selector-mini .niv-opt span { min-width: 22px; padding: 2px 5px; font-size: 12px; }
.ref-epreuve { margin-top: 18px; border-left: 3px solid var(--primary); padding-left: 12px; }
.ref-epreuve-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ref-epreuve-hdr h3 { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.ref-epreuve-actions { margin-left: auto; display: flex; gap: 6px; }
/* Report des petits coefficients : vert quand la somme retombe sur le
   coefficient de l'epreuve, ambre sinon — l'ecart doit se voir tout de suite. */
.ref-repartition { font-size: 12px; font-weight: 600; color: var(--success); }
.ref-repartition.ref-ecart { color: var(--warning); }
.ref-ajout-comp { display: block; margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--border); }

/* ── Commandes (bon de commande matériel) ── */
/* Couleur d'accent des commandes : bleu profond. Sur ecran (fond sombre) on
   prend un bleu clair lisible ; le bon imprimable et le xlsx, eux, utilisent
   #1B5E9E, plus dense, qui rend mieux sur papier blanc. */
.cmd-num { text-align: right; white-space: nowrap; }
/* Destination d'un article : l'atelier de la classe (gris, valeur par defaut)
   ou un projet precis (accentue, pour reperer d'un coup d'oeil ce qui n'est
   pas du consommable d'atelier). */
.cmd-atelier { color: var(--muted); }
.cmd-projet { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(61,143,209,.18); color: #79bdf0; font-weight: 600; }
.cmd-lien { color: var(--primary); text-decoration: none; }
.cmd-lien:hover { text-decoration: underline; }
.cmd-total-row td { border-top: 2px solid #3d8fd1; background: rgba(61,143,209,.14);
  font-size: 15px; font-weight: 700; }
/* Boutons de validation propres a la page Commandes : le vert de .btn-success
   est partage par tout le logiciel, on ne le detourne pas ici. */
/* Bon + son export Excel accoles : deux boutons, un seul objet a l'oeil. */
.cmd-bloc-bon { display: inline-flex; }
.cmd-bloc-bon .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cmd-bloc-bon .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: none; padding-left: 10px; padding-right: 10px; }
.btn-cmd { background: #2a7fc0; color: #fff; }
.btn-cmd:hover { background: #1f6ba5; }