/* ============================================================
   OTableau — l'habillage, dans l'esprit de Mission STMG

   ⚠️ LA PALETTE N'EST PAS INVENTEE : elle est RELEVEE dans le `:root` de
      `mission-stmg/stmg/index.html`. Encre `#1a1430` (un violet tres
      sombre, jamais du noir), quatre accents chauds — corail, jaune,
      cyan, menthe — et un fond creme `#fefcf8` traverse de trois halos
      radiaux. C'est rond, chaud et colore ; une interface gris-bleu
      froide aurait eu l'air d'un autre produit.

   ⚠️ LES POLICES DE MISSION STMG SONT `Outfit` ET `Fraunces`, servies
      la-bas par Google Fonts. ELLES NE SONT PAS CHARGEES ICI, et c'est
      un choix : ce site est ouvert par des ELEVES MINEURS, et une
      requete vers `fonts.gstatic.com` envoie leur adresse IP a un tiers
      (§2.5). KOMELA a tranche de la meme facon en servant Manrope en
      local (§7.48). La pile ci-dessous reprend donc les formes — rondes,
      larges, a forte hauteur d'x — avec ce que le systeme offre deja.
      → Pour l'exactitude typographique, il suffit de deposer les deux
        woff2 dans `assets/polices/` et d'ajouter leurs `@font-face` :
        aucune autre ligne ne change.

   ⚠️ TOUTES LES CLASSES PORTENT LE PREFIXE `ot-`, modificateurs compris
      (`ot-pastille-chaud`, jamais `chaud`) : piege N de CLAUDE.md. La
      boite a outils de projection vit sous `dpo-` — aucun recouvrement.
============================================================ */

:root {
  /* Relevees dans Mission STMG */
  --ot-encre:   #1a1430;
  --ot-corail:  #ff6b6b;
  --ot-jaune:   #feca57;
  --ot-cyan:    #48dbfb;
  --ot-menthe:  #1dd1a1;
  --ot-vert:    #16a34a;
  --ot-bleu:    #2563eb;

  /* Deduites, pour les surfaces */
  --ot-creme:   #fefcf8;
  --ot-carte:   #ffffff;
  --ot-bord:    #efeaf6;
  --ot-doux:    #6b6485;
  --ot-rouge:   #d92b2b;
  --ot-rose:    #fff1f1;

  --ot-pol: 'Outfit', ui-sans-serif, system-ui, -apple-system,
            "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --ot-titre: 'Fraunces', Georgia, "Iowan Old Style", "Palatino Linotype", serif;

  --ot-arrondi: 18px;
  --ot-ombre: 0 2px 10px rgba(26, 20, 48, .06);
  --ot-ombre-f: 0 10px 30px rgba(26, 20, 48, .13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ot-pol);
  font-size: 16px;
  color: var(--ot-encre);
  /* Les trois halos de Mission STMG, a l'identique. */
  background:
    radial-gradient(circle at 8% 10%, #ffe9d6 0, transparent 36%),
    radial-gradient(circle at 92% 6%, #d6f0ff 0, transparent 34%),
    radial-gradient(circle at 50% 100%, #e7ffe9 0, transparent 40%),
    var(--ot-creme);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

/* ⚠️ LES TITRES SONT EN SERIF, comme sur Mission STMG : c'est ce qui
   donne a la plateforme son air de livre plutot que de logiciel. */
h1, h2, h3 { font-family: var(--ot-titre); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.22rem; margin: 0 0 .7rem; }

a { color: #5b21b6; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   Les briques partagees
------------------------------------------------------------ */
.ot-lab {
  display: block;
  margin: .9rem 0 .3rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ot-doux);
  text-transform: uppercase;
}

.ot-champ {
  width: 100%;
  min-width: 0;                 /* sinon un <select> impose la largeur de
                                   sa plus longue option et deborde (§7.69) */
  max-width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ot-encre);
  background: #fff;
  border: 2px solid var(--ot-bord);
  border-radius: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.ot-champ:focus {
  outline: none;
  border-color: var(--ot-cyan);
  box-shadow: 0 0 0 4px rgba(72, 219, 251, .22);
}
.ot-champ-manque { border-color: var(--ot-corail); background: var(--ot-rose); }
textarea.ot-champ { resize: vertical; line-height: 1.5; }

.ot-cta {
  display: inline-block;
  margin-top: 1rem;
  padding: .85rem 1.4rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: var(--ot-encre);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 3px 0 #0e0a1c;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.ot-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #0e0a1c; }
.ot-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e0a1c; }
.ot-cta:disabled {
  background: #c9c3d8; box-shadow: none; transform: none; cursor: default;
}

.ot-plat {
  display: inline-block;
  padding: .6rem 1rem;
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ot-encre);
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--ot-bord);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.ot-plat:hover { border-color: var(--ot-cyan); transform: translateY(-1px); }

.ot-danger {
  padding: .6rem 1rem;
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ot-rouge);
  background: var(--ot-rose);
  border: 2px solid #ffc9c9;
  border-radius: 13px;
  cursor: pointer;
}
.ot-danger:hover { border-color: var(--ot-corail); }

.ot-note { margin: .5rem 0 0; font-size: .87rem; line-height: 1.5; color: var(--ot-doux); }

/* ⚠️ L'ERREUR SE VOIT, ET ELLE N'EST PAS GRISE (§7.118). Un message
   d'echec de la couleur du texte ordinaire ne se distingue pas d'une
   explication, et l'eleve recommence sans comprendre. */
.ot-souci {
  margin: .85rem 0;
  padding: .8rem 1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: #9f1239;
  background: var(--ot-rose);
  border-left: 5px solid var(--ot-corail);
  border-radius: 12px;
}
.ot-souci-flottant {
  position: fixed;
  left: 50%; bottom: 1.2rem;
  z-index: 60;
  max-width: min(92vw, 34rem);
  transform: translateX(-50%);
  box-shadow: var(--ot-ombre-f);
}

.ot-info {
  margin: .85rem 0;
  padding: .8rem 1rem;
  font-size: .92rem;
  line-height: 1.5;
  color: #0d5c6b;
  background: #eafaff;
  border-left: 5px solid var(--ot-cyan);
  border-radius: 12px;
}

.ot-vide {
  padding: 1.8rem 1.1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ot-doux);
  text-align: center;
  background: rgba(255, 255, 255, .7);
  border: 2px dashed var(--ot-bord);
  border-radius: var(--ot-arrondi);
}

/* ============================================================
   COTE ELEVE — un telephone, en classe, presse
============================================================ */
.ot-entree, .ot-depot {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.8rem 1.1rem 4rem;
}

.ot-entree h1, .ot-depot h1 { font-size: 1.85rem; }
.ot-sous { margin: 0 0 1.3rem; font-size: 1.02rem; color: var(--ot-doux); }

/* Le champ du code : gros, espace, en majuscules. Il se recopie du fond
   d'une salle sur un telephone qu'on tient d'une main. */
.ot-code-champ {
  width: 100%;
  padding: .95rem;
  font-family: var(--ot-titre);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ot-encre);
  background: #fff;
  border: 3px solid var(--ot-bord);
  border-radius: 18px;
}
.ot-code-champ:focus {
  outline: none;
  border-color: var(--ot-cyan);
  box-shadow: 0 0 0 5px rgba(72, 219, 251, .25);
}

.ot-consigne {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  font-size: 1.02rem;
  line-height: 1.55;
  white-space: pre-line;
  background: #fffaf0;
  border-left: 5px solid var(--ot-jaune);
  border-radius: 14px;
}

/* LE bouton de l'eleve. C'est le seul geste de la page : il prend toute
   la largeur et ne peut pas etre rate. */
.ot-bouton-photo {
  display: block;
  margin: 1.5rem 0 .6rem;
  padding: 1.6rem 1rem;
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #2b2050, var(--ot-encre));
  border-radius: 22px;
  box-shadow: 0 4px 0 #0e0a1c, var(--ot-ombre);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.ot-bouton-photo:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0e0a1c;
}

.ot-liste { margin: 1.1rem 0 0; padding: 0; list-style: none; }

.ot-ligne {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .9rem;
  margin-bottom: .5rem;
  font-size: .92rem;
  background: #fff;
  border: 2px solid var(--ot-bord);
  border-radius: 14px;
  animation: ot-entre .25s ease both;
}
.ot-ligne-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-ligne-etat { flex: 0 0 auto; font-weight: 700; color: var(--ot-doux); }
.ot-ligne-ok { background: #effdf6; border-color: var(--ot-menthe); }
.ot-ligne-ok .ot-ligne-etat { color: #0f8f6c; }
.ot-ligne-ko { background: var(--ot-rose); border-color: #ffc9c9; }
.ot-ligne-ko .ot-ligne-etat { font-weight: 500; color: var(--ot-rouge); }

.ot-note-fin { margin-top: 1.5rem; }

.ot-pied { padding: 1.3rem; font-size: .8rem; text-align: center; }
.ot-pied a { color: #a9a2bd; }

@keyframes ot-entre {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   COTE PROFESSEUR
============================================================ */
.ot-carte-connexion {
  max-width: 25rem;
  margin: 3.2rem auto;
  padding: 2rem 1.6rem;
  background: var(--ot-carte);
  border: 1px solid var(--ot-bord);
  border-radius: 22px;
  box-shadow: var(--ot-ombre-f);
}
.ot-carte-connexion h1 { font-size: 1.9rem; }

.ot-barre {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  gap: .8rem;
  align-items: center;
  padding: .7rem 1rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ot-bord);
}
.ot-marque { font-family: var(--ot-titre); font-size: 1.1rem; font-weight: 700; }
.ot-qui {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: .95rem;
  color: var(--ot-doux);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ot-form-plat { margin: 0; }

.ot-page { max-width: 64rem; margin: 0 auto; padding: 1.3rem 1rem 4rem; }

.ot-bloc {
  margin-bottom: 1.3rem;
  padding: 1.3rem;
  background: var(--ot-carte);
  border: 1px solid var(--ot-bord);
  border-radius: var(--ot-arrondi);
  box-shadow: var(--ot-ombre);
}
.ot-bloc-tete {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  justify-content: space-between;
}
.ot-bloc-fin { border-color: #ffd7d7; }

.ot-duo, .ot-trio { display: grid; gap: .7rem; }
@media (min-width: 46rem) {
  .ot-duo  { grid-template-columns: 1fr 1fr; }
  .ot-trio { grid-template-columns: repeat(3, 1fr); }
}

.ot-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* --- le bloc a projeter --- */
.ot-bloc-projo {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  background:
    radial-gradient(circle at 100% 0, #eafaff 0, transparent 55%),
    var(--ot-carte);
}
.ot-projo-qr { flex: 0 0 auto; }
.ot-projo-qr img {
  display: block;
  width: 12.5rem;
  height: auto;
  border: 1px solid var(--ot-bord);
  border-radius: 16px;
}
.ot-projo-txt { flex: 1 1 18rem; min-width: 0; }
.ot-projo-url { margin: .2rem 0; font-size: 1.05rem; color: var(--ot-doux); }
.ot-projo-code {
  margin: .1rem 0 .5rem;
  font-family: var(--ot-titre);
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
}

.ot-code { font-family: var(--ot-titre); font-weight: 700; letter-spacing: .1em; }
.ot-code-petit { flex: 0 0 auto; font-size: 1.1rem; color: var(--ot-doux); }

/* --- les reglages --- */
.ot-reglages { display: grid; gap: 1.1rem; }
.ot-bascule { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.ot-bascule input {
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem;
  margin-top: .15rem;
  accent-color: var(--ot-menthe);
}
.ot-bascule small { display: block; margin-top: .1rem; font-size: .86rem; color: var(--ot-doux); }
.ot-reglage-partage { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ot-reglage-partage code {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-x: auto;
  padding: .5rem .7rem;
  font-size: .82rem;
  background: #faf8ff;
  border-radius: 10px;
}

/* --- la liste des seances --- */
.ot-seances { margin: 0; padding: 0; list-style: none; }
.ot-seance {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .5rem;
  border-bottom: 1px solid var(--ot-bord);
}
.ot-seance:last-child { border-bottom: 0; }
.ot-seance-close { opacity: .62; }
.ot-seance-lien {
  display: flex;
  flex: 1 1 16rem;
  gap: .85rem;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.ot-seance-lien:hover .ot-seance-txt strong { text-decoration: underline; }
.ot-seance-lien .ot-code { font-size: 1.15rem; }
.ot-seance-txt { min-width: 0; }
.ot-seance-txt strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ot-seance-txt small { font-size: .84rem; color: var(--ot-doux); }
.ot-seance-etats { display: flex; flex-wrap: wrap; gap: .35rem; }

.ot-pastille {
  padding: .25rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 999px;
}
.ot-pastille-ouvert { color: #0f8f6c; background: #d7fbee; }
.ot-pastille-froid  { color: #4b4463; background: #efecf5; }
.ot-pastille-tiede  { color: #92560a; background: #fff2d4; }
.ot-pastille-chaud  { color: #9f1239; background: #ffe0e0; }
.ot-pastille-garde  { color: #0d5c6b; background: #ddf5fd; }

.ot-compteur {
  display: inline-block;
  min-width: 1.8rem;
  padding: .08rem .5rem;
  font-family: var(--ot-pol);
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: var(--ot-encre);
  border-radius: 999px;
}

/* --- la grille des pages --- */
.ot-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.ot-case {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--ot-bord);
  border-radius: 16px;
  box-shadow: var(--ot-ombre);
  animation: ot-entre .3s ease both;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ot-case:hover {
  transform: translateY(-2px);
  border-color: var(--ot-cyan);
  box-shadow: var(--ot-ombre-f);
}
/* ⚠️ UNE PAGE MASQUEE SE VOIT MASQUEE. Sans ce signe, le professeur la
   cherche dans la projection et ne la trouve pas. */
.ot-case-masquee { opacity: .5; border-style: dashed; }
/* Une page selectionnee pour une action groupee se voit aussi, et
   autrement : deux etats differents ne peuvent pas se ressembler. */
.ot-case-choisie { border-color: var(--ot-menthe); box-shadow: 0 0 0 3px rgba(29, 209, 161, .3); }

.ot-case-img { display: block; background: #faf8ff; }
.ot-case-img img {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  object-position: top;        /* une page se lit par le haut */
}
.ot-case-tete { padding: .5rem .6rem .25rem; }
.ot-case-tete strong {
  display: block;
  overflow: hidden;
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ot-case-tete small { font-size: .76rem; color: var(--ot-doux); }
.ot-case-outils { display: flex; gap: .25rem; padding: .3rem .45rem .5rem; }
.ot-case-b {
  flex: 1 1 0;
  padding: .4rem 0;
  font-size: .95rem;
  background: #faf8ff;
  border: 1px solid var(--ot-bord);
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ot-case-b:hover { background: #fff; border-color: var(--ot-cyan); }
.ot-b-attente { opacity: .45; }

/* Le texte reconnu. Replie par defaut : il peut faire quarante lignes,
   et la grille doit rester une grille de vignettes. */
.ot-case-ocr { padding: 0 .55rem .4rem; }
.ot-case-ocr summary {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ot-doux);
  cursor: pointer;
}
.ot-case-ocr pre {
  max-height: 11rem;
  margin: .4rem 0;
  overflow: auto;
  padding: .5rem .6rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: #faf8ff;
  border-radius: 9px;
}

/* La case de selection, posee sur la vignette.
   ⚠️ EN HAUT A DROITE, ET PAS A GAUCHE. Posee a gauche, elle recouvrait
      le debut du titre de chaque page — « ...n fonctionnel » au lieu de
      « Bilan fonctionnel ». Une copie d'eleve commence toujours en haut
      a gauche ; sa marge droite, elle, est presque toujours vide.
   ⚠️ Et elle porte un fond et un liseré : sur une page claire, une case
      sans fond se perd dans le papier. */
.ot-case-coche {
  position: absolute;
  top: .45rem; right: .45rem;
  z-index: 2;
  width: 1.4rem; height: 1.4rem;
  accent-color: var(--ot-menthe);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
  cursor: pointer;
}

/* --- la barre des actions groupees --- */
/* ⚠️ ELLE N'APPARAIT QUE QUAND QUELQUE CHOSE EST CHOISI. Une barre
   toujours la, grisee, apprend a ne plus etre vue. */
.ot-lot {
  position: sticky;
  bottom: .8rem;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1rem;
  padding: .7rem .9rem;
  color: #fff;
  background: var(--ot-encre);
  border-radius: 16px;
  box-shadow: var(--ot-ombre-f);
  animation: ot-entre .2s ease both;
}
.ot-lot[hidden] { display: none; }
.ot-lot-n { flex: 1 1 auto; font-size: .95rem; font-weight: 600; }
.ot-lot button, .ot-lot a {
  padding: .5rem .85rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ot-encre);
  text-decoration: none;
  background: #fff;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}
.ot-lot button:hover, .ot-lot a:hover { background: var(--ot-jaune); }
.ot-lot button:disabled { opacity: .5; cursor: default; }
.ot-lot-x { background: transparent !important; color: #cfc8e4 !important; }

/* --- le code projete en plein ecran --- */
.ot-plein {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 15%, #2b2050 0, transparent 55%),
    radial-gradient(circle at 85% 85%, #14323a 0, transparent 50%),
    #0f0b1e;
}
.ot-plein[hidden] { display: none; }
.ot-plein-x {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: .5rem .85rem;
  font: inherit;
  font-size: 1.1rem;
  color: #cfc8e4;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}
/* ⚠️ TOUT EN `em`, SUR UNE RACINE QUI MELE LES DEUX DIMENSIONS. Un
   videoprojecteur de classe affiche 1280x720, parfois 1024x768 : une
   taille en `vw` seule s'effondre sur un ecran peu large mais haut
   (§7.70). */
.ot-plein-dedans {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2em;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, .62vw + .62vh, 22px);
  color: #fff;
}
.ot-plein-qr {
  width: 21em;
  height: auto;
  padding: .5em;
  background: #fff;
  border-radius: 1em;
}
.ot-plein-url { margin: 0; font-size: 2em; color: var(--ot-cyan); }
.ot-plein-code {
  margin: .1em 0;
  font-family: var(--ot-titre);
  font-size: 6.4em;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
}
.ot-plein-note { margin: .5em 0 0; font-size: 1.3em; color: #a9a2bd; }

/* Un professeur ou un eleve peut avoir demande moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .ot-case, .ot-ligne, .ot-lot { animation: none; }
  .ot-cta, .ot-plat, .ot-case, .ot-bouton-photo { transition: none; }
  .ot-cta:hover, .ot-plat:hover, .ot-case:hover { transform: none; }
}