@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;700&family=Inter:wght@400;600;700&display=swap');

:root {
  --retro-teal:   #127676;
  --retro-orange: #E4632E;
  --retro-jaune:  #E3A535;
  --retro-ink:    #0D1617;
  --retro-paper:  #F2EFE6;

  --retro-success:  var(--retro-teal);
  --retro-error:    var(--retro-orange);
  --retro-warning:  var(--retro-jaune);
  --retro-disabled: rgba(13, 22, 23, 0.4);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  --radius-card:     24px 8px 24px 8px;
  --radius-card-alt:  8px 24px 8px 24px;
  --radius-card-sm:  12px 4px 12px 4px;
  --radius-pill: 50px;
  --radius-sm: 8px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;

  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--retro-ink);
  min-height: 100vh;
}

body {
  background-color: var(--retro-paper);
  background-image: url('/assets/fond_art_nouveau.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: 'Anton', 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-md);
  color: var(--retro-ink);
}
h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1rem, 2.5vw, 1.5rem); }
p  { line-height: 1.55; }

button, a, [role="button"], input, select, textarea { min-height: 44px; }

/* La cible tactile de 44px vaut pour un champ de saisie, pas pour une case à
   cocher : son carré de 13px flottait au milieu d'une boîte trois fois trop
   haute et se désalignait de son libellé. On lui rend une taille propre,
   tactile elle aussi. */
input[type="checkbox"] {
  min-height: 0;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  accent-color: var(--retro-teal);
  cursor: pointer;
}

/* -------- Cadre de page -------- */
.page-frame {
  background: var(--retro-paper);
  border: 3px solid var(--retro-orange);
  box-shadow: inset 0 0 0 2px var(--retro-teal);
  border-radius: var(--radius-card);
  position: relative;
  flex: 1;
  margin: 120px;
  padding: var(--space-xl);
  overflow: clip;
}

@media (max-width: 1024px) {
  .page-frame { margin: 40px; padding: var(--space-lg); }
}
@media (max-width: 639px) {
  .page-frame { margin: 16px; padding: var(--space-md); }
}

/* -------- Cartes asymétriques -------- */
.retro-card {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 2px var(--retro-orange);
  padding: var(--space-lg);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.retro-card-secondary {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card-alt);
  box-shadow: inset 0 0 0 2px var(--retro-orange);
  padding: var(--space-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.retro-card-tertiary {
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1px var(--retro-orange);
  padding: var(--space-md);
}
.retro-card:hover,
.retro-card-secondary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--retro-orange), 0 8px 24px rgba(18,118,118,0.2);
}

/* -------- Coins ornementaux (variante B — Floral Nouveau) -------- */
.corner-flourish {
  position: absolute;
  color: var(--retro-teal);
  opacity: 0.7;
  pointer-events: none;
  width: 36px;
  height: 36px;
}
.corner-flourish.top-left  { top: 8px; left: 8px; }
.corner-flourish.top-right { top: 8px; right: 8px; transform: scaleX(-1); }
.corner-flourish.bottom-left  { bottom: 8px; left: 8px; transform: scaleY(-1); }
.corner-flourish.bottom-right { bottom: 8px; right: 8px; transform: scale(-1); }
@media (min-width: 640px) { .corner-flourish { width: 48px; height: 48px; } }

/* -------- Boutons -------- */
.retro-btn-pill {
  display: inline-flex;
  border-radius: var(--radius-pill);
  border: 3px solid var(--retro-teal);
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  padding: 0;
  font: inherit;
  transition: filter 0.15s ease;
  align-items: stretch;
}
.retro-btn-pill:hover { filter: brightness(1.08); }
.retro-btn-pill:active { filter: brightness(0.95); }
.retro-btn-pill:focus-visible { outline: 3px solid var(--retro-jaune); outline-offset: 2px; }
.retro-btn-pill:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.retro-btn-pill .label {
  background: var(--retro-jaune);
  color: var(--retro-ink);
  padding: 0.75rem 1.75rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
}
.retro-btn-pill .icon {
  background: var(--retro-orange);
  color: var(--retro-paper);
  width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.retro-btn-ghost {
  border: 2px solid var(--retro-teal);
  color: var(--retro-teal);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.4rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.retro-btn-ghost:hover { background: var(--retro-teal); color: var(--retro-paper); }
.retro-btn-ghost:focus-visible { outline: 3px solid var(--retro-jaune); outline-offset: 2px; }
.retro-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* -------- Champs -------- */
.retro-input, .retro-textarea {
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--text-md);
  color: var(--retro-ink);
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.retro-textarea { resize: vertical; min-height: 140px; font-family: 'JetBrains Mono', 'Menlo', monospace; }
.retro-input:focus, .retro-textarea:focus {
  outline: none;
  border-color: var(--retro-jaune);
  box-shadow: 0 0 0 3px rgba(227,165,53,0.3);
}
.retro-input.error, .retro-textarea.error { border-color: var(--retro-orange); }
.retro-label {
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retro-teal);
  margin-bottom: var(--space-xs);
  display: block;
}

/* -------- Feedback -------- */
.feedback-success { background: rgba(18,118,118,0.1);  border-left: 4px solid var(--retro-teal);   padding: 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.feedback-error   { background: rgba(228,99,46,0.1);    border-left: 4px solid var(--retro-orange); padding: 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.feedback-warning { background: rgba(227,165,53,0.15);  border-left: 4px solid var(--retro-jaune);  padding: 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* -------- Séparateur orné -------- */
.retro-separator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  color: var(--retro-teal);
  font-size: 1.4rem;
}
.retro-separator::before,
.retro-separator::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--retro-teal) 20%, var(--retro-teal) 80%, transparent);
}

/* -------- Footer -------- */
.retro-footer {
  background: var(--retro-ink);
  border-top: 3px solid var(--retro-teal);
  padding: var(--space-lg) var(--space-xl);
  color: var(--retro-paper);
  text-align: center;
}
.retro-footer-ornament { color: var(--retro-teal); font-size: 1.5rem; margin: 0 0 var(--space-sm); }
.retro-footer-credit { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-xs); }
.retro-footer-licence { font-family: 'Inter', sans-serif; font-size: var(--text-sm); color: rgba(242,239,230,0.6); margin: 0; }
.retro-footer-link { color: var(--retro-jaune); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.retro-footer-link:hover { border-bottom-color: var(--retro-jaune); }

/* -------- Modal -------- */
.retro-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,22,23,0.85);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  z-index: 100;
}
.retro-modal-overlay.open { display: flex; }
.retro-modal {
  background: var(--retro-paper);
  border: 3px solid var(--retro-teal);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 1px var(--retro-orange), 0 24px 64px rgba(13,22,23,0.5);
  padding: var(--space-xl);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.retro-modal-close {
  background: none;
  border: none;
  color: var(--retro-teal);
  font-size: 1.6rem;
  cursor: pointer;
  float: right;
  line-height: 1;
}

/* -------- Signet du manuel -------- */
/*
   Posé sur le fond, hors du cadre de page, comme un marque-page qui dépasse
   d'un livre. Fixé au bord droit plutôt qu'absolu dans la marge : il reste
   sous la main quel que soit le défilement. Le cadre laisse 120px de fond sur
   grand écran mais 16px seulement sous 640px, où le signet mord donc sur la
   carte : il y maigrit plutôt que de disparaître.
*/
.retro-bookmark {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-sm);
  background: var(--retro-paper);
  color: var(--retro-teal);
  border: 3px solid var(--retro-teal);
  border-right: none;
  border-radius: 16px 0 16px 0;
  box-shadow: inset 0 0 0 1px var(--retro-orange), -6px 6px 20px rgba(13,22,23,0.35);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.retro-bookmark-mot {
  writing-mode: vertical-rl;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-sm);
}
.retro-bookmark:hover,
.retro-bookmark:focus-visible {
  background: var(--retro-teal);
  color: var(--retro-paper);
  transform: translateY(-50%) translateX(-4px);
}
@media (max-width: 639px) {
  .retro-bookmark { padding: var(--space-md) 2px; }
  .retro-bookmark-mot { font-size: var(--text-xs); letter-spacing: 0.12em; }
}

/* -------- Modale du manuel -------- */
.retro-modal-large { max-width: 860px; }

/* L'en-tête reste au bord haut pendant qu'on parcourt seize sections : sans
   lui, fermer imposerait de remonter tout le manuel. Le décalage négatif
   annule le padding de la modale, sinon il resterait une bande de papier
   au-dessus au moment où l'en-tête se colle. */
.manuel-entete {
  position: sticky;
  top: calc(-1 * var(--space-xl));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--retro-paper);
  padding: var(--space-xl) 0 var(--space-sm);
  margin: calc(-1 * var(--space-xl)) 0 var(--space-md);
  border-bottom: 2px solid var(--retro-teal);
  z-index: 1;
}
.manuel-entete h2 { margin: 0; }
.manuel-entete .retro-modal-close { float: none; flex: none; }

.manuel-contenu > * + * { margin-top: var(--space-md); }
.manuel-contenu h3 {
  color: var(--retro-teal);
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--text-lg);
}
.manuel-contenu > h3:first-child { margin-top: 0; }
.manuel-contenu p, .manuel-contenu li { line-height: 1.6; }
.manuel-contenu ul { padding-left: 1.2rem; margin-top: var(--space-sm); }
.manuel-contenu li + li { margin-top: var(--space-sm); }
.manuel-contenu blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border-left: 4px solid var(--retro-orange);
  background: rgba(228,99,46,0.07);
  border-radius: var(--radius-sm);
}
/* Un tableau à trois colonnes de phrases déborde d'une modale : il défile sur
   lui-même, jamais la page. */
.manuel-table-wrap { overflow-x: auto; margin: var(--space-md) 0; }
.manuel-contenu .retro-table { font-size: var(--text-sm); }
.manuel-contenu .retro-separator { margin: var(--space-lg) 0; }

/* -------- Layout grilles -------- */
.app-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 640px) { .app-layout { gap: var(--space-lg); } }
@media (min-width: 1024px) { .app-layout.cols-2 { grid-template-columns: 1fr 1fr; } }

/* -------- Tag/Pill simple -------- */
.retro-pill {
  display: inline-block;
  background: var(--retro-teal);
  color: var(--retro-paper);
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.retro-pill.warn { background: var(--retro-orange); }

/* -------- Tableaux -------- */
.retro-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.retro-table th, .retro-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(18,118,118,0.25); }
.retro-table th {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--retro-teal);
  font-weight: 700;
  font-size: var(--text-sm);
}
.retro-table tr:hover td { background: rgba(18,118,118,0.05); }

/* Texte réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité,
   absent de la page. Sert aux en-têtes de colonnes qui ne portent qu'une
   commande, comme la croix de retrait d'un critère. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------- Grille de critères (création de session) --------
   Un tableau de saisie, pas un tableau de lecture : les cellules portent des
   champs, la colonne intitulé prend toute la place restante parce que ce sont
   des phrases, la colonne maximum reste étroite parce que c'est un nombre. */
.criteria-grid { table-layout: auto; }
.criteria-grid td { padding: 0.25rem 0.4rem; vertical-align: middle; }
.criteria-grid th { padding: 0.4rem; }
.criteria-grid .row-num { color: var(--retro-teal); font-family: 'Oswald', sans-serif; text-align: center; }
.criteria-grid input { padding: 0.4rem 0.6rem; }
.criteria-grid tfoot td, .criteria-grid tfoot th {
  border-bottom: none;
  border-top: 2px solid var(--retro-teal);
  font-family: 'Oswald', sans-serif;
  font-size: var(--text-md);
  color: var(--retro-teal);
  text-transform: uppercase;
}
.criteria-grid tfoot #criteria-total { color: var(--retro-ink); font-weight: 700; }
.criteria-grid tr:hover td { background: transparent; }

/* Croix de retrait d'une ligne : même geste et même discrétion que celle des
   pastilles d'élèves, sans être définitive ici, rien n'étant encore créé. */
.criterion-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2em;
  line-height: 1;
  min-height: 44px;
  min-width: 2rem;
  color: rgba(13,22,23,0.45);
  transition: color 0.15s;
}
.criterion-remove:hover:not(:disabled) { color: var(--retro-orange); }
.criterion-remove:disabled { opacity: 0.25; cursor: not-allowed; }

/* -------- Boutons cotation (5 niveaux) -------- */
.level-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
@media (min-width: 640px) { .level-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); } }

.level-btn {
  border: 2px solid var(--retro-teal);
  background: var(--retro-paper);
  color: var(--retro-ink);
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: center;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.level-btn:hover { background: rgba(18,118,118,0.1); }
.level-btn.selected {
  background: var(--retro-teal);
  color: var(--retro-paper);
  border-color: var(--retro-ink);
}
.level-btn:focus-visible { outline: 3px solid var(--retro-jaune); outline-offset: 2px; }
.level-btn .num { display: block; font-size: var(--text-xs); opacity: 0.7; margin-top: 2px; }

/* -------- QR + lien -------- */
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
}
.qr-block canvas, .qr-block img { background: white; padding: var(--space-md); border-radius: var(--radius-sm); }
.qr-link {
  word-break: break-all;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: var(--text-sm);
  background: rgba(18,118,118,0.1);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  max-width: 100%;
}

/* QR projeté en grand */
.qr-block.huge canvas, .qr-block.huge img { width: min(70vh, 80vw); height: auto; }

/* Écran projeté, avant les résultats : tout doit tenir d'un coup d'œil, sans
   défilement, sur un vidéoprojecteur en plein écran. Les marges de lecture
   ordinaires y coûtent trop cher, la page n'étant pas lue mais regardée. */
#screen-qr canvas, #screen-qr img { width: min(52vh, 68vw); }
body.screen-live .page-frame { margin: 24px; padding: var(--space-lg); }
body.screen-live .retro-separator { margin: var(--space-md) 0; }
body.screen-live header { margin-bottom: var(--space-md) !important; }
body.screen-live .retro-footer { padding: var(--space-sm) var(--space-lg); }
body.screen-live .retro-footer-ornament { display: none; }

/* -------- Récapitulatif projeté, compacté --------

   Une classe de 25 élèves sur 6 critères, c'est 150 nombres à poser sur un
   écran : à la taille de lecture, le tableau fait deux écrans et demi, et le
   prof devrait faire défiler pendant la mise en commun. Tout est donc ramené
   en `em`, pour qu'une seule variable de police commande la densité entière,
   et `results.js` ajuste cette variable au nombre d'élèves.

   Le prix est assumé et il est physique : passé une vingtaine d'élèves, les
   chiffres deviennent petits pour le fond d'une grande salle. Le plancher de
   `results.js` refuse de descendre plus bas qu'illisible, quitte à laisser
   défiler. */
body.recap-dense .page-frame { margin: 16px; padding: var(--space-md); }
body.recap-dense header { margin-bottom: var(--space-sm) !important; }
body.recap-dense .retro-separator { margin: var(--space-sm) 0; }
body.recap-dense .retro-footer { display: none; }
body.recap-dense #view-recap { padding: var(--space-md) var(--space-lg); }
body.recap-dense #view-recap h2 { margin-bottom: var(--space-xs); font-size: var(--text-lg); }
/* Le nom de la session reste lisible mais cesse d'occuper le quart de l'écran :
   chaque pixel repris au titre revient au corps du tableau, et c'est lui qu'on
   vient lire. */
body.recap-dense header h1 { font-size: var(--text-2xl); }

/* La police du tableau commande sa densité : les espacements suivent en `em`. */
#recap-table { font-size: var(--recap-font, var(--text-md)); }
#recap-table th, #recap-table td { padding: 0.35em 0.6em; }
#recap-table th { font-size: 0.85em; }

/* Trop de critères pour la largeur de l'écran : le tableau garde la largeur
   qu'il lui faut et défile latéralement, au lieu de comprimer ses colonnes.
   Comprimer coûtait double : les intitulés passaient à la ligne, ce qui mangeait
   la hauteur que le compactage venait de gagner, et les nombres se serraient
   sans que rien ne prévienne qu'il manquait de la place. */
body.recap-dense #recap-table { width: auto; min-width: 100%; }
body.recap-dense #recap-table th, body.recap-dense #recap-table td { white-space: nowrap; }
body.recap-dense .recap-scroll { overflow-x: auto; scrollbar-width: thin; }

/* Le prénom reste à l'écran pendant qu'on défile vers les derniers critères :
   sans lui, la colonne qu'on est allé chercher n'est qu'une file de nombres
   qui n'appartiennent à personne. Le fond doit être opaque, la cellule passant
   par-dessus les suivantes. */
body.recap-dense #recap-table th:first-child,
body.recap-dense #recap-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--retro-paper);
  z-index: 1;
  box-shadow: 1px 0 0 rgba(18, 118, 118, 0.25);
}
/* La ligne des moyennes garde son aplat jusque dans la colonne figée. */
body.recap-dense #recap-tbody tr:last-child td:first-child { background: #f7e7dd; }

/* Les appariements se lisent depuis le fond de la classe : c'est sur eux que
   chaque groupe se déplace, ils priment sur le compteur de validations. */
.pair-pill {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  letter-spacing: 0.04em;
  padding: 0.35rem 1.25rem;
  border-radius: 999px;
  background: var(--retro-teal);
  color: var(--retro-creme);
}
.pair-pill.resting { background: var(--retro-orange); font-size: clamp(1rem, 2vw, 1.5rem); }

/* -------- Distribution -------- */
.distribution-row {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.distribution-bar {
  background: rgba(18,118,118,0.15);
  border-radius: var(--radius-sm);
  height: 28px;
  overflow: hidden;
}
.distribution-bar > div {
  background: var(--retro-teal);
  height: 100%;
  transition: width 0.4s ease;
}
.distribution-count { text-align: right; font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--retro-teal); }

/* -------- Critère cliquable (élève) -------- */
.criterion-clickable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-card-sm);
  padding: var(--space-md);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  width: 100%;
  font: inherit;
  color: var(--retro-ink);
  text-align: left;
}
.criterion-clickable:hover { background: rgba(18,118,118,0.05); }
.criterion-clickable.done { border-color: var(--retro-orange); box-shadow: inset 0 0 0 1px var(--retro-orange); }
.criterion-clickable .label { font-weight: 600; }
.criterion-clickable .value-tag {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: var(--text-sm);
  background: var(--retro-orange);
  color: var(--retro-paper);
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.criterion-clickable .value-tag.empty { background: rgba(13,22,23,0.15); color: var(--retro-ink); }

/* -------- Liste élèves -------- */
.student-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--retro-paper);
  border: 2px solid var(--retro-teal);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-sm);
  margin: 2px;
  font-family: 'Oswald', sans-serif;
}
.student-chip.submitted { background: var(--retro-teal); color: var(--retro-paper); }

/* Absent de la séance en cours : la pastille reste lisible mais s'efface, le
   prof doit voir d'un coup d'oeil qui est là sans avoir à lire chaque prénom. */
.student-chip.absent {
  border-style: dashed;
  border-color: rgba(13, 22, 23, 0.3);
  opacity: 0.5;
}
.student-chip.waiting {
  border-color: var(--retro-orange);
  border-style: dashed;
}

/* -------- Séance en cours (panneau prof) -------- */
.meeting-bar {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 2px dashed var(--retro-teal);
  border-radius: var(--radius-card-sm);
}
.meeting-bar.closed { border-color: var(--retro-orange); }

/* Tour déjà joué : figé, il ne se recalculera plus. Le distinguer du
   prévisionnel évite que le prof annonce à la classe un appariement qui
   bougera si un groupe manque. */
.retro-table tr.round-played { opacity: 0.55; }
.retro-table tr.round-planned { font-style: italic; }

/* Croix de retrait, dans la pastille du prénom. Discrète au repos, franchement
   orange au survol : le geste est définitif, il ne doit pas se faire au vol. */
.student-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 0 0 2px;
  color: inherit;
  opacity: 0.45;
  transition: opacity 0.15s, color 0.15s;
}
.student-remove:hover,
.student-remove:focus-visible {
  opacity: 1;
  color: var(--retro-error);
}
.student-chip.submitted .student-remove:hover,
.student-chip.submitted .student-remove:focus-visible {
  color: var(--retro-jaune);
}

/* -------- Utilitaires -------- */
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.mono { font-family: 'JetBrains Mono', 'Menlo', monospace; }

/* Loading skeleton */
.retro-skeleton {
  background: linear-gradient(90deg, var(--retro-paper) 25%, rgba(18,118,118,0.1) 50%, var(--retro-paper) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 1em;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }