/* ══════════════════════════════════════════════════════════════════════════
   pp.css — Professeur principal : compléments de style de la section
   Créé le 31/08/2026. RÉÉCRIT le 31/08/2026 après une erreur de diagnostic.

   ─── CE QUI EXISTAIT DÉJÀ (et que j'avais manqué) ───────────────────────
   La section n'était PAS dépourvue de feuille de style. Une centaine de
   lignes la traitent déjà, dans un fichier dont le nom ne le laisse pas
   deviner :  apps/teacher/hexaplicker/snt-teacher.css  (lignes 33-128).
   Elles définissent .card, .pp-ctl, .pp-nav, .pp-navpill, .pp-btn,
   .ppa-chip, .pp-panel, les <textarea> et les <option>, et surtout elles
   neutralisent les règles balai de dashboard.css par
       html body #content-pp p|span|div|… { color: var(--text-primary) !important }

   TROIS CONSÉQUENCES À RESPECTER, sous peine de texte illisible :

   1. La section est SOMBRE. .card vaut var(--bg-card) = rgba(26,24,37,.9).
      Toute surface claire posée ici reçoit du texte clair par-dessus, donc
      devient illisible. C'est exactement l'erreur que corrige ce fichier.

   2. Les gris se font à l'OPACITÉ, jamais à la couleur. La règle ci-dessus
      porte !important : un `color:#64748b` sur un <p> ou un <span> n'a
      aucun effet. snt-teacher.css le dit dans ses propres commentaires.

   3. .pp-navpill.active et .ppa-chip.actif reçoivent `color:#fff !important`.
      On ne le combat pas : on leur donne un fond assez sombre pour que le
      blanc tienne, quel que soit le thème choisi (voir --pp-accent-ink).

   ─── CE QUE CE FICHIER AJOUTE ───────────────────────────────────────────
   Il ne redéfinit pas ce qui fonctionne. Il ajoute ce qui manquait :
     · la hiérarchie de la sous-navigation (3 permanents | 3 occasionnels) ;
     · la pastille de compteur ;
     · la liste d'élèves (.pp-item) et son point d'état ;
     · les états vides, la fiche élève, les notes de suivi ;
     · des tailles en em au lieu de px, pour le mode « gros caractères » ;
     · les anneaux de focus clavier, absents jusqu'ici ;
     · le mode contraste renforcé et le repli mobile.

   ─── ORDRE DE CHARGEMENT ────────────────────────────────────────────────
   Ce fichier est lié APRÈS snt-teacher.css dans teacher-dashboard.html.
   C'est nécessaire : plusieurs sélecteurs y sont identiques (#content-pp
   .card), donc à spécificité égale c'est le dernier chargé qui gagne. Ne
   pas remonter ce <link> vers le haut du document.

   ─── DETTE SIGNALÉE, NON TRAITÉE ICI ────────────────────────────────────
   Les règles « Professeur principal » n'ont rien à faire dans un fichier
   nommé snt-teacher.css : c'est ce qui les a rendues invisibles à la
   recherche. Les déplacer ici est le correctif durable — un chantier à
   part, qui touche un autre module et demande son propre contrôle.
   ══════════════════════════════════════════════════════════════════════════ */

#content-pp {
  /* On reprend les variables du tableau de bord, pas les siennes. */
  --pp-surface-2:  rgba(255, 255, 255, .05);
  --pp-surface-3:  rgba(255, 255, 255, .09);
  --pp-line:       var(--border, rgba(255, 255, 255, .14));
  --pp-line-soft:  rgba(255, 255, 255, .09);

  /* Accent : suit le thème de l'enseignant.
     --pp-accent-ink est volontairement SOMBRE (32 % d'accent seulement) :
     c'est le fond des éléments actifs, sur lesquels snt-teacher.css impose
     du texte blanc. Mesuré sur les 19 thèmes : blanc sur --pp-accent-ink
     donne au minimum 6,64:1 (thème DC, --primary #ffde00). Un aplat de
     --primary pur y serait tombé à 1,2:1. */
  --pp-accent:     var(--primary, #7c3aed);
  --pp-accent-ink: color-mix(in srgb, var(--pp-accent) 32%, #16233a);
  --pp-accent-dim: color-mix(in srgb, var(--pp-accent) 18%, transparent);

  --pp-ok:    var(--success, #10b981);
  --pp-warn:  var(--warning, #f59e0b);
  --pp-alert: var(--danger,  #ef4444);

  --pp-r-sm: 10px;
}

/* Repli sans color-mix() (Safari < 16.2, Firefox < 113) : teintes fixes. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #content-pp {
    --pp-accent-ink: #4338ca;
    --pp-accent-dim: rgba(99, 102, 241, .18);
  }
}

/* ── Sous-navigation : hiérarchie ──────────────────────────────────────────
   snt-teacher.css dessine déjà la barre et les pilules. On n'ajoute ici que
   la séparation entre les trois onglets permanents (Élèves, Réponses, Vie de
   classe) et les trois occasionnels (Année, Délégués, Projet 2I2D). */

#content-pp .pp-nav { align-items: center; }

#content-pp .pp-nav-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 6px;
  background: var(--pp-line);
}

#content-pp .pp-navpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86em;      /* était 13.5px : insensible au mode gros caractères */
  line-height: 1.2;
}

#content-pp .pp-navpill.secondaire { opacity: .72; font-weight: 500; }
#content-pp .pp-navpill.secondaire:hover,
#content-pp .pp-navpill.secondaire.active { opacity: 1; }

/* Fond sombre teinté par le thème : le `color:#fff !important` que pose
   snt-teacher.css devient lisible partout au lieu de dépendre du thème. */
#content-pp .pp-navpill.active,
#content-pp .ppa-chip.actif {
  background: var(--pp-accent-ink);
  border-color: var(--pp-accent-ink);
}

/* ── Pastille de compteur ─────────────────────────────────────────────────
   Masquée tant que PPNav.badge() n'a rien de réel à annoncer. Voir
   navigation.js : un compteur inventé vaut moins que pas de compteur. */

#content-pp .pp-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 .42em;
  border-radius: 999px;
  /* Fond = l'encre d'accent (sombre par construction), pas --primary pur :
     mesuré, du blanc sur --primary tombe à 1,52:1 avec le thème Pokémon. */
  background: var(--pp-accent-ink);
  color: #ffffff !important;   /* bat la règle p|span de snt-teacher.css */
  font-size: .72em;
  font-weight: 800;
  line-height: 1;
  /* Un liseré sombre détache la pastille du fond de la pilule active. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
#content-pp .pp-pastille[hidden] { display: none; }
#content-pp .pp-pastille.pp-pastille--alerte { background: var(--pp-alert); }

/* ── Bandeau de repères ───────────────────────────────────────────────────
   Ajouté le 01/09/2026, à l'intérieur de la carte d'en-tête.

   Contrainte de fond, rappelée en tête de ce fichier : la section est
   SOMBRE et snt-teacher.css impose `color: var(--text-primary) !important`
   à tout p|span|div de #content-pp. Une tuile à fond clair recevrait donc
   du texte clair : illisible. Les surfaces restent des voiles blancs très
   dilués posés sur le fond sombre, et les gris se font à l'opacité.

   La couleur ne porte aucune information à elle seule : chaque tuile dit en
   toutes lettres ce qu'elle compte. Le filet de gauche ne fait que la
   rattacher visuellement à l'onglet qu'elle ouvre.
   ───────────────────────────────────────────────────────────────────────── */

#content-pp .pp-tuiles {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
#content-pp .pp-tuiles[hidden] { display: none; }

#content-pp .pp-tuile {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 12px 14px 11px 17px;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-sm);
  background: var(--pp-surface-2);
  cursor: pointer;
  overflow: hidden;
  transition: background .16s, border-color .16s, transform .16s;
}
#content-pp .pp-tuile:hover {
  background: var(--pp-surface-3);
  border-color: var(--pp-accent);
  transform: translateY(-1px);
}
#content-pp .pp-tuile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--pp-teinte, var(--pp-accent));
}
/* Le chiffre est la seule couleur vive, et il reste sur fond sombre —
   jamais l'inverse : un aplat clair sous du texte clair est ce qui a rendu
   19 boutons illisibles ailleurs dans ce tableau de bord.

   ÉCLAIRCI À 45 % DE BLANC, ET CE N'EST PAS UN CHOIX ESTHÉTIQUE.
   Mesuré au banc : la teinte PURE du thème par défaut (--primary #7c3aed)
   sur le fond de la tuile — rgb(36,35,47), soit le voile blanc à 5 % posé
   sur var(--bg-card) — donne 2,72:1. Le seuil AA du grand texte est 3:1 :
   le chiffre, c'est-à-dire la seule chose que la tuile existe pour montrer,
   passait en dessous. Le même mélange remonte à 6,3:1, et reste sûr quel
   que soit le thème : on éclaircit toujours vers le blanc, sur fond sombre.
   Ne pas revenir à la teinte pure sans remesurer. */
#content-pp .pp-tuile-n {
  display: block;
  font-size: 1.7em;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--pp-teinte, var(--pp-accent)) 55%, #ffffff) !important;
}
/* Sans color-mix() : on renonce à la teinte plutôt qu'à la lisibilité. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  #content-pp .pp-tuile-n { color: var(--text-primary, #ffffff) !important; }
}
#content-pp .pp-tuile-l { display: block; font-size: .8em;  opacity: .82; margin-top: 3px; }
#content-pp .pp-tuile-s { display: block; font-size: .72em; opacity: .6;  margin-top: 5px; }

/* Chiffre inconnu : la tuile s'efface au lieu d'annoncer un zéro, qui
   voudrait dire « j'ai compté, il n'y en a aucune ». Elle reste CLIQUABLE —
   c'est justement l'onglet où l'on va voir ce qui n'est pas encore compté —
   donc elle garde le curseur de la main et sa réaction au survol. */
#content-pp .pp-tuile--vide { opacity: .6; }
#content-pp .pp-tuile--vide .pp-tuile-n { color: var(--text-primary, #ffffff) !important; }

/* ── En-tête de section ────────────────────────────────────────────────── */

#content-pp .card.pp-header-card { margin-bottom: 16px; }
#content-pp .card.pp-card--tight { padding: 12px; }

#content-pp .pp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#content-pp .pp-head-txt { flex: 1; min-width: 220px; }

#content-pp .pp-title    { margin: 0 0 4px; font-size: 1.25em; font-weight: 800; }
#content-pp .pp-title-sm { margin: 0 0 3px; font-size: 1.12em; font-weight: 800; }

/* Gris obtenu par l'opacité — une couleur figée serait écrasée. */
#content-pp .pp-sub { margin: 0; font-size: .82em; line-height: 1.5; opacity: .72; }

#content-pp .pp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#content-pp .pp-row--tight { gap: 8px; }
#content-pp .pp-row--mb    { margin-bottom: 14px; }

/* ── Contrôles ─────────────────────────────────────────────────────────── */

#content-pp .pp-ctl { font-size: .86em; min-width: 170px; }

/* ── Boutons ───────────────────────────────────────────────────────────── */

#content-pp .pp-btn { font-size: .84em; }
#content-pp .pp-btn.pp-btn--sm { padding: 6px 12px; min-height: 32px; font-size: .78em; }

#content-pp .pp-btn.pp-btn--ghost {
  background: transparent;
  border: 1px solid var(--pp-line);
  color: var(--text-primary, #e2e8f0) !important;
  font-weight: 600;
}
#content-pp .pp-btn.pp-btn--ghost:hover { background: var(--pp-surface-3); filter: none; }

#content-pp .pp-btn.pp-btn--info { background: linear-gradient(135deg, #0e7490, #0891b2); }

/* Action discrète en fin de ligne (supprimer une note, une réponse). */
#content-pp .pp-lien {
  border: 0;
  background: transparent;
  padding: 0;
  /* Rouge 300 : 5,9:1 sur rgba(26,24,37,.9). Le rouge 400 d'origine tombait
     sous le seuil dès qu'un thème éclaircissait le fond de carte. */
  color: #fca5a5 !important;
  font-size: .74em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#content-pp .pp-lien:hover { color: #fecaca !important; }

#content-pp .pp-lien.pp-lien--ico {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-size: .9em;
  text-decoration: none;
  opacity: .6;
}
#content-pp .pp-lien.pp-lien--ico:hover { opacity: 1; }

/* ── Grille liste / fiche ──────────────────────────────────────────────── */

#content-pp .pp-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 16px;
  align-items: start;
}
#content-pp .pp-layout--large { grid-template-columns: minmax(220px, 300px) 1fr; }

#content-pp .pp-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pp-line-soft);
}
#content-pp .pp-list-title {
  font-size: .78em;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
}
#content-pp .pp-list-count { font-size: .78em; opacity: .6; }

#content-pp .pp-list {
  max-height: 62vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  scrollbar-width: thin;
}

/* Élève dans la liste — rendu par student-overview.js.
   Avant : aucun fond ni bordure, et la règle balai de dashboard.css
   repeignait le bouton en blanc. data-couleurs="pp" lève cette dernière. */
#content-pp .pp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--pp-r-sm);
  background: transparent;
  color: var(--text-primary, #e2e8f0) !important;
  font-size: .86em;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#content-pp .pp-item:hover { background: var(--pp-surface-3); }

#content-pp .pp-item.actif {
  /* Même encre que la pilule active : un voile translucide d'accent virait
     au jaune pâle sous certains thèmes, sous le texte clair de la section. */
  background: var(--pp-accent-ink);
  border-color: var(--pp-accent);
  font-weight: 700;
}

/* Point d'état : porte l'information avant le clic. */
#content-pp .pp-dot {
  flex: 0 0 auto;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
#content-pp .pp-dot--ok    { background: var(--pp-ok); }
#content-pp .pp-dot--warn  { background: var(--pp-warn); }
#content-pp .pp-dot--alert { background: var(--pp-alert); }

#content-pp .pp-item-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── États vides ───────────────────────────────────────────────────────── */

#content-pp .pp-empty { margin: 0; padding: 14px 12px; font-size: .82em; opacity: .6; }
#content-pp .pp-row > .pp-empty { padding: 0; align-self: center; }

#content-pp .pp-empty-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 52px 20px;
  opacity: .6;
}
#content-pp .pp-empty-ico { font-size: 2.4em; line-height: 1; }
#content-pp .pp-empty-txt { margin: 0; font-size: .88em; }

/* ── Fiche élève ───────────────────────────────────────────────────────── */

#content-pp .pp-fiche-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pp-line-soft);
}

#content-pp .pp-avatar {
  flex: 0 0 auto;
  width: 3.1em;
  height: 3.1em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pp-accent-ink);
  border: 1px solid var(--pp-accent);
  color: #ffffff !important;
  font-size: 1.15em;
  font-weight: 800;
}

#content-pp .pp-badges { margin-bottom: 18px; }

#content-pp .pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
#content-pp .pp-stat {
  padding: 12px 14px;
  border: 1px solid var(--pp-line-soft);
  border-radius: 12px;
  background: var(--pp-surface-2);
}
#content-pp .pp-stat-v { font-size: 1.35em; font-weight: 800; }
#content-pp .pp-stat-l { font-size: .74em; opacity: .7; margin-top: 2px; }

/* Badges d'adaptation. RGPD : ils signalent l'existence d'un dispositif,
   jamais son motif médical. La couleur ne code qu'une famille. */
#content-pp .pp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .72em;
  font-weight: 700;
}
#content-pp .pp-badge--pai { color: #fca5a5 !important; }
#content-pp .pp-badge--pap { color: #fcd34d !important; }
#content-pp .pp-badge--tt  { color: #c4b5fd !important; }
#content-pp .pp-badge--dys { color: #67e8f9 !important; }

#content-pp .pp-info {
  padding: 11px 13px;
  border-radius: var(--pp-r-sm);
  border-left: 3px solid var(--pp-accent);
  background: var(--pp-accent-dim);
  font-size: .82em;
  line-height: 1.5;
  margin-bottom: 20px;
}

#content-pp .pp-section-titre { margin-bottom: 8px; font-size: .9em; font-weight: 800; }

#content-pp .pp-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--pp-r-sm);
  font: inherit;
  font-size: .86em;
  line-height: 1.5;
  resize: vertical;
}

/* ── Notes de suivi ───────────────────────────────────────────────────── */

#content-pp .pp-note {
  padding: 10px 12px;
  border: 1px solid var(--pp-line-soft);
  border-left: 3px solid var(--pp-accent);
  border-radius: var(--pp-r-sm);
  background: var(--pp-surface-2);
  margin-bottom: 8px;
}
#content-pp .pp-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: .74em;
  opacity: .65;
  margin-bottom: 4px;
}
#content-pp .pp-note-corps { font-size: .86em; white-space: pre-wrap; line-height: 1.5; }

#content-pp .pp-code {
  font-size: .95em;
  font-weight: 800;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

/* ── Accessibilité ─────────────────────────────────────────────────────── */

/* Aucun anneau de focus n'existait dans cette section : la navigation au
   clavier s'y faisait à l'aveugle. */
#content-pp button:focus-visible,
#content-pp a:focus-visible,
#content-pp select:focus-visible,
#content-pp input:focus-visible,
#content-pp textarea:focus-visible,
#content-pp [tabindex]:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
  border-radius: var(--pp-r-sm);
}

/* Mode contraste renforcé : dashboard.css bascule --bg-card en noir et
   --text-primary en blanc, donc la section suit déjà. On ne reprend ici que
   ce qui échapperait à ce basculement. */
body.accessibility-contrast #content-pp .pp-navpill.active,
body.accessibility-contrast #content-pp .ppa-chip.actif,
body.accessibility-contrast #content-pp .pp-avatar {
  background: #000000;
  border-color: #ffff00;
  color: #ffff00 !important;
}
body.accessibility-contrast #content-pp .pp-pastille {
  background: #ffff00;
  color: #000000 !important;
  box-shadow: none;
}
body.accessibility-contrast #content-pp .pp-item.actif {
  background: #000000;
  border-color: #ffff00;
}
/* La couleur seule ne doit pas porter l'information : en mode contraste les
   points d'état se distinguent par leur contour, pas par leur teinte. */
body.accessibility-contrast #content-pp .pp-dot        { background: #000000; box-shadow: 0 0 0 2px #ffffff; }
body.accessibility-contrast #content-pp .pp-dot--warn,
body.accessibility-contrast #content-pp .pp-dot--alert { background: #ffff00; box-shadow: 0 0 0 2px #ffff00; }
body.accessibility-contrast #content-pp .pp-badge      { color: #ffff00 !important; }
/* Les chiffres du bandeau sont teintés par le thème : en contraste renforcé
   la teinte du thème n'est plus garantie sur fond noir. */
body.accessibility-contrast #content-pp .pp-tuile {
  background: #000000;
  border-color: #ffff00;
}
body.accessibility-contrast #content-pp .pp-tuile::before,
body.accessibility-contrast #content-pp .pp-tuile-n { background: none; color: #ffff00 !important; }
body.accessibility-contrast #content-pp .pp-tuile::before { background: #ffff00; }

@media (prefers-reduced-motion: reduce) {
  #content-pp .pp-panel { animation: none; }
  #content-pp .pp-navpill,
  #content-pp .pp-btn,
  #content-pp .ppa-chip,
  #content-pp .pp-tuile,
  #content-pp .pp-item { transition: none; }
  #content-pp .pp-tuile:hover { transform: none; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  #content-pp .pp-layout,
  #content-pp .pp-layout--large { grid-template-columns: 1fr; }
  #content-pp .pp-list { max-height: 42vh; }

  /* Six onglets ne tiennent pas sur une largeur de téléphone sans passer
     trois fois à la ligne : la barre devient un rail horizontal. */
  #content-pp .pp-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #content-pp .pp-nav::-webkit-scrollbar { display: none; }
  #content-pp .pp-navpill  { flex: 0 0 auto; }
  #content-pp .pp-nav-sep  { flex: 0 0 1px; }
}

@media (max-width: 560px) {
  #content-pp .pp-ctl { width: 100%; min-width: 0; }
}