/* Animations et utilitaires repris du prototype React */
@keyframes electrifyEffect {
  0%, 90%, 100% { text-shadow: 0 0 0px transparent; filter: brightness(1); transform: scale(1); }
  92% { text-shadow: 0 0 20px #00A3FF; filter: brightness(1.3); transform: scale(1.02) skewX(-1deg); }
  95% { text-shadow: 0 0 50px #00A3FF, 0 0 100px #ffffff; filter: brightness(2.5); transform: scale(1.04) translate(1px, -1px); }
  98% { text-shadow: 0 0 20px #00A3FF; filter: brightness(1.3); transform: scale(1.02) skewX(1deg); }
}
@keyframes haloExplosion {
  0%, 92% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  95% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
.title-electrify { animation: electrifyEffect 5s linear infinite; will-change: transform, filter, text-shadow; }
.energy-halo-pulse {
  position: absolute; top: 50%; left: 50%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0, 163, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 10;
  animation: haloExplosion 5s linear infinite;
}
.bg-scanline-texture {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
  background-size: 100% 2px; pointer-events: none; z-index: 2; opacity: 0.3;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Contenu article (HTML Quill ou anciens blocs convertis) */
.mpx-article-quill { font-size: 1.125rem; line-height: 1.85; color: #cbd5e1; }
/* Quill génère des <p> ; on veut un rendu “retour ligne” serré (Enter = <br>) */
.mpx-article-quill p { margin: 0 0 0.35rem 0 !important; }
.mpx-article-quill p:last-child { margin-bottom: 0 !important; }
.mpx-article-quill h1 { font-size: 2rem; font-weight: 900; font-style: italic; margin: 2rem 0 1rem; color: #fff; }
.mpx-article-quill h2 { font-size: 1.5rem; font-weight: 900; font-style: italic; margin: 1.75rem 0 0.75rem; color: #fff; }
.mpx-article-quill h3 { font-size: 1.25rem; font-weight: 800; margin: 1.5rem 0 0.5rem; color: #e2e8f0; }
.mpx-article-quill ul, .mpx-article-quill ol { margin: 1rem 0 1.5rem 1.25rem; }
.mpx-article-quill li { margin-bottom: 0.5rem; }
.mpx-article-quill blockquote { border-left: 4px solid #00A3FF; padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; color: #e2e8f0; background: rgba(0, 163, 255, 0.06); padding: 1rem 1rem 1rem 1.25rem; }
.mpx-article-quill .mpx-legacy-quote { border-left: 4px solid #00A3FF; padding: 1.5rem 1.5rem 1.5rem 2rem; margin: 2rem 0; font-style: italic; font-size: 1.35rem; color: #fff; background: rgba(0, 163, 255, 0.05); }
.mpx-article-quill .mpx-legacy-quote__meta { font-size: 0.75rem; font-weight: 900; font-style: normal; color: #00A3FF; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 1rem; }
.mpx-article-quill a { color: #00A3FF; text-decoration: underline; }
.mpx-article-quill a:hover { color: #fff; }
.mpx-article-quill pre, .mpx-article-quill code { font-family: ui-monospace, monospace; font-size: 0.9em; }
.mpx-article-quill pre { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem; overflow-x: auto; margin: 1rem 0; font-size: 0.875rem; }
.mpx-article-quill code { background: rgba(0, 0, 0, 0.35); padding: 0.15rem 0.4rem; border-radius: 2px; }
.mpx-article-quill pre code { background: transparent; padding: 0; }
.mpx-article-quill img { max-width: 100%; height: auto; border-radius: 4px; margin: 1rem 0; }
.article-quote { border-left: 4px solid #00A3FF; padding-left: 2rem; margin: 3rem 0; font-style: italic; font-size: 1.5rem; color: white; background: rgba(0, 163, 255, 0.05); padding: 2rem; }
.input-focus-glow:focus { outline: none; border-color: #00A3FF; box-shadow: 0 0 15px rgba(0, 163, 255, 0.4); }

/* Logo header : glitch RGB adouci + coupures variées + halo (pause 2s / cycle 5s — réduit si prefers-reduced-motion) */
.mpx-logo-glitch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.mpx-logo-glitch__main {
  position: relative;
  z-index: 3;
  display: block;
  will-change: transform, filter;
  animation: mpx-logo-glitch-base 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite;
}
.mpx-logo-glitch__ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, clip-path;
}
.mpx-logo-glitch__ghost--c {
  filter:
    brightness(1.12)
    drop-shadow(1.5px 0 0 rgba(0, 163, 255, 0.85))
    drop-shadow(4px 0 14px rgba(0, 163, 255, 0.22));
  animation: mpx-logo-glitch-chrom 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite;
}
.mpx-logo-glitch__ghost--m {
  filter:
    brightness(1.12)
    drop-shadow(-1.5px 0 0 rgba(232, 121, 249, 0.72))
    drop-shadow(-4px 0 14px rgba(232, 121, 249, 0.18));
  animation: mpx-logo-glitch-chrom 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite reverse;
  animation-delay: 0.08s;
}
/* 4 salves distinctes (0–60 %), puis repos 60–100 % (~2 s) */
@keyframes mpx-logo-glitch-chrom {
  0%, 3%, 6%, 14.4%, 15%, 18%, 29.4%, 30%, 33%, 44.4%, 45%, 48%, 60%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  /* Salve 1 — entrée douce */
  3.6% {
    opacity: 0.32;
    transform: translate(-2.5px, 0.5px) scale(1.01);
    clip-path: inset(14% 0 58% 0);
  }
  4.2% {
    opacity: 0.46;
    transform: translate(2px, -1.5px) scale(1.015);
    clip-path: inset(44% 0 18% 0);
  }
  4.8% {
    opacity: 0.28;
    transform: translate(-1px, 0.5px) scale(1.005);
    clip-path: inset(0 0 0 0);
  }
  5.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  /* Salve 2 — bande centrale */
  18.6% {
    opacity: 0.36;
    transform: translate(2.5px, 1px) scale(1.008);
    clip-path: inset(38% 0 32% 0);
  }
  19.2% {
    opacity: 0.44;
    transform: translate(-2px, -1px) scale(1.012);
    clip-path: inset(12% 0 62% 0);
  }
  19.8% {
    opacity: 0.26;
    transform: translate(1px, 1px) scale(1.004);
    clip-path: inset(0 0 0 0);
  }
  20.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  /* Salve 3 — déchirure verticale légère */
  33.6% {
    opacity: 0.34;
    transform: translate(-1.5px, -1.5px) scale(1.01);
    clip-path: inset(5% 18% 52% 18%);
  }
  34.2% {
    opacity: 0.42;
    transform: translate(2px, 2px) scale(1.014);
    clip-path: inset(48% 12% 8% 12%);
  }
  34.8% {
    opacity: 0.24;
    transform: translate(-0.5px, -0.5px) scale(1.003);
    clip-path: inset(0 0 0 0);
  }
  35.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  /* Salve 4 — pic plus net puis extinction */
  48.6% {
    opacity: 0.4;
    transform: translate(-3px, 0.5px) scale(1.012);
    clip-path: inset(52% 0 12% 0);
  }
  49.2% {
    opacity: 0.48;
    transform: translate(2.5px, -2px) scale(1.018);
    clip-path: inset(22% 0 48% 0);
  }
  49.8% {
    opacity: 0.22;
    transform: translate(0.5px, 1px) scale(1.006);
    clip-path: inset(0 0 0 0);
  }
  50.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes mpx-logo-glitch-base {
  0%, 3%, 6%, 14.4%, 15%, 18%, 29.4%, 30%, 33%, 44.4%, 45%, 48%, 60%, 100% {
    transform: translate(0, 0) scale(1);
    filter: brightness(1) contrast(1) saturate(1) drop-shadow(0 0 0 transparent);
  }
  3.6% {
    transform: translate(0.5px, -0.5px) scale(1.006);
    filter: brightness(1.05) contrast(1.05) saturate(1.08) drop-shadow(0 0 12px rgba(0, 163, 255, 0.28));
  }
  4.2% {
    transform: translate(-1px, 0.5px) scale(1.012);
    filter: brightness(1.1) contrast(1.08) saturate(1.12) drop-shadow(0 0 18px rgba(0, 163, 255, 0.42));
  }
  4.8% {
    transform: translate(0, 0) scale(1.004);
    filter: brightness(1.03) contrast(1.03) drop-shadow(0 0 8px rgba(0, 163, 255, 0.2));
  }
  5.4% {
    transform: translate(0, 0) scale(1);
    filter: brightness(1) contrast(1) saturate(1);
  }
  18.6% {
    transform: translate(-0.5px, 0.5px) scale(1.005);
    filter: brightness(1.06) contrast(1.05) drop-shadow(0 0 10px rgba(0, 163, 255, 0.25));
  }
  19.2% {
    transform: translate(0.5px, -0.5px) scale(1.01);
    filter: brightness(1.09) contrast(1.07) drop-shadow(0 0 16px rgba(0, 163, 255, 0.38));
  }
  19.8% {
    transform: translate(0, 0) scale(1.003);
    filter: brightness(1.04) drop-shadow(0 0 6px rgba(0, 163, 255, 0.18));
  }
  20.4% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  33.6% {
    transform: translate(0.5px, 0.5px) scale(1.007);
    filter: brightness(1.06) contrast(1.06) drop-shadow(0 0 11px rgba(0, 163, 255, 0.26));
  }
  34.2% {
    transform: translate(-1px, -0.5px) scale(1.011);
    filter: brightness(1.08) contrast(1.08) drop-shadow(0 0 15px rgba(0, 163, 255, 0.34));
  }
  34.8% {
    transform: translate(0, 0) scale(1.002);
    filter: brightness(1.03) drop-shadow(0 0 7px rgba(0, 163, 255, 0.16));
  }
  35.4% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  48.6% {
    transform: translate(-0.5px, -0.5px) scale(1.008);
    filter: brightness(1.08) contrast(1.08) saturate(1.1) drop-shadow(0 0 14px rgba(0, 163, 255, 0.36));
  }
  49.2% {
    transform: translate(0.5px, 0.5px) scale(1.014);
    filter: brightness(1.12) contrast(1.1) saturate(1.15) drop-shadow(0 0 22px rgba(0, 163, 255, 0.48));
  }
  49.8% {
    transform: translate(0, 0) scale(1.005);
    filter: brightness(1.05) drop-shadow(0 0 10px rgba(0, 163, 255, 0.22));
  }
  50.4% {
    transform: translate(0, 0) scale(1);
    filter: brightness(1) contrast(1) saturate(1);
  }
}

/* Titre hero — glitch renforcé : bandes horizontales + faibles coupes latérales (évite de tronquer les bords du texte) */
@keyframes mpx-title-glitch-chrom {
  0%, 3%, 6%, 14.4%, 15%, 18%, 29.4%, 30%, 33%, 44.4%, 45%, 48%, 60%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
    clip-path: inset(0 0 0 0);
  }
  3.6% {
    opacity: 0.58;
    transform: translate(-7px, 2px) scale(1.02) skewX(-3deg);
    clip-path: inset(10% 0 62% 0);
  }
  4.2% {
    opacity: 0.72;
    transform: translate(8px, -4px) scale(1.03) skewX(4deg);
    clip-path: inset(42% 0 20% 0);
  }
  4.8% {
    opacity: 0.42;
    transform: translate(-4px, 2px) scale(1.015) skewX(-1deg);
    clip-path: inset(0 0 0 0);
  }
  5.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  18.6% {
    opacity: 0.52;
    transform: translate(7px, 3px) scale(1.018) skewX(3deg);
    clip-path: inset(36% 0 30% 0);
  }
  19.2% {
    opacity: 0.65;
    transform: translate(-8px, -3px) scale(1.025) skewX(-4deg);
    clip-path: inset(8% 0 68% 0);
  }
  19.8% {
    opacity: 0.38;
    transform: translate(3px, 4px) scale(1.01);
    clip-path: inset(0 0 0 0);
  }
  20.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  33.6% {
    opacity: 0.5;
    transform: translate(-5px, -5px) scale(1.02) skewX(-2deg);
    clip-path: inset(4% 2% 58% 2%);
  }
  34.2% {
    opacity: 0.62;
    transform: translate(6px, 5px) scale(1.028) skewX(3deg);
    clip-path: inset(50% 2% 6% 2%);
  }
  34.8% {
    opacity: 0.35;
    transform: translate(-2px, -1px) scale(1.012);
    clip-path: inset(0 0 0 0);
  }
  35.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
  48.6% {
    opacity: 0.55;
    transform: translate(-9px, 2px) scale(1.03) skewX(-5deg);
    clip-path: inset(54% 0 8% 0);
  }
  49.2% {
    opacity: 0.7;
    transform: translate(8px, -5px) scale(1.04) skewX(5deg);
    clip-path: inset(18% 0 58% 0);
  }
  49.8% {
    opacity: 0.32;
    transform: translate(2px, 3px) scale(1.015);
    clip-path: inset(0 0 0 0);
  }
  50.4% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes mpx-title-glitch-base {
  0%, 3%, 6%, 14.4%, 15%, 18%, 29.4%, 30%, 33%, 44.4%, 45%, 48%, 60%, 100% {
    transform: translate(0, 0) scale(1) skewX(0deg);
    filter: brightness(1) contrast(1) saturate(1) drop-shadow(0 0 0 transparent);
  }
  3.6% {
    transform: translate(2px, -2px) scale(1.015) skewX(-2deg);
    filter: brightness(1.12) contrast(1.12) saturate(1.25) drop-shadow(0 0 20px rgba(0, 163, 255, 0.55));
  }
  4.2% {
    transform: translate(-3px, 2px) scale(1.03) skewX(3deg);
    filter: brightness(1.22) contrast(1.18) saturate(1.35) drop-shadow(0 0 32px rgba(0, 163, 255, 0.65)) drop-shadow(3px 0 0 rgba(232, 121, 249, 0.35));
  }
  4.8% {
    transform: translate(1px, 0) scale(1.01) skewX(-1deg);
    filter: brightness(1.08) contrast(1.08) drop-shadow(0 0 14px rgba(0, 163, 255, 0.4));
  }
  5.4% {
    transform: translate(0, 0) scale(1) skewX(0deg);
    filter: brightness(1) contrast(1) saturate(1);
  }
  18.6% {
    transform: translate(-2px, 2px) scale(1.012) skewX(2deg);
    filter: brightness(1.1) contrast(1.1) saturate(1.2) drop-shadow(0 0 18px rgba(0, 163, 255, 0.5));
  }
  19.2% {
    transform: translate(3px, -2px) scale(1.025) skewX(-3deg);
    filter: brightness(1.18) contrast(1.15) saturate(1.3) drop-shadow(0 0 26px rgba(0, 163, 255, 0.58));
  }
  19.8% {
    transform: translate(0, 0) scale(1.008);
    filter: brightness(1.06) drop-shadow(0 0 10px rgba(0, 163, 255, 0.35));
  }
  20.4% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  33.6% {
    transform: translate(2px, 2px) scale(1.018) skewX(-2.5deg);
    filter: brightness(1.12) contrast(1.12) saturate(1.22) drop-shadow(0 0 20px rgba(0, 163, 255, 0.48));
  }
  34.2% {
    transform: translate(-3px, -2px) scale(1.028) skewX(3deg);
    filter: brightness(1.2) contrast(1.16) saturate(1.32) drop-shadow(0 0 28px rgba(0, 163, 255, 0.6));
  }
  34.8% {
    transform: translate(0, 0) scale(1.006);
    filter: brightness(1.05) drop-shadow(0 0 12px rgba(0, 163, 255, 0.3));
  }
  35.4% {
    transform: translate(0, 0) scale(1);
    filter: none;
  }
  48.6% {
    transform: translate(-3px, -3px) scale(1.022) skewX(-4deg);
    filter: brightness(1.15) contrast(1.15) saturate(1.28) drop-shadow(0 0 24px rgba(0, 163, 255, 0.55));
  }
  49.2% {
    transform: translate(4px, 3px) scale(1.038) skewX(4deg);
    filter: brightness(1.28) contrast(1.22) saturate(1.45) drop-shadow(0 0 38px rgba(0, 163, 255, 0.72)) drop-shadow(-4px 0 0 rgba(232, 121, 249, 0.4));
  }
  49.8% {
    transform: translate(0, 1px) scale(1.012);
    filter: brightness(1.1) drop-shadow(0 0 16px rgba(0, 163, 255, 0.42));
  }
  50.4% {
    transform: translate(0, 0) scale(1) skewX(0deg);
    filter: brightness(1) contrast(1) saturate(1);
  }
}

/* Hero accueil — titre : proche de l’ancien 6xl / 8xl / 10vw, sans le vh qui rétrécissait trop */
.mpx-hero-title {
  font-size: clamp(3rem, 10.5vw + 0.35rem, 10rem);
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  text-align: center;
}

/* Hero accueil — titre « MPX TEAM » : keyframes dédiées (plus agressives que le logo) */
.mpx-title-glitch {
  position: relative;
  display: inline-block;
  isolation: isolate;
  /* Padding horizontal symétrique : garde l’air pour l’italique sans décentrer le bloc */
  padding: 0.08em 0.5em;
  overflow: visible;
}
.mpx-title-glitch__main {
  position: relative;
  z-index: 3;
  display: inline-block;
  /* Zone du dégradé élargie des deux côtés (WebKit + italique) */
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0.04em 0.38em;
  will-change: transform, filter;
  animation: mpx-title-glitch-base 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite;
}
.mpx-title-glitch__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  white-space: nowrap;
  mix-blend-mode: screen;
  will-change: transform, opacity, clip-path;
  overflow: visible;
}
.mpx-title-glitch__ghost--c {
  color: rgba(0, 163, 255, 0.78);
  text-shadow:
    3px 0 18px rgba(0, 163, 255, 0.55),
    6px 0 36px rgba(0, 163, 255, 0.35),
    -1px 0 0 rgba(255, 255, 255, 0.2);
  animation: mpx-title-glitch-chrom 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite;
}
.mpx-title-glitch__ghost--m {
  color: rgba(232, 121, 249, 0.72);
  text-shadow:
    -3px 0 18px rgba(232, 121, 249, 0.48),
    -6px 0 36px rgba(232, 121, 249, 0.28),
    1px 0 0 rgba(255, 255, 255, 0.15);
  animation: mpx-title-glitch-chrom 5s cubic-bezier(0.32, 0.06, 0.18, 1) infinite reverse;
  animation-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .mpx-logo-glitch__ghost,
  .mpx-logo-glitch__main,
  .mpx-title-glitch__ghost,
  .mpx-title-glitch__main {
    animation: none !important;
  }
  .mpx-logo-glitch__ghost,
  .mpx-title-glitch__ghost {
    opacity: 0 !important;
  }
}

/* Accueil — rosters : un seul ouvert, les autres refermés (comme le prototype React) */
#mpx-home-rosters.mpx-one-active .mpx-roster-panel:not(.mpx-roster-active) {
  height: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-width: 0;
}
@media (min-width: 1024px) {
  #mpx-home-rosters.mpx-one-active .mpx-roster-panel:not(.mpx-roster-active) {
    height: auto;
    min-height: 0;
    flex: 0.4 1 0%;
    opacity: 0.4;
    pointer-events: auto;
    overflow: hidden;
    border-width: 1px;
  }
}

/* Accueil — roster ouvert : desktop = hauteur mini fixe ; mobile = hauteur suivant le contenu (évite le vide sous le bouton) */
@media (max-width: 1023px) {
  #mpx-home-rosters .mpx-roster-panel.mpx-roster-active {
    height: auto;
    min-height: 0;
  }
  /* Le contenu n’est plus tout en absolute : la carte prend la hauteur réelle */
  #mpx-home-rosters .mpx-roster-panel.mpx-roster-active .mpx-roster-inner {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    height: auto;
  }
}
@media (min-width: 1024px) {
  #mpx-home-rosters .mpx-roster-panel.mpx-roster-active {
    min-height: 600px;
  }
}

/* Fond roster : calque commun (scale survol = image + voile identiques, pas de fente) */
.mpx-roster-bg {
  pointer-events: none;
}
.mpx-roster-bg__scale {
  transform: translateZ(0);
}
.mpx-roster-bg__scale .mpx-roster-dim {
  box-sizing: border-box;
}