/* =========================================================
   AVATAR BATTLE — Habillage
   Sombre, coloré, lisible de loin, tactile.
   ========================================================= */

:root{
  --fond:#10101c;
  --cyan:#00e5ff;
  --violet:#7950ff;
  --rose:#ff3cac;
  --vert:#00ffb3;
  --orange:#ffab2e;
  --rouge:#ff5470;
  --carte:rgba(255,255,255,.07);
  --bord:rgba(255,255,255,.16);
  --texte:#ffffff;
  --texte-doux:#c5c5d6;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

.ab-fond{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, #5d2cff 0%, transparent 38%),
    radial-gradient(circle at bottom right, #00e5ff 0%, transparent 32%),
    var(--fond);
  color:var(--texte);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}

.ab-page{ max-width:1180px; margin:0 auto; padding:24px 18px 60px; }
.ab-page-etroite{ max-width:720px; }

/* ---------- En-tête ---------- */
.ab-entete{ text-align:center; margin-bottom:26px; }
.ab-logo{
  font-size:13px; letter-spacing:4px; text-transform:uppercase;
  color:var(--cyan); font-weight:900; margin-bottom:8px;
}
.ab-entete h1{
  margin:0 0 6px;
  font-size:clamp(28px,5vw,52px);
  font-weight:900; text-transform:uppercase; line-height:1;
  background:linear-gradient(90deg,#fff,var(--cyan),var(--rose));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ab-sous-titre{ color:var(--texte-doux); margin:0; font-size:17px; }

/* ---------- Cartes ---------- */
.ab-carte{
  background:var(--carte);
  border:1px solid var(--bord);
  border-radius:24px;
  padding:26px;
  margin-bottom:20px;
  backdrop-filter:blur(12px);
}
.ab-carte h2{ margin:0 0 12px; font-size:21px; }
.ab-carte p{ color:var(--texte-doux); }
.ab-carte-fin{ border-color:rgba(0,255,179,.4); background:rgba(0,255,179,.08); }

/* ---------- Boutons ---------- */
.ab-bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:2px solid var(--bord);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:18px;
  padding:18px 26px;
  font-size:18px; font-weight:800;
  cursor:pointer; text-decoration:none;
  font-family:inherit;
  transition:transform .12s ease, background .15s ease;
}
.ab-bouton:hover{ background:rgba(255,255,255,.14); }
.ab-bouton:active{ transform:scale(.97); }
.ab-bouton:disabled{ opacity:.4; cursor:not-allowed; }
.ab-bouton-principal{
  background:linear-gradient(90deg,var(--violet),var(--rose));
  border-color:transparent;
  box-shadow:0 12px 30px rgba(121,80,255,.35);
}
.ab-bouton-vert{ background:linear-gradient(90deg,#00b37a,var(--vert)); border-color:transparent; color:#04231a; }
.ab-bouton-rouge{ background:rgba(255,84,112,.18); border-color:rgba(255,84,112,.5); color:#ffc2cd; }
.ab-bouton-large{ width:100%; font-size:20px; padding:22px; }
.ab-barre-boutons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.ab-barre-boutons .ab-bouton{ flex:1; min-width:150px; }

/* ---------- Formulaires ---------- */
.ab-formulaire label{ display:block; margin-bottom:16px; font-weight:700; font-size:15px; }
.ab-formulaire input, .ab-formulaire textarea, .ab-formulaire select{
  display:block; width:100%; margin-top:8px;
  background:rgba(0,0,0,.35);
  border:2px solid var(--bord);
  border-radius:14px;
  padding:15px 16px;
  color:#fff; font-size:17px; font-family:inherit;
  outline:none;
}
.ab-formulaire input:focus, .ab-formulaire textarea:focus{ border-color:var(--cyan); }
.ab-formulaire textarea{ min-height:150px; resize:vertical; line-height:1.6; }

/* ---------- Messages ---------- */
.ab-message{ border-radius:16px; padding:16px 20px; margin-bottom:18px; font-weight:600; }
.ab-ok{ background:rgba(0,255,179,.14); border:1px solid rgba(0,255,179,.4); color:#a6ffe4; }
.ab-erreur{ background:rgba(255,84,112,.14); border:1px solid rgba(255,84,112,.45); color:#ffc2cd; }
.ab-attention{ background:rgba(255,171,46,.14); border:1px solid rgba(255,171,46,.45); color:#ffdca6; }
.ab-ok-texte{ color:#a6ffe4; font-weight:700; }
.ab-attente{ color:var(--texte-doux); font-style:italic; }
.ab-cache{ display:none !important; }

/* ---------- Étapes d'installation ---------- */
.ab-etapes{ display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.ab-etape{
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:800;
  background:rgba(255,255,255,.08); color:var(--texte-doux);
}
.ab-etape.faite{ background:linear-gradient(90deg,var(--violet),var(--rose)); color:#fff; }
.ab-liens{ line-height:2; }
.ab-liens a{ color:var(--cyan); }

/* ---------- Code de session ----------
   Chaque chiffre dans sa propre case : impossible de couper le code,
   quelle que soit la largeur de l'écran ou le nombre de chiffres. */
.ab-code{
  display:flex; justify-content:center; align-items:stretch;
  gap:6px;
  flex-wrap:nowrap;          /* JAMAIS de retour à la ligne : les 4 chiffres
                                doivent rester côte à côte, sinon le code
                                devient illisible au fond de la classe. */
  margin:10px 0 16px;
  width:100%;
}
.ab-chiffre{
  display:flex; align-items:center; justify-content:center;
  /* Chaque case prend le quart de la place disponible et rétrécit
     si la colonne est étroite. min-width:0 est indispensable :
     sans lui, un élément flex refuse de passer sous sa taille naturelle. */
  flex:1 1 0;
  min-width:0;
  max-width:76px;
  aspect-ratio:3 / 4;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.22);
  /* Plafond volontairement bas : quatre cases + trois espaces tiennent
     toujours dans la colonne, même sur un petit portable. */
  font-size:clamp(24px,5vw,46px);
  font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums;
  background-image:linear-gradient(160deg,var(--cyan),var(--rose));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.ab-code-label{ text-align:center; color:var(--texte-doux); letter-spacing:3px; font-weight:800; font-size:14px; }
.ab-code-aide{ text-align:center; color:var(--texte-doux); font-size:14px; margin:0 0 4px; }

/* ---------- Barre de navigation administrateur ---------- */
.ab-nav{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background:rgba(0,0,0,.30);
  border:1px solid var(--bord);
  border-radius:18px;
  padding:12px 14px;
  margin-bottom:22px;
  position:sticky; top:10px; z-index:50;
  backdrop-filter:blur(10px);
}
.ab-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:12px;
  color:#fff; text-decoration:none; font-weight:800; font-size:15px;
  background:rgba(255,255,255,.07); border:1px solid transparent;
}
.ab-nav a:hover{ background:rgba(255,255,255,.15); }
.ab-nav a.actif{ background:linear-gradient(90deg,var(--violet),var(--rose)); }
.ab-nav a.ab-nav-retour{ border-color:var(--bord); }
.ab-nav .ab-nav-espace{ flex:1; }
@media (max-width:700px){
  .ab-nav{ position:static; }
  .ab-nav a{ flex:1; justify-content:center; font-size:14px; padding:12px 8px; }
  .ab-nav .ab-nav-espace{ display:none; }
}

/* ---------- Grille animateur ---------- */
.ab-colonnes{ display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .ab-colonnes{ grid-template-columns:1fr; } }

.ab-compteur{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px;
}
.ab-pastille{
  background:rgba(255,255,255,.08); border:1px solid var(--bord);
  border-radius:16px; padding:12px 18px; text-align:center; min-width:110px;
}
.ab-pastille .valeur{ font-size:26px; font-weight:900; display:block; }
.ab-pastille .titre{ font-size:11px; letter-spacing:1.5px; color:var(--texte-doux); text-transform:uppercase; font-weight:800; }

/* ---------- Question ---------- */
.ab-question{
  font-size:clamp(22px,3.6vw,40px);
  font-weight:900; line-height:1.2; margin:0 0 22px;
}
.ab-choix{ display:grid; gap:14px; }
.ab-choix.deux{ grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .ab-choix.deux{ grid-template-columns:1fr; } }

.ab-option{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.07);
  border:2px solid var(--bord);
  border-radius:20px;
  padding:20px;
  font-size:19px; font-weight:700; color:#fff;
  cursor:pointer; text-align:left; width:100%;
  font-family:inherit;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.ab-option:active{ transform:scale(.97); }
.ab-option.choisie{ border-color:var(--cyan); background:rgba(0,229,255,.16); }
.ab-option.gagnante{ border-color:var(--vert); background:rgba(0,255,179,.16); }
.ab-option.fausse{ border-color:rgba(255,84,112,.6); background:rgba(255,84,112,.12); }
.ab-option:disabled{ cursor:default; }

/* Barre de résultat dans l'option (écran animateur) */
.ab-option .ab-jauge{
  flex:1; height:12px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin:0 12px;
}
.ab-option .ab-jauge i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--rose)); }
.ab-option .ab-score{ font-variant-numeric:tabular-nums; font-weight:900; min-width:92px; text-align:right; }

/* ---------- Vies ---------- */
.ab-vies{ font-size:30px; letter-spacing:6px; text-align:center; }
.ab-vies .vide{ opacity:.25; }

/* ---------- Malus ---------- */
.ab-malus{
  border-radius:20px; padding:22px; text-align:center;
  background:linear-gradient(90deg, rgba(255,84,112,.2), rgba(121,80,255,.2));
  border:1px solid rgba(255,84,112,.45);
  animation:ab-pulse .6s ease;
}
.ab-malus .nom{ font-size:clamp(24px,4vw,40px); font-weight:900; letter-spacing:2px; }
@keyframes ab-pulse{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }

.ab-gagnant{
  text-align:center; padding:16px; border-radius:18px;
  background:rgba(0,255,179,.14); border:1px solid rgba(0,255,179,.4);
  font-weight:900; font-size:20px; margin-top:16px;
  animation:ab-pulse .4s ease;
}

/* ---------- QR ---------- */
.ab-qr{ background:#fff; padding:14px; border-radius:20px; display:inline-block; }
.ab-qr canvas, .ab-qr img{ display:block; }

/* ---------- Galerie ---------- */
.ab-galerie{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.ab-vignette{
  background:var(--carte); border:1px solid var(--bord); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column;
}
.ab-vignette img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#22223b;
  cursor:zoom-in; transition:opacity .15s ease;
}
.ab-vignette img:hover{ opacity:.88; }
.ab-vignette .loupe{
  position:absolute; right:12px; top:12px;
  background:rgba(10,10,20,.72); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:6px 10px; font-size:13px; font-weight:800;
  pointer-events:none;
}
.ab-vignette .cadre-image{ position:relative; }

/* ---------- Image en grand (lightbox) ---------- */
.ab-lightbox{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,8,16,.92);
  padding:24px;
  backdrop-filter:blur(6px);
}
.ab-lightbox.ouverte{ display:flex; }
.ab-lightbox figure{
  margin:0; max-width:min(1100px, 92vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ab-lightbox img{
  max-width:100%; max-height:78vh;
  width:auto; height:auto;          /* proportions conservées */
  object-fit:contain;
  border-radius:22px;
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  background:#15152a;
}
.ab-lightbox figcaption{
  text-align:center; color:var(--texte-doux); font-size:16px; font-weight:700;
}
.ab-lightbox figcaption strong{ color:#fff; display:block; font-size:20px; margin-bottom:2px; }
.ab-lightbox .ab-bouton{ padding:14px 24px; font-size:17px; }
.ab-lightbox-fermer{
  position:absolute; top:18px; right:20px;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3);
  color:#fff; font-size:26px; font-weight:900; line-height:1;
  cursor:pointer; font-family:inherit;
}
.ab-lightbox-fermer:hover{ background:rgba(255,255,255,.22); }
@media (max-width:640px){
  .ab-lightbox{ padding:12px; }
  .ab-lightbox figure{ max-width:94vw; }
  .ab-lightbox img{ max-height:68vh; }
  .ab-lightbox-fermer{ top:10px; right:12px; width:46px; height:46px; font-size:22px; }
}

/* ---------- Bouton vidéo ---------- */
.ab-bouton-video{
  background:linear-gradient(90deg,#ff2d55,#ff7a18);
  border-color:transparent; color:#fff;
  box-shadow:0 12px 30px rgba(255,45,85,.32);
}
.ab-bouton-video:hover{ filter:brightness(1.08); background:linear-gradient(90deg,#ff2d55,#ff7a18); }
.ab-video-texte{
  color:var(--texte-doux); font-size:15px; text-align:center; margin:16px 0 10px;
}
.ab-vignette .infos{ padding:16px; flex:1; }
.ab-vignette h3{ margin:0 0 4px; font-size:19px; }
.ab-vignette .meta{ color:var(--texte-doux); font-size:14px; }
.ab-vignette .pied{ padding:0 16px 16px; }
.ab-coeur{
  width:100%; border-radius:14px; padding:14px; font-size:17px; font-weight:800;
  background:rgba(255,60,172,.16); border:2px solid rgba(255,60,172,.45); color:#ff9ed6;
  cursor:pointer; font-family:inherit;
}
.ab-coeur:disabled{ opacity:.55; cursor:default; }

/* Actions secondaires de la carte : voir en grand / télécharger */
.ab-actions-mini{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ab-mini{
  flex:1; min-width:130px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 10px; border-radius:13px;
  background:rgba(255,255,255,.07); border:2px solid var(--bord);
  color:#fff; font-size:15px; font-weight:800; font-family:inherit;
  text-decoration:none; cursor:pointer; text-align:center;
}
.ab-mini:hover{ background:rgba(255,255,255,.15); }
.ab-mini:active{ transform:scale(.97); }
@media (max-width:420px){
  .ab-actions-mini{ flex-direction:column; }
  .ab-mini{ width:100%; }
}

/* Effet au survol de la vignette */
.ab-vignette .cadre-image{ position:relative; overflow:hidden; cursor:zoom-in; }
.ab-vignette .cadre-image img{ transition:transform .25s ease; }
.ab-vignette .cadre-image:hover img{ transform:scale(1.04); }

/* ---------- Tableau admin ---------- */
.ab-tableau{ width:100%; border-collapse:collapse; font-size:15px; }
.ab-tableau th, .ab-tableau td{ padding:12px 10px; border-bottom:1px solid var(--bord); text-align:left; }
.ab-tableau th{ color:var(--texte-doux); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.ab-tableau img{ width:56px; height:56px; object-fit:cover; border-radius:12px; }

/* ---------- Divers ---------- */
/* =========================================================
   AJOUT — CHOIX DU NIVEAU À LA CRÉATION DE PARTIE
   ========================================================= */
.ab-niveaux{ margin:6px 0 4px; }
.ab-niveaux > .ab-petit{
  display:block; margin-bottom:9px;
  text-transform:uppercase; letter-spacing:1.5px; font-weight:700;
}
.ab-niveaux-choix{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.ab-niveau{
  display:flex; flex-direction:column; gap:4px; text-align:left;
  padding:15px 16px; border-radius:14px; cursor:pointer;
  border:2px solid var(--bord); background:transparent;
  color:var(--texte-doux); font-family:inherit;
  transition:border-color .15s, background .15s, color .15s;
}
.ab-niveau b{ font-size:16px; }
.ab-niveau span{ font-size:12px; opacity:.8; line-height:1.4; }
.ab-niveau:hover{ border-color:var(--texte-doux); }
.ab-niveau.actif{
  border-color:var(--cyan); color:var(--cyan);
  background:rgba(0,229,255,.10);
}
@media (max-width:420px){
  .ab-niveaux-choix{ grid-template-columns:1fr; }
}

/* =========================================================
   AJOUT — RÉCAPITULATIF SUR LE TÉLÉPHONE DE L'ÉLÈVE
   ========================================================= */
.ab-recap-eleve{
  width:100%; border-collapse:collapse; margin-top:10px;
}
.ab-recap-eleve th{
  text-align:left; padding:11px 0;
  font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--texte-doux); font-weight:800;
  width:44%; vertical-align:top;
  border-bottom:1px solid var(--bord);
}
.ab-recap-eleve td{
  padding:11px 0 11px 12px;
  font-size:16px; font-weight:600;
  border-bottom:1px solid var(--bord);
}
.ab-recap-eleve tr:last-child th,
.ab-recap-eleve tr:last-child td{ border-bottom:none; }

/* =========================================================
   AJOUT — L'ÉTAPE D'OBSERVATION
   Cases à cocher et résultat pédagogique.
   ========================================================= */
.ab-coches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px; margin-top:10px;
}
.ab-coche{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:12px;
  border:2px solid var(--bord); background:rgba(255,255,255,.03);
  cursor:pointer; min-height:54px; font-size:15px;
  transition:border-color .12s ease, background .12s ease;
}
.ab-coche:hover{ border-color:var(--cyan); }
.ab-coche input{
  width:22px; height:22px; flex:0 0 auto; cursor:pointer;
  accent-color:var(--vert);
}
.ab-coche input:checked + span{ font-weight:700; }
.ab-coche-aucun{
  border-style:dashed; margin-bottom:14px;
  font-weight:800; font-size:16px;
}

.ab-ligne-obs{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--bord);
  font-size:16px; line-height:1.5;
}
.ab-ligne-obs:last-child{ border-bottom:none; }
.ab-ligne-obs .ic{
  font-weight:900; font-size:19px;
  width:26px; flex:0 0 auto; text-align:center;
}
.ab-ligne-obs.ok .ic{     color:var(--vert); }
.ab-ligne-obs.rate .ic{   color:var(--rouge); }
.ab-ligne-obs.neutre .ic{ color:var(--texte-doux); }

.ab-retour{ display:inline-block; margin-bottom:18px; color:var(--texte-doux); text-decoration:none; font-weight:700; }
.ab-retour:hover{ color:#fff; }
.ab-prompt{
  background:rgba(0,0,0,.35); border:1px solid var(--bord); border-radius:18px;
  padding:20px; white-space:pre-wrap; font-size:16px; line-height:1.7; max-height:40vh; overflow:auto;
}
.ab-centre{ text-align:center; }
.ab-petit{ font-size:14px; color:var(--texte-doux); }