/* Feuille de positionnement ; grille officielle CIEL (ADR-032/033).
 *
 * Les teintes des niveaux de maîtrise sortent de la palette Tailwind compilée :
 * classes dédiées ici (CSP-safe, stables sans rebuild), à l'image de
 * scenario-tunnel.css. Le code métier reste le NIVEAU, pas la couleur.
 *
 * Un niveau = une puce radio : l'input est masqué, le <label> jumeau porte le
 * style, et `input:checked + label` marque le niveau retenu ; sans JavaScript. */

.niv-groupe { display: flex; flex-wrap: wrap; gap: .375rem; }

.niv-opt { position: relative; }
.niv-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
/* Une CASE, et non un texte (retour porteur du 2026-07-27) : cinq libellés en
 * toutes lettres devant chaque critère répétaient la légende à chaque ligne et
 * poussaient la feuille hors de l'écran. Reste le repère, le chiffre du niveau,
 * dans un carré bordé de SA couleur, en gras.
 * Le libellé demeure pour qui ne voit pas les couleurs : infobulle au survol, et
 * texte lisible par les lecteurs d'écran. */
.niv-opt label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 1.85rem; padding: 0 .35rem;
  border-radius: 6px; border: 2px solid;
  font-size: .78rem; font-weight: 700; cursor: pointer; background: #fff;
  transition: filter .1s ease;
}
.niv-opt label:hover { filter: brightness(.97); }
.niv-opt input:focus-visible + label { outline: 2px solid #6366f1; outline-offset: 2px; }

/* État inactif : bordure grasse de la couleur du niveau, chiffre à la même
 * teinte. Le fond reste blanc, la case est vide tant qu'on n'a pas choisi. */
.niv-opt.c-gris label       { color: #4b5563; border-color: #9ca3af; }
.niv-opt.c-rouge label      { color: #b91c1c; border-color: #dc2626; }
.niv-opt.c-orange label     { color: #c2410c; border-color: #ea580c; }
.niv-opt.c-vert_clair label { color: #15803d; border-color: #22c55e; }
.niv-opt.c-vert_fonce label { color: #14532d; border-color: #15803d; }

/* Niveau retenu (radio coché) : aplat plein, texte blanc. */
.niv-opt.c-gris       input:checked + label { background: #6b7280; color: #fff; border-color: #4b5563; }
.niv-opt.c-rouge      input:checked + label { background: #dc2626; color: #fff; border-color: #b91c1c; }
.niv-opt.c-orange     input:checked + label { background: #ea580c; color: #fff; border-color: #c2410c; }
.niv-opt.c-vert_clair input:checked + label { background: #22c55e; color: #fff; border-color: #16a34a; }
.niv-opt.c-vert_fonce input:checked + label { background: #15803d; color: #fff; border-color: #14532d; }

/* Niveau suggéré (par le nombre d'indicateurs cochés) : liseré pointillé, que le
 * niveau soit retenu ou non. Le professeur reste libre de choisir un autre niveau. */
.niv-opt.is-suggere label { outline: 2px dashed #6b7280; outline-offset: 1px; }

/* Palette des niveaux, source unique : la pastille de la feuille et le texte du
   suivi en découlent, donc les deux écrans ne peuvent pas diverger.

   Deux teintes par niveau, car un aplat et un texte n'ont pas les mêmes
   exigences. `--niv` remplit, `--niv-texte` s'écrit, plus sombre pour rester
   lisible sur fond clair (retour porteur, les quatre niveaux se confondaient).
   Le rouge et le orange restent VIFS, le vert clair PASTEL (retour porteur) : ce sont deux niveaux voisins de la grille, et c'est la vivacité,
   plus que la teinte, qui les sépare à l'œil. Le vert foncé, lui, tire vers le
   sapin, ce qui suffit à le distinguer du vert clair. */
.c-gris       { --niv: #9ca3af; --niv-texte: #4b5563; }
/* Le bleu ne dit PAS un niveau : il dit qu'un critère a été TRAITÉ, sur la
 * carte de couverture du bilan. Bleu de l'administration dans la charte, donc
 * hors de l'échelle rouge-orange-vert, qui parle de résultat. */
.c-bleu       { --niv: #1d4ed8; --niv-texte: #1d4ed8; }
.c-rouge      { --niv: #dc2626; --niv-texte: #dc2626; }
.c-orange     { --niv: #ea580c; --niv-texte: #ea580c; }
.c-vert_clair { --niv: #22c55e; --niv-texte: #34a853; }
.c-vert_fonce { --niv: #15803d; --niv-texte: #14532d; }

/* Le niveau écrit en toutes lettres, à la teinte de son niveau. */
.niv-texte { color: var(--niv-texte, #4b5563); }

/* Pastille de rappel (légende, badge de niveau posé). */
.niv-pastille {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, .12); vertical-align: middle;
  background: var(--niv, #9ca3af);
}

/* Carré plein du niveau posé, pour le SUIVI (retour porteur) : mêmes couleurs
   que la feuille, forme carrée pour qu'on ne les confonde pas. */
.niv-carre {
  display: inline-block; width: .8rem; height: .8rem; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12); vertical-align: middle;
  background: var(--niv, #9ca3af);
}


/* Parties repliables de la feuille (ADR-058) : repli NATIF <details>, sans
 * JavaScript, la CSP interdisant le script en ligne et le geste n'ayant aucune
 * conséquence à porter dans l'URL. */
.partie > summary { list-style: none; cursor: pointer; }
.partie > summary::-webkit-details-marker { display: none; }
.partie__fleche { transition: transform .12s ease; }
.partie[open] > summary .partie__fleche { transform: rotate(90deg); }


/* Signal d'attente sur la carte d'un élève (ADR-057 amendé) : la bordure
 * c'est le FOND qui respire, son intensité montant et redescendant lentement
 * (retour porteur ; la bordure gauche a précédé, moins visible du coin de
 * l'œil). Le clignotement, lui, a été écarté d'emblée, plus dur à l'œil sur
 * vingt-quatre lignes.
 * Deux secondes et demie par cycle, et rien du tout pour qui a demandé moins
 * de mouvement dans son système. */
@keyframes respiration {
  0%, 100% { background-color: #fffdf9; }
  50%      { background-color: #ffe3d1; }
}
.respire { animation: respiration 2.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .respire { animation: none; background-color: #ffe3d1; }
}