/* ===== MMDCARDS V2 : ambiance cinématique rouge/noir (page test) ===== */

/* Fond : vignette sombre + lueur rouge */
body{
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(227,28,61,0.16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,0.65) 100%),
    var(--noir) !important;
}

/* Halo derrière le pack (dans le bloc contenu, derrière tout) */
.contenu{ isolation:isolate; }
.contenu::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:46%; width:560px; height:560px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(227,28,61,0.30), rgba(227,28,61,0.08) 45%, transparent 70%);
  filter:blur(20px);
  animation:haloPulse 4s ease-in-out infinite;
}
@keyframes haloPulse{
  0%,100%{ opacity:0.65; transform:translate(-50%,-50%) scale(0.95); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}

/* Titre : blanc plein, majuscules espacées, barre rouge verticale devant */
h1, .titre-page{
  font-size:2rem !important; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--blanc) !important; background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  filter:none !important;
}
h1::before, .titre-page::before{
  content:''; display:inline-block; width:4px; height:0.85em; margin-right:0.65rem;
  vertical-align:-0.08em; border-radius:2px;
  background:linear-gradient(180deg, #ff4d68, #E31C3D 55%, #a3172f);
}
.sub{ letter-spacing:0.12em; text-transform:uppercase; font-size:0.72rem !important; opacity:0.75; }

/* Pack : flotte + lueur rouge (propriété "translate" pour ne pas casser le zoom au survol) */
#pack-image{
  width:200px !important;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.7)) drop-shadow(0 0 26px rgba(227,28,61,0.55));
  animation:packFloat 3.6s ease-in-out infinite;
  transition:transform 0.25s ease, filter 0.25s ease;
}
@keyframes packFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -12px; }
}
#pack-image:hover{
  transform:scale(1.07) rotate(-1.5deg);
  filter:drop-shadow(0 22px 36px rgba(0,0,0,0.75)) drop-shadow(0 0 40px rgba(255,77,104,0.8));
}
#pack-image.desactive{ animation:none; filter:grayscale(0.6) drop-shadow(0 10px 20px rgba(0,0,0,0.6)); }

/* Cadre d'état : verre sombre, filet rouge */
.cadre-etat{
  background:linear-gradient(160deg, rgba(20,14,16,0.85), rgba(8,6,8,0.9)) !important;
  border:1px solid rgba(227,28,61,0.28) !important;
  box-shadow:0 10px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(227,28,61,0.10);
  backdrop-filter:blur(6px);
}

/* Boutons : style d'origine, net, sans halo (juste un léger soulèvement au survol) */
.btn-icone-rouge, .btn-acheter-packs, .btn-tout-reveler, .btn-fermer-carrousel{
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.4) !important;
  transition:transform 0.15s ease, opacity 0.15s !important;
}
.btn-icone-rouge:hover:not(:disabled), .btn-acheter-packs:hover{
  opacity:1 !important; transform:translateY(-2px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.4) !important;
}
.btn-icone-rouge:active{ transform:translateY(1px); }

/* Mobile : on allège */
@media (max-width:768px){
  .contenu::before{ width:360px; height:360px; }
  #pack-image{ width:170px !important; }
  h1, .titre-page{ font-size:1.6rem !important; }
}

/* Accessibilité : pas d'animation si l'utilisateur la désactive */
@media (prefers-reduced-motion: reduce){
  .contenu::before, #pack-image{ animation:none !important; }
}

/* ===== Toggle sons : icône SVG aux couleurs de la DA (dégradé rouge des boutons) ===== */
.topbar label{ font-size:0 !important; gap:0 !important; }
.topbar .switch{ width:34px !important; height:34px !important; }
.topbar .switch-slider{
  display:flex; align-items:center; justify-content:center;
  background:none !important; border:none !important; border-radius:0 !important;
}
.topbar .switch-slider::before{
  content:''; position:static !important; left:auto !important; top:auto !important;
  width:30px !important; height:30px !important; border-radius:0 !important;
  transform:none !important; transition:transform 0.15s, filter 0.2s !important;
  background:linear-gradient(180deg, #4a4a52, #2c2c32 60%, #1c1c21) !important; opacity:1;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><mask id='m'><rect width='24' height='24' fill='white'/><line x1='4' y1='4' x2='20' y2='20' stroke='black' stroke-width='5' stroke-linecap='round'/></mask></defs><g mask='url(%23m)'><path d='M3.5 9.2h2.9a1.2 1.2 0 0 0 .8-.3l3.5-3.1A.9.9 0 0 1 12.2 6.5v11a.9.9 0 0 1-1.5.7l-3.5-3.1a1.2 1.2 0 0 0-.8-.3H3.5a1.2 1.2 0 0 1-1.2-1.2v-4.2a1.2 1.2 0 0 1 1.2-1.2z' fill='black'/><path d='M15.6 9a4.2 4.2 0 0 1 0 6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/></g><line x1='4' y1='4' x2='20' y2='20' stroke='black' stroke-width='2.3' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><mask id='m'><rect width='24' height='24' fill='white'/><line x1='4' y1='4' x2='20' y2='20' stroke='black' stroke-width='5' stroke-linecap='round'/></mask></defs><g mask='url(%23m)'><path d='M3.5 9.2h2.9a1.2 1.2 0 0 0 .8-.3l3.5-3.1A.9.9 0 0 1 12.2 6.5v11a.9.9 0 0 1-1.5.7l-3.5-3.1a1.2 1.2 0 0 0-.8-.3H3.5a1.2 1.2 0 0 1-1.2-1.2v-4.2a1.2 1.2 0 0 1 1.2-1.2z' fill='black'/><path d='M15.6 9a4.2 4.2 0 0 1 0 6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/></g><line x1='4' y1='4' x2='20' y2='20' stroke='black' stroke-width='2.3' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.topbar .switch input:checked + .switch-slider{ background:none !important; border:none !important; }
.topbar .switch input:checked + .switch-slider::before{
  background:linear-gradient(180deg, #ff4d68, #E31C3D 55%, #a3172f) !important;
  transform:none !important;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 9.2h2.9a1.2 1.2 0 0 0 .8-.3l3.5-3.1A.9.9 0 0 1 12.2 6.5v11a.9.9 0 0 1-1.5.7l-3.5-3.1a1.2 1.2 0 0 0-.8-.3H3.5a1.2 1.2 0 0 1-1.2-1.2v-4.2a1.2 1.2 0 0 1 1.2-1.2z' fill='black'/><path d='M15.6 9a4.2 4.2 0 0 1 0 6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/><path d='M18.7 6.2a8.2 8.2 0 0 1 0 11.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3.5 9.2h2.9a1.2 1.2 0 0 0 .8-.3l3.5-3.1A.9.9 0 0 1 12.2 6.5v11a.9.9 0 0 1-1.5.7l-3.5-3.1a1.2 1.2 0 0 0-.8-.3H3.5a1.2 1.2 0 0 1-1.2-1.2v-4.2a1.2 1.2 0 0 1 1.2-1.2z' fill='black'/><path d='M15.6 9a4.2 4.2 0 0 1 0 6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/><path d='M18.7 6.2a8.2 8.2 0 0 1 0 11.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/></svg>") center/contain no-repeat;
}
.topbar .switch:hover .switch-slider::before{ transform:scale(1.1) !important; }

/* ===== Cartes de la sidebar : image à gauche, chiffre à côté, action intégrée à droite ===== */
.sidebar .sidebar-solde-item{
  position:relative !important; display:flex !important; flex-direction:row !important;
  align-items:center !important; justify-content:flex-start !important; text-align:left !important;
  gap:0.85rem !important; min-height:60px !important; padding:0 56px 0 1.1rem !important; overflow:hidden;
}
.sidebar .sidebar-solde-item img{ width:32px !important; height:32px !important; object-fit:contain; flex-shrink:0; margin:0 !important; }
.sidebar .sidebar-solde-item > span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.1rem !important; color:var(--blanc); letter-spacing:0.01em; }

.btn-sidebar-action{
  position:absolute; right:0; top:0; bottom:0; width:48px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.02); border:none; border-left:1px solid rgba(255,255,255,0.07);
  border-radius:0; color:#ff4d68; transition:background 0.2s, color 0.2s;
}
.btn-sidebar-action:hover{ background:rgba(227,28,61,0.16); color:#fff; }
.btn-sidebar-action svg{ width:16px; height:16px; display:block; }

.menu-packs{
  position:fixed; z-index:9999; width:150px; padding:6px;
  background:linear-gradient(160deg, #141114, #0a0a0d);
  border:1px solid rgba(227,28,61,0.30); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,0.65);
}
.menu-packs.hidden{ display:none; }
.menu-packs .menu-item{
  display:flex; align-items:center; gap:0.75rem; width:100%;
  padding:0.6rem 0.7rem; border:none; background:none; border-radius:10px;
  color:var(--blanc); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1rem;
  text-align:left; text-decoration:none; cursor:pointer;
}
.menu-packs .menu-item:hover{ background:rgba(227,28,61,0.16); }
.menu-packs .menu-item img{ width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.menu-packs .menu-item svg{ width:22px; height:22px; flex-shrink:0; color:#ff4d68; }
.menu-packs .menu-sep{ height:1px; background:rgba(255,255,255,0.08); margin:4px 6px; }

/* Desktop : on masque les anciens boutons (le mobile garde les siens) */
@media (min-width:769px){
  .btn-acheter-packs{ display:none !important; }
  #btn-acheter, #btn-echanger-bobines{ display:none !important; }
  div:has(> #btn-acheter){ display:none !important; }
}
@media (max-width:768px){ .btn-sidebar-action, .menu-packs{ display:none !important; } }

/* ===== Sous le pack : compteur sans cadre + chrono en petit cadre ===== */
.cadre-etat{
  background:none !important; border:none !important; box-shadow:none !important;
  backdrop-filter:none !important; padding:0 !important; max-width:none !important;
  overflow:visible !important; margin-top:1.4rem !important;
}
.cadre-etat::before{ display:none !important; }

#pack-compteur, #pack-compteur *{
  font-family:'IBM Plex Mono',monospace !important; font-weight:400 !important;
  font-size:0.8rem !important; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--argent) !important; opacity:0.75;
}

#pack-timer{
  display:inline-block; margin-top:0.7rem;
  padding:0.3rem 0.9rem; border-radius:100px;
  border:1px solid rgba(227,28,61,0.28);
  background:rgba(20,14,16,0.6);
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem !important;
  letter-spacing:0.08em; color:var(--argent) !important;
}
#pack-timer:empty{ display:none; }