/* ============================================================
   PETIT BAC, multi.css
   Multijoueur en ligne (salons + code), même identité arcade
   que le reste du site : bordures épaisses, ombres décalées.
   ============================================================ */

#multi-app [hidden],
.m-toast[hidden]{display:none!important}

#multi-app{
  position:relative;
  background:var(--bg-white);
  border:3px solid var(--dark);
  border-radius:24px;
  box-shadow:0 8px 0 var(--dark),0 16px 40px rgba(15,23,42,.15);
  overflow:hidden;
  margin:2.5rem 0;
  z-index:3;
}
.m-screen{display:none}
.m-screen.active{display:block}

/* ── Accueil : bloc "entre amis" par défaut + option solo ──── */
#home-multi{
  position:relative;
  background:var(--bg-white);
  border:3px solid var(--dark);
  border-radius:24px;
  box-shadow:0 8px 0 var(--dark),0 16px 40px rgba(15,23,42,.15);
  overflow:hidden;
  margin:2.5rem 0;
  z-index:3;
}
.home-multi-head{
  position:relative;
  background:linear-gradient(135deg,#6366F1 0%,var(--primary) 45%,#8B5CF6 100%);
  color:#fff;text-align:center;
  padding:1.75rem 1.5rem 1.5rem;
  overflow:hidden;
}
.home-multi-head::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);
  background-size:22px 22px;pointer-events:none;
}
.home-multi-head h2{position:relative;color:#fff;font-size:clamp(1.25rem,2.5vw,1.6rem);margin-bottom:.3rem}
.home-multi-head p{position:relative;color:rgba(255,255,255,.85);font-size:.95rem;margin:0}
.home-resume{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:1rem 2rem 0;
  padding:.7rem 1rem;
  background:var(--jaune-pale);
  border:2px solid var(--jaune-dark);border-radius:var(--radius-md);
  font-weight:700;font-size:.92rem;color:#854d0e;
  text-decoration:none;
}
.home-resume:hover{background:var(--jaune);color:#78350F}
.home-grid{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
  padding:1.75rem;align-items:stretch;
}
@media(min-width:760px){.home-grid{grid-template-columns:1fr auto 1fr;gap:1.5rem}}
@media(min-width:1040px){.home-grid{grid-template-columns:1fr auto 1fr 230px}}
.home-grid .m-panel h3{font-size:1.2rem;margin-bottom:.75rem}
.home-solo-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;
  padding:1.5rem 1.25rem;
  background:var(--bg-alt);
  border:2px dashed var(--text-xlight);
  border-radius:20px;
}
@media(min-width:760px) and (max-width:1039px){.home-solo-card{grid-column:1 / -1}}
.home-solo-card h3{font-size:1.1rem;margin:0}
.home-solo-card p{color:var(--text-light);font-size:.85rem;line-height:1.5;margin-bottom:.75rem}
.home-solo-card .m-panel-icon{background:var(--bg-white);margin-bottom:.5rem}
.home-solo-card .btn{margin-top:auto}

/* ── Écran accueil : créer / rejoindre ─────────────────────── */
.m-duo{
  display:grid;grid-template-columns:1fr;gap:1.5rem;
  padding:2rem;align-items:stretch;position:relative;
}
@media(min-width:820px){
  .m-duo{grid-template-columns:1fr auto 1fr;gap:1.75rem;padding:2.5rem}
}
.m-panel{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:2rem 1.5rem;
  background:var(--bg);
  border:3px solid var(--dark);
  border-radius:20px;
  box-shadow:0 5px 0 var(--dark);
}
.m-panel h2{font-size:1.35rem;margin-bottom:.4rem}
.m-panel p{color:var(--text-light);font-size:.92rem;line-height:1.55;margin-bottom:1.25rem;max-width:300px}
.m-panel-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;font-size:2rem;line-height:1;
  background:var(--primary-pale);
  border:2.5px solid var(--dark);border-radius:16px;
  box-shadow:0 3px 0 var(--dark);
  margin-bottom:1rem;
}
.m-panel:nth-child(3) .m-panel-icon{background:var(--menthe-pale)}
.m-ou{display:flex;align-items:center;justify-content:center}
.m-ou span{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--jaune);border:3px solid var(--dark);
  box-shadow:0 3px 0 var(--dark);
  font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#78350F;
}
.m-label{
  align-self:flex-start;
  font-weight:600;font-size:.85rem;color:var(--text);
  margin:0 0 .35rem .15rem;
}
.m-input{
  width:100%;
  padding:.8rem 1rem;
  border:2px solid var(--border);border-radius:var(--radius-md);
  font-size:1rem;background:var(--bg-white);
  margin-bottom:1rem;
  transition:border-color .15s;
}
.m-input:focus{outline:none;border-color:var(--primary)}
.m-input-code{
  font-family:var(--font-display);font-weight:700;font-size:1.9rem;
  text-align:center;letter-spacing:.55em;text-indent:.55em;
}
.m-panel-btn{width:100%;margin-top:auto}
.m-error{
  margin:0 2rem 1.75rem;padding:.85rem 1.15rem;
  background:var(--corail-pale);border:2px solid var(--corail);
  border-radius:var(--radius-md);
  color:var(--corail-dark);font-weight:600;font-size:.92rem;text-align:center;
}

/* ── Lobby ─────────────────────────────────────────────────── */
.m-lobby-head{
  position:relative;
  background:linear-gradient(135deg,#6366F1 0%,var(--primary) 45%,#8B5CF6 100%);
  color:#fff;text-align:center;
  padding:2.25rem 1.5rem 2rem;
  overflow:hidden;
}
.m-lobby-head::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);
  background-size:22px 22px;pointer-events:none;
}
.m-code-wrap{position:relative}
.m-code-label{
  display:block;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.75);margin-bottom:.65rem;
}
.m-code-digits{display:flex;justify-content:center;gap:.5rem}
.m-code-digits span{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:68px;
  background:#fff;color:var(--primary-deep);
  border:3px solid var(--dark);border-radius:14px;
  box-shadow:0 5px 0 var(--dark);
  font-family:var(--font-display);font-weight:700;font-size:2.2rem;
  animation:digit-pop .4s cubic-bezier(.34,1.56,.64,1) backwards;
}
.m-code-digits span:nth-child(2){animation-delay:.07s}
.m-code-digits span:nth-child(3){animation-delay:.14s}
.m-code-digits span:nth-child(4){animation-delay:.21s}
@keyframes digit-pop{from{transform:scale(.3) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.m-share-row{
  position:relative;
  display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
  margin-top:1.4rem;
}
.m-share-hint{
  position:relative;
  font-size:.85rem;color:rgba(255,255,255,.8);
  max-width:420px;margin:1rem auto 0;line-height:1.5;
}
.m-lobby-body{padding:2rem;display:flex;flex-direction:column;gap:2rem}
.m-section-title{font-size:1.15rem;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.m-section-title span{font-size:.9rem;color:var(--text-light);font-family:var(--font-body);font-weight:500}

.m-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.m-player-card{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem .9rem;
  background:var(--bg);
  border:2.5px solid var(--dark);border-radius:14px;
  box-shadow:0 3px 0 var(--dark);
  animation:card-in .3s ease backwards;
}
@keyframes card-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.m-player-card.me{background:var(--primary-pale)}
.m-player-card.empty{
  border-style:dashed;border-color:var(--text-xlight);
  box-shadow:none;background:transparent;
  color:var(--text-light);
}
.m-player-card.empty .m-player-name{font-weight:500;font-size:.85rem;color:var(--text-light)}
.m-player-name{flex:1;font-weight:700;font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-player-name em{font-style:normal;font-weight:500;font-size:.8rem;color:var(--text-light)}
.m-crown{font-size:1rem}
.m-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  background:#fff;
  border:2px solid var(--dark);border-radius:50%;
  font-size:1.25rem;line-height:1;
}
.m-avatar.sm{width:26px;height:26px;font-size:.85rem;border-width:1.5px}
.m-presence{
  width:10px;height:10px;flex-shrink:0;border-radius:50%;
  background:var(--menthe);
  box-shadow:0 0 0 3px rgba(52,211,153,.3);
  animation:pulse-dot 2s ease-in-out infinite;
}
.m-presence.off{background:var(--text-xlight);box-shadow:none;animation:none}

.m-settings-row{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.25rem}
.m-settings-label{font-weight:600;font-size:.9rem;margin-bottom:.5rem}
.m-settings-ro .m-ro-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}
.m-ro-note{font-size:.92rem;color:var(--text-light)}
.m-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .75rem;
  background:var(--bg);border:2px solid var(--border);border-radius:999px;
  font-size:.85rem;font-weight:600;
}
.m-chip strong{color:var(--primary)}

.m-startbar-btns{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.m-wait-note{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--text-light);font-size:.92rem;font-weight:500;
}
.m-dots{display:inline-flex;gap:3px}
.m-dots i{
  width:7px;height:7px;border-radius:50%;
  background:var(--primary);
  animation:dot-bounce 1.2s ease-in-out infinite;
}
.m-dots i:nth-child(2){animation-delay:.15s}
.m-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot-bounce{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ── Manche en cours ───────────────────────────────────────── */
.m-players-strip{
  display:flex;gap:.5rem;align-items:center;
  padding:.65rem 2rem;
  background:var(--bg-alt);border-bottom:1px solid var(--border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.m-strip-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.3rem .7rem .3rem .35rem;flex-shrink:0;
  background:var(--bg-white);
  border:2px solid var(--border);border-radius:999px;
  font-size:.82rem;
}
.m-strip-chip.me{border-color:var(--primary);background:var(--primary-pale)}
.m-strip-name{font-weight:700;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-strip-count{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  color:var(--primary-dark);
  background:var(--primary-pale);
  border-radius:999px;padding:.05rem .45rem;
}
.m-strip-chip.me .m-strip-count{background:#fff}

.m-stop-banner{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  z-index:900;
  max-width:min(92vw,540px);width:max-content;
  padding:.85rem 1.5rem;
  background:var(--corail);color:#fff;
  border:3px solid var(--dark);border-radius:999px;
  box-shadow:0 5px 0 var(--dark),0 12px 30px rgba(15,23,42,.3);
  font-family:var(--font-display);font-weight:600;font-size:1rem;text-align:center;
  animation:banner-pulse 1s ease-in-out infinite;
}
@keyframes banner-pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}

/* ── Validation ────────────────────────────────────────────── */
.m-role-note{
  margin:1.25rem 2rem 1rem;
  padding:.8rem 1.1rem;
  background:var(--jaune-pale);
  border:2px solid var(--jaune-dark);border-radius:var(--radius-md);
  font-size:.92rem;line-height:1.55;
}
.validation-cat-block{margin-bottom:1.75rem}
.validation-cat-title{font-size:1.05rem;margin-bottom:.6rem}
.m-hors-liste{
  font-size:.72rem;background:#fff7ed;color:#c2410c;
  border:1px solid #fed7aa;border-radius:4px;padding:.1rem .4rem;
  white-space:nowrap;
}
.m-alerte-hors-liste{display:block;margin-top:.4rem;font-weight:700;color:#9a3412}
.m-standings{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:0 2rem 1.25rem;
}
.m-standings-label{font-size:.85rem;font-weight:600;color:var(--text-light)}

/* ── Podium final ──────────────────────────────────────────── */
#m-final{position:relative;overflow:hidden}
#m-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#m-confetti i{
  position:absolute;top:-16px;
  width:9px;height:14px;border-radius:2px;
  animation:confetti-fall 2.6s ease-in forwards;
  opacity:.9;
}
@keyframes confetti-fall{
  to{transform:translateY(110vh) rotate(720deg);opacity:.4}
}

/* ── Overlay révélation de lettre ──────────────────────────── */
.m-letter-overlay{
  position:absolute;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  background:linear-gradient(135deg,#6366F1 0%,var(--primary) 45%,#8B5CF6 100%);
  border-radius:21px;
  color:#fff;text-align:center;
}
.m-letter-overlay[hidden]{display:none}
.m-overlay-round{
  font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.85);
  padding:.3rem .9rem;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;
  background:rgba(255,255,255,.12);
}
.m-overlay-letter{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(6rem,22vw,9rem);line-height:1;
  text-shadow:0 6px 0 rgba(15,23,42,.25),0 14px 40px rgba(15,23,42,.35);
}
.m-overlay-go{
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  color:var(--jaune);
  opacity:0;
}
.m-letter-overlay.animate .m-overlay-round{animation:ov-in .4s ease backwards}
.m-letter-overlay.animate .m-overlay-letter{animation:letter-pop .6s cubic-bezier(.34,1.56,.64,1) .15s backwards}
.m-letter-overlay.animate .m-overlay-go{animation:ov-in .35s ease 1.05s forwards}
@keyframes ov-in{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes letter-pop{
  0%{transform:scale(.2) rotate(-12deg);opacity:0}
  70%{transform:scale(1.12) rotate(3deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* ── Toast ─────────────────────────────────────────────────── */
.m-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  z-index:1000;
  max-width:min(92vw,480px);
  padding:.8rem 1.4rem;
  background:var(--dark);color:#fff;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(15,23,42,.35);
  font-weight:600;font-size:.92rem;text-align:center;
  opacity:0;transition:opacity .25s,transform .25s;
  pointer-events:none;
}
.m-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Responsive & accessibilité ────────────────────────────── */
@media(max-width:640px){
  .page-hero h1{font-size:1.6rem}
  .page-hero h1 br{display:none}
  .m-duo{padding:1.25rem;gap:1.25rem}
  .m-lobby-body{padding:1.25rem}
  .m-players-strip{padding:.6rem 1.25rem}
  .m-code-digits span{width:48px;height:58px;font-size:1.8rem}
  .m-stop-banner{bottom:96px;font-size:.9rem;padding:.7rem 1.1rem}
  .m-ou span{transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){
  .m-code-digits span,.m-player-card,.m-presence,.m-dots i,
  .m-stop-banner,#m-confetti i,
  .m-letter-overlay.animate .m-overlay-round,
  .m-letter-overlay.animate .m-overlay-letter{animation:none}
  .m-letter-overlay.animate .m-overlay-go{animation:none;opacity:1}
}