@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url("fonts/fredoka-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500 600; font-display: swap; src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("fonts/fredoka-latin-700-normal.woff2") format("woff2"); }

/* ============================================================
   Crack Class — charte graphique (bleus)
   Bleu nuit #071A3D / #061B36 · Bleu royal #063B9B
   Bleu électrique #0067F4 · Touche azur #008CF5
   ============================================================ */
:root {
  --nuit: #071a3d;
  --nuit-2: #061b36;
  --royal: #063b9b;
  --electrique: #0067f4;
  --electrique-fonce: #0049b3;   /* ombre des boutons */
  --azur: #008cf5;
  --glacier: #cfe6ff;            /* teinte claire dérivée, pour les accents sur fond sombre */
  --pale: #eaf2ff;               /* fonds très clairs */
  --alerte: #d93a3f;             /* uniquement erreurs / mots refusés / suppression */
  --blanc: #ffffff;
  --gris: #56668a;
  --bord: #d9e3f5;
  --rayon: 22px;
  --ombre: 0 10px 30px rgba(8, 18, 70, .28);
  --police: "Fredoka", "Nunito", "Segoe UI Rounded", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  background: var(--nuit);
  color: var(--nuit);
  line-height: 1.4;
}
a { color: var(--electrique); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
button, .primary, .ghost, .danger {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .1s, filter .15s, background .15s;
}
button:active, .primary:active { transform: scale(.96); }
.primary { background: var(--electrique); color: var(--blanc); box-shadow: 0 4px 0 var(--electrique-fonce); }
.primary:hover { filter: brightness(1.07); }
.ghost { background: var(--blanc); color: var(--nuit); border-color: var(--bord); }
.ghost:hover { border-color: var(--nuit); }
.danger { background: var(--blanc); color: var(--alerte); border-color: #f3c4c6; }
.small { padding: 6px 14px; font-size: .92rem; }
.wide { width: 100%; margin-top: 8px; }

/* ============================================================
   PAGE DE TITRE (index.php) — l'image entière, cliquable
   ============================================================ */
body.page-titre { background: var(--nuit); overflow: hidden; }
.ecran-titre {
  position: fixed; inset: 0; display: block; cursor: pointer;
  background: var(--nuit) url("titre.jpg") center / cover no-repeat;
  animation: apparition .8s ease-out;
}
@keyframes apparition { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (max-aspect-ratio: 4/3) {   /* écran plutôt vertical : on montre l'image entière */
  .ecran-titre { background-size: contain; }
}

/* ============================================================
   FOND PAYSAGE (thématiques, jeu, admin)
   ============================================================ */
body.page-themes, body.page-jeu, body.page-admin {
  background: var(--nuit) url("fond.jpg") center / cover no-repeat fixed;
}
.top-themes { max-width: 1150px; margin: 0 auto; }

/* ============================================================
   CHOIX DES THÉMATIQUES
   ============================================================ */
.accueil { max-width: 1150px; margin: 0 auto; padding: 6px 20px 60px; }
.intro {
  color: var(--blanc); text-shadow: 0 2px 10px rgba(8,18,70,.55); text-align: center; font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 0 26px;
}
.groupe { margin-bottom: 34px; }
.groupe-titre {
  display: inline-block; margin: 0 0 14px;
  color: var(--blanc); background: var(--electrique);
  padding: 4px 18px; border-radius: 999px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(0,0,0,.3);
  font-size: 1.25rem; font-weight: 700; transform: rotate(-1.5deg);
}
.famille { font-size: .8rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.tuile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px; min-height: 150px;
  background: var(--blanc); color: var(--nuit); text-decoration: none;
  border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: transform .18s, box-shadow .18s;
}
.tuile::before {               /* pastille de couleur façon illustration */
  content: ""; position: absolute; right: -34px; bottom: -34px;
  width: 88px; height: 88px; border-radius: 50%; background: var(--c);
}
.tuile:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 16px 36px rgba(8,18,70,.4); }
.tuile-nom { font-size: 1.4rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.tuile-desc { color: var(--gris); font-size: .98rem; }
.tuile-nb {
  margin-top: auto; align-self: flex-start;
  background: var(--nuit); color: var(--blanc);
  padding: 4px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600;
}
.vide { color: var(--blanc); text-align: center; }
.vide a { color: var(--glacier); }

/* ============================================================
   ÉCRAN DE JEU
   ============================================================ */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
}
.top h1 { margin: 0; text-align: center; }
.top form { margin: 0; }
.pastille-theme {
  background: var(--accent); padding: 8px 28px; border-radius: 999px;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 700;
  box-shadow: var(--ombre); border: 3px solid var(--blanc);
}

.jeu {
  display: grid; grid-template-columns: 1fr 330px; gap: 22px;
  max-width: 1400px; margin: 0 auto; padding: 8px 22px 22px;
}
.carte-question {
  background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre);
  padding: 26px 34px;
  display: flex; flex-direction: column; min-height: 72vh;
  position: relative; overflow: hidden;
}
.carte-question::after {       /* logo en filigrane */
  content: ""; position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  width: 54px; height: 54px; top: 8px;
  background: url("logo.png") center / contain no-repeat;
}
.compteur {
  align-self: flex-start;
  background: var(--azur); color: var(--nuit);
  padding: 4px 14px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.question {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem); font-weight: 700; line-height: 1.1;
  color: var(--nuit); padding: 24px 0;
}
.question.entree { animation: entree .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes entree { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.nav { display: flex; justify-content: space-between; gap: 12px; }
.nav .primary { font-size: 1.25rem; padding: 14px 30px; }
.aide { text-align: center; color: var(--gris); font-size: .82rem; margin: 14px 0 0; }

.outils { display: flex; flex-direction: column; gap: 16px; }
.bloc {
  background: var(--blanc); border-radius: var(--rayon); padding: 18px;
  box-shadow: var(--ombre);
}
.bloc h2 {
  margin: 0 0 10px; font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--nuit);
}
.bloc .ligne { flex-wrap: nowrap; }
.bloc .ligne select { flex: 1; min-width: 96px; }
.bloc .ligne button { padding-left: 16px; padding-right: 16px; }
.chrono {
  font-size: 3.4rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  margin-bottom: 12px; padding: 6px 0;
  background: var(--nuit); color: var(--glacier); border-radius: 16px;
}
.chrono.urgent { background: var(--azur); color: var(--blanc); animation: pulse 1s infinite; }
.chrono.fini { background: var(--electrique); color: var(--blanc); }
@keyframes pulse { 50% { transform: scale(1.04); } }
.lettres { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; margin-bottom: 10px; }
.lettre {
  width: 40px; height: 46px; display: grid; place-items: center;
  background: var(--glacier); color: var(--nuit);
  border-radius: 10px; box-shadow: 0 4px 0 #7eb2f2;
  font-weight: 700; font-size: 1.45rem;
}
.muet { color: var(--gris); font-size: .88rem; }
.liste {
  grid-column: 1 / -1; background: var(--blanc); border-radius: var(--rayon);
  padding: 22px 34px; box-shadow: var(--ombre);
}
.liste[hidden] { display: none; }
.liste h2 { margin-top: 0; }
.liste ol { columns: 2; column-gap: 40px; font-size: 1.2rem; }
.liste li { margin-bottom: 6px; break-inside: avoid; }
.liste li::marker { color: var(--electrique); font-weight: 700; }

/* Plein écran (vidéoprojecteur) */
:fullscreen .question { font-size: clamp(2.6rem, 6.2vw, 6rem); }

/* ============================================================
   FORMULAIRES / ADMIN
   ============================================================ */
body.page-admin .top { background: var(--nuit); color: var(--blanc); border-bottom: 6px solid var(--electrique); }
body.page-admin .top h1 { font-size: 1.4rem; flex: 1; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.check { display: flex; align-items: center; gap: 6px; font-size: .95rem; margin-top: 8px; font-weight: 400; }
select, input[type=text], input[type=password], input[type=number], textarea {
  font: inherit; padding: 9px 12px; border: 2px solid var(--bord); border-radius: 12px;
  background: var(--blanc); color: var(--nuit);
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--azur); }
textarea { width: 100%; resize: vertical; }
label { display: block; font-weight: 600; margin-bottom: 14px; }
label input[type=text], label input[type=password], label textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
.admin { max-width: 1000px; margin: 0 auto; padding: 26px 20px; }
.carte { background: var(--blanc); border-radius: var(--rayon); padding: 26px; box-shadow: 0 4px 16px rgba(19,42,136,.1); }
.carte h2 { margin-top: 0; }
.etroite { max-width: 420px; margin: 40px auto; }
.entete { justify-content: space-between; margin-bottom: 14px; }
.entete h2 { margin: 0; color: var(--blanc); background: var(--nuit); padding: 4px 18px; border-radius: 999px; }
.tableau {
  width: 100%; border-collapse: collapse; background: var(--blanc);
  border-radius: var(--rayon); overflow: hidden; box-shadow: 0 4px 16px rgba(19,42,136,.1);
}
.tableau th, .tableau td { padding: 12px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.tableau th { background: var(--nuit); color: var(--blanc); font-size: .88rem; font-weight: 600; }
.tableau small { color: var(--gris); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions form { margin: 0; }
.pastille { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bord); }
.choix-couleur { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.choix-couleur .lbl { font-weight: 600; margin-right: 4px; }
.swatch { margin: 0; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch span {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--blanc); box-shadow: 0 0 0 2px var(--bord);
}
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--nuit); }
.swatch input:focus-visible + span { box-shadow: 0 0 0 3px var(--azur); }
.alerte { background: #fdecee; color: #b3262b; padding: 10px 14px; border-radius: 12px; }
.succes { background: #e2f2ff; color: var(--nuit); padding: 10px 14px; border-radius: 12px; }
code { background: var(--pale); padding: 1px 6px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .jeu { grid-template-columns: 1fr; padding: 8px 12px 16px; }
  .carte-question { min-height: 55vh; padding: 22px; }
  .liste ol { columns: 1; }
  .top { padding: 10px 12px; }
  .pastille-theme { padding: 6px 16px; }
  body.page-jeu { background-attachment: scroll; background-position: left top; }
  #btnFs, .aide, .carte-question::after { display: none; }
  .top-jeu .ghost { white-space: nowrap; }
  .nav button { white-space: nowrap; padding-left: 16px; padding-right: 16px; }
  .nav .primary { font-size: 1.05rem; padding: 12px 18px; }
}

/* ============================================================
   MODES SMARTPHONE
   ============================================================ */
[hidden] { display: none !important; }
.ligne.entre { justify-content: space-between; }
.muet.petit, .petit { font-size: .82rem; }
.centre-txt { text-align: center; }
.gros { font-size: 1.2rem; padding: 14px 30px; }
.carte-blanche {
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 24px 26px;
}
.carte-blanche h2 { margin-top: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pale); color: var(--nuit); font-weight: 600;
  padding: 6px 14px; border-radius: 999px; margin: 3px; font-size: 1rem;
}
.chip.mini { font-size: .78rem; padding: 2px 10px; margin: 2px; background: var(--nuit); color: var(--blanc); }
.chip.pop { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Choix du mode ---------- */
.modes { max-width: 1100px; margin: 0 auto; padding: 10px 20px 50px; }
.grille-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.carte-mode {
  position: relative; overflow: hidden; margin: 0;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  background: var(--blanc); color: var(--nuit); text-decoration: none;
  border-radius: 26px; padding: 28px 26px 24px; box-shadow: var(--ombre);
  border-top: 10px solid var(--c);
  transition: transform .18s;
}
.carte-mode:hover { transform: translateY(-4px); }
.mode-icone { font-size: 2.6rem; line-height: 1; }
.mode-titre { font-size: 1.5rem; font-weight: 700; }
.mode-desc { color: var(--gris); flex: 1; }
.carte-mode .primary { margin-top: 6px; }
.nb-equipes { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.bareme {
  margin: 26px auto 0; max-width: 720px; text-align: center;
  background: rgba(255,255,255,.92); color: var(--nuit);
  padding: 10px 18px; border-radius: 999px;
}

/* ---------- Écran animateur ---------- */
.badge-code {
  background: var(--blanc); color: var(--nuit); border-radius: 999px;
  padding: 6px 16px; font-weight: 600; box-shadow: var(--ombre);
}
.badge-code strong { letter-spacing: .12em; font-size: 1.15rem; color: var(--electrique); }
.hote-attente {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 24px;
  max-width: 1300px; margin: 0 auto; padding: 8px 22px 22px;
}
.qr-carte { text-align: center; }
.qr-carte h2 { font-size: 1.8rem; margin-bottom: 10px; }
.qr { background: var(--blanc); line-height: 0; }
.qr svg { width: 100%; height: auto; display: block; }
.qr-carte .qr { max-width: 340px; margin: 0 auto; }
.url-courte { color: var(--gris); margin: 12px 0 4px; word-break: break-all; }
.url-courte strong { color: var(--nuit); }
.code-geant {
  display: inline-block; margin-top: 6px;
  font-size: 3.6rem; font-weight: 700; letter-spacing: .18em; line-height: 1;
  background: var(--nuit); color: var(--glacier); padding: 12px 22px 12px 32px; border-radius: 18px;
}
.inscrits { display: flex; flex-direction: column; }
.inscrits h2 { font-size: 1.8rem; margin-bottom: 4px; }
.inscrits h2 span:first-child { color: var(--electrique); }
.liste-inscrits { flex: 1; align-content: flex-start; margin: 14px 0 20px; min-height: 180px; }
.liste-inscrits .chip { font-size: 1.15rem; padding: 8px 18px; }
.inscrits .gros { align-self: center; }
.equipes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.equipe-col {
  border-radius: 18px; padding: 12px; min-height: 120px;
  background: color-mix(in srgb, var(--e) 12%, white); border: 3px solid var(--e);
}
.equipe-nom { font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between; }
.equipe-nom span { background: var(--e); color: var(--blanc); border-radius: 999px; padding: 0 10px; }
.equipe-col .chip { background: var(--blanc); }

.info-reponses { color: var(--gris); font-weight: 600; }
.question.petite { flex: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); padding: 14px 0 6px; }
.mur {
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
  max-height: 42vh; overflow-y: auto; margin-bottom: 16px; padding: 4px;
}
.page-hote .carte-question .question:not(.petite) { flex: 0 0 auto; min-height: 30vh; }
.mur-vide { color: var(--gris); width: 100%; text-align: center; }
.mot {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 14px; font: inherit; font-weight: 700;
  background: var(--pale); color: var(--nuit); border: 2px solid transparent;
  animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); cursor: pointer; text-align: left;
}
button.mot:disabled { cursor: default; }
.mot-txt { font-size: 1.25rem; }
.mot-badge { font-size: .85rem; padding: 1px 8px; border-radius: 999px; background: var(--nuit); color: var(--blanc); }
.mot-auteurs { width: 100%; }
.mot.unique { background: #e3efff; border-color: var(--electrique); }
.mot.unique .mot-badge { background: var(--electrique); color: var(--blanc); }
.mot.double { background: var(--pale); border-color: var(--bord); }
.mot.refuse { background: #f4f4f6; color: #9aa0b8; border-color: #e0e2ea; }
.mot.refuse .mot-txt { text-decoration: line-through; }
.mot.refuse .mot-badge { background: var(--alerte); }
.mot.cache { cursor: default; background: var(--pale); }
.mot.cache .mot-txt { letter-spacing: .1em; color: var(--gris); }
.code-mini { font-weight: 700; letter-spacing: .12em; color: var(--electrique); font-size: 1.2rem; }

/* ---------- Classement / podium ---------- */
main.centre { max-width: 1000px; margin: 0 auto; padding: 8px 22px 30px; }
.titre-classement { font-size: 2rem; text-align: center; }
.titre-classement .muet { font-size: 1rem; display: block; font-weight: 500; }
.classement { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 8px; }
.classement li {
  display: grid; grid-template-columns: 46px minmax(120px, 1.2fr) 2fr 60px; align-items: center; gap: 12px;
  background: #f3f7fe; border-radius: 14px; padding: 8px 12px; border-left: 8px solid var(--e);
  animation: pop .4s ease-out backwards;
}
.classement li:nth-child(2) { animation-delay: .05s; } .classement li:nth-child(3) { animation-delay: .1s; }
.classement li:nth-child(4) { animation-delay: .15s; } .classement li:nth-child(5) { animation-delay: .2s; }
.rang {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nuit); color: var(--glacier); font-weight: 700;
}
.classement li:first-child .rang { background: var(--glacier); color: var(--nuit); }
.cl-nom { font-weight: 700; font-size: 1.15rem; }
.cl-nom small { display: block; font-weight: 400; font-size: .8rem; color: var(--gris); }
.barre { height: 16px; background: #dde7f8; border-radius: 999px; overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--e); border-radius: 999px; transition: width .6s; }
.cl-pts { font-weight: 700; font-size: 1.3rem; text-align: right; }
.classement.compact li { grid-template-columns: 40px 1fr 50px; }
.classement.compact .barre { display: none; }
.carte-blanche.large .nav { margin-top: 10px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 14px; margin: 20px auto 10px; max-width: 700px; }
.marche {
  position: relative; background: var(--e); color: var(--blanc);
  border-radius: 18px 18px 6px 6px; text-align: center; padding: 16px 8px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  animation: monte .7s cubic-bezier(.2, 1.3, .4, 1) backwards;
}
.marche.m1 { min-height: 220px; animation-delay: .5s; }
.marche.m2 { min-height: 170px; animation-delay: .25s; }
.marche.m3 { min-height: 130px; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.marche.vide { background: transparent; }
.couronne { position: absolute; top: -42px; left: 50%; transform: translateX(-50%); font-size: 2.6rem; }
.p-nom { font-weight: 700; font-size: 1.25rem; }
.p-pts { font-weight: 600; opacity: .95; }
.p-rang { font-size: 2.4rem; font-weight: 700; line-height: 1; }

/* ---------- Téléphone du joueur ---------- */
body.page-mobile { background-attachment: scroll; }
.mobile { max-width: 480px; margin: 0 auto; padding: 14px 14px 30px; display: grid; gap: 14px; }
.mobile-logo { width: 58%; max-width: 240px; display: block; margin: 4px auto -4px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.mobile .carte-blanche { padding: 20px 18px; }
.champ-code { font-size: 2rem !important; text-align: center; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; }
.large-btn { width: 100%; margin-top: 6px; }
.pastille-theme.petite { display: inline-block; font-size: .9rem; padding: 4px 14px; border-width: 2px; box-shadow: none; margin: 0 0 8px; }
.choix-equipe { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix-equipe legend { font-weight: 600; margin-bottom: 8px; }
.btn-equipe { margin: 0; cursor: pointer; }
.btn-equipe input { position: absolute; opacity: 0; }
.btn-equipe span {
  display: block; text-align: center; padding: 14px 8px; border-radius: 16px; font-weight: 700;
  background: color-mix(in srgb, var(--e) 15%, white); border: 3px solid var(--e); color: var(--nuit);
}
.btn-equipe small { display: block; font-weight: 400; font-size: .78rem; }
.btn-equipe input:checked + span { background: var(--e); color: var(--t); transform: scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.btn-equipe input:focus-visible + span { outline: 3px solid var(--nuit); outline-offset: 2px; }

.barre-joueur {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--nuit); color: var(--blanc); padding: 10px 16px; font-weight: 600;
  border-bottom: 4px solid var(--electrique);
}
.bj-moi { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.bj-score strong { color: var(--glacier); font-size: 1.3rem; }
.grand-emoji { font-size: 3rem; text-align: center; line-height: 1.1; }
.minuteur { font-weight: 700; font-variant-numeric: tabular-nums; background: var(--nuit); color: var(--glacier); border-radius: 999px; padding: 2px 12px; }
.minuteur:empty { display: none; }
.minuteur.urgent { background: var(--azur); color: var(--blanc); animation: pulse 1s infinite; }
.question-mobile { font-size: 1.7rem; font-weight: 700; text-align: center; line-height: 1.15; margin: 18px 0 14px; }
.centre-flex { justify-content: center; }
.centre-flex:empty { display: none; }
.form-mot { display: flex; gap: 8px; }
.form-mot input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.25rem; font-weight: 600;
  padding: 12px 14px; border: 3px solid var(--bord); border-radius: 14px; color: var(--nuit);
}
.form-mot input:focus { outline: none; border-color: var(--azur); }
.message { min-height: 1.4em; margin: 8px 0 0; font-weight: 600; text-align: center; }
.message.ok { color: #1a8c55; }
.message.ko { color: var(--alerte); }
.sous-titre { font-size: .95rem; margin: 14px 0 6px; color: var(--gris); }
.sous-titre:empty { display: none; }
.mes-mots .chip { background: #e2f2ff; }
.mot-envoye small { font-weight: 400; font-size: .72rem; color: var(--gris); }
.question-rappel { text-align: center; color: var(--gris); font-weight: 600; }
.bilan-mots { display: grid; gap: 6px; }
.bilan { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 600; }
.bilan.okk { background: #e8f8ef; color: #146c43; }
.bilan.ko { background: #fdecee; color: #b3262b; text-decoration: line-through; }
.etoile { background: var(--glacier); color: var(--nuit); border-radius: 999px; padding: 0 8px; font-size: .75rem; text-decoration: none; }
.total-q { text-align: center; font-size: 1.2rem; margin: 14px 0 0; }
.total-q strong { color: var(--electrique); }
.rang-geant { font-size: 5rem; font-weight: 700; line-height: 1; margin: 6px 0; color: var(--electrique); }
.rang-geant sup { font-size: 2rem; }

@media (max-width: 860px) {
  .hote-attente { grid-template-columns: 1fr; }
  .classement li { grid-template-columns: 40px 1fr 50px; }
  .classement .barre { display: none; }
}

/* --- correctifs mise en page --- */
.mobile { grid-template-columns: minmax(0, 1fr); }
.mobile > * { min-width: 0; }
.question-mobile { overflow-wrap: anywhere; }
.mobile > p.muet.petit { color: var(--blanc); text-shadow: 0 1px 4px rgba(8,18,70,.7); }
.mobile > p.muet.petit strong { color: var(--glacier); }
.carte-question .nav > span.ligne { margin-left: auto; }
.page-hote .mur { flex: 1; }
.page-hote .carte-question .question:not(.petite) { min-height: 26vh; }

/* ============================================================
   COMPTES ADMINISTRATEURS
   ============================================================ */
.qui { color: var(--blanc); font-weight: 600; text-align: right; line-height: 1.1; }
.qui small { display: block; font-weight: 400; font-size: .75rem; color: var(--glacier); }
.onglets-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.onglets-admin a {
  text-decoration: none; font-weight: 600; color: var(--nuit);
  background: rgba(255,255,255,.9); padding: 8px 18px; border-radius: 999px; box-shadow: 0 3px 10px rgba(8,18,70,.2);
}
.onglets-admin a.actif { background: var(--electrique); color: var(--blanc); }
.tableau tr.inactif td { opacity: .55; }
.alerte-txt { color: var(--alerte); font-weight: 600; }
.role { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.role-super { background: var(--glacier); color: var(--nuit); }
.role-formateur { background: #e2f2ff; color: var(--nuit); }
.grille-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.grille-form select { width: 100%; margin-top: 6px; font-weight: 400; }
.champ-court { width: 170px; padding: 6px 10px !important; font-size: .9rem !important; }
.tableau.droits td:not(:first-child), .tableau.droits th:not(:first-child) { text-align: center; width: 130px; }
.suivi { font-size: .9rem; white-space: nowrap; }
.suivi small { color: var(--gris); }
.carte label small.muet { font-weight: 400; }

/* Logo détouré en tête de la page des thématiques */
.logo-entete { margin: 0; line-height: 0; }
.logo-entete img { height: 120px; width: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
@media (max-width: 860px) { .logo-entete img { height: 80px; } }
.bj-moi .chip { border: 1.5px solid rgba(255,255,255,.75); }
.etoile { background: var(--electrique); color: var(--blanc); }

/* ============================================================
   LOGO DU CLIENT — cartouche dans la barre du haut (sauf écran titre)
   ============================================================ */
.top { display: grid; grid-template-columns: 1fr auto 1fr; }
.top > :first-child { justify-self: start; }
.top > :last-child  { justify-self: end; }
.top .ligne.gauche { gap: 10px; flex-wrap: nowrap; }
/* Gélule du logo client : l'image la remplit entièrement, les bouts arrondis la rognent.
   Tailles d'affichage : ordinateur 42 px de haut (220 px de large max),
   téléphone 36 px (150 px max), barre du joueur 32 px (120 px max). */
.badge-client {
  display: inline-block; height: 42px; max-width: 220px; padding: 0;
  border-radius: 999px; overflow: hidden; background: var(--blanc);
  box-shadow: 0 4px 14px rgba(7,26,61,.3); line-height: 0; flex: none;
}
.badge-client img { height: 100%; width: auto; max-width: 100%; object-fit: cover; display: block; }
.badge-client.mini { height: 32px; max-width: 120px; }
.haut-mobile { display: flex; justify-content: center; }
@media (max-width: 860px) {
  .badge-client { height: 36px; max-width: 150px; }
}
/* Aperçu en forme de gélule dans l'admin */
.logo-apercu .badge-client { height: 42px; max-width: 100%; }

/* Bibliothèque de logos dans l'admin */
.logos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.logo-carte {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 0;
  border: 2px solid var(--bord); border-radius: 16px; padding: 14px 12px;
}
.logo-carte.actif { border-color: var(--electrique); box-shadow: 0 0 0 3px rgba(0,103,244,.18); }
.logo-apercu {
  width: 100%; height: 90px; display: grid; place-items: center; border-radius: 10px; padding: 8px;
  background: repeating-conic-gradient(#f1f4fa 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}
.logo-apercu img { max-width: 100%; max-height: 74px; }
.logo-apercu.vide { color: var(--gris); font-size: .9rem; background: var(--pale); }
.logo-carte small { font-size: .75rem; }
.logo-carte .ligne { gap: 6px; margin-top: 4px; }
.logo-carte form { margin: 0; }
.etat-actif { color: var(--electrique); font-weight: 700; }
.champ-fichier { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 400; padding: 8px; border: 2px dashed var(--bord); border-radius: 12px; background: var(--pale); }
.bj-score { white-space: nowrap; flex: none; }
.bj-moi { flex: 1 1 auto; text-overflow: ellipsis; }

/* Renommage d'un logo et aide */
.logo-carte .renommer { width: 100%; }
.logo-carte .renommer input {
  width: 100%; text-align: center; font: inherit; font-weight: 700; color: var(--nuit);
  border: 2px solid transparent; border-radius: 10px; padding: 4px 6px; background: transparent;
}
.logo-carte .renommer input:hover, .logo-carte .renommer input:focus { border-color: var(--bord); background: var(--blanc); outline: none; }
.aide-logo { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* ============================================================
   AVATARS DES JOUEURS
   ============================================================ */
.choix-avatar { border: 0; padding: 0; margin: 0 0 16px; }
.choix-avatar legend { font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.apercu-avatar { font-size: 1.6rem; line-height: 1; }
.grille-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.btn-avatar { margin: 0; cursor: pointer; }
.btn-avatar input { position: absolute; opacity: 0; }
.btn-avatar span {
  display: grid; place-items: center; aspect-ratio: 1; font-size: 1.7rem; line-height: 1;
  border-radius: 14px; background: var(--pale); border: 2px solid transparent;
  transition: transform .12s;
}
.btn-avatar input:checked + span { border-color: var(--electrique); background: #dcebff; transform: scale(1.08); box-shadow: 0 4px 10px rgba(0,103,244,.3); }
.btn-avatar input:focus-visible + span { outline: 3px solid var(--azur); outline-offset: 2px; }
/* les emojis un peu plus grands dans les listes de joueurs */
.liste-inscrits .chip, .equipe-col .chip { font-size: 1.15rem; }
.equipe-nom { font-size: 1.05rem; }
.btn-avatar.deja-pris span { opacity: .45; }

/* ============================================================
   FICHE THÉMATIQUE : banque de questions + paramètres de séance
   ============================================================ */
.fiche-theme { display: grid; gap: 20px; }
.fiche-theme .carte h2 { margin-bottom: 8px; }
.compteur-q { font-size: .9rem; font-weight: 600; color: var(--blanc); background: var(--electrique); border-radius: 999px; padding: 2px 12px; vertical-align: middle; }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.deux-colonnes textarea { min-height: 430px; font-size: .95rem; line-height: 1.5; }
.banque { background: var(--pale); border-radius: 16px; padding: 14px; }
.banque h3 { margin: 0 0 10px; font-size: 1.05rem; }
.banque .ligne { margin-bottom: 8px; flex-wrap: nowrap; }
.banque select { flex: 1; min-width: 0; }
.banque input[type=search] { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 2px solid var(--bord); border-radius: 12px; }
.liste-banque { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; display: grid; gap: 4px; }
.liste-banque li { display: flex; align-items: flex-start; gap: 8px; background: var(--blanc); border-radius: 10px; padding: 6px 8px; font-size: .92rem; }
.liste-banque li small { display: block; color: var(--gris); font-size: .72rem; }
.liste-banque li button {
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--electrique); color: var(--blanc); font-size: 1rem; line-height: 1;
}
.liste-banque li.deja { opacity: .55; }
.liste-banque li.deja button { background: var(--bord); color: var(--nuit); }
.grille-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 26px; align-items: start; }
.grille-params select { display: block; width: 100%; margin: 6px 0 4px; font-weight: 400; }
.grille-params .check { font-weight: 400; }
.grille-params .radios { border: 0; padding: 0; margin: 0 0 14px; }
.grille-params .radios legend { font-weight: 600; margin-bottom: 4px; }
.bareme-champs { font-weight: 400; margin-top: 6px; gap: 8px; }
.bareme-champs input { width: 4.5em; }
.barre-enregistrer { position: sticky; bottom: 0; background: rgba(7,26,61,.85); padding: 12px 16px; border-radius: 18px; backdrop-filter: blur(6px); }
.barre-enregistrer .ghost { background: var(--blanc); }
.createur { color: var(--electrique); }
@media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* Résumé des paramètres sur la page de choix du mode */
.resume-seance { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -8px 0 22px; }
.resume-seance span { background: rgba(255,255,255,.92); color: var(--nuit); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .92rem; }

/* ============================================================
   QR CODES : retardataires pleine largeur + affichage plein écran
   ============================================================ */
.cliquable { cursor: zoom-in; }
.qr-carte .ligne.entre { flex-wrap: nowrap; margin-bottom: 10px; }
.qr-carte .ligne.entre h2 { margin: 0; text-align: left; }
.btn-qr-plein { flex: none; }

/* Petit QR des retardataires (cliquable pour l'agrandir) */
.mini-qr { display: flex; gap: 14px; align-items: center; }
.mini-qr .qr { width: 96px; flex: none; }
.mini-qr:hover { box-shadow: 0 0 0 3px var(--electrique), var(--ombre); }
.agrandir { display: inline-block; margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--electrique); }

/* Superposition plein écran */
.qr-plein {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3vh 3vw;
  background: rgba(7, 26, 61, .94); backdrop-filter: blur(4px); animation: apparition .25s ease-out;
}
.qr-plein-contenu {
  display: flex; align-items: center; gap: 4vw; background: var(--blanc);
  border-radius: 32px; padding: 3vh 3vw; box-shadow: 0 30px 80px rgba(0,0,0,.5); max-width: 100%;
}
.qr-plein #qrGeant { width: min(82vh, 55vw); flex: none; }
.qr-plein-infos { text-align: center; display: grid; gap: 14px; justify-items: center; }
.qr-plein-titre { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 700; margin: 0; }
.qr-plein .code-geant { font-size: clamp(3rem, 7vw, 6rem); }
.qr-plein .url-courte { font-size: 1.15rem; margin: 0; }
.qr-plein-nb { color: var(--electrique); font-weight: 700; font-size: 1.3rem; margin: 0; }
@media (max-aspect-ratio: 4/3) {
  .qr-plein-contenu { flex-direction: column; }
  .qr-plein #qrGeant { width: min(60vh, 80vw); }
}

.qr-carte .ligne.entre h2 { font-size: 1.45rem; white-space: nowrap; }
/* écran animateur : 8 lettres tiennent sur une ligne */
.page-hote .outils .lettres { gap: 4px; }
.page-hote .outils .lettre { width: 30px; height: 36px; font-size: 1.15rem; border-radius: 8px; }

/* Classement complet sous le podium */
#btnTousParticipants { margin: 6px 0 4px; }
.liste-finale { margin-top: 10px; }
.liste-finale h3 { margin: 0 0 4px; text-align: center; color: var(--gris); font-size: 1rem; }
.liste-finale .classement { max-height: 46vh; overflow-y: auto; margin: 8px 0 14px; padding-right: 4px; }
.liste-finale .classement li { animation: none; }

/* ============================================================
   PAGE DES THÉMATIQUES COMPACTE : vignettes basses, familles côte à côte
   ============================================================ */
.page-themes .accueil { max-width: 1280px; padding-top: 0; }
.top-themes { padding-top: 8px; padding-bottom: 4px; }
.logo-entete img { height: 84px; }
.page-themes .intro { font-size: clamp(1.1rem, 2vw, 1.45rem); margin: 0 0 14px; }

/* Les familles se rangent sur une grille de 4 colonnes ; une famille de 1 à 3 thématiques
   laisse de la place à la suivante sur la même ligne (ex. Découverte + Raccourcis). */
.groupes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.groupes .groupe { margin: 0; min-width: 0; }
.groupe.n1 { grid-column: span 1; } .groupe.n2 { grid-column: span 2; }
.groupe.n3 { grid-column: span 3; } .groupe.n4 { grid-column: span 4; }
.groupe .grille { gap: 12px; }
.groupe.n1 .grille { grid-template-columns: minmax(0, 1fr); }
.groupe.n2 .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.groupe.n3 .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.groupe.n4 .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.groupe-titre { font-size: .95rem; padding: 2px 14px; margin: 0 0 7px; transform: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Vignette compacte */
.groupes .tuile {
  min-height: 0; padding: 11px 14px 10px; gap: 2px; border-radius: 16px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom nb" "desc desc";
  align-items: center;
}
.groupes .tuile::before { width: 46px; height: 46px; right: -20px; bottom: -20px; }
.groupes .tuile:hover { transform: translateY(-3px); }
.groupes .tuile-nom { grid-area: nom; font-size: 1.08rem; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groupes .tuile-desc { grid-area: desc; font-size: .78rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.groupes .tuile-nb { grid-area: nb; margin: 0; font-size: .72rem; padding: 2px 9px; align-self: center; }

@media (max-width: 1000px) {
  .groupes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupe.n3, .groupe.n4 { grid-column: span 2; }
  .groupe.n3 .grille, .groupe.n4 .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .groupes { grid-template-columns: minmax(0, 1fr); }
  .groupe.n2, .groupe.n3, .groupe.n4 { grid-column: span 1; }
  .groupe .grille { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .groupe.n1 .grille { grid-template-columns: minmax(0, 1fr) !important; }
  .groupes .tuile { grid-template-columns: 1fr; grid-template-areas: "nom" "desc"; }
  .groupes .tuile-nom { white-space: normal; font-size: 1rem; line-height: 1.15; }
  .groupes .tuile-nb { display: none; }
}

/* ============================================================
   CORRECTION : pistes de réponses (écran animateur, mode sans téléphone)
   ============================================================ */
.bloc-correction {
  background: var(--pale); border: 2px dashed var(--azur); border-radius: 18px;
  padding: 12px 16px 14px; margin-bottom: 16px; max-height: 34vh; overflow-y: auto;
  animation: pop .3s ease-out;
}
.bloc-correction h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--royal); }
.bloc-correction h3 small { font-weight: 600; color: var(--gris); font-size: .85rem; margin-left: 6px; }
.pistes { display: flex; flex-wrap: wrap; gap: 8px; }
.piste {
  padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 1.05rem;
  background: var(--blanc); color: var(--nuit); border: 2px solid var(--glacier);
}
.piste.trouvee { background: var(--electrique); color: var(--blanc); border-color: var(--electrique); }
.page-hote .bloc-correction:not([hidden]) ~ .nav,
.page-jeu .bloc-correction:not([hidden]) ~ .nav { margin-top: auto; }
.page-hote .carte-question:has(.bloc-correction:not([hidden])) .mur { max-height: 26vh; }
.page-jeu .question.petite { flex: 0; }
@media (max-width: 760px) { .piste { font-size: .92rem; } }
.a-pistes { font-style: normal; margin-left: 4px; cursor: help; }
.deux-colonnes textarea#champQuestions { white-space: pre; overflow-x: auto; }

/* ============================================================
   PLATEFORME DE FORMATION — administration (sessions, formations, documents)
   ============================================================ */
.admin-large { max-width: 1150px; }
input[type=date], input[type=time], input[type=search], input[type=url] {
  font: inherit; padding: 9px 12px; border: 2px solid var(--bord); border-radius: 12px; background: var(--blanc); color: var(--nuit);
}
label input[type=date], label input[type=time], label input[type=number] { display: block; margin-top: 6px; font-weight: 400; }
label input[type=date], label input[type=time] { width: 100%; }
.grille-form label input[type=number] { width: 100%; }
.aide-blanche { color: var(--blanc); text-shadow: 0 1px 6px rgba(8,18,70,.7); margin: -4px 0 16px; }
.aide-blanche strong { color: var(--glacier); }
.titre-liste { color: var(--blanc); margin: 26px 0 10px; text-shadow: 0 1px 6px rgba(8,18,70,.6); }
.lien-fort { font-weight: 700; color: var(--nuit); text-decoration: none; }
.lien-fort:hover { color: var(--electrique); text-decoration: underline; }
.vide-carte { color: var(--gris); background: var(--pale); border-radius: 12px; padding: 14px; text-align: center; }
.nouvelle-session { margin-bottom: 8px; }
.demarrage ol { display: grid; gap: 8px; padding-left: 22px; }
.large-480 { max-width: 520px; }

/* États (sessions, documents) */
.etat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.etat-avenir  { background: var(--pale); color: var(--royal); }
.etat-encours { background: var(--electrique); color: var(--blanc); }
.etat-terminee{ background: var(--glacier); color: var(--nuit); }
.etat-ferme   { background: #eceef4; color: var(--gris); }
.etat-verrou  { background: #fff4dd; color: #7a5300; white-space: normal; }

/* Fiche d'une session */
.fiche-session { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 20px; margin-bottom: 20px; }
.entete-session h2 { margin: 8px 0 4px; font-size: 1.6rem; }
.infos-session { margin: 0 0 8px; }
.logos-session { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.logo-session { display: grid; place-items: center; height: 56px; padding: 6px 10px; border: 2px solid var(--bord); border-radius: 12px; background: var(--blanc); }
.logo-session img { max-height: 44px; max-width: 160px; }
.qr-session { display: flex; gap: 18px; align-items: center; }
.qr-session #qrSession { width: 170px; flex: none; border-radius: 12px; overflow: hidden; }
.qr-session .ligne { gap: 6px; }
.code-session { font-size: 2.3rem; font-weight: 700; letter-spacing: .14em; color: var(--electrique); line-height: 1; margin: 2px 0 6px; }
.qr-session .url-courte { margin: 0 0 10px; }
.qr-session p.muet.petit { margin: 0; }
.bloc-jeux { margin-bottom: 20px; }
.bloc-jeux h2 { margin: 0; }
.interrupteur { margin: 0; }
.jeux-session { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.tuile-jeu {
  position: relative; overflow: hidden; display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; text-decoration: none;
  background: var(--pale); color: var(--nuit); border-left: 8px solid var(--c); transition: transform .15s;
}
.tuile-jeu:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(8,18,70,.18); }
.tuile-jeu span { font-size: .78rem; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tuile-jeu strong { font-size: 1.1rem; }
.tuile-jeu em { font-style: normal; color: var(--electrique); font-weight: 700; font-size: .9rem; }
.type-ico { font-size: 1.15rem; margin-right: 2px; }
em.ajout { font-style: normal; color: var(--electrique); font-weight: 600; }
.tableau .champ-court { width: auto; max-width: 210px; }
.tableau td.ordre { white-space: nowrap; width: 76px; }
.tableau td.ordre form { display: inline; }
.tableau td.ordre button { padding: 2px 9px; }
.ajout-session { margin-top: 18px; }
.carte-interne { background: var(--pale); border-radius: 16px; padding: 16px; }
.carte-interne h3 { margin: 0 0 12px; font-size: 1.05rem; display: inline; }
.carte-interne > h3 { display: block; }
.carte-interne select { width: 100%; margin-top: 6px; font-weight: 400; }
.carte-interne .form-doc { padding: 0; box-shadow: none; background: transparent; }
.carte-interne .form-doc h2 { font-size: 1.05rem; }
.carte-interne .grille-form { grid-template-columns: 1fr; }
details.carte-interne summary { cursor: pointer; list-style: none; }
details.carte-interne summary::-webkit-details-marker { display: none; }
details.carte-interne[open] summary { margin-bottom: 10px; }
details.carte-interne .form-doc > h2 { display: none; }

/* Formulaire de document : champs selon le type */
.types-doc { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.types-doc legend { font-weight: 600; margin-bottom: 6px; }
.type-doc { margin: 0; cursor: pointer; font-weight: 600; }
.type-doc input { position: absolute; opacity: 0; }
.type-doc span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--blanc); border: 2px solid var(--bord); font-size: .9rem; }
.type-doc input:checked + span { background: var(--electrique); color: var(--blanc); border-color: var(--electrique); }
.type-doc input:focus-visible + span { outline: 3px solid var(--azur); outline-offset: 2px; }
.form-doc .si-video, .form-doc .si-lien, .form-doc .si-rattache { display: none; }
.form-doc[data-type=video] .si-video, .form-doc[data-type=lien] .si-lien { display: block; }
.form-doc[data-type=video] .si-fichier, .form-doc[data-type=lien] .si-fichier { display: none; }
.form-doc[data-type=video] .si-rattache, .form-doc[data-type=corrige] .si-rattache,
.form-doc[data-type=ressource] .si-rattache { display: block; }
.form-doc .grille-form small.muet { display: block; font-weight: 400; margin-top: 4px; }
.filtres-docs { padding: 14px 18px; margin-bottom: 14px; }
.filtres-docs .ligne > * { flex: 1 1 180px; }
.filtres-docs .muet { flex: 0 0 auto; }

/* Jeux d'une formation */
.choix-jeux { border: 2px solid var(--bord); border-radius: 16px; padding: 12px 16px; margin: 0 0 14px; }
.choix-jeux legend { font-weight: 600; padding: 0 6px; }
.famille-jeux { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding: 6px 0; border-bottom: 1px dashed var(--bord); }
.famille-jeux:last-child { border-bottom: 0; }
.famille-jeux .famille { min-width: 170px; }
.famille-jeux .check { margin: 0; }
.famille-jeux .pastille { width: 14px; height: 14px; }

/* Logos : catégorie */
.categorie-logo select { font-size: .82rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.categorie-logo select.cat-centre { background: var(--nuit); color: var(--blanc); border-color: var(--nuit); }
.haut-mobile { gap: 8px; flex-wrap: wrap; }
.top .ligne.gauche .badge-client + .badge-client { margin-left: -2px; }

@media (max-width: 900px) {
  .fiche-session { grid-template-columns: 1fr; }
  .admin .tableau { display: block; overflow-x: auto; }
  .logos-session { float: none; margin: 0 0 8px; }
}

/* ============================================================
   ESPACE APPRENANT (acces.php)
   ============================================================ */
.apprenant { max-width: 640px; margin: 0 auto; padding: 16px 14px 34px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.apprenant h1 { margin: 2px 0 6px; font-size: 1.55rem; line-height: 1.15; }
.apprenant h2 { margin: 0 0 10px; font-size: 1.15rem; }
.plateforme { margin: 0; color: var(--electrique); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.entete-apprenant { text-align: center; }
.logos-apprenant { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 22px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 2px solid var(--pale); }
.logos-apprenant img { max-height: 52px; max-width: 42%; object-fit: contain; }
.entete-apprenant .infos-session { color: var(--gris); margin: 0; }
.entete-apprenant .infos-session strong { color: var(--nuit); }
.presentation { margin: 12px 0 0; text-align: left; background: var(--pale); border-radius: 12px; padding: 10px 14px; font-size: .95rem; }
.acces-code { text-align: center; margin-top: 8vh; }
.acces-code label { text-align: left; }

.liste-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doc > a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--pale);
  color: var(--nuit); text-decoration: none; border: 2px solid transparent; transition: border-color .15s, transform .1s; }
.doc > a:hover { border-color: var(--electrique); }
.doc > a:active { transform: scale(.98); }
.doc-ico { font-size: 1.6rem; line-height: 1; flex: none; width: 34px; text-align: center; }
.doc-txt { flex: 1; min-width: 0; display: grid; }
.doc-txt strong { overflow-wrap: break-word; hyphens: auto; line-height: 1.2; }
.doc-txt small { color: var(--gris); font-size: .8rem; }
.doc-btn { flex: none; background: var(--electrique); color: var(--blanc); font-weight: 700; font-size: .85rem; padding: 6px 12px; border-radius: 999px; }
.doc.verrou { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #f5f6fa; border: 2px dashed #dfe3ee; }
.doc.verrou strong { color: var(--gris); }
.sous-doc { margin-left: 26px; position: relative; }
.sous-doc::before { content: "↳"; position: absolute; left: -20px; top: 12px; color: var(--azur); font-weight: 700; }
.sous-doc > a { background: var(--blanc); border-color: var(--pale); padding: 8px 12px; }
.doc-video { background: var(--pale); border-radius: 14px; padding: 10px 12px; }
.doc-video .doc-txt { margin-bottom: 8px; }
.sous-doc.doc-video { background: var(--blanc); border: 2px solid var(--pale); }

.video { display: grid; gap: 6px; }
.video-lancer, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; padding: 0; position: relative; background: var(--nuit); }
.video-lancer img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--electrique); color: var(--blanc); font-size: 1.6rem; padding-left: 5px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.video-lancer:hover .video-play { filter: brightness(1.1); transform: translate(-50%, -50%) scale(1.06); }
.video-lien { font-size: .85rem; font-weight: 600; justify-self: end; }

.banniere-jeu { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rayon); text-decoration: none;
  background: var(--electrique); color: var(--blanc); box-shadow: var(--ombre); border: 3px solid var(--blanc); animation: pop .4s ease-out; }
.banniere-jeu img { width: 56px; height: auto; flex: none; }
.banniere-jeu > span:nth-child(2) { flex: 1; display: grid; }
.banniere-jeu small { opacity: .9; }
.banniere-jeu .primary { background: var(--blanc); color: var(--electrique); box-shadow: none; }
.pied-apprenant { color: var(--blanc); text-align: center; font-size: .85rem; text-shadow: 0 1px 4px rgba(8,18,70,.8); margin: 4px 0 0; }
.pied-apprenant strong { color: var(--glacier); letter-spacing: .08em; }

/* ============================================================
   AFFICHE A4 DE LA SESSION (à imprimer)
   ============================================================ */
body.page-affiche { background: #e9eef7; }
.affiche { max-width: 760px; margin: 24px auto; background: var(--blanc); border-radius: 18px; padding: 40px 48px; text-align: center; box-shadow: var(--ombre); }
.affiche-logos { display: flex; justify-content: space-between; align-items: center; gap: 30px; min-height: 20px; }
.affiche-logos img { max-height: 80px; max-width: 45%; }
.affiche-logos img:only-child { margin: 0 auto; }
.affiche-plateforme { margin: 26px 0 4px; color: var(--electrique); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.affiche h1 { margin: 0; font-size: 2.4rem; line-height: 1.1; }
.affiche-infos { color: var(--gris); font-size: 1.2rem; margin: 8px 0 20px; }
.affiche-qr { width: 330px; margin: 0 auto; }
.affiche-consigne { font-size: 1.35rem; font-weight: 700; margin: 14px 0; }
.affiche-code { color: var(--gris); }
.affiche-code strong { color: var(--nuit); }
.affiche-code .code-geant { font-size: 2.6rem; margin-top: 12px; }
.affiche-expire { color: var(--gris); font-size: .9rem; margin-top: 18px; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.page-affiche { background: #fff; }
  .affiche { box-shadow: none; margin: 0 auto; padding: 0; }
  .no-print { display: none !important; }
  .code-geant { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   CALENDRIER DES SÉANCES
   ============================================================ */
.champ-seances { font-size: .92rem; line-height: 1.55; white-space: pre; overflow-x: auto; }
.liste-seances { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.liste-seances li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--pale); }
.liste-seances li > span:nth-child(2) { flex: 1; min-width: 0; }
.liste-seances li small { color: var(--gris); }
.liste-seances li em { font-style: normal; font-weight: 700; color: var(--electrique); font-size: .85rem; white-space: nowrap; }
.seance-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nuit); color: var(--glacier); font-weight: 700; font-size: .85rem; }
.liste-seances li.passee { background: #f4f6fa; opacity: .7; }
.liste-seances li.passee .seance-num { background: var(--glacier); color: var(--nuit); }
.liste-seances li.prochaine { background: #e3efff; box-shadow: inset 0 0 0 2px var(--electrique); opacity: 1; }
.liste-seances li.prochaine .seance-num { background: var(--electrique); color: var(--blanc); }
.prochaine-seance { display: flex; gap: 14px; align-items: center; background: var(--pale); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.ps-date { flex: none; width: 66px; display: grid; justify-items: center; background: var(--electrique); color: var(--blanc);
  border-radius: 14px; padding: 6px 0; line-height: 1.05; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.ps-date strong { font-size: 1.8rem; }
.ps-txt { display: grid; gap: 2px; min-width: 0; }
.ps-txt small { color: var(--gris); }
.ps-txt strong { font-size: 1.1rem; }
.toutes-seances { margin-bottom: 12px; }
.toutes-seances summary { cursor: pointer; font-weight: 700; color: var(--electrique); padding: 4px 0 8px; }
.calendrier .large-btn { margin: 0; }
.calendrier p.petit { margin: 6px 0 0; }

/* Expiration automatique de l'accès */
.info-expiration { grid-column: 1 / -1; margin: 0 0 14px; background: var(--pale); border-radius: 12px; padding: 10px 14px; font-size: .92rem; }
.expiration-qr { margin-top: 8px !important; }
.classshoot-attente { margin-top: 10vh; }
.classshoot-attente h1 { font-size: 2.4rem; margin: 6px 0 0; }

/* ============================================================
   CLASSSHOOT — quiz en direct
   Cibles : A azur ▲ · B turquoise ◆ · C royal ● · D nuit ■ (lettre + forme + couleur)
   ============================================================ */
.c0 { --cc: #008cf5; } .c1 { --cc: #00a3b8; } .c2 { --cc: #063b9b; } .c3 { --cc: #071a3d; }
.ch-marque { font-size: .7em; text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin-right: 6px; }
.ch-titre { color: #fff; }
.ch-scene { max-width: 1400px; margin: 0 auto; padding: 6px 22px 22px; }
.ch-question { display: flex; flex-direction: column; min-height: 80vh; padding: 22px 30px; }
.ch-entete-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-chip { background: var(--pale); color: var(--nuit); font-weight: 700; border-radius: 999px; padding: 4px 12px; font-size: .92rem; }
.ch-tirs { margin-left: auto; font-weight: 700; color: var(--electrique); font-size: 1.15rem; }
.ch-texte-q { text-align: center; font-weight: 700; line-height: 1.12; color: var(--nuit);
  font-size: clamp(1.8rem, 3.6vw, 3.4rem); padding: 18px 10px 20px; }
.ch-texte-q.entree { animation: entree .4s cubic-bezier(.2, 1.4, .4, 1); }

/* Cible : anneaux concentriques autour de la lettre */
.ch-rond { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, var(--cc) 0 30%, #fff 31% 44%, var(--cc) 45% 58%, #fff 59% 72%, var(--cc) 73% 100%); }
.ch-rond span { color: #fff; font-weight: 700; font-size: 1.35rem; line-height: 1; }
.ch-cibles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-cible { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rond rep rep" "rond barre pct";
  align-items: center; column-gap: 16px; row-gap: 4px; padding: 14px 18px; border-radius: 22px;
  background: var(--pale); border: 4px solid var(--cc); transition: opacity .4s, transform .3s, filter .4s; }
.ch-cible .ch-rond { grid-area: rond; }
.ch-cible .ch-rep { grid-area: rep; font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.7rem); color: var(--nuit); line-height: 1.2; }
.ch-rep small { color: var(--cc); margin-right: 4px; }
.ch-cible .ch-barre { grid-area: barre; height: 12px; border-radius: 999px; background: rgba(7,26,61,.12); overflow: hidden; }
.ch-barre span { display: block; height: 100%; background: var(--cc); border-radius: 999px; transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.ch-pct { grid-area: pct; font-weight: 700; font-size: 1.2rem; }
.ch-pct small { font-weight: 400; color: var(--gris); }
.ch-cible.eteinte { opacity: .38; filter: grayscale(.6); transform: scale(.97); }
.ch-cible.touchee { background: var(--cc); animation: eclat .9s ease-out; }
.ch-cible.touchee .ch-rep, .ch-cible.touchee .ch-pct, .ch-cible.touchee .ch-pct small, .ch-cible.touchee .ch-rep small { color: #fff; }
.ch-cible.touchee .ch-rond { background: radial-gradient(circle, #fff 0 30%, var(--cc) 31% 44%, #fff 45% 58%, var(--cc) 59% 72%, #fff 73% 100%); }
.ch-cible.touchee .ch-rond span { color: var(--cc); }
.ch-cible.touchee .ch-barre { background: rgba(255,255,255,.3); } .ch-cible.touchee .ch-barre span { background: #fff; }
@keyframes eclat {
  0% { transform: scale(.94); box-shadow: 0 0 0 0 rgba(0,140,245,.7); }
  45% { transform: scale(1.05); box-shadow: 0 0 0 26px rgba(0,140,245,0); }
  100% { transform: scale(1); }
}
.ch-pied-q { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.ch-actions { margin-left: auto; }
.ch-chrono { --p: 100%; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--electrique) var(--p), #dde7f8 0); }
.ch-chrono span { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 2.3rem; font-weight: 700; color: var(--nuit); font-variant-numeric: tabular-nums; }
.ch-chrono.urgent { background: conic-gradient(var(--azur) var(--p), #dde7f8 0); animation: pulse 1s infinite; }
.ch-resultat-classe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ch-prec { font-size: 1.35rem; font-weight: 600; }
.ch-prec strong { font-size: 2.1rem; color: var(--electrique); }
.ch-niveau, .ch-objectif { border-radius: 999px; padding: 4px 14px; font-weight: 700; }
.niv-maitrise .ch-niveau, .ch-bilan-chiffres .niv-maitrise strong { background: var(--electrique); color: #fff; }
.niv-consolider .ch-niveau { background: var(--glacier); color: var(--nuit); }
.niv-reprendre .ch-niveau { background: var(--alerte); color: #fff; }
.ch-objectif { background: var(--nuit); color: var(--glacier); }
.ch-objectif.perfect { background: linear-gradient(90deg, var(--azur), var(--electrique)); color: #fff; }
.ch-objectif.rate { background: transparent; color: var(--gris); border: 2px dashed var(--bord); }
.ch-explication { margin-top: 16px; background: var(--pale); border-left: 8px solid var(--electrique); border-radius: 14px; padding: 12px 18px; font-size: 1.3rem; animation: pop .3s; }
.ch-explication p { margin: 4px 0 0; }

/* PERFECT CLASS : l'événement rare */
.ch-perfect { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle, rgba(0,103,244,.92), rgba(7,26,61,.95)); animation: apparition .3s; }
.ch-perfect div { display: grid; justify-items: center; color: #fff; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.ch-perfect span { font-size: 9rem; line-height: 1; animation: pulse 1s infinite; }
.ch-perfect strong { font-size: clamp(3rem, 9vw, 7rem); letter-spacing: .04em; }
.ch-perfect em { font-style: normal; font-size: 1.6rem; color: var(--glacier); }
.ch-perfect small { margin-top: 28px; font-size: 1rem; opacity: .75; animation: clignote 2s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: .35; } }
.ch-chrono-ctl { display: grid; gap: 6px; justify-items: start; }
.ch-chrono-ctl .ligne { gap: 6px; flex-wrap: nowrap; }
.ch-chrono-ctl select { width: auto; padding: 6px 8px; font-size: .9rem; }
.ch-chrono.arrete { background: conic-gradient(#9fb3d1 100%, #dde7f8 0); }
.ch-chrono.arrete span { font-size: 2rem; }

.ch-classement .cl-nom small { display: inline; color: var(--electrique); font-weight: 700; font-size: .9rem; }
.ch-bilan h3, .ch-bilan-page h3 { margin: 18px 0 8px; }
.ch-bilan-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.ch-bilan-chiffres div { background: var(--pale); border-radius: 16px; padding: 12px; text-align: center; display: grid; gap: 2px; }
.ch-bilan-chiffres strong { font-size: 2.2rem; color: var(--nuit); border-radius: 12px; }
.ch-bilan-chiffres .niv-consolider strong { background: var(--glacier); }
.ch-bilan-chiffres .niv-reprendre strong { background: var(--alerte); color: #fff; }
.ch-bilan-chiffres span { color: var(--gris); font-size: .9rem; }
.ch-moins td:last-child { text-align: right; white-space: nowrap; }
td.niv-maitrise strong { color: var(--electrique); } td.niv-reprendre strong, strong.niv-reprendre { color: var(--alerte); }
.ch-dist div { display: grid; grid-template-columns: minmax(120px, 1.4fr) 1fr 28px; gap: 8px; align-items: center; font-size: .88rem; margin: 2px 0; }
.ch-dist div.bonne span:first-child { font-weight: 700; color: var(--electrique); }
.ch-dist .ch-barre { height: 8px; border-radius: 999px; background: var(--pale); overflow: hidden; }
.ch-dist .ch-barre span { background: var(--electrique); }
.ch-dist em { font-style: normal; color: var(--gris); text-align: right; }

/* Lancement et éditeur */
.ch-affichages { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.ch-affichages legend { font-weight: 600; margin-bottom: 6px; }
.ch-affichage { margin: 0; cursor: pointer; }
.ch-affichage input { position: absolute; opacity: 0; }
.ch-affichage span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 3px solid var(--bord); height: 100%; }
.ch-affichage small { color: var(--gris); font-weight: 400; }
.ch-affichage input:checked + span { border-color: var(--electrique); background: var(--pale); }
.ch-affichage input:focus-visible + span { outline: 3px solid var(--azur); }
.ch-ed-liste { display: grid; gap: 14px; }
.ch-ed { padding: 18px 20px; }
.ch-ed-num { font-size: 1.1rem; }
.ch-ed-reglages { margin: 10px 0; }
.ch-ed-chrono { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 400; }
.ch-ed-chrono input { width: 5em; }
.ch-ed-texte { width: 100%; font-size: 1.15rem !important; font-weight: 600 !important; margin-bottom: 10px; }
.ch-ed-reps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ch-ed-rep { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 400; }
.ch-ed-rep .ch-rond { width: 36px; height: 36px; }
.ch-ed-rep .ch-rond span { font-size: .9rem; }
.ch-ed-rep input[type=text] { flex: 1; min-width: 0; }
.ch-ed-rep .check { margin: 0; white-space: nowrap; }
.ch-ed textarea { font-size: .95rem; }

/* Téléphone du joueur */
.ch-logo-mobile { text-align: center; color: #fff; font-weight: 700; font-size: 1.7rem; text-shadow: 0 3px 14px rgba(0,0,0,.4); }
.ch-logo-mobile.grand { font-size: 2.6rem; margin: 6vh 0 6px; }
.ch-logo-mobile span { display: inline-block; animation: pulse 2s infinite; }
.ch-haut-q { margin-bottom: 4px; }
.ch-q-mobile { background: #fff; border-radius: 18px; padding: 14px 16px; margin: 6px 0 4px; font-size: 1.3rem; font-weight: 700; text-align: center; box-shadow: var(--ombre); }
.ch-consigne { color: #fff; text-align: center; margin: 4px 0 10px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.ch-cibles-mobile { display: grid; gap: 10px; }
.ch-cible-m { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 18px;
  background: #fff; border: 4px solid var(--cc); color: var(--nuit); font: inherit; font-weight: 700; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.ch-cible-m .ch-rond { width: 50px; height: 50px; }
.ch-cible-m .ch-rond span { font-size: 1.1rem; }
.ch-cible-m.visee { background: var(--cc); color: #fff; transform: scale(1.02); }
.ch-cible-m.visee .ch-rep small { color: #fff; }
.ch-cible-m.visee .ch-rond { background: radial-gradient(circle, #fff 0 30%, var(--cc) 31% 44%, #fff 45% 58%, var(--cc) 59% 72%, #fff 73% 100%); }
.ch-cible-m.visee .ch-rond span { color: var(--cc); }
.ch-shoot { position: sticky; bottom: 12px; width: 100%; margin-top: 14px; padding: 18px; border-radius: 22px; border: 4px solid #fff;
  background: linear-gradient(180deg, var(--azur), var(--electrique)); color: #fff; font-size: 2rem; letter-spacing: .14em;
  box-shadow: 0 8px 0 var(--electrique-fonce), 0 14px 30px rgba(0,0,0,.35); }
.ch-shoot:disabled { opacity: .45; box-shadow: none; }
.ch-shoot.tire { animation: recul .35s ease-out; }
@keyframes recul { 30% { transform: translateY(6px) scale(.97); } 100% { transform: none; } }
.ch-verrou h2 { margin-bottom: 4px; }
.ch-res { padding-top: 26px !important; }
.ch-impact { width: 130px; height: 130px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 4rem;
  background: radial-gradient(circle, var(--electrique) 0 30%, #fff 31% 44%, var(--electrique) 45% 58%, #fff 59% 72%, var(--electrique) 73% 100%);
  color: #fff; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.ch-impact.rate { background: #eceef4; color: var(--gris); }
.ch-impact.anneau-hors, .ch-impact.anneau-juste { background: var(--pale); color: var(--electrique); }
.ch-res-titre { font-size: 1.6rem; font-weight: 700; margin: 4px 0; letter-spacing: .04em; }
.ch-res-points { font-size: 2.3rem; font-weight: 700; color: var(--electrique); margin: 0 0 8px; }
.ch-serie { display: inline-block; background: var(--nuit); color: var(--glacier); border-radius: 999px; padding: 6px 16px; font-weight: 700; animation: pop .5s; }
.ch-bonne { background: var(--pale); border-radius: 12px; padding: 8px 12px; }
.ch-bonne:empty, .ch-classe:empty { display: none; }
.ch-classe { font-size: 1.05rem; }
@media (max-width: 860px) {
  .ch-cibles { grid-template-columns: 1fr; }
  .ch-question { padding: 16px; }
  .ch-ed-reps { grid-template-columns: 1fr; }
}
.sous-bloc { margin: 16px 0 0; font-size: 1.05rem; }
.sous-bloc small { font-weight: 400; }
.tuile-quiz { border-left-style: double; border-left-color: var(--electrique); }
.tuile-quiz.autre { background: #fff; border: 2px dashed var(--bord); border-left: 8px dashed var(--bord); }
.bilans-session { margin-top: 12px; }

/* ============================================================
   OBJECTIF DE L'ACTIVITÉ (commun aux jeux)
   ============================================================ */
.ch-intention { margin: 0 0 4px; font-weight: 700; color: var(--royal); }
.ch-intention em { font-weight: 400; color: var(--gris); }
.jeu-aleatoire { align-self: end; margin-bottom: 18px; }

/* ============================================================
   OUT CLASS — ✖ élimination, tri, éviction, nettoyage
   ============================================================ */
.page-oc { --oc: #d93a3f; }
.oc-logo span { color: #fff; background: var(--oc); border-radius: 12px; padding: 0 10px; margin-right: 4px; }
.oc-consigne { font-size: clamp(1.5rem, 3vw, 2.8rem); }
.oc-mots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 6px 0; }
.oc-mot { position: relative; display: grid; place-items: center; gap: 2px; min-height: 92px; padding: 14px 16px; border-radius: 18px;
  background: var(--pale); border: 3px solid var(--bord); text-align: center; font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.7rem); color: var(--nuit); }
.oc-mot small { font-size: .85rem; font-weight: 600; color: var(--gris); }
.oc-mot.reste { background: #fff; border-color: var(--electrique); }
.oc-mot.reste small { color: var(--electrique); }
.oc-mot.a-tort { border-color: var(--oc); border-style: dashed; }
.oc-mot.a-tort small { color: var(--oc); }
.oc-mot.intrus { background: #fff0f0; border-color: var(--oc); color: var(--gris); animation: oc-ejecte 1.1s cubic-bezier(.3, .1, .3, 1) both; animation-delay: var(--d, 0s); }
.oc-mot.intrus > span { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--oc); }
.oc-mot.intrus small { color: var(--oc); }
.oc-tampon { position: absolute; top: -18px; right: -12px; transform: rotate(12deg); pointer-events: none; z-index: 2;
  color: var(--oc); border: 4px solid var(--oc); border-radius: 10px; padding: 0 10px; font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 700;
  letter-spacing: .06em; background: #fff; box-shadow: 0 4px 12px rgba(217,58,63,.25); animation: oc-tampon .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes oc-ejecte {
  0% { transform: none; }
  20% { transform: translateX(-6px) rotate(-2deg); }
  35% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translate(40px, -26px) rotate(8deg) scale(.92); opacity: .5; }
  100% { transform: rotate(-1.5deg) scale(.96); opacity: 1; }
}
@keyframes oc-tampon { from { transform: rotate(12deg) scale(2.6); opacity: 0; } to { transform: rotate(12deg) scale(1); opacity: 1; } }
.ch-explication ul { margin: 6px 0 0; padding-left: 20px; }
.ch-explication li { margin-bottom: 4px; }
.ch-explication li b { color: var(--oc); }

/* téléphone */
.oc-mots-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oc-mot-m { position: relative; min-height: 70px; padding: 10px; border-radius: 16px; background: #fff; border: 3px solid var(--bord);
  color: var(--nuit); font: inherit; font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(0,0,0,.18); overflow-wrap: anywhere; }
.oc-mot-m.retire { background: #fff0f0; border-color: var(--oc); color: var(--gris); transform: scale(.96) rotate(-1deg); }
.oc-mot-m.retire span { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--oc); }
.oc-mot-m.retire::after { content: "✖"; position: absolute; top: 4px; right: 8px; color: var(--oc); font-size: 1.1rem; }
.ch-shoot.oc-out { background: linear-gradient(180deg, #e8575b, var(--oc)); box-shadow: 0 8px 0 #9d2427, 0 14px 30px rgba(0,0,0,.35); }
.oc-impact { background: var(--pale) !important; color: var(--nuit) !important; }
.oc-impact.propre { background: radial-gradient(circle, var(--electrique) 0 55%, #fff 56% 64%, var(--electrique) 65%) !important; color: #fff !important; }
.oc-impact.partiel { background: #fff0f0 !important; color: var(--oc) !important; }
.oc-impact.rate { background: #eceef4 !important; color: var(--gris) !important; }
.oc-detail { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; text-align: left; }
.oc-detail li { padding: 8px 12px; border-radius: 12px; background: var(--pale); }
.oc-detail li small { display: block; color: var(--gris); }
.oc-detail li.ok b { color: var(--electrique); }
.oc-detail li.manque b, .oc-detail li.tort b { color: var(--oc); }

/* éditeur et bilan */
.oc-ed-mots { display: grid; gap: 6px; margin: 8px 0; }
.oc-ed-mot { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(0, 2fr) auto; gap: 8px; align-items: center; }
.oc-ed-mot .check { margin: 0; white-space: nowrap; }
.oc-ed-mot.est-intrus > input[type=text]:first-child { border-color: var(--oc); text-decoration: line-through; }
.oc-ed-mot:not(.est-intrus) { grid-template-columns: minmax(140px, 1fr) auto auto; }
.oc-pourquoi { font-size: .9rem !important; }
.oc-signaux { margin-top: 10px; }
.oc-signaux h3 { font-size: 1rem; }
.oc-signaux ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ch-dist div.tort span:first-child { color: var(--alerte); font-weight: 700; }
@media (max-width: 860px) { .oc-ed-mot, .oc-ed-mot:not(.est-intrus) { grid-template-columns: 1fr auto; } .oc-pourquoi { grid-column: 1 / -1; } }

/* ============================================================
   LANCEUR UNIQUE ET BILAN DE SESSION (Class)
   ============================================================ */
.etape { color: var(--nuit); font-size: 1.15rem; margin: 6px 0 10px; }
.lanceur > .etape { color: var(--blanc); text-shadow: 0 1px 6px rgba(8,18,70,.6); }
.choix-jeu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.carte-jeu { margin: 0; cursor: pointer; }
.carte-jeu input { position: absolute; opacity: 0; }
.carte-jeu > span { display: grid; justify-items: center; gap: 4px; text-align: center; height: 100%; padding: 22px 16px; border-radius: 24px;
  background: #fff; border: 4px solid transparent; box-shadow: var(--ombre); transition: transform .15s; }
.carte-jeu b { font-size: 2.6rem; line-height: 1; }
.carte-jeu strong { font-size: 1.4rem; letter-spacing: .06em; }
.carte-jeu em { font-style: normal; font-weight: 700; color: var(--electrique); }
.carte-jeu small { color: var(--gris); }
.carte-jeu input:checked + span { border-color: var(--electrique); transform: translateY(-4px); }
.carte-jeu input:focus-visible + span { outline: 3px solid var(--azur); outline-offset: 3px; }
.jeu-outclass input:checked + span { border-color: var(--alerte); }
.jeu-outclass em { color: var(--alerte); }
.form-jeu .gros { margin-top: 6px; }
.jeux-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.jeu-col h3 { margin: 0 0 8px; font-size: 1.05rem; }
.jeu-col h3 small { display: block; font-weight: 600; color: var(--electrique); font-size: .85rem; }
.jeu-col.jeu-outclass h3 small { color: var(--alerte); }
.jeu-col .tuile-jeu { margin-bottom: 8px; }
.objectif-session { background: var(--pale); border-radius: 12px; padding: 10px 14px; }
.objectif-session.atteint { background: #e3efff; box-shadow: inset 0 0 0 2px var(--electrique); }
.progression { background: #fff; border: 2px dashed var(--electrique); border-radius: 12px; padding: 10px 14px; }
@media (max-width: 860px) { .choix-jeu, .jeux-trois { grid-template-columns: 1fr; } }
@media print { .bilan-session .carte { box-shadow: none; border: 1px solid #ccd; } }

/* ============================================================
   PAGE D'ACCUEIL formaclass.fr (index.php)
   ============================================================ */
body.page-accueil {
  background: var(--nuit) url("fond.jpg") center / cover no-repeat fixed;
  color: var(--blanc);
}
.acc-top {
  max-width: 1180px; margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.acc-marque { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none;
  font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; }
.acc-marque img { width: 44px; height: 44px; object-fit: contain; }
.acc { max-width: 1180px; margin: 0 auto; padding: 0 22px 30px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.page-accueil .carte-blanche { color: var(--nuit); }
.acc h2 { margin: 0 0 6px; }

.acc-hero { display: grid; grid-template-columns: minmax(220px, 400px) 1fr; gap: 34px; align-items: center; padding: 6px 0 4px; }
.acc-logo { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0, 20, 80, .55)); animation: apparition .8s ease-out; }
.acc-sur { margin: 0 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--glacier); }
.acc-sur.bleu { color: var(--electrique); }
.acc-hero h1 { margin: 0 0 14px; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.05; text-shadow: 0 4px 24px rgba(0, 10, 50, .5); }
.acc-chapo { font-size: 1.2rem; max-width: 34em; margin: 0 0 22px; color: #e6f0ff; }
.acc-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.acc-rejoindre { display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap;
  border: 3px solid var(--azur); }
.acc-rejoindre p { margin: 0; }
.acc-code { display: flex; gap: 10px; margin: 0; }
.acc-code input {
  width: 7.2em; text-align: center; font: inherit; font-weight: 700; font-size: 1.8rem; letter-spacing: .25em;
  padding: 6px 10px 6px 18px; border-radius: 16px; border: 3px solid var(--bord); color: var(--electrique); text-transform: uppercase;
}
.acc-code input:focus { outline: none; border-color: var(--electrique); }
.acc-code input::placeholder { color: var(--glacier); }
.acc-code .primary { font-size: 1.15rem; padding: 12px 24px; }

.acc-jeu { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: center; }
.acc-jeu-logo { width: 100%; height: auto; }
.acc-jeu h2 { font-size: 2rem; }
.acc-jeu-txt > p { margin: 0 0 12px; font-size: 1.05rem; }
.acc-puces { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; }
.acc-puces li { padding-left: 26px; position: relative; }
.acc-puces li::before { content: "✓"; position: absolute; left: 0; color: var(--electrique); font-weight: 700; }

.acc-etapes ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.acc-etapes li { background: rgba(6, 27, 54, .72); border: 1px solid rgba(207, 230, 255, .25); border-radius: var(--rayon);
  padding: 18px 20px; color: #e6f0ff; backdrop-filter: blur(4px); }
.acc-etapes li strong { color: var(--blanc); display: block; font-size: 1.1rem; margin-bottom: 4px; }
.acc-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--electrique); color: var(--blanc); font-weight: 700; margin-bottom: 10px; }

.acc-themes h2 small { font-size: 1rem; font-weight: 500; color: var(--glacier); margin-left: 8px; }
.acc-familles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.acc-famille { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  background: var(--blanc); color: var(--nuit); font-weight: 700; box-shadow: var(--ombre); transition: transform .15s; }
.acc-famille:hover { transform: translateY(-2px); }
.acc-famille small { color: var(--gris); font-weight: 500; }

.acc-pied { text-align: center; padding: 18px 20px 26px; color: var(--glacier); font-size: .9rem; }
.acc-pied a { color: var(--blanc); }

@media (max-width: 860px) {
  .acc-hero { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 14px; }
  .acc-logo { width: min(260px, 62vw); margin: 0 auto; }
  .acc-chapo { margin-left: auto; margin-right: auto; font-size: 1.05rem; }
  .acc-cta { justify-content: center; }
  .acc-jeu { grid-template-columns: minmax(0, 1fr); }
  .acc-jeu-logo { width: 150px; margin: 0 auto; }
  .acc-etapes ol { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .acc-top { padding: 10px 14px; }
  .acc-nav-secondaire { display: none; }
  .acc { padding: 0 14px 24px; gap: 20px; }
  .acc-hero h1 { font-size: 2rem; }
  .acc-cta .gros { width: 100%; }
  .acc-code { width: 100%; }
  .acc-code input { flex: 1; width: auto; min-width: 0; }
}

/* ---------- Accueil : les trois jeux ---------- */
.acc-sous { margin: 0 0 14px; color: var(--glacier); }
.acc-jeux-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.acc-jeu-carte { display: flex; flex-direction: column; gap: 10px; color: var(--nuit); }
.acc-jeu-carte > p { margin: 0; }
.acc-jeu-tete { display: flex; align-items: center; gap: 14px; }
.acc-jeu-tete h3 { margin: 0; font-size: 1.6rem; }
.acc-jeu-tete .acc-sur { margin: 0; }
.acc-jeu-carte .acc-jeu-logo { height: 84px; width: auto; flex: 0 0 auto; }
.acc-jeu-icone { flex: 0 0 auto; width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center;
  font-size: 2.4rem; color: var(--blanc); background: linear-gradient(145deg, var(--azur), var(--royal)); box-shadow: 0 6px 18px rgba(0, 60, 180, .35); }
.jeu-outclass .acc-jeu-icone { background: linear-gradient(145deg, var(--royal), var(--nuit)); font-weight: 700; }
.acc-jeu-carte .acc-puces { margin: 0; }
.acc-jeu-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acc-erreur { margin: 10px 0 0; }
@media (max-width: 980px) { .acc-jeux-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Accueil apprenants : bloc « J'ai un code » ---------- */
.acc-hero-apprenant { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); }
.acc-logo-mini { width: 120px; height: auto; display: block; margin: 0 0 10px; filter: drop-shadow(0 10px 24px rgba(0, 20, 80, .5)); }
.acc-code-panneau {
  background: var(--blanc); color: var(--nuit); border-radius: 28px; padding: 26px 26px 22px; margin: 0;
  box-shadow: 0 20px 50px rgba(0, 10, 60, .45), 0 0 0 6px rgba(0, 140, 245, .35);
  display: grid; gap: 12px; text-align: center;
}
.acc-code-panneau h2 { margin: 0; font-size: 1.6rem; }
.acc-code-panneau input.acc-code-champ {
  width: 100%; text-align: center; font: inherit; font-weight: 700; font-size: 2.6rem; letter-spacing: .3em;
  padding: 10px 10px 10px 22px; border-radius: 18px; border: 3px solid var(--bord); color: var(--electrique); text-transform: uppercase;
}
.acc-code-panneau input.acc-code-champ:focus { outline: none; border-color: var(--electrique); }
.acc-code-champ::placeholder { color: var(--glacier); }
.acc-code-panneau .gros { width: 100%; }
.acc-code-aide { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: .92rem; }
.acc-code-type { display: inline-block; min-width: 4.6em; text-align: center; padding: 1px 8px; border-radius: 999px;
  background: var(--pale); color: var(--royal); font-weight: 700; font-size: .8rem; margin-right: 4px; }
.acc-code-qr { margin: 0; font-size: .85rem; color: var(--gris); }
.acc-code-panneau .acc-erreur { margin: 0; text-align: left; }

.acc-espace { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; color: var(--nuit); }
.acc-espace h2 { margin: 0 0 6px; }
.acc-espace p { margin: 0 0 10px; }
.acc-icone-espace { background: linear-gradient(145deg, var(--electrique), var(--royal)); }
.acc-puces-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin: 0; }

/* ---------- Accueil formateurs ---------- */
.acc-moi { color: var(--blanc); font-weight: 600; }
.acc-raccourcis h2 small { font-size: .9rem; font-weight: 500; color: var(--glacier); margin-left: 8px; }
.acc-raccourcis-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.acc-raccourci { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--nuit); padding: 18px;
  transition: transform .15s, box-shadow .15s; }
.acc-raccourci:hover { transform: translateY(-3px); }
.acc-raccourci-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--pale); }
.acc-raccourci strong { display: block; font-size: 1.1rem; }
.acc-raccourci small { display: block; color: var(--gris); font-size: .86rem; margin-top: 2px; }
.acc-raccourci em { display: inline-block; margin-top: 6px; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--electrique); }
.acc-chiffre { margin: 0; }
.acc-jeu-pied .ghost.small { padding: 6px 12px; }

@media (max-width: 980px) {
  .acc-raccourcis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .acc-hero-apprenant { grid-template-columns: minmax(0, 1fr); }
  .acc-logo-mini { margin: 0 auto 10px; width: 96px; }
  .acc-espace { grid-template-columns: minmax(0, 1fr); }
  .acc-puces-2col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .acc-raccourcis-grille { grid-template-columns: minmax(0, 1fr); }
  .acc-code-panneau input.acc-code-champ { font-size: 2.1rem; }
}
.carte-jeu .carte-jeu-logo { height: 130px; width: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 6px 14px rgba(0, 20, 80, .35)); }

/* ---------- Signature « Olivier Rouchut » : discrète mais visible ---------- */
.signature { margin: 22px auto 14px; text-align: center; font-size: .78rem; letter-spacing: .02em; color: rgba(207, 230, 255, .85); }
.signature a { color: inherit; font-weight: 700; text-decoration: none; }
.signature a:hover { text-decoration: underline; }
/* écrans projetés (jeu, écran titre) : petit médaillon fixe en bas à gauche, qui ne prend pas de place */
body.page-jeu .signature, body.page-titre .signature {
  position: fixed; left: 14px; bottom: 10px; margin: 0; z-index: 5; pointer-events: none;
  padding: 4px 12px; border-radius: 999px; background: rgba(6, 27, 54, .55); backdrop-filter: blur(3px);
  color: rgba(234, 242, 255, .9); font-size: .74rem;
}
body.page-admin .signature { color: rgba(234, 242, 255, .8); }
@media print { .signature { color: #56668a; position: static; background: none; } }
.acc-signature { margin: -6px 0 20px; font-size: .95rem; color: var(--glacier); }
.acc-signature strong { color: var(--blanc); }
.acc-auteur { margin: 0 0 6px; color: #e6f0ff; font-size: .95rem; }
.acc-auteur strong { color: var(--blanc); }
@media (max-width: 860px) { .acc-signature { margin-top: -4px; } }

/* ---------- Bouton « Accueil » ---------- */
.btn-accueil { white-space: nowrap; }
.ligne-centre { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lien-accueil { margin: 18px 0 0; }
body.page-admin .top .ligne.gauche, .top .ligne.gauche { flex-wrap: wrap; }
@media (max-width: 560px) { .top .btn-accueil { padding: 6px 10px; } }

/* ---------- Jeux sur mesure ---------- */
.etat-sur-mesure { background: #fff4d6; color: #7a5200; border: 1px solid #f1d38a; }
.case-sur-mesure { display: block; margin: 10px 0 4px; padding: 10px 14px; border-radius: 14px; background: #fff8e6; border: 1px dashed #f1d38a; font-weight: 400; }

/* Rubriques fixes de chaque cours : supports et fichiers ressources */
.section-docs-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.section-docs-tete h2 { margin: 0; }
.section-docs-aide { margin: 4px 0 12px; }
.tout-telecharger small { font-weight: 400; opacity: .85; }
.rubrique-vide { margin: 0; padding: 14px; border: 2px dashed #cfdcf2; border-radius: 12px; color: #5b6b85; text-align: center; }
.rubrique-fixe { border-top: 4px solid var(--electrique); }
.rubrique-ressource { border-top-color: var(--azur, #13b5ea); }
.rubriques-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 10px 0 16px; }
.rubrique-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #eef4ff; }
.rubrique-doc span { display: grid; }
.rubrique-doc small { color: #5b6b85; }
.rubrique-doc.vide { background: #fff7e6; }

/* ===== Logiciels et sujets abordés : petites icônes ===== */
.logiciels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.logi { display: inline-flex; align-items: center; gap: 6px; }
.logi-ico { --logi: #64748b; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--logi);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); flex: none; }
.logi-ico svg { width: 72%; height: 72%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logiciels-s .logi-ico { width: 20px; height: 20px; border-radius: 5px; }
.logiciels-m { gap: 6px; }
.logiciels-m .logi-ico { width: 28px; height: 28px; border-radius: 7px; }
.logiciels-l { gap: 8px; }
.logiciels-l .logi-ico { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 6px rgba(7,26,61,.25), inset 0 -3px 0 rgba(0,0,0,.18); }
.logiciels-noms { gap: 6px 8px; }
.logiciels-noms .logi { background: #eef4ff; border-radius: 999px; padding: 3px 10px 3px 3px; font-size: .85rem; font-weight: 600; color: #1b2b48; }
/* sur fond sombre (écrans de jeu) */
.top-jeu .logiciels, .barre-joueur .logiciels { padding: 4px 6px; background: rgba(255,255,255,.92); border-radius: 12px; }
.ch-titre .logiciels { margin-left: 10px; background: none; padding: 0; }
.logiciels-jeu { display: flex; justify-content: center; margin: 6px 0 0; }
/* éditeurs */
.champ-logiciels { border: 1px solid #d6e2f5; border-radius: 12px; padding: 10px 12px 12px; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.champ-logiciels legend { font-weight: 700; padding: 0 6px; }
.champ-logiciels legend small { font-weight: 400; }
.champ-logiciels .muet { flex-basis: 100%; margin: 4px 0 0; }
.case-logiciel { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: #f3f7fd;
  cursor: pointer; font-size: .88rem; font-weight: 600; margin: 0 !important; width: auto !important; }
.case-logiciel input { width: auto !important; margin: 0 !important; }
.case-logiciel:has(input:checked) { background: #dce9ff; outline: 2px solid var(--electrique); }
.pastille-theme .logiciels { margin-left: 10px; background: none !important; padding: 0 !important; vertical-align: -6px; }
.logiciels-attente, .logiciels-apprenant { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 12px; }
.logiciels-attente .logiciels, .logiciels-apprenant .logiciels { justify-content: center; }
.apercu-logiciels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.apercu-logiciels:empty { display: none; }
.apercu-logiciels .logi { background: #eef4ff; border-radius: 999px; padding: 3px 10px 3px 3px; font-size: .85rem; font-weight: 600; color: #1b2b48; }
.apercu-logiciels .logi-ico { width: 24px; height: 24px; }
.tuile .logiciels { margin: 4px 0; }
.tuile-jeu span .logiciels { margin-left: 4px; }
.famille .logiciels { margin-left: 4px; }
.affiche-logiciels { justify-content: center; margin: 4px 0 10px; }
.affiche-logiciels .logi { background: #eef4ff; }
@media print { .logi-ico { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.fiche-session .entete-session > .logiciels { margin: 6px 0 4px; }
.case-logiciel input { accent-color: var(--electrique); }

/* ===== Synthèse des points individuels (écran du formateur) ===== */
.points-voile { position: fixed; inset: 0; z-index: 95; background: rgba(7,26,61,.6); display: grid; place-items: center; padding: 3vh 3vw; }
.points-voile[hidden] { display: none; }
.points-panneau { width: min(1100px, 100%); max-height: 94vh; display: flex; flex-direction: column; gap: 6px; }
.points-tete { flex-wrap: wrap; gap: 8px; }
.points-tete h2 { margin: 0; }
.points-table-zone { overflow: auto; min-height: 0; }
.points-table { width: 100%; font-size: 1.05rem; }
.points-table th { cursor: pointer; white-space: nowrap; position: sticky; top: 0; }
.points-table th.trie { text-decoration: underline; }
.points-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.points-table tbody tr:nth-child(-n+3) td:first-child { font-weight: 800; color: var(--electrique); }
#btnCloturer { border-color: #f3b5b5; }

/* ===== Espacement régulier entre les modules empilés (back office, fiches, bilans) ===== */
.admin > :not(:first-child):is(.carte, .carte-blanche, section, form, table, .tableau, .fiche-session, .ligne.entete, details) { margin-top: 22px; }
.admin > :is(.carte, .carte-blanche, section, form, .fiche-session) { margin-bottom: 0; }
.admin > :last-child { margin-bottom: 0; }
.apprenant > :not(:first-child):is(.carte-blanche, section, form, header, .banniere-jeu:not([hidden])) { margin-top: 18px; }
.rubrique-doc strong { color: #13213c; }

/* ===== 💬 Questions de la classe ===== */
.qc-pot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; }
.qc-details { margin: 10px 0 14px; }
.qc-details > summary { display: inline-flex; list-style: none; cursor: pointer; }
.qc-details > summary::-webkit-details-marker { display: none; }
.qc-details[open] > summary { margin-bottom: 10px; }
.qc-poser { display: grid; gap: 8px; margin: 8px 0 16px; }
.qc-poser textarea, .qc-repondre textarea { width: 100%; resize: vertical; min-height: 44px; }
.qc-poser .ligne { justify-content: space-between; align-items: end; gap: 10px; flex-wrap: wrap; }
.qc-pseudo { flex: 1 1 200px; margin: 0; }
.qc-vide { margin: 8px 0; padding: 14px; border: 2px dashed #cfdcf2; border-radius: 12px; color: #5b6b85; text-align: center; }
.qc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qc-q { background: #f3f7fd; border-radius: 14px; padding: 12px 14px; border-left: 4px solid #b9cdf0; }
.qc-q.du-formateur { border-left-color: var(--electrique); background: #eaf2ff; }
.qc-q.epingle { box-shadow: 0 0 0 2px var(--electrique) inset; }
.qc-q.close { opacity: .85; }
.qc-tete { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .85rem; }
.qc-auteur { font-weight: 700; color: #13213c; }
.qc-auteur em { font-style: normal; font-weight: 600; font-size: .75rem; background: var(--electrique); color: #fff; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.qc-meta { color: #5b6b85; }
.qc-texte { margin: 6px 0 8px; font-size: 1.05rem; font-weight: 600; color: #0b1c3a; }
.qc-reponses { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.qc-reponses li { background: #fff; border-radius: 10px; padding: 7px 10px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.qc-reponses li.du-formateur { background: #dce9ff; }
.qc-reponses .qc-auteur::after { content: ' :'; }
.qc-rep { flex: 1 1 200px; }
.qc-suppr { margin-left: auto; }
.lien-danger { background: none; border: 0; color: #b42323; cursor: pointer; font-weight: 700; padding: 0 4px; }
.qc-repondre { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.qc-repondre textarea { flex: 1 1 220px; width: auto; }
.qc-pseudo-court { flex: 0 1 150px; width: 150px !important; }
.qc-outils { margin: 4px 0 8px; }
/* écran projeté */
.qc-projection { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; padding: 0 3vw 3vh; align-items: start; }
.qc-projection-liste { max-height: 80vh; overflow: auto; }
.qc-projection .qc-texte { font-size: 1.6rem; }
.qc-projection .une-question .qc-texte { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.qc-projection .qc-reponses li { font-size: 1.15rem; }
.qc-projection .une-question .qc-reponses { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 900px) { .qc-projection { grid-template-columns: 1fr; } }
.qc-qr .code-geant { font-size: clamp(1.6rem, 2.6vw, 2.4rem); padding: 8px 14px; letter-spacing: .12em; }

/* ===== Jeux prévus par séance ===== */
.champ-seance { width: 58px !important; margin: 0 0 0 8px !important; padding: 2px 6px !important; font-size: .85rem !important; display: none !important; }
.check:has(input[type=checkbox]:checked) .champ-seance { display: inline-block !important; }
.aide-seance { margin: 0 0 8px; }
.programme-jeux { margin: 16px 0 18px; }
.programme-jeux h3 { margin: 0 0 10px; }
.prog-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prog-seance { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 10px; align-items: center; background: #f3f7fd; border-radius: 14px; padding: 10px 12px; }
.prog-seance.courante { background: #e3eeff; box-shadow: 0 0 0 2px var(--electrique) inset; }
.prog-seance.passee { opacity: .6; }
.prog-quand { display: flex; align-items: center; gap: 10px; }
.prog-quand .etat { margin-left: auto; }
.prog-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--nuit, #0b1c3a); color: #fff; font-weight: 800; }
.prog-jeux { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-jeu { display: grid; background: #fff; border-radius: 12px; padding: 6px 12px; text-decoration: none; color: inherit; border-left: 4px solid var(--electrique); min-width: 200px; }
.prog-jeu span { font-size: .78rem; font-weight: 700; color: #5b6b85; }
.prog-jeu em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--electrique); }
.prog-jeu.jeu-outclass { border-left-color: #e0402f; }
.prog-jeu.jeu-crackclass { border-left-color: #f2a20c; }
.badge-seance { background: var(--nuit, #0b1c3a); color: #fff; border-radius: 6px; padding: 0 5px; font-size: .72rem; }
@media (max-width: 760px) { .prog-seance { grid-template-columns: 1fr; } }

/* Reconnexion : « C'est vous ? » et repérage des doublons */
.doublon-joueur form { margin-top: 10px; }
.doublon-joueur h2 { font-size: 1.25rem; }
.doublon-tag { font-size: .75rem; font-weight: 700; color: #a15c00; background: #fff1d6; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.points-table .lien-danger { white-space: nowrap; }

/* ===== En-tête des écrans de jeu : une seule ligne de boutons, le titre se raccourcit ===== */
.top.top-jeu { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.top-jeu > :last-child { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.top-jeu > :last-child > * { flex: none; white-space: nowrap; }
.top-jeu .ghost.small, .top-jeu .badge-code { padding: 6px 11px; }
.top-jeu .pastille-theme { justify-self: center; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; }
.top-jeu .pastille-theme .ch-marque { flex: none; }
.top-jeu .titre-jeu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-jeu .pastille-theme .logiciels { flex: none; flex-wrap: nowrap; margin-left: 2px; }
/* écran étroit : boutons sur la 1re ligne, titre en dessous sur toute la largeur */
@media (max-width: 1100px) {
  .top.top-jeu { grid-template-columns: auto auto; grid-template-areas: "gauche droite" "titre titre"; row-gap: 8px; }
  .top-jeu > :first-child { grid-area: gauche; }
  .top-jeu > :last-child { grid-area: droite; }
  .top-jeu > .pastille-theme { grid-area: titre; }
}
@media (max-width: 1300px) { .top-jeu .pastille-theme .logiciels-m .logi-ico { width: 24px; height: 24px; } }
@media (max-width: 1500px) {
  .top-jeu .pastille-theme { font-size: 1.2rem; padding: 6px 18px; gap: 6px; }
  .top-jeu .pastille-theme .ch-marque { font-size: .75rem; }
  .top-jeu .pastille-theme .logiciels { gap: 3px; }
  .top-jeu .pastille-theme .logiciels-m .logi-ico { width: 21px; height: 21px; border-radius: 5px; }
}
.points-fusion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #eef4ff; border-radius: 12px; padding: 10px 12px; margin: 4px 0; }
.points-fusion[hidden] { display: none; }
.points-fusion select { width: auto !important; min-width: 180px; margin: 0 !important; }
.points-actions { white-space: nowrap; }
.lien-action { background: none; border: 0; color: var(--electrique); cursor: pointer; font-weight: 700; padding: 0 6px; }

/* ===== Modalités, jours de formation, accès anticipé ===== */
.choix-modalite { border: 0; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.choix-modalite legend { font-weight: 700; margin-bottom: 6px; }
.carte-choix { display: flex !important; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f3f7fd; cursor: pointer; margin: 0 !important; }
.carte-choix input { width: auto !important; margin: 3px 0 0 !important; }
.carte-choix span { display: grid; }
.carte-choix small { color: #5b6b85; font-weight: 400; }
.carte-choix:has(input:checked) { background: #dce9ff; outline: 2px solid var(--electrique); }
.jours-formation { border: 1px solid #d6e2f5; border-radius: 12px; padding: 10px 12px; margin: 12px 0; display: grid; gap: 8px; }
.jours-formation legend { font-weight: 700; padding: 0 6px; }
.jour-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jour-ligne input[type=date] { width: auto !important; margin: 0 !important; }
.jour-ligne select { width: auto !important; margin: 0 !important; }
.jour-num { font-weight: 700; min-width: 56px; }
.nouvelle-session .si-hybride, .nouvelle-session .si-distance { display: none; }
.nouvelle-session[data-modalite=hybride] .si-hybride { display: inline-block; }
.nouvelle-session[data-modalite=hybride] .si-distance, .nouvelle-session[data-modalite=distanciel] .si-distance { display: block; }
.champ-ouverture .ligne { gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.champ-ouverture select, .champ-ouverture input { width: auto !important; margin: 0 !important; }
.grille-form .plein { grid-column: 1 / -1; }
.badge-modalite { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: .82rem; font-weight: 700;
  background: #e7f0ff; color: #0b3a8a; vertical-align: middle; }
.badge-modalite.modalite-distanciel { background: #e6f7f3; color: #0b6b55; }
.badge-modalite.modalite-hybride { background: #f3ecff; color: #5a2db3; }
.badge-modalite.mini { font-size: .72rem; padding: 1px 7px; }
.btn-visio { margin-top: 6px; display: inline-block; }
.avant-formation { margin: 12px 0 0; padding: 10px 12px; background: #fff7e6; border-radius: 12px; font-weight: 600; color: #6b4300; }
/* documents : contenu intégré */
.form-doc[data-type=integre] .si-lien { display: block; }
.form-doc[data-type=integre] .si-fichier { display: none; }
.si-integre-seul { display: none; }
.form-doc[data-type=integre] .si-integre-seul { display: inline; }
.form-doc[data-type=integre] .si-lien-seul { display: none; }
.doc-integre { display: grid !important; gap: 8px; }
.doc-integre .integre { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-integre iframe { width: 100%; min-height: 520px; border: 0; border-radius: 12px; background: #fff; flex-basis: 100%; }
/* espace apprenant affiché dans Formadist (iframe) */
body.page-integre { background: #fff !important; }
body.page-integre .signature, body.page-integre .lien-accueil, body.page-integre .pied-apprenant { display: none; }
body.page-integre .apprenant { padding-top: 8px; }
body.page-integre .carte-blanche { box-shadow: 0 0 0 1px #dfe7f5; }
.titre-integre { font-size: 1.25rem; margin: 6px 4px 12px; color: #0b1c3a; }
.titre-integre small { display: block; font-size: .85rem; color: #5b6b85; font-weight: 600; }
/* partage Formadist */
.partage-plateforme .copie { flex-wrap: nowrap; gap: 6px; }
.partage-plateforme .copie input, .partage-plateforme .champ-lien { width: 100%; font-size: .85rem; }
.partage-plateforme textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; }
.partage-plateforme h3 { display: block; margin: 10px 0 6px; }
.liens-documents { margin-top: 14px; }
.liens-documents summary { cursor: pointer; font-weight: 700; }
.partage-plateforme textarea { height: 118px !important; min-height: 0 !important; resize: vertical; }
.partage-plateforme .deux-colonnes { align-items: start; }
.jours-formation .si-distance input { width: 100% !important; display: block; margin-top: 4px; }

/* ============================================================
   ⭐ AVIS DES STAGIAIRES (page apprenant, administration, page d'accueil)
   ============================================================ */
:root { --etoile: #ffb400; --etoile-vide: #d5dcea; }
.av-etoiles { display: inline-flex; gap: 1px; vertical-align: -2px; line-height: 1; font-size: 1.1em; white-space: nowrap; }
.av-etoile { position: relative; display: inline-block; color: var(--etoile-vide); }
.av-etoile::before { content: "★"; position: absolute; left: 0; top: 0; width: var(--rempli, 0%); overflow: hidden; white-space: nowrap; color: var(--etoile); }
.av-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.av-tete .av-etoiles { font-size: 1.3rem; }
.av-texte { margin: 8px 0; white-space: normal; overflow-wrap: anywhere; }
.av-statut { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--pale); color: var(--royal); }
.av-statut-publie { background: var(--electrique); color: var(--blanc); }
.av-statut-masque { background: #eceef4; color: var(--gris); }
.av-reponse { margin: 8px 0 0; padding: 10px 14px; border-left: 4px solid var(--azur); background: var(--pale); border-radius: 0 12px 12px 0; }
.av-reponse p { margin: 4px 0 0; }

/* Page apprenant : formulaire */
.av-apprenant .succes, .av-apprenant .alerte { margin: 0 0 12px; }
.av-mien { background: var(--pale); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; }
.av-mien .muet { margin: 0; }
.av-form { display: grid; gap: 12px; margin-top: 8px; }
.av-form textarea, .av-form input[type=text] { width: 100%; font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--bord); border-radius: 12px; margin-top: 4px; }
.av-form label { display: block; font-weight: 600; }
.av-form .muet.petit { margin: 0; font-weight: 400; }
.av-choix { border: 0; margin: 0; padding: 0; }
.av-choix legend { font-weight: 600; padding: 0; }
.av-choix-lib { color: var(--electrique); margin-left: 6px; }
.av-etoiles-saisie { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-top: 4px; }
.av-etoiles-saisie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.av-etoiles-saisie label { font-size: 2.6rem; line-height: 1; color: var(--etoile-vide); cursor: pointer; transition: transform .1s, color .1s; font-weight: 400; }
.av-etoiles-saisie label:hover, .av-etoiles-saisie label:hover ~ label,
.av-etoiles-saisie input:checked ~ label { color: var(--etoile); }
.av-etoiles-saisie label:hover { transform: scale(1.12); }
.av-etoiles-saisie input:focus-visible + label { outline: 3px solid var(--azur); outline-offset: 2px; border-radius: 6px; }
.av-modifier summary { display: inline-block; cursor: pointer; list-style: none; }
.av-modifier summary::-webkit-details-marker { display: none; }

/* Administration */
.av-tableau td { vertical-align: middle; }
.av-rang { white-space: nowrap; font-size: 1.05rem; }
.av-moy { white-space: nowrap; }
.av-moy strong { font-size: 1.2rem; margin-right: 4px; }
.av-repartition { display: grid; gap: 2px; min-width: 170px; font-size: .78rem; }
.av-rep-ligne { display: grid; grid-template-columns: 2.4em 1fr 2em; align-items: center; gap: 6px; }
.av-rep-barre { height: 7px; border-radius: 999px; background: var(--bord); overflow: hidden; }
.av-rep-barre span { display: block; height: 100%; background: var(--etoile); border-radius: 999px; }
.av-rep-nb { text-align: right; color: var(--gris); }
.av-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.av-filtres a { text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--bord); color: var(--nuit); font-weight: 600; }
.av-filtres a span { color: var(--gris); font-weight: 500; margin-left: 2px; }
.av-filtres a.actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }
.av-filtres a.actif span { color: var(--glacier); }
.av-filtres-form { margin-bottom: 14px; gap: 8px; }
.av-filtres-form select { width: auto; max-width: 100%; }
.av-liste-admin { display: grid; gap: 12px; }
.av-carte { border: 2px solid var(--bord); border-radius: 18px; padding: 14px 18px; }
.av-carte-attente { border-color: var(--azur); box-shadow: 0 0 0 3px rgba(0, 140, 245, .12); }
.av-carte-masque { background: #f7f8fb; }
.av-carte .av-formation { margin: 6px 0 0; }
.av-carte .muet.petit { margin: 4px 0; }
.av-actions { margin-top: 10px; gap: 8px; align-items: flex-start; }
.av-actions form { margin: 0; }
.av-repondre summary { list-style: none; cursor: pointer; display: inline-block; }
.av-repondre summary::-webkit-details-marker { display: none; }
.av-repondre[open] { flex-basis: 100%; order: 5; }
.av-repondre form { display: grid; gap: 6px; margin-top: 8px; }
.av-repondre textarea { width: 100%; font: inherit; font-weight: 400; padding: 8px 12px; border: 2px solid var(--bord); border-radius: 12px; }
.av-vide { padding: 16px 0; }
.av-session-moy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; }
.av-session-moy > strong { font-size: 1.4rem; }
.av-mode { gap: 6px; align-items: center; margin: 8px 0; }
.av-col a { text-decoration: none; white-space: nowrap; color: var(--nuit); }
.av-col a strong { color: var(--nuit); }

/* Page d'accueil */
.acc-avis-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.acc-avis-tete h2 { margin: 0; }
.acc-avis-global { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; max-width: 260px; color: var(--blanc);
  background: rgba(6, 27, 54, .72); border: 1px solid rgba(207, 230, 255, .25); border-radius: var(--rayon); padding: 10px 18px; backdrop-filter: blur(4px); }
.acc-avis-global strong { font-size: 2.4rem; line-height: 1; }
.acc-avis-global > span { color: var(--glacier); font-weight: 600; }
.acc-avis-global .av-etoiles { font-size: 1.3rem; margin-left: 6px; }
.acc-avis-global small { flex-basis: 100%; color: var(--glacier); font-size: .82rem; }
.acc-avis-grille { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.acc-avis-grille.sans-classement { grid-template-columns: minmax(0, 1fr); }
.acc-classement h3 { margin: 0 0 10px; }
.acc-classement ol { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.acc-classement-ligne { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 14px; border: 2px solid transparent; transition: background .15s; }
.acc-classement-ligne:hover { background: var(--pale); }
.acc-classement-ligne:focus-visible { outline: 3px solid var(--azur); }
.acc-classement-ligne[aria-pressed="true"] { background: var(--pale); border-color: var(--electrique); }
.acc-rang { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: var(--pale); color: var(--royal); }
.acc-rang.rang-1 { background: linear-gradient(145deg, #ffd34d, #f0a500); color: var(--nuit); }
.acc-rang.rang-2 { background: linear-gradient(145deg, #eef2f8, #b9c3d3); color: var(--nuit); }
.acc-rang.rang-3 { background: linear-gradient(145deg, #f3c9a0, #c9824a); color: var(--nuit); }
.acc-classement-nom { font-weight: 700; line-height: 1.25; min-width: 0; }
.acc-classement-nom small { display: block; font-weight: 500; color: var(--gris); margin-top: 2px; }
.acc-classement-nom small strong { color: var(--nuit); }
.acc-avis-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.acc-avis-filtre { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: var(--blanc); font-weight: 600; }
.acc-avis-carte { padding: 18px 20px; }
.acc-avis-carte[hidden] { display: none; }
.acc-avis-formation { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--electrique); text-transform: uppercase; letter-spacing: .03em; }
.acc-avis-auteur { margin: 8px 0 0; }
.acc-avis-auteur small { display: block; color: var(--gris); }
.acc-avis-plus { grid-column: 1 / -1; justify-self: center; }
.acc-avis-mention { margin-top: 12px; }
.av-controle { color: var(--glacier); font-size: .88rem; }
.av-controle summary { cursor: pointer; }
.av-controle p { max-width: 60em; margin: 6px 0 0; }
@media (max-width: 980px) {
  .acc-avis-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .acc-avis-liste { grid-template-columns: minmax(0, 1fr); }
}

/* Out Class : choix enregistré automatiquement (pas de bouton OUT) */
.oc-auto { text-align: center; font-weight: 600; color: var(--glacier); min-height: 1.4em; margin: 10px 0 0; }
.oc-auto.ko { color: #ffb4b4; }

/* ✏️ Renommer un document (fiche session, fiche formation, bibliothèque) */
.form-renommer { margin-top: 10px; padding: 12px; background: var(--pale); border-radius: 12px; display: grid; gap: 8px; max-width: 520px; }
.form-renommer[hidden] { display: none; }
.form-renommer label { display: grid; gap: 4px; font-weight: 600; font-size: .9em; }
.form-renommer input[type=text] { width: 100%; min-width: 0; }
.form-renommer small.muet { font-weight: 400; }
.nom-ext { display: flex; align-items: center; gap: 4px; }
.nom-ext input { flex: 1; min-width: 0; }
.nom-ext > span { font-weight: 600; color: var(--gris, #666); white-space: nowrap; }

/* 🎮 Jouer : saisie du code d'un jeu sur la page de la session (apprenant) */
.code-jeu { padding: 14px 16px; }
.code-jeu label { display: grid; gap: 8px; font-weight: 400; }
.code-jeu-ligne { display: flex; gap: 8px; align-items: stretch; }
.code-jeu-ligne input.champ-code { flex: 1; min-width: 0; font-size: 1.6rem !important; padding: 6px 10px; }
.code-jeu-ligne .primary { flex: none; padding-inline: 20px; }
.code-jeu .alerte { margin: 10px 0 0; }

/* ◀ Question précédente et 🏆 Classement à la demande (Class Shoot, Out Class, Crack Class) */
.revoir-panneau { width: min(980px, 100%); overflow: auto; }
.revoir-panneau #revoirCorps { overflow: auto; }
.revoir-panneau button:disabled { opacity: .35; cursor: default; }
.revoir-classement { margin: 6px 0 0; }
.rv-texte { font-family: var(--titre, inherit); font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--nuit); margin: 4px 0 6px; line-height: 1.25; }
.rv-resume { display: inline-block; margin: 4px 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--pale); font-weight: 700; color: var(--nuit); }
.rv-resume.niv-maitrise { background: var(--electrique); color: #fff; }
.rv-resume.niv-consolider { background: var(--glacier); }
.rv-resume.niv-reprendre { background: var(--alerte); color: #fff; }
.rv-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-item { display: grid; grid-template-columns: 1fr minmax(120px, 30%) auto; align-items: center; gap: 4px 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--pale); border: 2px solid transparent; font-weight: 600; }
.rv-item .rv-note, .rv-item .rv-info { grid-column: 1 / -1; }
.rv-item .rv-info { grid-column: auto; color: var(--gris); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.rv-note { font-weight: 400; color: var(--gris); font-size: .92rem; }
.rv-barre { height: 10px; border-radius: 99px; background: rgba(6,59,155,.12); overflow: hidden; }
.rv-barre > span { display: block; height: 100%; background: var(--azur, #008cf5); border-radius: inherit; }
.rv-pct { font-weight: 700; white-space: nowrap; }
.rv-pct small { color: var(--gris); font-weight: 400; }
.rv-tag { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; text-align: center; font-size: .82em; }
.rv-bon, .rv-intrus { border-color: var(--electrique); background: #fff; }
.rv-bon .rv-tag { background: var(--electrique); color: #fff; }
.rv-intrus .rv-tag { background: var(--alerte); color: #fff; letter-spacing: .04em; }
.rv-intrus .rv-barre > span { background: var(--electrique); }
.rv-faux, .rv-garder { opacity: .78; }
.rv-refuse { opacity: .6; text-decoration: line-through; }
.rv-refuse .rv-tag { background: var(--gris); color: #fff; text-decoration: none; }
.rv-h { margin: 14px 0 6px; font-size: 1rem; }
.rv-pistes { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-pistes .chip.trouve { background: var(--electrique); color: #fff; }
.rv-expl { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--pale); border-left: 5px solid var(--electrique); }
.rv-expl p { margin: 4px 0 0; }
@media (max-width: 640px) { .rv-item { grid-template-columns: 1fr; } .rv-item .rv-info { grid-column: 1; } }

/* 🎯 Class Shoot : compteur de tirs en grand, sous les réponses */
.ch-compteur { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 auto;
  padding: 6px 24px 6px 8px; border-radius: 999px; background: var(--pale); border: 3px solid rgba(0,103,244,.18); }
.ch-compteur[hidden] { display: none; }
.ct-cible { width: clamp(64px, 6.5vw, 92px); aspect-ratio: 1; flex: none; }
.ct-cible svg { width: 100%; height: 100%; overflow: visible; }
.ct-piste { fill: none; stroke: rgba(6,59,155,.12); stroke-width: 7; }
.ct-anneau { fill: none; stroke: var(--electrique); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 100;
  transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .5s cubic-bezier(.3, 1.4, .5, 1); }
.ct-zone { stroke: none; }
.ct-zone.z1 { fill: #fff; } .ct-zone.z2 { fill: var(--glacier); } .ct-zone.z3 { fill: #fff; } .ct-zone.z4 { fill: var(--electrique); }
.ct-trou { fill: var(--nuit, #071a3d); stroke: #fff; stroke-width: 1.2; transform-box: fill-box; transform-origin: center;
  animation: ct-trou .35s cubic-bezier(.2, 1.8, .4, 1) both; animation-delay: var(--d, 0s); }
.ct-onde { fill: none; stroke: var(--azur); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: ct-onde .7s ease-out both; animation-delay: var(--d, 0s); }
@keyframes ct-trou { from { transform: scale(0); } 60% { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes ct-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(5); opacity: 0; } }
.ct-texte { display: grid; line-height: 1; }
.ct-chiffres { display: flex; align-items: baseline; gap: 8px; }
.ct-chiffres strong { font-family: var(--titre, inherit); font-size: clamp(2.6rem, 5vw, 4.2rem); color: var(--electrique); font-variant-numeric: tabular-nums; }
.ct-sur { font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700; color: var(--gris); }
.ct-lib { margin-top: 6px; font-weight: 700; color: var(--royal, #063b9b); font-size: clamp(.95rem, 1.4vw, 1.2rem); }
.ch-compteur.tir .ct-chiffres strong { animation: ct-bond .45s cubic-bezier(.2, 1.8, .4, 1); }
.ch-compteur.tir .ct-cible { animation: ct-recul .3s ease-out; }
@keyframes ct-bond { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-4deg); } 100% { transform: scale(1); } }
@keyframes ct-recul { 0% { transform: scale(1); } 30% { transform: scale(.9); } 100% { transform: scale(1); } }
.ct-plus { position: absolute; left: clamp(56px, 6vw, 84px); top: -18px; font-family: var(--titre, inherit); font-weight: 700;
  font-size: 1.6rem; color: var(--azur); opacity: 0; pointer-events: none; }
.ct-plus.tir { animation: ct-plus .9s ease-out; }
@keyframes ct-plus { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; transform: translateY(-6px) scale(1.15); }
                     100% { opacity: 0; transform: translateY(-38px) scale(1); } }
/* tout le monde a tiré : la cible s'illumine */
.ch-compteur.complet { background: var(--electrique); border-color: #fff; box-shadow: 0 0 0 6px rgba(0,140,245,.25), var(--ombre);
  animation: ct-complet 1.6s ease-in-out infinite; }
.ch-compteur.complet .ct-chiffres strong, .ch-compteur.complet .ct-lib { color: #fff; }
.ch-compteur.complet .ct-sur { color: var(--glacier); }
.ch-compteur.complet .ct-anneau { stroke: #fff; }
.ch-compteur.complet .ct-piste { stroke: rgba(255,255,255,.25); }
@keyframes ct-complet { 0%, 100% { box-shadow: 0 0 0 6px rgba(0,140,245,.25), var(--ombre); } 50% { box-shadow: 0 0 0 14px rgba(0,140,245,.12), var(--ombre); } }
@media (prefers-reduced-motion: reduce) { .ch-compteur, .ch-compteur * { animation: none !important; transition: none !important; } }

/* ============================================================
   🧱 Class Wall — mur collaboratif
   ============================================================ */
/* Lanceur : 4 cartes de jeux, modèles de murs */
/* Lanceur : jeux et outils collaboratifs, en deux groupes */
.choix-groupes { display: grid; grid-template-columns: 3fr 1fr; gap: 18px; margin-bottom: 18px; align-items: stretch; }
.choix-groupe { display: flex; flex-direction: column; min-width: 0; }
.choix-groupe-titre { margin: 0 0 8px; color: #fff; font-weight: 700; font-size: 1.05rem; }
.choix-groupe-titre small { display: block; font-weight: 600; opacity: .8; font-size: .85rem; }
.choix-groupes .choix-jeu { margin-bottom: 0; flex: 1; }
.choix-outils { grid-template-columns: minmax(0, 1fr); }
.choix-groupe-outils { padding-left: 18px; border-left: 2px dashed rgba(255,255,255,.45); }
@media (max-width: 900px) { .choix-groupes { grid-template-columns: minmax(0, 1fr); } .choix-groupe-outils { padding-left: 0; border-left: 0; } }
.cw-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cw-modele { margin: 0; cursor: pointer; }
.cw-modele input { position: absolute; opacity: 0; }
.cw-modele > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--bord, #dbe6f7); background: #fff; }
.cw-modele b { font-size: 1.6rem; line-height: 1; }
.cw-modele small { color: var(--gris); font-size: .8rem; }
.cw-modele input:checked + span { border-color: var(--electrique); background: var(--pale); box-shadow: 0 0 0 3px rgba(0,103,244,.15); }
.cw-modele input:focus-visible + span { outline: 3px solid var(--azur); }
.form-cw textarea { width: 100%; }
.cw-options { border: 2px solid var(--bord, #dbe6f7); border-radius: 14px; padding: 8px 14px; }
.cw-options legend { font-weight: 600; padding: 0 6px; }

/* Écran projeté */
.cw-scene { max-width: 1600px; margin: 0 auto; padding: 6px 22px 22px; display: grid; gap: 14px; }
.cw-titre-h .titre-jeu { font-size: 1.2em; }
.cw-bandeau { display: flex; align-items: center; gap: 18px; padding: 14px 20px; flex-wrap: wrap; }
.cw-rejoindre { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 2px solid var(--pale); }
.cw-rejoindre[hidden] { display: none; }
.cw-qr { width: 78px; height: 78px; cursor: zoom-in; flex: none; }
.cw-qr svg { width: 100%; height: 100%; }
.cw-rejoindre > div { display: grid; line-height: 1.15; }
.cw-code { font-weight: 700; font-size: 1.7rem; letter-spacing: .12em; color: var(--electrique); }
.cw-consigne { flex: 1 1 340px; min-width: 0; }
.cw-consigne h2 { margin: 4px 0 0; font-size: clamp(1.3rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--nuit); }
.cw-etat { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--pale); color: var(--royal); }
.cw-etat.etat-collecte { background: var(--electrique); color: #fff; }
.cw-compte { display: grid; justify-items: center; line-height: 1; padding: 6px 14px; border-radius: 16px; background: var(--pale); min-width: 120px; }
.cw-compte strong { font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--electrique); font-variant-numeric: tabular-nums; }
.cw-compte span { font-weight: 700; color: var(--royal); font-size: .9rem; }
.cw-compte em { font-style: normal; font-weight: 700; margin-top: 4px; color: var(--nuit); font-variant-numeric: tabular-nums; }
.cw-compte em.urgent { color: var(--electrique); animation: ct-complet 1s ease-in-out infinite; }
.cw-compte.bond strong { animation: ct-bond .45s cubic-bezier(.2, 1.8, .4, 1); }
.cw-commandes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cw-menu-zone { position: relative; }
.cw-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 330px; display: grid; gap: 8px; padding: 14px; text-align: left; }
.cw-menu[hidden] { display: none; }
.cw-menu .check { font-weight: 600; font-size: .9rem; }
.cw-attente { padding: 12px 18px; border: 3px dashed var(--azur); }
.cw-attente[hidden] { display: none; }
.cw-attente-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.cw-attente-liste[hidden] { display: none; }
.cw-attente-carte { background: var(--pale); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.cw-attente-carte p { margin: 0; font-weight: 600; }

.cw-mur { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(250px, 1fr)) 130px; gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.cw-colonne { background: rgba(255,255,255,.94); border-radius: 20px; box-shadow: var(--ombre); border-top: 8px solid var(--c); min-height: 220px; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.cw-colonne.survol { box-shadow: 0 0 0 4px var(--c), var(--ombre); transform: translateY(-2px); }
.cw-colonne > header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.cw-colonne h3 { margin: 0; flex: 1; font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--nuit); line-height: 1.15; }
.cw-nb { background: var(--c); color: #fff; font-weight: 700; border-radius: 999px; min-width: 2em; padding: 2px 8px; text-align: center; }
.cw-col-act { display: flex; gap: 2px; opacity: .45; }
.cw-colonne:hover .cw-col-act { opacity: 1; }
.cw-cartes { display: grid; gap: 10px; padding: 4px 12px 14px; }
.cw-vide { color: var(--gris); font-style: italic; margin: 10px 4px; }
.cw-carte { position: relative; background: color-mix(in srgb, var(--c) 10%, #fff); border-left: 6px solid var(--c); border-radius: 14px; padding: 12px 14px 10px;
  box-shadow: 0 3px 10px rgba(8,18,70,.12); cursor: grab; }
.cw-carte p { margin: 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); font-weight: 600; color: var(--nuit); line-height: 1.3; white-space: pre-line; overflow-wrap: anywhere; }
.cw-carte footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .85rem; color: var(--gris); }
.cw-carte footer > :first-child { flex: 1; }
.cw-auteur { font-weight: 700; color: var(--royal); }
.cw-likes { font-weight: 700; color: var(--nuit); background: #fff; border-radius: 999px; padding: 1px 8px; }
.cw-likes.zero { opacity: .45; }
.cw-tag { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.cw-epingle { position: absolute; top: -10px; right: 10px; font-size: 1.2rem; }
.cw-carte.epinglee { box-shadow: 0 0 0 3px var(--c), 0 6px 16px rgba(8,18,70,.18); }
.cw-carte.masquee { opacity: .45; border-left-style: dashed; }
.cw-carte.glisse { opacity: .4; }
.cw-carte.nouvelle { animation: cw-arrivee .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cw-arrivee { from { opacity: 0; transform: translateY(-24px) scale(.85) rotate(-2deg); } to { opacity: 1; transform: none; } }
.cw-groupe { border: 2px dashed var(--c); border-radius: 16px; padding: 8px; display: grid; gap: 8px; }
.cw-groupe h4 { margin: 0 4px; display: flex; justify-content: space-between; color: var(--nuit); font-size: .95rem; }
.cw-groupe h4 span { background: var(--c); color: #fff; border-radius: 999px; padding: 0 8px; }
.cw-col-ajout { align-self: start; min-height: 120px; border: 3px dashed rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.12);
  color: #fff; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.cw-col-ajout:hover { background: rgba(255,255,255,.22); }
.cw-outils { position: absolute; z-index: 80; display: grid; gap: 10px; padding: 14px; box-shadow: 0 16px 40px rgba(8,18,70,.4); }
.cw-outils[hidden] { display: none; }
.cw-outils-texte { margin: 0; font-weight: 700; color: var(--nuit); max-height: 5.5em; overflow: auto; }
.cw-outils label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; flex: 1; }
.cw-outils form { align-items: flex-end; }
@media (prefers-reduced-motion: reduce) { .cw-carte.nouvelle, .cw-compte.bond strong { animation: none; } }

/* Téléphone */
.cw-logo-mobile { max-width: 190px; }
.cw-consigne-m { font-size: 1.35rem; margin: 2px 0 12px; color: var(--nuit); line-height: 1.2; }
.cw-ferme { background: var(--pale); border-radius: 12px; padding: 12px; font-weight: 600; }
.cw-ferme[hidden], .cw-choix-col[hidden] { display: none; }
.cw-choix-col { border: 0; padding: 0; margin: 0 0 10px; }
.cw-choix-col legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.cw-choix-col > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-pastille { border: 2px solid var(--c); background: #fff; color: var(--nuit); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.cw-pastille.choisie { background: var(--c); color: #fff; }
.cw-ecrire textarea { width: 100%; font-size: 1.1rem; }
.cw-sous-champ { margin: 2px 0 8px; }
.cw-signature { display: grid; gap: 4px; margin-bottom: 12px; }
.cw-mur-m { display: grid; gap: 14px; }
.cw-col-m { background: rgba(255,255,255,.95); border-radius: 18px; border-top: 6px solid var(--c); padding: 10px 12px 12px; display: grid; gap: 8px; }
.cw-col-m h2 { margin: 2px 2px 4px; font-size: 1.05rem; display: flex; justify-content: space-between; }
.cw-col-m h2 span { background: var(--c); color: #fff; border-radius: 999px; padding: 0 8px; font-size: .85rem; }
.cw-carte-m { background: color-mix(in srgb, var(--c) 9%, #fff); border-left: 5px solid var(--c); border-radius: 12px; padding: 10px 12px; }
.cw-carte-m p { margin: 0; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.cw-carte-m footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .85rem; color: var(--gris); }
.cw-carte-m.moi { box-shadow: 0 0 0 2px var(--c); }
.cw-carte-m.attente { opacity: .7; border-left-style: dashed; }
.cw-like { border: 2px solid var(--c); background: #fff; border-radius: 999px; padding: 4px 12px; font: inherit; font-weight: 700; cursor: pointer; min-height: 36px; }
.cw-like.aime { background: var(--c); color: #fff; }
.cw-like:disabled { opacity: .55; cursor: default; }
.cw-vide-m { color: #fff; text-align: center; font-weight: 600; }

/* Fiche session et observatoire */
.cw-session h2 small { font-weight: 600; font-size: .8rem; }
.cw-chiffres { margin: 14px 0; }
.cw-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cw-barres a { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 10px; align-items: center; text-decoration: none; color: var(--nuit); padding: 4px 6px; border-radius: 8px; }
.cw-barres a:hover { background: var(--pale); }
.cw-b-lib { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-b-barre { height: 12px; border-radius: 99px; background: var(--pale); overflow: hidden; }
.cw-b-barre > span { display: block; height: 100%; background: var(--electrique); border-radius: inherit; }
.cw-filtres .ligne { flex-wrap: wrap; }
.cw-liste-form { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.cw-table td:first-child { max-width: 520px; }

/* Accueil : jeux (2 × 2) puis outils collaboratifs */
.acc-grille-jeux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc-grille-outils { grid-template-columns: minmax(0, 720px); justify-content: center; }
.acc-outils { margin-top: 8px; }
@media (max-width: 980px) { .acc-grille-jeux, .acc-grille-outils { grid-template-columns: minmax(0, 1fr); } }

/* 🎯 PERFECT CLASS : compteur (écrans, téléphones, bilans) */
.perfect-compteur { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 999px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, var(--electrique), var(--azur)); color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0,103,244,.35); font-size: .95rem; }
.perfect-compteur[hidden] { display: none; }
.perfect-compteur.bond { animation: perfect-bond .7s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes perfect-bond { 0% { transform: scale(1); } 35% { transform: scale(1.5) rotate(-6deg); } 100% { transform: scale(1); } }
.titre-classement .perfect-compteur { font-size: .55em; vertical-align: middle; }
.perfect-rang { display: block; margin-top: 10px; font-size: clamp(1.1rem, 2.2vw, 1.7rem); color: var(--glacier); letter-spacing: .02em; }
.perfect-tuile strong { background: linear-gradient(135deg, var(--electrique), var(--azur)) !important; color: #fff !important; }
.perfect-fin { margin: 8px 0 14px; padding: 10px 16px; border-radius: 14px; background: var(--pale); color: var(--nuit); font-weight: 600; text-align: center; }
.perfect-fin[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .perfect-compteur.bond { animation: none; } }
/* Class Wall : identité du participant (barre du haut) et nombre de participants à l'écran */
.page-cw-joueur .barre-joueur .bj-changer { color: #fff; font-weight: 700; font-size: .85rem; text-decoration: underline; white-space: nowrap; }
.cw-compte small { margin-top: 4px; font-weight: 700; color: var(--royal); font-size: .85rem; }
.cw-compte small[hidden] { display: none; }


/* ---------- Class Wall : mur ajusté à l'écran (⚙ « Ajuster le mur à l'écran ») ----------
   Le mur prend la hauteur visible ; si une colonne déborde, l'écran passe aux paliers cw-d1 → cw-d4 (classes posées par animer.php). */
.cw-mur.cw-ajuste { height: var(--cw-h); align-items: stretch; overflow-y: hidden; }
.cw-mur.cw-ajuste .cw-colonne { min-height: 0; overflow: hidden; }
.cw-mur.cw-ajuste .cw-cartes { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.cw-mur.cw-ajuste .cw-groupe, .cw-mur.cw-ajuste .cw-vide { grid-column: 1 / -1; }
.cw-mur.cw-ajuste .cw-groupe { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.cw-mur.cw-ajuste .cw-groupe h4 { grid-column: 1 / -1; }
.cw-mur.cw-ajuste .cw-col-ajout { min-height: 90px; font-size: .95rem; }
/* palier 1 : cartes plus compactes */
.cw-mur.cw-d1 .cw-cartes { gap: 7px; padding: 2px 10px 10px; }
.cw-mur.cw-d1 .cw-carte { padding: 8px 11px 7px; border-radius: 12px; }
.cw-mur.cw-d1 .cw-carte p { font-size: clamp(.95rem, 1.15vw, 1.15rem); line-height: 1.25; }
.cw-mur.cw-d1 .cw-carte footer { margin-top: 5px; }
/* palier 2 : cartes côte à côte dans la colonne */
.cw-mur.cw-d2 .cw-cartes { gap: 6px; padding: 2px 8px 8px; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.cw-mur.cw-d2 .cw-carte { padding: 7px 9px 6px; border-left-width: 5px; border-radius: 10px; }
.cw-mur.cw-d2 .cw-carte p { font-size: clamp(.88rem, 1vw, 1.02rem); line-height: 1.22; }
.cw-mur.cw-d2 .cw-carte footer { margin-top: 4px; font-size: .75rem; }
.cw-mur.cw-d2 .cw-colonne > header { padding: 8px 12px 5px; }
/* palier 3 */
.cw-mur.cw-d3 { gap: 10px; }
.cw-mur.cw-d3 .cw-cartes { gap: 5px; padding: 2px 6px 6px; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
.cw-mur.cw-d3 .cw-carte { padding: 6px 8px 5px; border-left-width: 4px; border-radius: 9px; box-shadow: 0 2px 6px rgba(8,18,70,.1); }
.cw-mur.cw-d3 .cw-carte p { font-size: .84rem; line-height: 1.2; }
.cw-mur.cw-d3 .cw-carte footer { margin-top: 3px; font-size: .7rem; gap: 5px; }
.cw-mur.cw-d3 .cw-colonne { border-top-width: 6px; border-radius: 16px; }
.cw-mur.cw-d3 .cw-colonne > header { padding: 6px 10px 4px; }
.cw-mur.cw-d3 .cw-colonne h3 { font-size: .98rem; }
/* palier 4 : très dense */
.cw-mur.cw-d4 { gap: 8px; }
.cw-mur.cw-d4 .cw-cartes { gap: 4px; padding: 2px 5px 5px; grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)); }
.cw-mur.cw-d4 .cw-carte { padding: 5px 7px 4px; border-left-width: 3px; border-radius: 8px; box-shadow: 0 1px 4px rgba(8,18,70,.1); }
.cw-mur.cw-d4 .cw-carte p { font-size: .76rem; line-height: 1.18; }
.cw-mur.cw-d4 .cw-carte footer { margin-top: 2px; font-size: .66rem; gap: 4px; }
.cw-mur.cw-d4 .cw-colonne { border-top-width: 5px; border-radius: 14px; }
.cw-mur.cw-d4 .cw-colonne > header { padding: 5px 9px 3px; }
.cw-mur.cw-d4 .cw-colonne h3 { font-size: .9rem; }
.cw-mur.cw-d4 .cw-epingle { top: -7px; font-size: .9rem; }
/* reste encore trop de cartes : la colonne défile à l'intérieur, et on le signale */
.cw-cartes.cw-deborde { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.cw-plus { flex: none; text-align: center; font-weight: 700; font-size: .8rem; color: var(--royal); padding: 2px 0 6px; pointer-events: none; }
/* mur très rempli : le bandeau du haut se resserre pour laisser la place aux cartes */
body.cw-compact .cw-scene { gap: 8px; padding-top: 0; }
body.cw-compact .cw-bandeau { padding: 6px 16px; gap: 12px; }
body.cw-compact .cw-qr { width: 54px; height: 54px; }
body.cw-compact .cw-code { font-size: 1.25rem; }
body.cw-compact .cw-consigne h2 { font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
body.cw-compact .cw-compte { padding: 3px 10px; min-width: 96px; }
body.cw-compact .cw-compte strong { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* ---------- 👥 Participants de la session (fiche session) ---------- */
.sp-actif { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 700; color: #0d8f8a; white-space: nowrap; }
.sp-table .actions { flex-wrap: wrap; justify-content: flex-end; }
.sp-fusion select { max-width: 170px; padding: 4px 8px; font-size: .85rem; }

/* ============================================================
   📊 Class Vote
   ============================================================ */
/* Lanceur : deux outils collaboratifs côte à côte */
.choix-groupes { grid-template-columns: 3fr 2fr; }
.choix-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .choix-groupes { grid-template-columns: minmax(0, 1fr); } }
.cv-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cv-source { margin: 0; cursor: pointer; }
.cv-source input { position: absolute; opacity: 0; }
.cv-source > span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--bord, #dbe6f7); background: #fff; }
.cv-source b { font-size: 1.6rem; line-height: 1; }
.cv-source small { color: var(--gris); font-size: .8rem; }
.cv-source input:checked + span { border-color: var(--electrique); background: var(--pale); box-shadow: 0 0 0 3px rgba(0,103,244,.15); }
.cv-source input:focus-visible + span { outline: 3px solid var(--azur); }
.cv-src[hidden], .form-cv [data-pour][hidden], .cv-express [data-pour][hidden] { display: none; }

/* Écran projeté */
.cv-scene { max-width: 1500px; margin: 0 auto; padding: 6px 22px 22px; display: grid; gap: 14px; }
.cv-titre-h .titre-jeu { font-size: 1.2em; }
.cv-bandeau { display: flex; align-items: center; gap: 18px; padding: 14px 20px; flex-wrap: wrap; }
.cv-rejoindre { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 2px solid var(--pale); }
.cv-rejoindre[hidden] { display: none; }
.cv-qr { width: 84px; height: 84px; cursor: zoom-in; flex: none; }
.cv-qr svg { width: 100%; height: 100%; }
.cv-rejoindre > div { display: grid; line-height: 1.15; }
.cv-code { font-weight: 700; font-size: 1.7rem; letter-spacing: .12em; color: var(--electrique); }
.cv-enonce { flex: 1 1 380px; min-width: 0; }
.cv-enonce h2 { margin: 4px 0 2px; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.12; color: var(--nuit); }
.cv-etape { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--pale); color: var(--royal); }
.cv-sous { margin: 0; color: var(--gris); font-weight: 600; }
.cv-compte { display: grid; justify-items: center; line-height: 1; padding: 8px 16px; border-radius: 16px; background: var(--pale); min-width: 130px; }
.cv-compte[hidden] { display: none; }
.cv-compte strong { font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--electrique); font-variant-numeric: tabular-nums; }
.cv-compte span { font-weight: 700; color: var(--royal); font-size: .95rem; }
.cv-compte.bond strong { animation: ct-bond .45s cubic-bezier(.2, 1.8, .4, 1); }
.cv-zone { min-height: 46vh; display: grid; align-items: center; padding: 22px 28px; }
.cv-attente { text-align: center; color: var(--nuit); }
.cv-attente p { margin: 6px 0; font-size: 1.15rem; }
.cv-grand { font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important; font-weight: 700; color: var(--royal); }
.cv-vide { text-align: center; color: var(--gris); font-style: italic; }
.cv-commandes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cv-commandes .primary, .cv-commandes .ghost { font-size: 1.05rem; }
body.page-cv .cv-commandes .ghost { background: rgba(255,255,255,.92); }

/* choix : barres horizontales */
.cv-barres { display: grid; gap: 14px; }
.cv-barre { display: grid; grid-template-columns: minmax(160px, 1.1fr) 3fr 110px; align-items: center; gap: 14px; }
.cv-lib { font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--nuit); line-height: 1.15; }
.cv-piste { height: 46px; background: var(--pale); border-radius: 12px; overflow: hidden; }
.cv-rempli { display: block; height: 100%; background: linear-gradient(90deg, var(--azur), var(--electrique)); border-radius: 12px; transition: width .5s ease; min-width: 4px; }
.cv-barre.tete .cv-rempli { background: linear-gradient(90deg, #00b4d8, var(--electrique)); box-shadow: 0 0 0 3px rgba(0,103,244,.2); }
.cv-val { display: grid; line-height: 1.05; }
.cv-val strong { font-size: clamp(1.4rem, 2.2vw, 2rem); color: var(--electrique); font-variant-numeric: tabular-nums; }
.cv-val small { color: var(--gris); font-weight: 600; }
.cv-barres.mini { gap: 4px; }
.cv-barres.mini .cv-barre { grid-template-columns: minmax(70px, 1fr) 2fr 44px; gap: 6px; }
.cv-barres.mini .cv-lib { font-size: .78rem; font-weight: 600; }
.cv-barres.mini .cv-piste { height: 12px; border-radius: 6px; }
.cv-barres.mini .cv-rempli { border-radius: 6px; }
.cv-barres.mini .cv-val strong { font-size: .85rem; }

/* échelle : moyenne + histogramme */
.cv-echelle { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "moy hist" ". bornes"; gap: 8px 34px; align-items: end; }
.cv-moyenne { grid-area: moy; display: grid; justify-items: center; line-height: 1; padding: 18px 24px; border-radius: 20px; background: var(--pale); }
.cv-moyenne strong { font-size: clamp(3.4rem, 7vw, 6rem); color: var(--electrique); font-variant-numeric: tabular-nums; }
.cv-moyenne span { font-weight: 700; color: var(--royal); font-size: 1.3rem; }
.cv-moyenne small { margin-top: 8px; color: var(--gris); font-weight: 600; }
.cv-hist { grid-area: hist; display: flex; align-items: flex-end; gap: 10px; height: 38vh; min-height: 220px; }
.cv-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.cv-col-b { width: 100%; max-width: 90px; background: linear-gradient(180deg, var(--electrique), var(--azur)); border-radius: 10px 10px 4px 4px; transition: height .5s ease; min-height: 3px; }
.cv-col-n { font-weight: 700; color: var(--nuit); font-size: 1.15rem; min-height: 1.3em; }
.cv-col-x { font-weight: 700; color: var(--royal); font-size: 1.1rem; }
.cv-bornes { grid-area: bornes; display: flex; justify-content: space-between; color: var(--gris); font-weight: 600; }
.cv-histo-mini { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.cv-histo-mini .cv-col-n { display: none; }
.cv-histo-mini .cv-col-x { font-size: .7rem; }
.cv-histo-mini .cv-col-b { border-radius: 4px 4px 2px 2px; }

/* humeur */
.cv-humeurs { display: flex; justify-content: center; gap: clamp(14px, 4vw, 60px); flex-wrap: wrap; text-align: center; }
.cv-humeur { display: grid; justify-items: center; gap: 4px; }
.cv-emoji { font-size: calc(clamp(4rem, 9vw, 8rem) * var(--k, 1)); line-height: 1.1; transition: font-size .5s ease; }
.cv-humeur strong { font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: var(--electrique); }
.cv-humeur small { color: var(--gris); font-weight: 600; }
.cv-humeurs.mini { gap: 10px; }
.cv-humeurs.mini .cv-emoji { font-size: calc(1.9rem * var(--k, 1)); }
.cv-humeurs.mini strong { font-size: .9rem; }

/* nuage de mots */
.cv-nuage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; padding: 10px; line-height: 1.05; }
.cv-mot { font-weight: 700; cursor: pointer; padding: 2px 6px; border-radius: 10px; transition: background .15s; animation: cv-mot .5s ease both; }
.cv-mot:hover { background: var(--pale); }
@keyframes cv-mot { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.cv-nuage.mini { gap: 2px 10px; padding: 0; }
.cv-nuage.mini .cv-mot { cursor: default; animation: none; }
.cv-masques { margin-top: 10px; color: var(--gris); }
.cv-masques summary { cursor: pointer; font-weight: 600; }
.cv-menu-mot { position: absolute; z-index: 80; display: grid; gap: 8px; padding: 12px 14px; width: 270px; box-shadow: 0 16px 40px rgba(8,18,70,.4); }
.cv-menu-mot[hidden] { display: none; }
.cv-menu-mot p { margin: 0; color: var(--nuit); }
.cv-menu-mot label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }

/* avant → après */
.cv-histo { padding: 14px 20px; }
.cv-histo[hidden] { display: none; }
.cv-histo h3 { margin: 0 0 10px; color: var(--nuit); display: flex; align-items: center; gap: 12px; }
.cv-histo-liste { display: flex; gap: 12px; align-items: center; overflow-x: auto; }
.cv-histo-item { flex: 1 1 0; min-width: 220px; padding: 10px 12px; border-radius: 14px; background: var(--pale); }
.cv-histo-item.courante { box-shadow: 0 0 0 3px var(--electrique); background: #fff; }
.cv-histo-item p { margin: 0 0 6px; color: var(--nuit); font-size: .9rem; }
.cv-resume { font-weight: 700; margin: 6px 0 0 !important; }
.cv-fleche { font-size: 1.8rem; color: var(--electrique); font-weight: 700; }
.cv-ecart { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 700; background: var(--pale); color: var(--royal); }
.cv-ecart.hausse { background: #d9f5ec; color: #0b7a5a; }
.cv-ecart.baisse { background: #ffe8d6; color: #a15c00; }

/* commentaire de relance, question express */
.cv-relance, .cv-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(6, 20, 50, .72); padding: 20px; }
.cv-relance[hidden], .cv-modal[hidden] { display: none; }
.cv-relance .carte-blanche { max-width: 900px; text-align: center; padding: 34px 40px; }
.cv-relance p { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 700; color: var(--nuit); margin: 0 0 22px; line-height: 1.2; }
.cv-express { width: min(640px, 100%); display: grid; gap: 10px; padding: 22px 24px; max-height: 92vh; overflow: auto; }
.cv-express h2 { margin: 0; }

@media (max-width: 760px) {
  .cv-barre { grid-template-columns: 1fr 70px; }
  .cv-barre .cv-piste { grid-column: 1 / -1; grid-row: 2; }
  .cv-echelle { grid-template-columns: 1fr; grid-template-areas: "moy" "hist" "bornes"; }
}
@media (prefers-reduced-motion: reduce) { .cv-mot, .cv-compte.bond strong { animation: none; } .cv-rempli, .cv-col-b, .cv-emoji { transition: none; } }

/* Téléphone */
.cv-logo-mobile { max-width: 170px; }
.cv-enonce-m { font-size: 1.4rem; margin: 2px 0 6px; color: var(--nuit); line-height: 1.2; }
.cv-consigne-m { margin: 0 0 12px; font-weight: 600; }
.cv-choix-m { display: grid; gap: 10px; margin-bottom: 14px; }
.cv-opt { font: inherit; font-weight: 700; font-size: 1.1rem; text-align: left; padding: 16px 18px; border-radius: 16px; border: 3px solid var(--bord, #dbe6f7);
  background: #fff; color: var(--nuit); cursor: pointer; min-height: 58px; }
.cv-opt.choisi { border-color: var(--electrique); background: var(--pale); box-shadow: 0 0 0 3px rgba(0,103,244,.18); }
.cv-opt.choisi::before { content: '✔ '; color: var(--electrique); }
.cv-notes-m { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cv-note { font: inherit; font-weight: 700; font-size: 1.5rem; aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--bord, #dbe6f7); background: #fff; color: var(--nuit); cursor: pointer; }
.cv-note.choisi { border-color: var(--electrique); background: var(--electrique); color: #fff; transform: scale(1.06); }
.cv-bornes-m { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--gris); font-weight: 600; font-size: .85rem; }
.cv-humeurs-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.cv-hum { font: inherit; display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: 18px; border: 3px solid var(--bord, #dbe6f7); background: #fff; cursor: pointer; }
.cv-hum span { font-size: 2.6rem; line-height: 1.1; }
.cv-hum small { font-weight: 600; color: var(--gris); font-size: .78rem; text-align: center; }
.cv-hum.choisi { border-color: var(--electrique); background: var(--pale); transform: scale(1.05); }
.cv-mots-m { display: grid; gap: 10px; }
.cv-mots-m input { font-size: 1.2rem; padding: 14px; }
.cv-attente-m { font-size: 1.25rem; font-weight: 700; text-align: center; color: var(--royal); margin: 18px 0 8px; }

/* Fiche session, bilan, éditeur */
.cv-session h2 small { font-weight: 600; font-size: .8rem; }
.cv-occ { margin: 0 0 4px; }
.cv-occ small { display: block; }
.cv-avant-apres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.cv-avant-apres > span:not(.cv-fleche):not(.cv-ecart) { display: grid; padding: 6px 10px; border-radius: 10px; background: var(--pale); font-weight: 600; }
.cv-avant-apres small { color: var(--gris); font-weight: 600; }
.cv-avant-apres .cv-fleche { font-size: 1.3rem; }
.cv-acquis { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--electrique); background: var(--pale); border-radius: 0 10px 10px 0; }
.cv-ed-reglages { display: grid; gap: 8px; margin: 8px 0; }
.cv-ed-reglages .ligne { flex-wrap: wrap; align-items: center; }
.cv-ed-court input { width: 70px; }
/* Class Vote : ajustements (grille de notes sur petit écran, avant → après tenant dans l'écran) */
.cv-note { min-width: 0; width: 100%; padding: 0; }
.cv-notes-m { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cv-commandes { position: sticky; bottom: 10px; z-index: 20; }
.cv-scene:has(.cv-histo:not([hidden])) .cv-zone { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
.cv-scene:has(.cv-histo:not([hidden])) .cv-hist { height: 24vh; min-height: 140px; }
.cv-scene:has(.cv-histo:not([hidden])) .cv-moyenne strong { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.cv-scene:has(.cv-histo:not([hidden])) .cv-emoji { font-size: calc(clamp(3rem, 6vw, 5.5rem) * var(--k, 1)); }
.cv-histo-mini { height: 54px; }

/* ---------- Accueil des participants : les activités sur une ligne (jeux | outils pédagogiques) ---------- */
.acc-activites { margin: 0 auto; }
.acc-activites > h2 { text-align: center; }
.acc-ligne { display: grid; grid-template-columns: 4fr 2fr; gap: 22px; align-items: stretch; }
.acc-groupe { display: flex; flex-direction: column; min-width: 0; }
.acc-groupe-outils { padding-left: 22px; border-left: 2px dashed rgba(255,255,255,.45); }
.acc-groupe-titre { margin: 0 0 10px; color: #fff; font-weight: 700; font-size: 1.1rem; }
.acc-groupe-titre small { display: block; font-weight: 600; opacity: .8; font-size: .85rem; }
.acc-mini-grille { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; flex: 1; }
.acc-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px 14px; color: var(--nuit); }
.acc-mini-logo { height: 96px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 20, 80, .3)); }
.acc-mini-icone { font-size: 3rem; line-height: 96px; }
.acc-mini h3 { margin: 4px 0 0; font-size: 1.1rem; }
.acc-mini p { margin: 0; font-size: .85rem; color: var(--gris); font-weight: 600; line-height: 1.25; }
@media (max-width: 1100px) {
  .acc-ligne { grid-template-columns: minmax(0, 1fr); }
  .acc-groupe-outils { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .acc-mini-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-mini-logo { height: 76px; }
}
.acc-activites > .acc-sous { text-align: center; }

/* Bandeau « Connexion perturbée » des écrans de jeu (assets/sondage.js) */
.fc-connexion { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999;
  background: #fff4d6; color: #7a4b00; border: 1px solid #f0c75e; border-radius: 999px;
  padding: 8px 16px; font-weight: 600; font-size: .95rem; box-shadow: 0 4px 14px rgba(0,0,0,.15);
  max-width: calc(100vw - 32px); text-align: center; }
.fc-connexion[hidden] { display: none; }

/* « C'est vous ? » : les deux réponses ont le même poids, pour éviter de prendre la place d'un autre par réflexe */
.doublon-joueur form + form { margin-top: 10px; }

/* Liste ou question affichée, chrono pas encore lancé par le formateur : on lit, on ne répond pas encore */
.verrouillees { opacity: .55; pointer-events: none; filter: saturate(.6); }
.oc-auto.ko { color: #b3262b; font-weight: 700; }