/* Page Scanner (iPhone de l'enseignant, tenu à une main) : fond ardoise sombre, Fredoka, D34.
   Trois écrans (body[data-ecran] = pret | scan | resultats | test), un seul bouton principal en bas.
   Feuilles par-dessus : css/scanner-feuilles.css. */

body.scanner {
  --fond: #172025;
  --surface: #222f36;
  --surface-2: #2d3c44;
  --texte-pale: #a3b3bc;
  --gouttiere: 16px;
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.35;
  padding-top: max(8px, env(safe-area-inset-top));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Barre d'état : une seule ligne (← Accueil · liaison) ---------- */
.entete { max-width: 40rem; margin: 0 auto 4px; padding: 0 var(--gouttiere); flex-wrap: nowrap; }
.scanner .barre-accueil { min-height: 48px; }
.scanner .barre-titre, .scanner .barre-classe { display: none; }
.scanner .barre-liaison { min-height: 36px; margin-left: auto; font-size: 0.9rem; white-space: nowrap; }
@media (min-width: 640px) { .scanner .barre-classe { display: inline; } }

.page { max-width: 40rem; margin: 0 auto; padding: 0 var(--gouttiere) calc(var(--dock, 100px) + 20px); }
.note { color: var(--texte-pale); }
.message { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(217, 58, 43, 0.2); color: #ffc2b5; font-size: 0.95rem; }
#banque-message { background: var(--surface); color: var(--texte-pale); }
.rangee { display: flex; flex-wrap: wrap; gap: 8px; }
.rangee .btn { flex: 1 1 auto; }

.sans-classe { max-width: 32rem; margin: 2rem auto; padding: 1.2rem; border-radius: 16px; background: var(--surface); }
.sans-classe h1 { margin-top: 0; font-size: 1.5rem; line-height: 1.2; }

/* ---------- Contexte : « Question 3 / 8 · Ouverte · 2e vote » + puces ---------- */
.contexte { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.ctx-question { flex: 1 1 auto; min-width: 7.5rem; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ctx-numero { max-width: 100%; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ctx-tour { padding: 2px 10px; border-radius: 999px; background: var(--agir); color: var(--agir-texte); font-size: 0.85rem; font-weight: 600; } /* comme le badge de la projection */
/* Statut : pastille d'état commune (.pastille-etat), mêmes couleurs que la projection :
   scan en cours = agir (bleu), scan arrêté = gris, bonne réponse montrée = neutre (le vert dit « juste »). */
#ctx-statut[data-etat=''] { background: rgba(255, 255, 255, 0.14); color: var(--texte); }
.puce {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 48px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--texte); font: inherit; font-weight: 600; cursor: pointer;
}
.puce-ronde { width: 48px; padding: 0; }
.puce[data-etat='bientot'] { color: #f7c948; }
.puce[data-etat='fini'] { color: var(--texte-pale); } /* temps écoulé : neutre */
.puce[data-actif='1'] { box-shadow: inset 0 0 0 2px var(--agir); }
#ctx-minuteur { font-variant-numeric: tabular-nums; }

/* ---------- 1. Prêt ---------- */
.carte-question { margin: 4px 0 12px; padding: 12px 16px 14px; border-radius: 16px; background: var(--surface); }
.carte-question::before { content: 'Pas encore lancée'; display: block; margin-bottom: 4px; color: var(--texte-pale); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.carte-question[data-en-cours='1']::before { content: 'Sur la projection'; color: #8cc1ff; }
.carte-texte { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; }
.carte-choix { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.carte-reponse { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-radius: 10px; }
.carte-reponse[data-bonne='1'] { background: rgba(30, 133, 80, 0.22); box-shadow: inset 0 0 0 2px var(--juste); }
.carte-reponse[data-bonne='1']::after { content: '✓ bonne'; margin-left: auto; color: #7ee2a8; font-size: 0.85rem; font-weight: 600; }
.carte-reponse-texte { min-width: 0; overflow-wrap: anywhere; }
.jeu-choix { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--texte-pale); font-weight: 600; }
.jeu-choix select { flex: 1 1 auto; min-height: 48px; font-size: 1rem; }
.liste-questions { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.question-ligne {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 10px;
  padding: 6px 12px; border: 2px solid transparent; border-radius: 12px; background: var(--surface);
  color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.question-ligne[aria-pressed='true'] { border-color: var(--agir); background: rgba(31, 111, 214, 0.2); }
.question-ligne[data-posee='1'] { color: var(--texte-pale); }
.ql-numero { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--surface-2); font-weight: 700; }
.question-ligne[data-en-cours] .ql-numero { background: var(--agir); color: #fff; }
/* Déjà posée aujourd'hui : petit ✓ sur le numéro. */
.question-ligne[data-posee='1'] .ql-numero::after {
  content: '✓'; position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--juste); color: #fff; font-size: 0.7rem;
}
.ql-texte { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ql-bonne { display: flex; gap: 2px; color: var(--texte-pale); font-size: 0.8rem; }

/* ---------- 2. Scan : compteur + vignette, puis la classe ---------- */
.scan-tete { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
.compteur { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.compte-n { font-size: 4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.compte-total { font-size: 1.8rem; font-weight: 600; color: var(--texte-pale); }
.compte-legende { width: 100%; color: var(--texte-pale); font-size: 0.9rem; }
.apercu { position: relative; width: 148px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #000; cursor: zoom-in; }
.apercu.apercu-grand { grid-column: 1 / -1; width: 100%; max-height: 46vh; cursor: zoom-out; }
.apercu video, .apercu .calque { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Vignette repliée : la vidéo reste dans la page (Safari la mettrait en pause), invisible. */
.apercu.apercu-masque { position: fixed; left: 0; top: 0; width: 2px; height: 2px; aspect-ratio: auto; opacity: 0; pointer-events: none; }
.apercu-replier {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 0; background: radial-gradient(circle at 30px 18px, rgba(0, 0, 0, 0.6) 14px, transparent 14.5px); color: #fff; font-size: 0.8rem; cursor: pointer;
}
.apercu-replier .icone { transform: translate(6px, -6px); }
.scan-multiple { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(247, 201, 72, 0.14); color: #ffe08a; font-size: 0.95rem; }
.test { display: grid; gap: 10px; margin-top: 10px; }
.test-resume { min-height: 18vh; font-size: 0.85rem; }
body[data-ecran='test'] .apercu.apercu-grand { max-height: 34vh; }

/* ---------- Élèves ---------- */
.grille { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
.eleve {
  position: relative; overflow: hidden; min-height: 52px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px;
  padding: 10px 6px 4px 10px; border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 10px; color: var(--texte-pale);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; cursor: pointer;
}
.eleve-numero { position: absolute; top: 1px; left: 10px; font-size: 0.68rem; line-height: 1.2; opacity: 0.85; }
.eleve-prenom { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 0.95rem; }
.eleve-reponse { display: flex; gap: 1px; font-weight: 700; }
.eleve-detail { position: absolute; right: 6px; bottom: 1px; font-size: 0.7rem; font-weight: 700; }
.eleve-equipe { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.eleve[data-etat='juste'] { border: 2px solid transparent; background: var(--juste); color: #fff; }
.eleve[data-etat='faux'] { border: 2px solid transparent; background: var(--faux); color: #fff; }
.eleve[data-etat='repondu'] { border: 2px solid transparent; background: var(--surface-2); color: var(--texte); }
.eleve[data-etat='partiel'] { border: 2px solid #f7c948; background: var(--surface-2); color: var(--texte); }
.eleve[data-alerte] { outline: 3px solid #f7c948; outline-offset: -1px; }
.eleve[data-corrigee] .eleve-numero::after { content: ' ✎'; }
/* Appui long : la case se remplit pendant 0,6 s. */
.eleve.appui::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); transform-origin: left; animation: appui 0.6s linear forwards; }
@keyframes appui { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.grille-certitude .eleve { grid-template-columns: 1fr auto auto; }
.grille-certitude .eleve-detail { position: static; font-size: 0.75rem; }
.grille-aide { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; color: var(--texte-pale); font-size: 0.85rem; }
.grille-legende { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.legende-equipe { display: inline-flex; align-items: center; gap: 5px; color: var(--texte); font-weight: 600; }
.legende-equipe::before { content: ''; width: 6px; height: 1em; border-radius: 2px; background: var(--equipe); }

/* ---------- 3. Résultats ---------- */
.res-bilan { margin: 4px 0 10px; font-size: 1.15rem; font-weight: 600; }
.res-avant { display: block; color: var(--texte-pale); font-size: 0.9rem; font-weight: 500; }
.res-classe { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface); }
.res-classe[data-atteint='1'] { color: #7ee2a8; }
.barres { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.barre {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 6px 12px; border: 0; border-radius: 12px; background: var(--surface); color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.barre[data-bonne='1'] { box-shadow: inset 0 0 0 2px var(--juste); }
.barre[aria-expanded='true'] { background: var(--surface-2); }
.barre-corps { display: grid; gap: 4px; min-width: 0; }
.barre-texte { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; }
.barre-piste { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.barre-plein { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--rep); }
.barre-avant + .barre-plein { top: 5px; }
.barre-avant { position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.barre-compte { min-width: 2ch; font-size: 1.15rem; font-weight: 700; text-align: right; white-space: nowrap; }
.barre-juste { color: #7ee2a8; font-weight: 700; }
.barre-noms { margin: 4px 10px 8px; }
.certitude { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); }
.matrice { width: 100%; border-collapse: collapse; }
.matrice th, .matrice td { padding: 8px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.matrice th:first-child { text-align: left; }
.matrice .col-juste { color: #7ee2a8; }
.matrice .col-faux { color: #ffb3aa; }
.matrice td.alerte, .certitude-alerte { color: #f7c948; font-weight: 700; }
.certitude-alerte { margin: 8px 0 0; }
#btn-revoter { margin: 0 0 6px; }

/* ---------- Barre du bas : révélation (résultats) + bouton principal ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; gap: 8px;
  max-width: 40rem; margin: 0 auto; padding: 12px var(--gouttiere) max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fond) calc(100% - 10px), rgba(23, 32, 37, 0));
}
.principal { display: flex; width: 100%; min-height: 64px; border-radius: 16px; font-size: 1.3rem; transition: none; }
.revelation { display: flex; gap: 6px; }
.bascule {
  flex: 1 1 0; min-width: 0; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; border: 0; border-radius: 12px; background: var(--surface); color: var(--texte-pale);
  font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.1; cursor: pointer;
}
.bascule::before {
  content: ''; width: 38px; height: 22px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.22) radial-gradient(circle at 11px 50%, #fff 7px, transparent 7.6px);
}
.bascule[aria-checked='true'] { background: rgba(31, 111, 214, 0.25); color: var(--texte); }
.bascule[aria-checked='true']::before { background: var(--agir) radial-gradient(circle at 27px 50%, #fff 7px, transparent 7.6px); }

/* Messages temporaires : placés par toast() (commun.js) au-dessus de la barre du bas, jamais sur les boutons. */
/* Test de lecture : ni compteur ni repli, l'aperçu reste en grand. */
body[data-ecran='test'] .compteur, body[data-ecran='test'] .apercu-replier { display: none; }

/* ---------- Fin : « Séance terminée » ---------- */
.fin { display: grid; gap: 12px; margin-top: 8px; padding: 18px 16px; border-radius: 16px; background: var(--surface); }
.fin-bilan { display: grid; gap: 2px; margin: 0; font-size: 1.15rem; }
.fin-ligne { display: block; }
.fin-chiffre { font-size: 2rem; font-weight: 700; }
.fin-objectif[data-atteint='1'] { color: var(--juste-vif); font-weight: 600; }
.fin .btn-large { width: 100%; min-height: 52px; }