/* =========================================================
   AVATAR BATTLE — MODE SOLO
   ---------------------------------------------------------
   Ce fichier vit DANS le module. Supprimer avatar-battle-solo/
   retire le jeu entièrement, sans laisser de fichier orphelin
   dans les assets partagés du site.

   Toutes les règles sont sous .sb-app ou préfixées .sb- :
   ce fichier ne peut pas déborder sur le reste du site.
   Il n'est chargé que sur les pages du mode Solo.

   Il se pose PAR-DESSUS academy-base.css + academy-creation.css
   et n'en redéfinit aucune variable.

   Direction : urban / hip-hop / gaming.
   Noir, vert acide, touches orange.
   ========================================================= */

.sb-app{
  --sb-vert:   #9BE34A;
  --sb-orange: #FF7A18;
  --sb-rouge:  #E24B4A;
  --sb-or:     #FFD400;
  --sb-nuit:   #0D0D0D;
  --sb-carte:  #171717;
  --sb-bord:   #2B2B2B;
}

/* Fond du jeu : plus sombre que le reste du site, avec une
   trame très légère. C'est ce qui fait « on entre dans le jeu ». */
.sb-fond{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(155,227,74,.09), transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(255,122,24,.07), transparent 60%),
    var(--sb-nuit);
  min-height:100vh;
}

/* Titres du jeu : très gros, très serrés, italiques. */
.sb-titre{
  font-family:var(--ac-titre);
  font-weight:900;
  font-style:italic;
  letter-spacing:-1.5px;
  line-height:.95;
  text-transform:uppercase;
  margin:0;
}
.sb-titre .acc{ color:var(--sb-vert); }
.sb-xxl{ font-size:clamp(38px,8vw,88px); }
.sb-xl { font-size:clamp(28px,5vw,52px); }

.sb-kicker{
  display:inline-block;
  font-family:var(--ac-titre);
  font-weight:800; font-size:11px; letter-spacing:4px;
  text-transform:uppercase;
  color:var(--sb-nuit); background:var(--sb-vert);
  padding:6px 14px; border-radius:4px;
  transform:skewX(-8deg);
}

/* ---------------------------------------------------------
   PORTES D'ENTRÉE
   --------------------------------------------------------- */
.sb-portes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:34px 0;
}
@media (max-width:900px){ .sb-portes{ grid-template-columns:1fr; } }

.sb-porte{
  position:relative;
  display:flex; flex-direction:column;
  min-height:230px;
  padding:26px 24px;
  border-radius:18px;
  background:var(--sb-carte);
  border:2px solid var(--sb-bord);
  text-decoration:none; color:#F7F7F7;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.sb-porte:hover{ transform:translateY(-5px); border-color:var(--sb-vert); }
.sb-porte .ico{ font-size:44px; line-height:1; margin-bottom:auto; }
.sb-porte h3{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  text-transform:uppercase; font-size:24px; letter-spacing:-.5px;
  margin:16px 0 6px;
}
.sb-porte p{ font-size:14px; color:#A8A8A8; margin:0; }
.sb-porte .go{
  margin-top:16px; font-weight:800; font-size:13px;
  letter-spacing:2px; color:var(--sb-vert);
}
.sb-porte.orange:hover{ border-color:var(--sb-orange); }
.sb-porte.orange .go{ color:var(--sb-orange); }

/* Numéro géant en filigrane */
.sb-porte::after{
  content:attr(data-num);
  position:absolute; right:-8px; bottom:-34px;
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:130px; color:rgba(255,255,255,.035);
  pointer-events:none;
}

/* ---------------------------------------------------------
   BATTLE CARD
   --------------------------------------------------------- */
.sb-card{
  width:100%; max-width:340px;
  background:linear-gradient(160deg,#1E1E1E,#121212);
  border:2px solid var(--sb-bord);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.sb-card-haut{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--sb-bord);
}
.sb-card-disc{
  font-family:var(--ac-titre); font-weight:800; font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
}
.sb-card-score{
  margin-left:auto;
  font-family:var(--ac-titre); font-weight:900; font-size:22px;
  color:var(--sb-or); font-style:italic;
}
.sb-card-img{
  position:relative;
  aspect-ratio:1/1;
  background:#0A0A0A;
  overflow:hidden;
}
.sb-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sb-card-img .vide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:64px; opacity:.25;
}
.sb-card-nom{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9));
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(22px,5vw,30px); letter-spacing:-.5px;
  text-transform:uppercase; color:#fff;
}
.sb-card-corps{ padding:14px 16px 18px; }

.sb-tech{
  display:flex; align-items:center; gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--sb-bord);
  font-size:14px;
}
.sb-tech:last-of-type{ border-bottom:none; }
.sb-tech .n{ flex:1; font-weight:600; }
.sb-tech .v{
  font-family:var(--ac-titre); font-weight:900; font-size:17px;
  color:var(--sb-vert); font-style:italic;
}
.sb-tech .t{
  font-size:9px; letter-spacing:1.5px; font-weight:800;
  padding:3px 7px; border-radius:3px;
  background:rgba(255,255,255,.07); color:#8A8A8A;
}
.sb-tech .t.power{ background:rgba(255,122,24,.15); color:var(--sb-orange); }

/* Technique secrète : verrouillée puis révélée */
.sb-secret{
  margin-top:14px; padding:14px;
  border-radius:12px;
  border:1px dashed var(--sb-bord);
  background:rgba(255,255,255,.02);
}
.sb-secret .lbl{
  font-family:var(--ac-titre); font-weight:800; font-size:10px;
  letter-spacing:2.5px; text-transform:uppercase; color:#8A8A8A;
  display:flex; align-items:center; gap:8px;
}
.sb-secret .nom{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:19px; text-transform:uppercase; margin-top:6px;
  color:#5A5A5A;
}
.sb-secret.ok{
  border:1px solid var(--sb-or);
  background:linear-gradient(140deg,rgba(255,212,0,.12),rgba(255,122,24,.06));
}
.sb-secret.ok .lbl{ color:var(--sb-or); }
.sb-secret.ok .nom{ color:var(--sb-or); text-shadow:0 0 18px rgba(255,212,0,.45); }
.sb-secret .desc{ font-size:12px; color:#8A8A8A; margin-top:6px; }

.sb-jauge-secret{
  height:5px; border-radius:99px; background:#2B2B2B;
  margin-top:10px; overflow:hidden;
}
.sb-jauge-secret span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--sb-vert),var(--sb-or));
  transition:width .8s cubic-bezier(.4,0,.2,1);
}

@keyframes sbUnlock{
  0%   { transform:scale(1);    filter:brightness(1); }
  40%  { transform:scale(1.06); filter:brightness(2.2); }
  100% { transform:scale(1);    filter:brightness(1); }
}
.sb-secret.anim{ animation:sbUnlock .9s ease; }

/* ---------------------------------------------------------
   ARÈNE
   --------------------------------------------------------- */
.sb-arene{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 300px;
  gap:20px;
  align-items:start;
  margin:24px 0;
}
@media (max-width:1100px){
  .sb-arene{ grid-template-columns:1fr 1fr; }
  .sb-arene .sb-scene{ grid-column:1 / -1; order:-1; }
}
@media (max-width:700px){
  .sb-arene{ grid-template-columns:1fr; }
  .sb-card{ max-width:none; }
}

.sb-scene{
  position:relative;
  min-height:320px;
  border-radius:20px;
  border:2px solid var(--sb-bord);
  background:
    linear-gradient(180deg,rgba(155,227,74,.06),transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 46px),
    #101010;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:26px 20px; text-align:center;
  overflow:hidden;
}
.sb-manche{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:12px; letter-spacing:4px; color:var(--sb-vert);
}
.sb-vs{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(40px,9vw,84px); letter-spacing:-3px;
  color:#fff; text-shadow:0 0 40px rgba(155,227,74,.35);
  margin:6px 0;
}
.sb-consigne{ color:#A8A8A8; font-size:15px; max-width:34ch; }

/* Ligne de score animée pendant le freestyle */
.sb-flux{ width:100%; max-width:420px; margin-top:18px; text-align:left; }
.sb-flux-l{
  display:flex; align-items:center; gap:12px;
  padding:9px 14px; margin-bottom:6px;
  border-radius:10px; background:rgba(255,255,255,.04);
  font-size:14px;
  opacity:0; transform:translateX(-14px);
  animation:sbEntre .35s ease forwards;
}
@keyframes sbEntre{ to{ opacity:1; transform:none; } }
.sb-flux-l .lbl{ flex:1; font-weight:600; }
.sb-flux-l .val{
  font-family:var(--ac-titre); font-weight:900; font-size:18px; font-style:italic;
}
.sb-flux-l .val.plus{ color:var(--sb-vert); }
.sb-flux-l .val.moins{ color:var(--sb-rouge); }
.sb-flux-l.total{
  background:linear-gradient(90deg,rgba(155,227,74,.16),transparent);
  border:1px solid var(--sb-vert);
  margin-top:10px;
}
.sb-flux-l.total .val{ color:var(--sb-vert); font-size:26px; }

/* ---------------------------------------------------------
   JAUGE GROOVY / CLEAN / HARD — l'éprouvette
   --------------------------------------------------------- */
.sb-eprouvette{
  display:flex; gap:10px; margin:18px 0;
}
.sb-zone{
  flex:1; cursor:pointer;
  border-radius:12px; padding:14px 10px;
  border:2px solid var(--sb-bord);
  background:var(--sb-carte);
  text-align:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.sb-zone:hover{ transform:translateY(-3px); }
.sb-zone .nom{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:15px; letter-spacing:1px;
}
.sb-zone .det{ font-size:11px; color:#8A8A8A; margin-top:4px; line-height:1.35; }
.sb-zone[data-z="groovy"].actif{ border-color:var(--sb-vert);  background:rgba(155,227,74,.10); }
.sb-zone[data-z="clean"].actif { border-color:#7FA8FF;         background:rgba(127,168,255,.10); }
.sb-zone[data-z="hard"].actif  { border-color:var(--sb-orange); background:rgba(255,122,24,.12); }
.sb-zone[data-z="groovy"] .nom{ color:var(--sb-vert); }
.sb-zone[data-z="clean"]  .nom{ color:#7FA8FF; }
.sb-zone[data-z="hard"]   .nom{ color:var(--sb-orange); }

/* Le tube animé */
.sb-tube{
  height:14px; border-radius:99px; overflow:hidden;
  background:#1A1A1A; border:1px solid var(--sb-bord);
  display:flex;
}
.sb-tube i{ display:block; height:100%; transition:flex .5s ease; }
.sb-tube .g{ background:var(--sb-vert);   flex:1; }
.sb-tube .c{ background:#7FA8FF;          flex:1; }
.sb-tube .h{ background:var(--sb-orange); flex:1; }

/* ---------------------------------------------------------
   SÉLECTION DES TECHNIQUES
   --------------------------------------------------------- */
.sb-techs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px; margin:16px 0;
}
.sb-pick{
  position:relative; text-align:left;
  padding:13px 15px; border-radius:12px;
  border:2px solid var(--sb-bord); background:var(--sb-carte);
  color:#F7F7F7; cursor:pointer; min-height:64px;
  font-family:var(--ac-texte);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.sb-pick:hover{ transform:translateY(-2px); }
.sb-pick.choisi{ border-color:var(--sb-vert); background:rgba(155,227,74,.10); }
.sb-pick .n{ font-weight:700; font-size:14px; display:block; }
.sb-pick .d{ font-size:11px; color:#8A8A8A; display:block; margin-top:3px; line-height:1.3; }
.sb-pick .v{
  position:absolute; right:12px; top:11px;
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:17px; color:var(--sb-vert);
}
.sb-pick[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }

.sb-bouton-secret{
  width:100%; margin-top:10px;
  border:2px solid var(--sb-or); background:rgba(255,212,0,.08);
  color:var(--sb-or); border-radius:12px; padding:14px;
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:15px; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer;
}
.sb-bouton-secret.arme{
  background:var(--sb-or); color:var(--sb-nuit);
  box-shadow:0 0 30px rgba(255,212,0,.4);
}
.sb-bouton-secret[disabled]{ opacity:.3; cursor:not-allowed; box-shadow:none; }

/* ---------------------------------------------------------
   RÉSULTAT DE MANCHE ET FIN DE MATCH
   --------------------------------------------------------- */
.sb-verdict{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(30px,7vw,64px); letter-spacing:-2px;
  text-transform:uppercase; text-align:center; margin:10px 0;
}
.sb-verdict.gagne{ color:var(--sb-vert); text-shadow:0 0 40px rgba(155,227,74,.4); }
.sb-verdict.perdu{ color:var(--sb-rouge); }
.sb-verdict.nul  { color:#A8A8A8; }

.sb-recap{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
.sb-recap th{
  font-family:var(--ac-titre); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:#8A8A8A; text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--sb-bord);
}
.sb-recap td{ padding:11px 10px; border-bottom:1px solid var(--sb-bord); }
.sb-recap td.sc{ font-family:var(--ac-titre); font-weight:900; font-style:italic; font-size:19px; }
.sb-recap tr.win td{ background:rgba(155,227,74,.07); }
.sb-recap td.sc.g{ color:var(--sb-vert); }
.sb-recap td.sc.p{ color:var(--sb-rouge); }

/* ---------------------------------------------------------
   QUESTION PÉDAGOGIQUE
   --------------------------------------------------------- */
.sb-question{
  border:2px solid var(--sb-bord); border-radius:16px;
  background:var(--sb-carte); padding:22px; margin:16px 0;
}
.sb-question h3{
  font-family:var(--ac-titre); font-weight:800; font-size:19px;
  margin:0 0 16px; line-height:1.35;
}
.sb-rep{
  display:block; width:100%; text-align:left;
  padding:14px 16px; margin-bottom:8px;
  border:2px solid var(--sb-bord); border-radius:12px;
  background:#101010; color:#F7F7F7;
  font-family:var(--ac-texte); font-size:15px; cursor:pointer;
  min-height:50px;
  transition:border-color .12s ease, background .12s ease;
}
.sb-rep:hover{ border-color:#4A4A4A; }
.sb-rep.choisi{ border-color:var(--sb-vert); }
.sb-rep.juste{ border-color:var(--sb-vert); background:rgba(155,227,74,.12); }
.sb-rep.faux { border-color:var(--sb-rouge); background:rgba(226,75,74,.12); }
.sb-rep[disabled]{ cursor:default; }

.sb-fiche-peda{
  margin-top:16px; padding:18px;
  border-radius:12px; border-left:4px solid var(--sb-vert);
  background:rgba(255,255,255,.03);
}
.sb-fiche-peda.rate{ border-left-color:var(--sb-rouge); }
.sb-fiche-peda .l{
  font-family:var(--ac-titre); font-weight:800; font-size:11px;
  letter-spacing:2px; text-transform:uppercase; color:#8A8A8A;
  margin-bottom:5px;
}
.sb-fiche-peda p{ margin:0 0 12px; font-size:14px; line-height:1.6; }
.sb-fiche-peda p:last-child{ margin-bottom:0; }
.sb-impact{
  display:inline-block; margin-top:6px;
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:20px; color:var(--sb-rouge);
}
.sb-impact.bon{ color:var(--sb-vert); }

/* ---------------------------------------------------------
   GALERIE SOLO
   --------------------------------------------------------- */
.sb-filtres{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; }
.sb-filtre{
  padding:9px 15px; border-radius:99px;
  border:2px solid var(--sb-bord); background:transparent;
  color:#A8A8A8; font-size:13px; font-weight:700; cursor:pointer;
  font-family:var(--ac-texte); min-height:40px;
}
.sb-filtre.actif{ border-color:var(--sb-vert); color:var(--sb-vert); background:rgba(155,227,74,.10); }

.sb-lb{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.94); padding:24px;
  align-items:center; justify-content:center; flex-direction:column; gap:16px;
}
.sb-lb.ouverte{ display:flex; }
.sb-lb img{ max-width:min(92vw,720px); max-height:70vh; border-radius:16px; }
.sb-lb-fermer{
  position:absolute; top:18px; right:18px;
  background:none; border:2px solid var(--sb-bord); color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:22px; cursor:pointer;
}

/* ---------------------------------------------------------
   BARRE DE PROGRESSION DU QUESTIONNAIRE
   --------------------------------------------------------- */
.sb-barre{ margin:18px 0 24px; }
.sb-barre-haut{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--ac-titre); font-weight:800; font-size:12px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--sb-vert); margin-bottom:8px;
}
.sb-barre-haut span:last-child{ color:#8A8A8A; }
.sb-barre-fond{
  height:8px; border-radius:99px; background:#1E1E1E;
  border:1px solid var(--sb-bord); overflow:hidden;
}
.sb-barre-fond span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--sb-vert),var(--sb-or));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   LE GÉNÉRATEUR — prompt à gauche, résultat à droite
   --------------------------------------------------------- */
.sb-gen{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:16px;
}
@media (max-width:820px){ .sb-gen{ grid-template-columns:1fr; } }

.sb-gen-gauche, .sb-gen-droite{
  background:var(--sb-carte);
  border:1px solid var(--sb-bord);
  border-radius:var(--ac-r-bloc);
  padding:20px 22px;
}

.sb-sortie{
  position:relative;
  aspect-ratio:1/1;
  border-radius:14px;
  border:2px dashed var(--sb-bord);
  background:#0D0D0D;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.sb-sortie img{ width:100%; height:100%; object-fit:contain; display:block; }
.sb-sortie-vide{ text-align:center; color:#4A4A4A; }
.sb-sortie-vide span{ font-size:54px; display:block; }
.sb-sortie-vide p{ font-size:13px; margin:8px 0 0; }

.sb-etat{
  margin-top:12px; font-size:14px; line-height:1.6;
  color:#A8A8A8; min-height:22px;
}
.sb-etat.ok{ color:var(--sb-vert); font-weight:600; }
.sb-etat.rate{ color:#FFB4B3; }
.sb-etat small{ color:#8A8A8A; }

.sb-spin{
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--sb-vert);
  border-radius:50%;
  animation:sbSpin .8s linear infinite;
  vertical-align:-2px; margin-right:6px;
}
@keyframes sbSpin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------
   OBSERVATION DES DÉFAUTS
   --------------------------------------------------------- */
.sb-coches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px; margin-top:10px;
}
.sb-coche{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px;
  border:2px solid var(--sb-bord); border-radius:12px;
  background:#111; cursor:pointer; min-height:52px;
  font-size:14px;
  transition:border-color .12s ease, background .12s ease;
}
.sb-coche:hover{ border-color:#4A4A4A; }
.sb-coche input{
  width:20px; height:20px; flex:0 0 auto;
  accent-color:var(--sb-vert); cursor:pointer;
}
.sb-coche:has(input:checked){
  border-color:var(--sb-vert); background:rgba(155,227,74,.10);
}
.sb-coche.sb-aucun{
  border-style:dashed; margin-bottom:14px;
  font-family:var(--ac-titre); font-weight:800; font-size:15px;
}

.sb-ligne-obs{
  display:flex; gap:14px; align-items:flex-start;
  padding:13px 0;
  border-bottom:1px solid var(--sb-bord);
  font-size:15px; line-height:1.5;
}
.sb-ligne-obs:last-child{ border-bottom:none; }
.sb-ligne-obs .ic{
  font-family:var(--ac-titre); font-weight:900; font-size:18px;
  width:24px; flex:0 0 auto; text-align:center;
}
.sb-ligne-obs.ok .ic{     color:var(--sb-vert); }
.sb-ligne-obs.rate .ic{   color:var(--sb-rouge); }
.sb-ligne-obs.neutre .ic{ color:#5A5A5A; }

/* Comparaison avant / après */
.sb-avant-apres{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;
}
@media (max-width:620px){ .sb-avant-apres{ grid-template-columns:1fr; } }
.sb-aa{
  border:1px solid var(--sb-bord); border-radius:14px;
  overflow:hidden; background:#0D0D0D;
}
.sb-aa .lbl{
  padding:10px 14px; font-family:var(--ac-titre); font-weight:800;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid var(--sb-bord);
}
.sb-aa.avant .lbl{ color:var(--sb-rouge); }
.sb-aa.apres .lbl{ color:var(--sb-vert); }
.sb-aa img{ width:100%; display:block; aspect-ratio:1/1; object-fit:cover; }

/* ---------------------------------------------------------
   BLOC DÉPLIABLE
   --------------------------------------------------------- */
.sb-details{ margin-top:10px; }
.sb-details summary{
  cursor:pointer; list-style:none;
  font-family:var(--ac-titre); font-weight:800; font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--sb-vert); padding:10px 0;
  display:flex; align-items:center; gap:8px;
}
.sb-details summary::-webkit-details-marker{ display:none; }
.sb-details summary::before{ content:'▸'; transition:transform .2s ease; }
.sb-details[open] summary::before{ transform:rotate(90deg); }
.sb-details summary:hover{ color:var(--sb-or); }
.sb-app textarea[readonly]{
  background:#101010; color:#C8C8C8;
  border:1px solid var(--sb-bord); border-radius:12px;
  padding:14px; width:100%; resize:vertical;
  font-family:var(--ac-texte);
}

/* ---------------------------------------------------------
   MODE 1 CONTRE 1
   --------------------------------------------------------- */

/* Le code de défi : un chiffre par case, jamais tronqué */
.sb-code{
  display:flex; justify-content:center; gap:8px;
  flex-wrap:nowrap;          /* les 6 caractères restent sur une seule ligne */
  max-width:520px; margin:0 auto; width:100%;
}
.sb-chiffre{
  display:inline-flex; align-items:center; justify-content:center;
  flex:1 1 0; min-width:0; max-width:74px;
  aspect-ratio:3 / 4;
  border-radius:14px;
  background:var(--sb-carte); border:2px solid var(--sb-vert);
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(20px,4.4vw,40px); color:var(--sb-vert);
  box-shadow:0 0 28px rgba(155,227,74,.22);
}

.sb-duel-cartes{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:18px; align-items:center; margin:24px 0;
}
@media (max-width:820px){
  .sb-duel-cartes{ grid-template-columns:1fr; }
  .sb-duel-cartes .sb-card{ max-width:none; }
}
.sb-vs-milieu{ text-align:center; min-width:120px; }

.sb-manches-gagnees{
  margin-top:12px; text-align:center;
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:26px; color:#5A5A5A;
}

/* Les trois points d'attente */
.sb-points{
  display:flex; justify-content:center; gap:8px; margin-top:14px;
}
.sb-points span{
  width:10px; height:10px; border-radius:50%;
  background:var(--sb-orange); opacity:.3;
  animation:sbPoint 1.4s infinite;
}
.sb-points span:nth-child(2){ animation-delay:.2s; }
.sb-points span:nth-child(3){ animation-delay:.4s; }
@keyframes sbPoint{
  0%,100%{ opacity:.25; transform:translateY(0); }
  40%    { opacity:1;   transform:translateY(-6px); }
}

/* ---------------------------------------------------------
   LA CARTE PREND VIE
   ---------------------------------------------------------
   La signature visuelle du jeu : la carte tremble, s'illumine,
   puis l'avatar en sort et entre dans l'arène.

   Tout se fait en CSS. Aucune image supplémentaire à charger,
   aucun fichier vidéo : ça démarre instantanément, même sur
   un téléphone et un wifi d'école.
   --------------------------------------------------------- */
.sb-eveil{
  position:fixed; inset:0; z-index:400;
  background:radial-gradient(circle at 50% 45%, #14200c 0%, #060606 70%);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:20px;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
}
.sb-eveil.actif{ opacity:1; pointer-events:auto; }

.sb-eveil-carte{
  position:relative;
  width:min(300px,74vw);
  transform-origin:center center;
}
.sb-eveil-carte .sb-card{ max-width:none; margin:0; }

/* 1 · le tremblement */
@keyframes sbTremble{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  10%    { transform:translate(-3px,2px)  rotate(-.8deg); }
  20%    { transform:translate(3px,-2px)  rotate(.8deg); }
  30%    { transform:translate(-4px,-1px) rotate(-1deg); }
  40%    { transform:translate(4px,1px)   rotate(1deg); }
  50%    { transform:translate(-5px,2px)  rotate(-1.2deg); }
  60%    { transform:translate(5px,-2px)  rotate(1.2deg); }
  70%    { transform:translate(-4px,1px)  rotate(-1deg); }
  80%    { transform:translate(4px,-1px)  rotate(1deg); }
  90%    { transform:translate(-2px,1px)  rotate(-.5deg); }
}
.sb-eveil-carte.tremble{ animation:sbTremble .9s ease-in-out; }

/* 2 · la lumière qui monte */
.sb-halo{
  position:absolute; inset:-40px;
  border-radius:40px;
  background:radial-gradient(circle, rgba(155,227,74,.55) 0%, transparent 70%);
  opacity:0; pointer-events:none;
}
@keyframes sbHalo{
  0%  { opacity:0;   transform:scale(.7); }
  60% { opacity:1;   transform:scale(1.15); }
  100%{ opacity:0;   transform:scale(1.7); }
}
.sb-halo.actif{ animation:sbHalo 1.4s ease-out forwards; }

/* 3 · le flash */
.sb-flash{
  position:fixed; inset:0; background:#fff;
  opacity:0; pointer-events:none; z-index:401;
}
@keyframes sbFlash{
  0%  { opacity:0; }
  12% { opacity:.95; }
  100%{ opacity:0; }
}
.sb-flash.actif{ animation:sbFlash .55s ease-out forwards; }

/* 4 · l'avatar sort de la carte */
.sb-sortie-avatar{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.sb-sortie-avatar img,
.sb-sortie-avatar .emoji{
  width:76%; border-radius:18px;
  opacity:0; transform:scale(.9);
}
.sb-sortie-avatar .emoji{
  font-size:clamp(70px,20vw,130px);
  display:flex; align-items:center; justify-content:center;
  width:auto;
}
@keyframes sbSortie{
  0%  { opacity:0; transform:scale(.9)  translateY(0)     rotate(0deg); filter:brightness(1); }
  35% { opacity:1; transform:scale(1.05) translateY(-18px) rotate(-2deg); filter:brightness(1.5); }
  70% { opacity:1; transform:scale(1.35) translateY(-52px) rotate(2deg);  filter:brightness(1.15); }
  100%{ opacity:1; transform:scale(1.5)  translateY(-70px) rotate(0deg);  filter:brightness(1); }
}
.sb-sortie-avatar.actif img,
.sb-sortie-avatar.actif .emoji{
  animation:sbSortie 1.3s cubic-bezier(.2,.9,.3,1) forwards;
}

/* 5 · le nom qui claque */
.sb-eveil-nom{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(30px,8vw,64px); letter-spacing:-1.5px;
  text-transform:uppercase; color:#fff;
  opacity:0; transform:scale(1.6);
  text-shadow:0 0 40px rgba(155,227,74,.6);
}
@keyframes sbNom{
  0%  { opacity:0; transform:scale(1.6); letter-spacing:14px; }
  60% { opacity:1; transform:scale(1);   letter-spacing:-1.5px; }
  100%{ opacity:1; transform:scale(1);   letter-spacing:-1.5px; }
}
.sb-eveil-nom.actif{ animation:sbNom .7s cubic-bezier(.2,.9,.3,1) forwards; }

.sb-eveil-sous{
  font-family:var(--ac-titre); font-weight:800;
  font-size:12px; letter-spacing:5px; text-transform:uppercase;
  color:var(--sb-vert); opacity:0;
}
.sb-eveil-sous.actif{ animation:sbNom .7s .2s ease forwards; }

/* Secousse de l'écran au moment du flash */
@keyframes sbShake{
  0%,100%{ transform:translate(0,0); }
  20%    { transform:translate(-6px,3px); }
  40%    { transform:translate(6px,-3px); }
  60%    { transform:translate(-4px,-2px); }
  80%    { transform:translate(4px,2px); }
}
.sb-shake{ animation:sbShake .4s ease-in-out; }

/* Sur les appareils qui préfèrent moins d'animation, on saute
   toute la mise en scène : le jeu reste jouable à l'identique. */
@media (prefers-reduced-motion:reduce){
  .sb-eveil-carte.tremble,
  .sb-halo.actif,
  .sb-flash.actif,
  .sb-sortie-avatar.actif img,
  .sb-sortie-avatar.actif .emoji,
  .sb-eveil-nom.actif,
  .sb-eveil-sous.actif,
  .sb-shake{ animation:none; opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   UTILITAIRES
   --------------------------------------------------------- */
.sb-cache{ display:none !important; }
.sb-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.sb-actions .ac-btn{ flex:1; min-width:160px; }

@media (prefers-reduced-motion:reduce){
  .sb-flux-l, .sb-secret.anim{ animation:none; opacity:1; transform:none; }
}

/* =========================================================
   AJOUT — MINIATURES CADRÉES SUR LE VISAGE
   ---------------------------------------------------------
   L'image d'origine n'est jamais modifiée. La vignette la
   montre « zoomée » vers le haut (réglage calculé en PHP,
   dans le style de l'image). Toucher la vignette ouvre
   l'image entière dans la visionneuse.
   ========================================================= */
.sb-pick-vignette{ position:relative; padding-left:94px; min-height:92px; overflow:hidden; }
.sb-vignette{
  position:absolute; left:12px; top:50%;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  width:70px; height:70px; border-radius:14px; overflow:hidden;
  border:2px solid rgba(255,255,255,.18); background:#0A0A0A;
  cursor:zoom-in;
}
.sb-vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
.sb-vignette .loupe{
  position:absolute; right:3px; bottom:3px; font-size:11px; line-height:1;
  padding:3px 4px; border-radius:6px; background:rgba(0,0,0,.7);
  pointer-events:none;
}
.sb-pick-vignette:hover .sb-vignette{ border-color:rgba(255,255,255,.35); }
@media (max-width:420px){
  .sb-pick-vignette{ padding-left:80px; }
  .sb-vignette{ width:58px; height:58px; }
}
.sb-groupe-titre{
  font-family:var(--ac-titre); font-weight:900; font-size:15px;
  letter-spacing:2px; text-transform:uppercase;
  margin:26px 0 10px; color:#F7F7F7;
}
.sb-groupe-titre small{ font-family:var(--ac-texte); font-weight:400; letter-spacing:0;
  text-transform:none; color:#8A8A8A; font-size:13px; margin-left:8px; }

/* Galerie : vignette toujours carrée, même sur une tablette
   dont le navigateur ne connaît pas « aspect-ratio ». */
.sb-card-img.sb-cadre{ height:0; padding-top:100%; aspect-ratio:auto; }
.sb-card-img.sb-cadre > img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.sb-card-img.sb-cadre .loupe{
  position:absolute; right:10px; top:10px; z-index:2; pointer-events:none;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:5px 9px; font-size:12px; font-weight:700; color:#fff;
}
.sb-card-img.sb-cadre .sb-card-nom{ z-index:2; }