/* L'espace Agarium — la COQUE du 07/09/2026, d'après la maquette « prototype » de Christophe
   (06/09) : une barre latérale sombre, un atelier clair, Quicksand en titres, Nunito Sans en
   texte — dans la palette NUIT / CYAN de l'appli et de la « seconde peau » du 02/09 (maquette :
   https://claude.ai/code/artifact/3130e655-ab18-4abb-a6c7-8614dd730df7), choix de Christophe le
   07/09 (le vert du prototype écarté : cohérence avec l'appli). Les composants n'ont pas bougé.
   Téléphone d'abord ; pas de style en ligne (CSP) ; polices servies depuis ui/fonts. */

@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../ui/fonts/Quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../ui/fonts/Quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../ui/fonts/NunitoSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../ui/fonts/NunitoSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nuit: #0e2144;          /* la barre latérale, les titres — la nuit de l'appli */
  --accent: #172e57;        /* boutons pleins, liens */
  --accent-fonce: #0e2144;
  --encre: #14213a;
  --texte-2: #4c5d78;       /* sous-textes, fils d'Ariane */
  --fond: #eef3fa;
  --carte: #ffffff;
  --trait: #d5e0ee;
  --trait-2: #c2d1e6;
  --gris-pale: #e6ecf4;
  --cyan: #19c0dc;          /* l'accent vivant du logo : focus, avatar, comptes des tags */
  --cyan-fonce: #0f8fa8;
  --cyan-pale: #dff6fa;
  --magenta: #b455c4;       /* rare : l'interrogation, le rôle d'administrateur */
  --magenta-pale: #f4e6f7;
  --vert: #1f8a5b;          /* ouvert, visible, succès */
  --vert-pale: #e3f4ea;
  --erreur: #c0392b;
  --erreur-pale: #fbe9e6;
  --barre-texte: #c9d6ea;   /* le texte de la barre latérale */
  --barre-actif: #1f3a6b;
  --display: "Quicksand", ui-rounded, "Nunito Sans", system-ui, sans-serif;
  --corps: "Nunito Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: hidden;   /* la page ne défile jamais de côté : ce qui est large défile dans sa boîte (.defilant) */
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

/* ===== Le bandeau des pages SANS coque (landing, accès) ===== */
header:not(.fil-ariane) { background: var(--nuit); color: #fff; }
.bandeau {
  max-width: 56rem; margin: 0 auto; padding: 0.8rem 1.6rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
a.marque { display: inline-flex; align-items: center; line-height: 0; }
a.marque img { height: 40px; width: auto; }
a.marque:hover { opacity: 0.85; }
@media (max-width: 480px) {
  .bandeau { padding: 0.7rem 1rem; }
  a.marque img { height: 34px; }
}

/* ===== La coque : barre latérale + atelier ===== */
.saut { position: fixed; left: 1rem; top: -5rem; z-index: 30; background: var(--carte); padding: 0.8rem 1rem; border-radius: 10px; }
.saut:focus { top: 1rem; }
.laterale {
  position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 5;
  background: var(--nuit); color: var(--barre-texte);
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: 1.6rem 1.1rem 1.1rem; overflow-y: auto;
}
.laterale-haut { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 0.3rem; }
.laterale .legende { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8fa6cc; }
.classe-courante { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid #24406f; }
.classe-courante .retour-liste {
  display: flex; align-items: center; gap: 0.6rem; color: var(--barre-texte); text-decoration: none;
  font-weight: 600; font-size: 0.92rem; padding: 0.35rem 0.4rem; border-radius: 8px; margin-bottom: 0.4rem;
}
.classe-courante .retour-liste:hover { background: var(--barre-actif); color: #fff; }
.classe-courante label { margin: 0; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8fa6cc; font-weight: 600; padding: 0 0.4rem; }
.classe-courante select {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit; font-size: 0.98rem; font-weight: 700;
  background: #1a3260; color: #fff; border: 1.5px solid #34507f; border-radius: 10px;
}
.classe-courante select:focus { outline: 3px solid var(--cyan); border-color: var(--cyan); }
.classe-courante .nom-classe { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: #fff; padding: 0.2rem 0.4rem; }
.classe-courante small { color: #a4b6d6; font-size: 0.85rem; padding: 0 0.4rem; }
.entrees { display: flex; flex-direction: column; gap: 4px; }
.entrees a, .entrees button {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.75rem; margin: 0;
  border-radius: 10px; border: 0; background: transparent; text-decoration: none;
  color: var(--barre-texte); font: inherit; font-weight: 600; font-size: 0.98rem; text-align: left; cursor: pointer; justify-content: flex-start;
}
.entrees a:hover, .entrees button:hover, .entrees a.actif { background: var(--barre-actif); color: #fff; }
.entrees .pastille { margin-left: auto; background: #2d4a7d; color: #fff; }
.ico { flex: none; }
.laterale-bas { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 1rem; border-top: 1px solid #24406f; }
.laterale-bas a, .laterale-bas button, .laterale-bas button.discret {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; margin: 0;
  border-radius: 10px; border: 0; background: transparent; text-decoration: none;
  color: var(--barre-texte); font: inherit; font-weight: 600; font-size: 0.92rem; text-align: left; cursor: pointer; justify-content: flex-start;
}
.laterale-bas a:hover, .laterale-bas button:hover, .laterale-bas button.discret:hover { background: var(--barre-actif); color: #fff; }
.laterale-bas a.appli { color: var(--cyan); }
.laterale-bas .profil { margin-top: 0.4rem; }
.laterale-bas .avatar {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--cyan); color: var(--nuit); font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  display: grid; place-items: center;
}
.laterale-bas .qui { display: flex; flex-direction: column; line-height: 1.25; color: #fff; min-width: 0; }
.laterale-bas .qui small { color: #a4b6d6; font-size: 0.78rem; }
.laterale .deconnexion { margin: 0; }

.atelier { margin-left: 250px; min-height: 100vh; display: flex; flex-direction: column; }
.fil-ariane {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  min-height: 3.6rem; padding: 0.8rem 2.6rem; font-size: 0.82rem; color: var(--texte-2);
  background: #f8fbff; border-bottom: 1px solid var(--trait);
}
.fil-ariane .sep { color: #aab9d0; }
.fil-ariane a { color: var(--texte-2); text-decoration: none; }
.fil-ariane a:hover { color: var(--nuit); text-decoration: underline; }
.fil-ariane strong { color: var(--nuit); font-weight: 700; }
body.coque main { max-width: 1180px; width: 100%; margin: 0 auto; padding: 2rem 2.6rem 1.5rem; flex: 1; }
body.coque footer { max-width: none; text-align: center; margin: 0; padding: 1.5rem 2.6rem 2rem; font-size: 0.85rem; }
body.coque footer a { margin-left: 0.8rem; color: var(--accent); }
.tete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.tete-page > div { min-width: 0; }
.surtitre { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #5f7396; }
body.coque h1 { margin: 0; font-size: 2.05rem; letter-spacing: -0.02em; }
.tete-page .sous-titre { margin: 0.35rem 0 0; }
.gestes-tete { display: flex; align-items: center; gap: 0.5rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.gestes-tete button, .gestes-tete a.bouton { margin: 0; }
a.bouton.inactif { opacity: 0.4; pointer-events: none; }

/* Le dock du téléphone et le menu (feuille) — masqués sur grand écran. */
.dock { display: none; }
.menu-mobile .entrees { margin: 0.8rem 0 1rem; }
.menu-mobile .entrees a, .menu-mobile .entrees button {
  color: var(--encre); font-size: 1.02rem; min-height: 3rem; border-bottom: 1px solid var(--trait); border-radius: 0; width: 100%;
}
.menu-mobile .entrees a:hover, .menu-mobile .entrees button:hover, .menu-mobile .entrees a.actif { background: var(--gris-pale); color: var(--nuit); }
.menu-mobile .deconnexion { margin: 0; }
.menu-mobile .deconnexion button { width: 100%; margin: 0; }

@media (max-width: 1100px) {
  .laterale { width: 220px; padding: 1.3rem 0.8rem 0.9rem; }
  .atelier { margin-left: 220px; }
  .fil-ariane { padding: 0.7rem 1.5rem; }
  body.coque main { padding: 1.5rem 1.5rem 1rem; }
}
@media (max-width: 760px) {
  /* Téléphone : la barre devient un bandeau (logo + classe), le dock prend le bas de l'écran. */
  .laterale {
    position: static; width: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
    padding: 0.7rem 1rem; overflow: visible;
  }
  .laterale-haut { flex-direction: row; align-items: center; gap: 0.8rem; padding: 0; }
  .laterale-haut img { height: 32px; }
  .laterale .legende, .laterale .entrees, .laterale-bas, .classe-courante .retour-liste, .classe-courante label, .classe-courante small, .classe-courante .nom-classe { display: none; }
  .classe-courante { flex: 1 1 100%; padding: 0; border: 0; }
  .classe-courante select { min-height: 44px; }
  .atelier { margin: 0; min-height: 0; }
  .fil-ariane { display: none; }
  body.coque main { padding: 1.2rem 1rem calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.coque footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.coque h1 { font-size: 1.7rem; }
  /* le geste de la page (Inviter, Précédent/Suivant) se range à droite du titre s'il y a la
     place, sinon dessous — pas une rangée pleine largeur avant le contenu */
  .tete-page { flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; margin-bottom: 1.2rem; }
  .gestes-tete { margin-left: auto; }
  .gestes-tete button, .gestes-tete a.bouton { font-size: 0.92rem; padding: 0.55rem 0.9rem; }
  .dock {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: stretch;
    position: fixed; inset: auto 0 0; z-index: 8;
    background: #fbfcff; border-top: 1px solid var(--trait); box-shadow: 0 -5px 24px rgba(14, 33, 68, 0.08);
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom));
  }
  .dock a, .dock button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: 4px 2px; margin: 0; border: 0; border-radius: 8px; background: transparent;
    color: var(--texte-2); font: inherit; font-size: 0.68rem; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .dock .ico { width: 24px; height: 24px; }
  .dock a.actif { background: var(--cyan-pale); color: var(--accent); }
  .dock .pastille { display: none; }
  .menu-mobile { margin: auto auto 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0; max-height: 85dvh; }
}

/* ===== La vue d'ensemble d'une classe : compteurs, panneaux, activité, bilan ===== */
.compteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.compteur {
  display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 1.2rem 1.4rem;
}
.compteur:hover { border-color: var(--trait-2); box-shadow: 0 6px 18px rgba(14, 33, 68, 0.08); }
.compteur .quoi { font-size: 0.88rem; color: var(--texte-2); }
.compteur > strong { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1.1; color: var(--nuit); display: flex; align-items: baseline; gap: 0.6rem; }
.compteur > strong small { font-size: 0.85rem; font-weight: 500; color: var(--texte-2); }
.compteur .vers { font-size: 0.82rem; font-weight: 700; color: var(--accent); }
.compteur .vers::after { content: " →"; }
progress { height: 6px; width: 100%; border: 0; border-radius: 4px; overflow: hidden; background: var(--gris-pale); accent-color: var(--cyan-fonce); }
progress::-webkit-progress-bar { background: var(--gris-pale); }
progress::-webkit-progress-value { background: var(--cyan-fonce); border-radius: 4px; }
progress::-moz-progress-bar { background: var(--cyan-fonce); }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 1.2rem; align-items: start; }
.deux-colonnes .colonne { display: flex; flex-direction: column; gap: 1.2rem; }
.panneau { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 1.3rem 1.5rem; }
.panneau h2 { margin: 0; font-size: 1.2rem; }
.tete-panneau { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.tete-panneau .fil { color: var(--accent); }
.tete-panneau .fil::after { content: " →"; }
.panneau .vide { color: var(--texte-2); margin: 0.6rem 0 0.2rem; }
.activite { display: flex; flex-direction: column; }
.activite a {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--gris-pale);
  text-decoration: none; color: inherit;
}
.activite a:last-child { border-bottom: 0; }
.activite a:hover strong { text-decoration: underline; }
.activite .avatar, .du-moment .boite {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--cyan-pale); color: var(--cyan-fonce); font-family: var(--display); font-weight: 800; font-size: 0.85rem;
  display: grid; place-items: center;
}
.du-moment .boite { border-radius: 50%; }
.activite .infos, .du-moment .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.activite strong { font-size: 0.98rem; }
.activite small, .du-moment small { font-size: 0.85rem; }
.du-moment { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.du-moment li { display: flex; align-items: center; gap: 0.8rem; }
.inscriptions .code-classe {
  font-family: var(--mono); font-size: 2rem; letter-spacing: 0.2em; text-align: center; margin: 0.4rem 0 0.6rem;
  padding: 0.7rem 0.5rem; background: var(--cyan-pale); border-radius: 12px; color: var(--nuit); user-select: all;
}
.inscriptions button { margin-top: 0.4rem; width: 100%; }
.inscriptions form { margin: 0; }
.bilan { margin-top: 1.2rem; }
.par-experience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.par-experience a { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; }
.par-experience a:hover strong { text-decoration: underline; }
.par-experience strong { font-size: 0.95rem; }
.par-experience .sous-texte { font-size: 0.85rem; }
.accueil-eleve { grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); margin-bottom: 1.2rem; }
.panneau.appel { background: var(--cyan-pale); border-color: #bfe6ee; }
.panneau.appel p { max-width: 36rem; color: #2a4a6b; }
.panneau.appel a.bouton { margin-top: 0.2rem; }
@media (max-width: 900px) {
  .par-experience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deux-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .compteurs { grid-template-columns: 1fr; gap: 0.6rem; }
  .compteur { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; padding: 0.9rem 1.1rem; }
  .compteur .quoi { align-self: center; }
  .compteur > strong { grid-column: 2; grid-row: 1 / 3; font-size: 1.8rem; flex-direction: column; align-items: flex-end; gap: 0; }
  .compteur progress { grid-column: 1; width: 90%; }
  .panneau { padding: 1.1rem 1.1rem; }
  .par-experience { gap: 1rem; }
}
@media (max-width: 400px) { .par-experience { grid-template-columns: 1fr; } }

/* La modale « Inviter des élèves » : le code géant et ses gestes, projetée en plein écran. */
dialog.inviter { max-width: 34rem; }
dialog.inviter.projete { max-width: none; width: calc(100% - 2rem); }
dialog.inviter.projete .code-geant { font-size: clamp(4rem, 20vw, 16rem); padding: 3rem 1rem; }
dialog.inviter .dialogue-boutons { justify-content: center; }

/* ===== La page ===== */
main { max-width: 56rem; margin: 0 auto; padding: 1.4rem 1.6rem 2.4rem; }
@media (max-width: 480px) { main { padding: 1rem 1rem 2rem; } }
h1 {
  font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1.15;
  color: var(--nuit); margin: 0.3rem 0 0.5rem; text-wrap: balance;
}
h2 { font-family: var(--display); font-weight: 700; font-size: 1.45rem; color: var(--nuit); margin: 2rem 0 0.8rem; }
h3 { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--nuit); margin: 1.4rem 0 0.5rem; }
@media (max-width: 480px) { h1 { font-size: 1.8rem; } }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
code { font-family: var(--mono); }
small { font-size: 0.92rem; color: var(--texte-2); font-weight: 400; }

.fil {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--texte-2); text-decoration: none; font-size: 0.95rem; font-weight: 600;
}
.fil:hover { color: var(--nuit); }
.sous-titre { color: var(--texte-2); font-size: 1rem; margin: 0 0 1rem; }
.sous-texte { font-size: 0.98rem; color: var(--texte-2); }

/* Un état à puce : « Visible », « Inscriptions ouvertes »… (vert = ouvert, gris = fermé). */
.etat {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 0.2rem 0.75rem;
  font-size: 0.92rem; font-weight: 600; background: var(--gris-pale); color: var(--texte-2);
}
.etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.etat.ouvert { background: var(--vert-pale); color: var(--vert); }
.badge {
  font-size: 0.8rem; font-weight: 600; background: var(--gris-pale); color: var(--texte-2);
  border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap;
}
.badge.admin { background: var(--magenta-pale); color: #8a3a99; }

/* ===== Formulaires ===== */
form.carte {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem; max-width: 26rem;
}
label { display: block; margin: 1rem 0 0.35rem; font-weight: 700; font-size: 0.95rem; }
label:first-of-type { margin-top: 0.2rem; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select {
  width: 100%; padding: 0.7rem 0.85rem; font: inherit; font-size: 1.05rem;
  border: 1.5px solid var(--trait-2); border-radius: 10px; background: #fff; color: var(--encre);
}
input:focus, select:focus { outline: 3px solid var(--cyan-pale); border-color: var(--cyan-fonce); }
input.champ-code {
  font-family: var(--mono); font-size: 1.7rem; letter-spacing: 0.35em;
  text-transform: uppercase; text-align: center;
}
label.case { font-weight: normal; margin: 0.4rem 0; display: flex; align-items: center; gap: 0.5rem; }
label.case input { width: auto; margin: 0; flex: none; }
label.case > span small { display: block; line-height: 1.35; }   /* la classe et, dessous, ses élèves et ses enseignants */
form.en-ligne { display: inline; margin: 0; }

/* ===== Boutons : plein (principal), contour (secondaire), discret (fantôme) ===== */
/* Un lien habillé en bouton (a.bouton) : même dessin qu'un bouton — il mène quelque part,
   sans script (« Retourner dans Agarium » sur la page d'appairage). */
button, a.bouton {
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  padding: 0.7rem 1.15rem; margin-top: 1.2rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
button:hover, a.bouton:hover { background: var(--nuit); color: #fff; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
button.petit { padding: 0.5rem 0.9rem; font-size: 0.95rem; border-radius: 8px; }
button.contour, a.bouton.contour { background: var(--carte); color: var(--accent); border: 1.5px solid var(--trait-2); }
button.contour:hover, a.bouton.contour:hover { background: var(--carte); border-color: var(--accent); }
/* La rangée des gestes d'une page (tableau de l'élève : carnet, rejoindre, installer) : des
   boutons côte à côte, à la ligne sur téléphone, sans la marge haute des boutons de formulaire. */
.gestes-page { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.6rem; }
.gestes-page button, .gestes-page a.bouton { margin: 0; }
/* La modale « Installer Agarium » (lib/gabarit.php) : chaque accès est un bouton pleine
   largeur, sa note en petit dessous. */
.installer p { margin: 0.6rem 0 0; }
.installer a.bouton { margin-top: 0.6rem; width: 100%; }
.installer small { display: block; margin-top: 0.35rem; color: var(--texte-2); }
button.discret {
  background: transparent; color: var(--accent); text-decoration: none;
  padding: 0.5rem 0.75rem; margin: 0; font-size: 0.95rem; border-radius: 8px;
}
button.discret:hover { background: var(--gris-pale); color: var(--nuit); }
button.contour-danger { background: transparent; color: var(--erreur); border: 1.5px solid var(--erreur); }
button.contour-danger:hover { background: var(--erreur-pale); }
button.danger { background: var(--erreur); }

/* ===== Messages ===== */
.message-erreur, .message-succes, .message-attention {
  border-radius: 10px; padding: 0.75rem 1rem; margin: 0 0 1rem; max-width: 34rem;
  border: 1px solid; font-weight: 600;
}
.message-erreur { background: var(--erreur-pale); border-color: var(--erreur); color: #8f2419; }
.message-succes { background: var(--vert-pale); border-color: var(--vert); color: #14603e; }
.message-attention { background: var(--cyan-pale); border-color: var(--cyan-fonce); color: #0b6b7d; }

/* Le mot de passe provisoire, le lien de dev : sur fond nuit, impossible à rater. */
.lien-genere {
  background: var(--nuit); color: #fff; border-radius: 14px;
  padding: 1rem 1.25rem; margin: 0 0 1.2rem;
}
.lien-genere strong { display: block; color: var(--cyan); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; }
.lien-genere code {
  display: inline-block; font-size: 1.3rem; letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 0.1rem 0.5rem; margin: 0.15rem 0;
  word-break: break-all; user-select: all;
}

/* Le code d'inscription GÉANT, à projeter au tableau. */
.code-geant {
  font-family: var(--mono); font-size: clamp(3rem, 14vw, 7rem); letter-spacing: 0.18em;
  text-align: center; margin: 1rem 0 0.5rem; padding: 1.5rem 0.5rem;
  background: var(--carte); border: 2px solid var(--trait-2); border-radius: 16px;
  color: var(--nuit); user-select: all;
}
.sous-code {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.4rem 0 1.2rem;
}
.code-puce {
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.08em;
  background: var(--gris-pale); border-radius: 6px; padding: 2px 8px; white-space: nowrap;
}

footer { max-width: 56rem; margin: 2rem auto 1rem; padding: 0 1.6rem; color: var(--texte-2); font-size: 0.92rem; }
footer.centre { text-align: center; }

/* ===== Onglets : pilules côté serveur (liens ?o=) ===== */
.onglets {
  display: flex; gap: 4px; margin: 0.4rem 0 1.2rem; padding: 4px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; width: max-content; max-width: 100%;
}
.onglets a {
  padding: 0.55rem 1rem; border-radius: 9px; text-decoration: none;
  color: var(--texte-2); font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.onglets a.actif { background: var(--nuit); color: #fff; }
.pastille {
  font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--gris-pale); color: var(--texte-2); border-radius: 999px; padding: 1px 8px;
}
.onglets a.actif .pastille { background: rgba(255, 255, 255, 0.18); color: #fff; }
@media (max-width: 480px) {
  /* Quatre onglets ne tiennent pas en largeur : ils passent à la ligne (03/09, Christophe :
     la page entière débordait et défilait de côté). */
  .onglets { width: 100%; flex-wrap: wrap; }
  .onglets a { flex: 1 1 auto; justify-content: center; padding: 0.55rem 0.5rem; font-size: 0.95rem; }
}

/* ===== Cartes de liste ===== */
.cartes { display: flex; flex-direction: column; gap: 0.75rem; }
.cartes.avant-liste { margin-bottom: 1.2rem; }
.entete-liste { display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }
.carte-ligne {
  position: relative; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 1rem;
}
.carte-ligne.inactif { opacity: 0.6; }
.carte-ligne.masquee { background: transparent; border-style: dashed; }
.carte-ligne .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.carte-ligne .titre {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--nuit);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.carte-ligne a.titre { text-decoration: none; }
.carte-ligne a.titre:hover { color: var(--cyan-fonce); }
.carte-ligne .gestes {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap;
}
.carte-ligne .gestes form { margin: 0; }
.carte-ligne .gestes button { margin: 0; }
@media (max-width: 600px) {
  .carte-ligne { flex-wrap: wrap; }
  .carte-ligne .gestes { width: 100%; }
}

/* La boîte de Pétri d'une expérience, dans la couleur réelle de sa gélose. */
.boite {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--trait-2), inset 0 0 0 4px rgba(255, 255, 255, 0.35);
}
.boite.ecbu-urine        { background: radial-gradient(circle at 35% 35%, #cfe9ec, #9fcfd6 70%, #7fbec8); }  /* CPSE */
.boite.coproculture-selles { background: radial-gradient(circle at 35% 35%, #8fd0b6, #2f9d7a 65%, #1c7a5f); } /* Hektoen */
.boite.angine-gorge      { background: radial-gradient(circle at 35% 35%, #e46b6b, #b6262f 65%, #8f1c25); }  /* sang */
.boite.culture-blob      { background: radial-gradient(circle at 35% 35%, #fbe7a8, #e6c15a 65%, #c99a2e); }  /* flocons d'avoine */
.carte-ligne.masquee .boite { filter: saturate(0.35); opacity: 0.7; }

/* L'avatar d'un élève dans sa liste. */
.carte-ligne .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--cyan-pale); color: var(--cyan-fonce);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center;
}
.carte-ligne .identifiant {
  font-family: var(--mono); font-size: 0.9rem; background: var(--gris-pale);
  border-radius: 6px; padding: 1px 8px; color: var(--encre);
}

/* ===== Menu ⋯ d'une ligne : <details class="menu"> ===== */
details.menu { position: relative; flex-shrink: 0; }
details.menu > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px;
  border: 1.5px solid var(--trait-2); border-radius: 10px; background: var(--carte);
  display: grid; place-items: center; line-height: 0;
}
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover { border-color: var(--accent); }
details.menu > .choix {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(14, 33, 68, 0.18); min-width: 14rem; padding: 5px;
  display: flex; flex-direction: column;
}
.choix form { display: contents; }

/* Une liste de boutons radio (le choix de classe à l'appairage) : une ligne par choix. */
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
fieldset legend { font-weight: 600; margin-bottom: .4rem; }
label.radio { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-weight: 400; }
label.radio input { width: auto; margin: 0; accent-color: var(--cyan, #19c0dc); }
.choix button {
  background: none; border: 0; text-align: left; justify-content: flex-start;
  padding: 0.7rem 0.9rem; margin: 0; color: var(--encre); font-weight: 600; font-size: 0.98rem;
  border-radius: 8px; cursor: pointer; width: 100%;
}
.choix button:hover { background: var(--gris-pale); color: var(--nuit); }
.choix .danger { color: var(--erreur); background: none; }
.choix .danger:hover { background: var(--erreur-pale); color: var(--erreur); }
.choix hr { border: 0; border-top: 1px solid var(--trait); margin: 4px 8px; }

/* ===== Modales : centrées sur grand écran, feuille montante sur téléphone ===== */
dialog {
  border: 0; border-radius: 16px; padding: 0; max-width: 27rem; width: calc(100% - 2rem);
  box-shadow: 0 20px 60px rgba(14, 33, 68, 0.35); color: var(--encre);
}
dialog::backdrop { background: rgba(14, 33, 68, 0.5); }
.dialogue-corps { padding: 1.3rem 1.4rem 1.5rem; }
.dialogue-corps span.sous-texte { display: block; margin-top: 0.3rem; }
.dialogue-titre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.dialogue-titre strong { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--nuit); }
.dialogue-titre button { background: none; border: 0; margin: 0; padding: 0.6rem; line-height: 0; cursor: pointer; border-radius: 8px; }
.dialogue-titre button:hover { background: var(--gris-pale); }
.dialogue-boutons { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 1.3rem; }
.dialogue-boutons button { margin-top: 0; }
@media (max-width: 480px) {
  dialog { margin: auto auto 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; }
}

/* ===== Le champ mot de passe unique, avec son œil ===== */
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 3rem; }
.champ-mdp .oeil {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; margin: 0; padding: 0.7rem; cursor: pointer; line-height: 0; color: var(--texte-2);
}
.champ-mdp .oeil:hover { background: none; color: var(--nuit); }
.champ-mdp [hidden] { display: none; }   /* nécessaire : la feuille UA ne cache pas un <svg hidden> */

/* ===== La zone sensible : le geste rouge, isolé et expliqué ===== */
.zone-sensible {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 1.2rem 1.4rem; margin-top: 1.5rem;
}
.zone-sensible .titre { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--erreur); display: block; margin-bottom: 0.3rem; }

/* ===== Les pages d'accès (connexion, inscription, mot de passe) : sur le fond nuit
   de l'appli, la carte blanche au centre ===== */
body.acces {
  background: var(--nuit) radial-gradient(70% 60% at 30% 10%, #173a75 0%, var(--nuit) 70%);
  min-height: 100vh;
}
body.acces main {
  max-width: 28rem; margin: 2rem auto; background: var(--carte); border-radius: 18px;
  padding: 1.8rem 1.9rem 1.7rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
body.acces h1 { font-size: 1.6rem; margin: 0 0 0.3rem; }
body.acces form.carte { border: 0; padding: 0; max-width: none; margin-top: 0.6rem; }
body.acces form.carte button[type=submit] { width: 100%; padding: 0.85rem; font-size: 1.05rem; }
body.acces .message-erreur, body.acces .message-succes, body.acces .message-attention { max-width: none; }
body.acces main > p { margin: 1.3rem 0 0; font-size: 0.98rem; color: var(--texte-2); line-height: 1.7; }
body.acces main > p a { font-weight: 700; text-decoration: none; }
body.acces main > p a:hover { text-decoration: underline; }
body.acces footer { color: #bcd0ea; text-align: center; }
@media (max-width: 480px) {
  body.acces main { margin: 0; border-radius: 0; min-height: calc(100vh - 58px); }
}

/* ===== La landing (racine/index.php) ===== */
.accueil { text-align: center; padding: 3rem 1rem; }
.accueil h1 { font-size: 2.8rem; }
.accueil .boutons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.accueil a.bouton {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 10px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
}
.accueil a.bouton:hover { background: var(--nuit); }
.accueil a.bouton.secondaire { background: var(--carte); color: var(--accent); border: 1.5px solid var(--trait-2); }

@media (prefers-reduced-motion: no-preference) {
  button, .onglets a, details.menu > summary { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}

/* ===== Le suivi (étape 4) : l'onglet de la classe et la fiche d'un élève ===== */
.defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.2rem; }
table.suivi {
  border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; overflow: hidden;
  font-size: 0.98rem;
}
table.suivi th, table.suivi td { padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
table.suivi thead th {
  font-family: var(--display); font-weight: 700; color: var(--nuit); background: var(--gris-pale);
  font-size: 0.95rem;
}
table.suivi tbody tr:last-child th, table.suivi tbody tr:last-child td { border-bottom: 0; }
table.suivi tbody th { font-weight: 600; white-space: nowrap; }
table.suivi tbody th a { color: var(--nuit); text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
table.suivi tbody th a:hover { color: var(--cyan-fonce); }
table.suivi .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--cyan-pale); color: var(--cyan-fonce);
  font-family: var(--display); font-weight: 700; font-size: 0.9rem; display: grid; place-items: center;
}
table.suivi td .sous-texte { display: block; font-size: 0.88rem; margin-top: 3px; line-height: 1.35; }
table.suivi .vide { color: var(--trait-2); }
.entete-liste .sous-texte { flex: 1; align-self: center; }
.entete-liste a.bouton.petit { padding: 0.5rem 0.9rem; font-size: 0.95rem; border-radius: 8px; margin: 0; }
a.bouton.contour { background: var(--carte); color: var(--accent); border: 1.5px solid var(--trait-2); }
a.bouton.contour:hover { background: var(--carte); border-color: var(--accent); color: var(--accent); }

/* La pastille de verdict : le mot de l'appli, coloré. */
.verdict {
  display: inline-block; font-size: 0.85rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
  background: var(--gris-pale); color: var(--texte-2);
}
.verdict.ok { background: var(--vert-pale); color: var(--vert); }
.verdict.alerte { background: #fdf1dc; color: #9a6410; }
.verdict.cours { background: var(--cyan-pale); color: var(--cyan-fonce); }

/* La fiche : une carte par tentative, la photo à droite. */
.carte-ligne.tentative { align-items: flex-start; }
.carte-ligne.tentative .boite { margin-top: 0.2rem; }
.carte-ligne .photo { flex: none; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); }
.carte-ligne .photo img { width: 120px; height: 120px; object-fit: cover; display: block; }
.carte-ligne .photo:hover { border-color: var(--cyan-fonce); }
details.deroule { margin-top: 0.4rem; font-size: 0.95rem; }
details.deroule > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.deroule ol { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--texte-2); }
details.deroule li { margin: 0.2rem 0; }
details.deroule .quand { font-family: var(--mono); font-size: 0.85rem; color: var(--texte-2); margin-right: 0.4rem; }
.sous-titre .identifiant {
  font-family: var(--mono); font-size: 0.9rem; background: var(--gris-pale); border-radius: 6px; padding: 1px 8px; color: var(--encre);
}
@media (max-width: 600px) {
  .carte-ligne.tentative .photo { order: 3; }
}

/* La photo d'une boîte en grand (fiche de suivi) : la modale prend la place qu'il faut. */
dialog.photo-plein { max-width: min(92vw, 60rem); width: auto; background: var(--nuit); color: #fff; }
dialog.photo-plein .dialogue-corps { padding: 0.8rem 1rem 1rem; }
dialog.photo-plein .dialogue-titre { margin-bottom: 0.5rem; }
dialog.photo-plein .dialogue-titre strong { color: #fff; font-size: 1.05rem; font-weight: 600; }
dialog.photo-plein .dialogue-titre button:hover { background: rgba(255, 255, 255, 0.12); }
dialog.photo-plein .dialogue-titre svg path { stroke: #fff; }
dialog.photo-plein img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 10px; }
@media (max-width: 480px) {
  dialog.photo-plein { max-width: none; width: 100%; }
}

/* ===== Tags rapides et annotations (4.3 / 4.4) ===== */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; align-items: center; }
.tags form { margin: 0; }
.tags.lecture { margin: 0.4rem 0 0; }
button.tag, span.tag {
  display: inline-block; margin: 0; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  background: var(--carte); color: var(--texte-2); border: 1.5px solid var(--trait-2); line-height: 1.4; white-space: nowrap;
}
button.tag:hover { border-color: var(--accent); color: var(--accent); background: var(--carte); }
button.tag.actif, span.tag { background: var(--nuit); color: #fff; border-color: var(--nuit); }
button.tag.actif:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
span.tag b { font-weight: 700; color: var(--cyan); margin-left: 0.2rem; }
.annotations { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.annotation { background: var(--fond); border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; padding: 0.5rem 0.8rem; }
.annotation .qui { font-size: 0.85rem; color: var(--texte-2); font-weight: 600; }
.annotation p { margin: 0.2rem 0 0.3rem; }
.annotation form.en-ligne button { padding: 0.2rem 0.6rem; font-size: 0.85rem; }
form.annoter { margin: 0.2rem 0 0; }
form.annoter label { margin: 0 0 0.25rem; font-weight: 400; }
textarea {
  width: 100%; font: inherit; padding: 0.55rem 0.8rem; border: 1.5px solid var(--trait-2); border-radius: 10px;
  background: var(--carte); color: var(--encre); resize: vertical; min-height: 3.2rem;
}
textarea:focus { outline: 3px solid var(--cyan-pale); border-color: var(--cyan-fonce); }
form.annoter button { margin-top: 0.4rem; }
form.supprimer-tentative { margin: 1rem 0 0; }
form.supprimer-tentative button { margin: 0; }
button.contour-danger.petit { padding: 0.4rem 0.8rem; font-size: 0.9rem; border-radius: 8px; }

/* ===== Les deux vues du suivi (par élève / promotion, 4.6) et les filtres des listes ===== */
.vues { display: inline-flex; gap: 4px; background: var(--gris-pale); border-radius: 999px; padding: 4px; margin: 0 0 1rem; }
.vues a {
  text-decoration: none; color: var(--texte-2); font-weight: 700; font-size: 0.95rem;
  padding: 0.35rem 0.95rem; border-radius: 999px;
}
.vues a:hover { color: var(--nuit); }
.vues a.actif { background: var(--carte); color: var(--nuit); box-shadow: 0 1px 2px rgba(14, 33, 68, 0.14); }
form.filtres {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; margin: 0 0 1rem;
  padding: 0.7rem 0.9rem; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
}
form.filtres label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 0.85rem; color: var(--texte-2); font-weight: 600; }
form.filtres select, form.filtres input[type=search] {
  width: auto; min-width: 9rem; margin: 0; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.95rem;
  border: 1.5px solid var(--trait-2); border-radius: 8px; background: #fff; color: var(--encre);
}
form.filtres button { margin: 0; }
form.filtres .fil { align-self: center; }
details.repli-filtres > summary { display: none; }   /* grand écran : la barre est toujours ouverte */
@media (max-width: 600px) {
  /* Téléphone (Christophe, 03/09 : « très confuse en mode mobile ») : la barre de filtres se
     replie derrière « Filtrer », espace.js la ferme au chargement si rien n'est filtré. */
  details.repli-filtres { margin: 0 0 1rem; }
  details.repli-filtres > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--carte); border: 1.5px solid var(--trait-2);
    font-weight: 700; font-size: 0.95rem; color: var(--accent);
  }
  details.repli-filtres > summary::-webkit-details-marker { display: none; }
  details.repli-filtres > summary::after { content: " ▾"; color: var(--texte-2); font-size: 0.8rem; }
  details.repli-filtres[open] > summary::after { content: " ▴"; }
  details.repli-filtres[open] > summary { border-radius: 14px 14px 0 0; border-bottom: 0; }
  details.repli-filtres[open] > form.filtres { border-radius: 0 14px 14px 14px; margin: 0; }
  form.filtres label { flex: 1 1 40%; }
  form.filtres select, form.filtres input[type=search] { width: 100%; min-width: 0; }
  .entete-liste { flex-wrap: wrap; gap: 0.5rem; }
  .entete-liste a.bouton.petit { padding: 0.35rem 0.7rem; font-size: 0.88rem; }

  /* Les tableaux du suivi deviennent des CARTES : une ligne = une carte, une cellule = une
     ligne étiquetée du nom de sa colonne (data-col) ; les cellules vides disparaissent, et
     les lignes de la vue promotion sans personne aussi. Plus de défilement latéral. */
  .defilant { margin: 0; overflow: visible; }
  table.suivi { display: block; min-width: 0; border: 0; background: transparent; border-radius: 0; overflow: visible; font-size: 1rem; }
  table.suivi thead { display: none; }
  table.suivi tbody { display: flex; flex-direction: column; gap: 0.75rem; }
  table.suivi tbody tr { display: block; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 0.7rem 1rem 0.8rem; }
  table.suivi tbody tr.vide-ligne { display: none; }
  table.suivi th, table.suivi td { display: block; border: 0; padding: 0; }
  table.suivi tbody th[scope=row] { white-space: normal; min-width: 0; font-size: 1.05rem; margin-bottom: 0.3rem; }
  table.suivi tbody th[scope=row] a { display: inline-flex; }
  table.suivi td { padding: 0.45rem 0 0; margin-top: 0.45rem; border-top: 1px solid var(--trait); }
  table.suivi td.vide-cell { display: none; }
  table.suivi td[data-col]::before {
    content: attr(data-col); display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--texte-2); margin-bottom: 2px;
  }
  table.suivi td .sous-texte { display: inline; margin: 0; }
  table.suivi.promotion th[scope=row] .sous-texte { display: block; }
  table.suivi.promotion td .sous-texte { display: block; }
}

/* La vue promotion : une ligne par erreur, chaque nombre s'ouvre sur les noms. */
table.suivi.promotion th[scope=row] { white-space: normal; min-width: 13rem; font-weight: 600; }
table.suivi.promotion th[scope=row] .sous-texte { display: block; font-weight: 400; font-size: 0.85rem; line-height: 1.3; }
table.suivi.promotion tr.ok th[scope=row] { color: var(--vert); }
table.suivi.promotion td b { font-size: 1.15rem; color: var(--nuit); font-family: var(--display); }
details.qui > summary { list-style: none; cursor: pointer; }
details.qui > summary::-webkit-details-marker { display: none; }
details.qui > summary:hover b { color: var(--cyan-fonce); }
details.qui > summary .n::after { content: " ▾"; color: var(--texte-2); font-size: 0.8rem; }
details.qui[open] > summary .n::after { content: " ▴"; }
details.qui ul { margin: 0.4rem 0 0; padding-left: 1rem; font-size: 0.92rem; }
details.qui li { margin: 0.15rem 0; }
p.sans-essai { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0.8rem 0 1rem; }
p.sans-essai details.qui > summary b { font-size: 1.15rem; color: var(--nuit); font-family: var(--display); }

/* ===== La tentative en carte REPLIABLE (Christophe, 03/09 : « deux lignes, déployables ») ===== */
details.carte-ligne.tentative { display: block; padding: 0; align-items: stretch; }
details.carte-ligne.tentative > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem;
}
details.carte-ligne.tentative > summary::-webkit-details-marker { display: none; }
details.carte-ligne.tentative > summary:hover { background: var(--fond); border-radius: 14px; }
details.carte-ligne.tentative[open] > summary:hover { border-radius: 14px 14px 0 0; }
details.carte-ligne.tentative > summary .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
details.carte-ligne.tentative > summary .titre { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--nuit); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.carte-ligne.tentative > summary .sous-texte { font-size: 0.95rem; }
details.carte-ligne.tentative > summary .photo { flex: none; line-height: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--trait); }
details.carte-ligne.tentative > summary .photo img { width: 64px; height: 64px; object-fit: cover; display: block; }
details.carte-ligne.tentative > summary .photo:hover { border-color: var(--cyan-fonce); }
details.carte-ligne.tentative > summary .chevron {
  flex: none; width: 10px; height: 10px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2);
  transform: rotate(45deg); margin: 0 0.3rem 4px 0; transition: transform 0.15s;
}
details.carte-ligne.tentative[open] > summary .chevron { transform: rotate(-135deg); margin-bottom: -4px; }
details.carte-ligne.tentative > .detail { padding: 0.2rem 1.1rem 1rem 4.9rem; border-top: 1px solid var(--trait); }
details.carte-ligne.tentative > .detail > p.sous-texte { margin: 0.6rem 0 0.2rem; }
span.tag.petit { font-size: 0.78rem; padding: 1px 0.6rem; font-weight: 600; }
@media (max-width: 600px) {
  details.carte-ligne.tentative > summary { flex-wrap: wrap; }
  details.carte-ligne.tentative > .detail { padding-left: 1.1rem; }
}

/* ===== L'interrogation (étape 6, 05/09/2026) ===== */
/* Le mode d'une expérience sur la fiche de classe : deux pilules, l'active est figée. */
.carte-ligne .modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }
.carte-ligne .modes form { margin: 0; }
.carte-ligne .modes button.pilule {
  margin: 0; padding: 0.15rem 0.75rem; font-size: 0.85rem; font-weight: 700; border-radius: 999px;
  border: 1px solid var(--trait); background: var(--carte); color: var(--texte-2); cursor: pointer; box-shadow: none;
}
.carte-ligne .modes button.pilule:hover { color: var(--nuit); border-color: var(--nuit); }
.carte-ligne .modes button.pilule.active, .carte-ligne .modes button.pilule.active:disabled {
  background: var(--magenta-pale); color: var(--magenta); border-color: var(--magenta); cursor: default; opacity: 1;
}
.carte-ligne .modes .sous-texte { flex-basis: 100%; }
.verdict.interro { background: var(--magenta-pale); color: var(--magenta); }
/* La grille de lecture de l'enseignant : quatre lignes, une coche verte ou une croix rouge. */
.grille-interro { margin: 0.6rem 0 0.8rem; padding: 0.6rem 0.9rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--fond); }
.grille-interro .titre-grille { font-weight: 700; color: var(--nuit); }
.grille-interro ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.grille-interro li .coche { display: inline-block; width: 1.4em; font-weight: 700; }
.grille-interro li.bon .coche { color: var(--vert); }
.grille-interro li.faux .coche { color: var(--erreur); }
/* La lecture de l'élève (6.8) : la photo avec ses cercles, puis une ligne par cercle — le
   point de la couleur du cercle (les cinq couleurs de l'appli, PetriDemo.LECTURE_COULEURS),
   le texte de l'élève, et ce que l'appli a vu au même endroit ; la conclusion en dernier. */
.lecture-eleve { margin: 0.6rem 0 0.8rem; padding: 0.6rem 0.9rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--fond); }
.lecture-eleve .titre-grille { font-weight: 700; color: var(--nuit); }
.lecture-eleve .brouillon { color: var(--erreur); font-weight: 600; }
.lecture-eleve .photo-lecture { display: block; margin: 0.5rem 0; line-height: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--trait); width: min(100%, 22rem); }
.lecture-eleve .photo-lecture img { width: 100%; height: auto; display: block; }
.lecture-eleve ol.cercles { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.lecture-eleve ol.cercles li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; align-items: start; }
.lecture-eleve .point { display: inline-block; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.55); box-sizing: border-box; }
.lecture-eleve .point.c1 { background: #00e5ff; }
.lecture-eleve .point.c2 { background: #ffea00; }
.lecture-eleve .point.c3 { background: #ff4dff; }
.lecture-eleve .point.c4 { background: #76ff03; }
.lecture-eleve .point.c5 { background: #448aff; }
.lecture-eleve .point.c0 { background: #ffffff; }
.lecture-eleve .texte-eleve { font-weight: 600; }
.lecture-eleve .texte-eleve.vide { font-weight: 400; color: var(--texte-2); font-style: italic; }
.lecture-eleve .auto { display: block; font-size: 0.9rem; color: var(--texte-2); }
.lecture-eleve .conclusion { margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px dashed var(--trait); }
.lecture-eleve .conclusion strong { color: var(--nuit); }
.lecture-eleve .conclusion p { margin: 0.2rem 0 0; white-space: pre-wrap; }
/* Redonner l'essai (6.11) : un bouton de contour, sur la carte de l'expérience (toute la
   classe) et sur la carte de la tentative (un élève). */
form.redonner { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.carte-ligne .modes form.redonner { flex-basis: 100%; }
p.essai-redonne { margin: 0.5rem 0 0; }

/* ===== Ranger (06/09/2026, 012) : l'enseignant archive, l'admin supprime ===== */
/* La carte archivée : estompée, en pointillé, son badge ; la carte redessinée en place après
   le geste garde le geste inverse sous la main. */
.verdict.archivee { background: var(--fond); color: var(--texte-2); border: 1px dashed var(--trait-2); }
details.carte-ligne.tentative.archivee { border-style: dashed; background: transparent; }
details.carte-ligne.tentative.archivee > summary .titre { color: var(--texte-2); }
details.carte-ligne.tentative.archivee > summary .boite { filter: saturate(0.35); opacity: 0.7; }
form.archiver-tentative { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
form.archiver-tentative .sous-texte { font-size: 0.9rem; }
/* Le bandeau de la vue archivée, et le lien « N archivées » des listes. */
.bandeau-archives { padding: 0.7rem 1rem; margin: 0 0 0.9rem; border: 1px dashed var(--trait-2); border-radius: 12px; background: var(--fond); color: var(--texte-2); }
.bandeau-archives strong { color: var(--nuit); }
a.fil.archives { white-space: nowrap; }
/* La zone « Rangement » de la fiche : la sœur calme de la zone sensible. */
.zone-rangement {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 1.2rem 1.4rem; margin-top: 1.5rem;
}
.zone-rangement .titre { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--nuit); display: block; margin-bottom: 0.3rem; }
.zone-rangement form { margin: 0.4rem 0 0; }
/* Sur la carte d'une expérience (onglet Expériences) : archiver / restaurer les essais de la classe. */
.carte-ligne .rangement { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.carte-ligne .rangement form { margin: 0; }
.carte-ligne .rangement button { margin: 0; }
/* Le rang d'abandons replié : une ligne discrète, en pointillé, qui s'ouvre sur les cartes. */
details.carte-ligne.groupe-abandons { display: block; padding: 0; background: transparent; border-style: dashed; }
details.carte-ligne.groupe-abandons > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 0.55rem 1.1rem 0.55rem 1.4rem;
}
details.carte-ligne.groupe-abandons > summary::-webkit-details-marker { display: none; }
details.carte-ligne.groupe-abandons > summary:hover { background: var(--fond); border-radius: 14px; }
details.carte-ligne.groupe-abandons[open] > summary:hover { border-radius: 14px 14px 0 0; }
details.carte-ligne.groupe-abandons > summary .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
details.carte-ligne.groupe-abandons > summary .titre { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--texte-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.carte-ligne.groupe-abandons > summary .sous-texte { font-size: 0.9rem; }
details.carte-ligne.groupe-abandons > summary .chevron {
  flex: none; width: 10px; height: 10px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2);
  transform: rotate(45deg); margin: 0 0.3rem 4px 0; transition: transform 0.15s;
}
details.carte-ligne.groupe-abandons[open] > summary .chevron { transform: rotate(-135deg); margin-bottom: -4px; }
details.carte-ligne.groupe-abandons > .cartes { padding: 0.6rem 0.8rem 0.8rem; border-top: 1px dashed var(--trait); }
/* L'entrée vers les archivées, sous la liste : la même ligne pointillée que le rang replié,
   mais c'est un lien — le chemin pour restaurer. */
a.carte-ligne.ligne-archives { text-decoration: none; background: transparent; border-style: dashed; padding: 0.55rem 1.1rem 0.55rem 1.4rem; }
a.carte-ligne.ligne-archives:hover { background: var(--fond); }
a.carte-ligne.ligne-archives .titre { font-size: 1rem; color: var(--texte-2); }
a.carte-ligne.ligne-archives .sous-texte { font-size: 0.9rem; }
a.carte-ligne.ligne-archives .chevron {
  flex: none; width: 10px; height: 10px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2);
  transform: rotate(-45deg); margin: 0 0.3rem 0 0;
}
/* « Restaurer » sur la ligne de la carte archivée : le bouton ne déplie pas la carte. */
details.carte-ligne.tentative > summary form.restaurer-ligne { margin: 0; flex: none; }
details.carte-ligne.tentative > summary form.restaurer-ligne button { margin: 0; }
p.archivee-depuis { margin: 0.6rem 0 0; }
@media (max-width: 600px) {
  /* sur un téléphone, le bouton passe seul sous la ligne : le texte de la carte garde sa largeur */
  details.carte-ligne.tentative > summary form.restaurer-ligne { flex-basis: 100%; order: 10; }
}

/* ===== Retouches de la coque sur les composants (07/09) ===== */
/* Une carte qui est un lien entier (« vous administrez », sur Mes classes) : le chevron à droite. */
a.carte-ligne.lien { text-decoration: none; color: inherit; }
a.carte-ligne.lien:hover { border-color: var(--trait-2); box-shadow: 0 6px 18px rgba(14, 33, 68, 0.08); }
.carte-ligne > .chevron {
  flex: none; width: 10px; height: 10px; border-right: 2px solid var(--texte-2); border-bottom: 2px solid var(--texte-2);
  transform: rotate(-45deg); margin-right: 0.4rem;
}
/* Les cartes de classe de « Mes classes » : le titre est le lien, la carte entière réagit. */
.carte-ligne:has(> .infos > a.titre):hover { border-color: var(--trait-2); }
/* Le message de statut (flash) dans la coque : sous l'en-tête, en pleine largeur du contenu. */
body.coque .message-succes, body.coque .message-erreur, body.coque .message-attention { max-width: none; }