/* =================================================================
   CRYPTALIS — Minecraft
   Thème "Fantasy • Magie • Mystère • Machinerie"
   Particules + Pluie magique + Étincelles + Traces techno
   ================================================================= */

/* ---------- Variables ---------- */
:root{
  /* Couleurs principales */
  --ink:#eaf4ff;            /* texte principal */
  --ink-dim:#cfe4ff;        /* texte secondaire */
  --bg:#070f16;             /* fond global (plus sombre que #0b1322) */

  --panel:#0d1516;          /* panneaux/cartes */
  --emerald:#39f0c9;        /* accent clair (émeraude) */
  --emerald-deep:#0fa585;   /* accent profond */
  --copper:#de7a3a;         /* accent “machinerie” cuivre */
  --copper-dim:#a75a2c;

  --overlay1:rgba(6,12,14,.65);
  --overlay2:rgba(5,10,12,.86);

  --line:rgba(57,240,201,.18);
  --shadow:0 20px 60px rgba(0,0,0,.46);

  /* variables animées (pilotent les layers du hero) */
  --halo-x:0px;  --halo-y:0px;
  --motes-x:0px; --motes-y:0px;
  --rain-x:0px;  --rain-y:0px;

  /* nav heights */
  --nav-h:64px;
}

/* ---------- Reset simple ---------- */
*{ box-sizing:border-box }
html,body{ height:100% }
img{ max-width:100%; height:auto; display:block }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}
.wrap{ max-width:1200px; margin:0 auto; padding:0 20px }

/* ---------- Fond global + overlay ---------- */
body.theme-mc{
  background:url('../images/bg-minecraft.jpg') center top/cover no-repeat fixed;
  min-height:100vh;
}
body.theme-mc::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--overlay1),var(--overlay2));
}

/* =================================================================
   NAVBAR — .navbar-mc > .wrap > ( .nav-left | .nav-center | .nav-right )
   ================================================================= */
.navbar-mc{
  position:sticky; top:0; left:0; right:0; z-index:9000;
  width:100%;
  background:rgba(6,16,14,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(57,240,201,.22);
  box-shadow:0 1px 0 rgba(57,240,201,.10) inset, 0 10px 26px rgba(0,0,0,.45);
}
.navbar-mc .wrap{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}

/* gauche */
.navbar-mc .nav-left{ display:flex; align-items:center; gap:10px; min-width:0 }
.navbar-mc .logo{ height:28px; width:auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,.4)) }
.navbar-mc .title{ color:var(--ink); font-weight:800; letter-spacing:.2px; white-space:nowrap }

/* centre */
.navbar-mc .nav-center{ flex:1; min-width:0 }
.navbar-mc .nav-center ul{
  margin:0; padding:0; list-style:none;
  display:flex; justify-content:center; align-items:center; gap:26px;
}
.navbar-mc .nav-center a{
  color:var(--ink); text-decoration:none; font-weight:750; opacity:.92;
  padding:8px 4px; border-radius:8px;
  transition:color .15s, opacity .15s, background .15s, text-shadow .15s;
}
.navbar-mc .nav-center a:hover{ color:var(--emerald); opacity:1; text-shadow:0 0 12px rgba(57,240,201,.35) }
.navbar-mc .nav-center a.is-active{
  color:var(--emerald);
  background:rgba(57,240,201,.08);
  box-shadow:0 0 0 1px rgba(57,240,201,.16) inset;
}

/* droite */
.navbar-mc .nav-right{ display:flex; align-items:center; gap:12px }
.navbar-mc .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:10px; font-weight:800; text-decoration:none;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.navbar-mc .btn-ghost{
  background:linear-gradient(180deg, rgba(12,28,28,.55), rgba(6,16,16,.55));
  color:var(--ink);
}
.navbar-mc .btn-green{
  background:linear-gradient(180deg, var(--emerald), var(--emerald-deep));
  color:#001; border-color:rgba(57,240,201,.25);
  box-shadow:0 4px 12px rgba(0,255,180,.25);
}
.navbar-mc .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.45) }

/* burger (option) */
.navbar-mc .nav-burger{ display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:linear-gradient(180deg, rgba(12,28,28,.55), rgba(6,16,16,.55)) }
.navbar-mc .nav-burger .line{ display:block; width:20px; height:2px; margin:4px auto; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease, width .25s ease }

@media (max-width: 900px){
  .navbar-mc .nav-burger{ display:inline-grid; place-items:center }
  .navbar-mc .nav-right{ display:none }
  .navbar-mc .nav-center{ position:absolute; left:0; right:0; top:var(--nav-h) }
  .navbar-mc .nav-center ul{
    background:linear-gradient(180deg, rgba(6,16,14,.98), rgba(6,16,14,.94));
    border-bottom:1px solid rgba(57,240,201,.18);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    display:grid; gap:10px; padding:14px;
    transform-origin:top; transform:scaleY(0);
    opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .18s ease;
  }
  .navbar-mc.open .nav-center ul{ transform:scaleY(1); opacity:1; pointer-events:auto }
  .navbar-mc.open .nav-burger .line:nth-child(1){ transform:translateY(6px) rotate(45deg); width:22px }
  .navbar-mc.open .nav-burger .line:nth-child(2){ opacity:0 }
  .navbar-mc.open .nav-burger .line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:22px }
}

/* =================================================================
   HERO — brume, runes, particules, pluie, étincelles, tracés machines
   ================================================================= */
.universe-header.mc{
  position:relative; overflow:hidden; isolation:isolate;
  margin:18px 0; border-radius:24px; padding:72px 24px;
  text-align:center; color:var(--ink);
  border:1px solid rgba(57,240,201,.25);
  box-shadow:0 0 0 1px rgba(57,240,201,.08) inset, 0 60px 120px rgba(0,0,0,.55), 0 0 80px rgba(57,240,201,.05);

  /* Layers : halo + voile + image + particules + pluie */
  background-image:
    radial-gradient(1200px 520px at 20% 10%, rgba(57,240,201,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,18,18,.60), rgba(0,0,0,.50)),
    url('../images/bg-minecraft.jpg'),
    radial-gradient(2.6px 2.6px at 20% 30%, rgba(127,255,212,.95), transparent 55%),
    radial-gradient(2.2px 2.2px at 73% 72%, rgba(57,240,201,.85),  transparent 55%),
    radial-gradient(2.4px 2.4px at 40% 60%, rgba(127,255,212,.9),  transparent 55%),
    radial-gradient(2.0px 2.0px at 80% 25%, rgba(57,240,201,.82),  transparent 55%),
    radial-gradient(1.8px 1.8px at 55% 45%, rgba(127,255,212,.9),  transparent 55%),
    repeating-linear-gradient(120deg, rgba(57,240,201,.16) 0 2px, transparent 2px 140px);
  background-size: auto, auto, cover,
                   700px 500px, 900px 700px, 800px 600px, 750px 550px, 650px 450px,
                   1000px 1000px;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,repeat,repeat,repeat,repeat;
  background-position:
    calc(var(--halo-x)) calc(var(--halo-y)), 0 0, 50% 50%,
    calc(var(--motes-x) * -1.0) calc(var(--motes-y) *  1.0),
    calc(var(--motes-x) *  0.6)  calc(var(--motes-y) * -0.8),
    calc(var(--motes-x) * -0.4)  calc(var(--motes-y) * -0.5),
    calc(var(--motes-x) *  0.9)  calc(var(--motes-y) *  0.7),
    calc(var(--motes-x) * -1.4)  calc(var(--motes-y) *  1.1),
    calc(var(--rain-x)) calc(var(--rain-y));

  animation: heroHalo 22s ease-in-out infinite, motesDrift 16s ease-in-out infinite, rainFall 7s linear infinite;
}

/* Brume douce */
.universe-header.mc::before{
  content:""; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(55% 40% at 30% 30%, rgba(127,255,212,.10), transparent 60%),
    radial-gradient(50% 35% at 70% 60%, rgba(57,240,201,.08),  transparent 60%);
  filter:blur(16px);
  animation: mist 14s ease-in-out infinite alternate;
}

/* Runes + circuits (overlay) */
.universe-header.mc::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22;
  background-image:
    /* trame runique */
    repeating-linear-gradient(0deg,  rgba(57,240,201,.05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(57,240,201,.035) 0 1px, transparent 1px 48px),
    /* pistes cuivre fines (machinerie) */
    repeating-linear-gradient( 30deg, transparent 0 12px, rgba(222,122,58,.05) 12px 13px),
    repeating-linear-gradient(-30deg, transparent 0 14px, rgba(222,122,58,.06) 14px 15px);
  mix-blend-mode:overlay;
  mask-image:radial-gradient(60% 60% at 50% 40%, #000 0 70%, transparent 86%);
}

/* Étincelles ascendantes */
.universe-header.mc .fx-sparks{
  pointer-events:none; position:absolute; inset:0; z-index:3;
  background:
    radial-gradient(2px 2px at 10% 90%, rgba(127,255,212,.9),  transparent 55%),
    radial-gradient(2px 2px at 30% 95%, rgba(57,240,201,.85),  transparent 55%),
    radial-gradient(2px 2px at 50% 92%, rgba(127,255,212,.9), transparent 55%),
    radial-gradient(2px 2px at 70% 94%, rgba(57,240,201,.85),  transparent 55%),
    radial-gradient(2px 2px at 90% 91%, rgba(127,255,212,.8), transparent 55%);
  background-repeat:no-repeat;
  animation:sparksUp 5.5s linear infinite;
  opacity:.85;
}

/* Engrenages fantômes (machinerie) */
.universe-header.mc .fx-gears{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(60px 60px at 18% 25%, rgba(222,122,58,.07) 40%, transparent 42%),
    radial-gradient(50px 50px at 82% 65%, rgba(167,90,44,.06) 40%, transparent 42%);
  mix-blend-mode:screen;
  animation: gearsSpin 24s linear infinite;
}

/* Animations (variables) */
@keyframes heroHalo{ 0%{--halo-x:0;--halo-y:0} 50%{--halo-x:-40px;--halo-y:-20px} 100%{--halo-x:0;--halo-y:0} }
@keyframes motesDrift{ 0%{--motes-x:0;--motes-y:0} 50%{--motes-x:60px;--motes-y:-40px} 100%{--motes-x:0;--motes-y:0} }
@keyframes rainFall{ 0%{--rain-x:0;--rain-y:-900px} 100%{--rain-x:900px;--rain-y:900px} }
@keyframes mist{ 0%{transform:translate3d(-2%,-1%,0) scale(1.02);opacity:.9} 100%{transform:translate3d(2%,1%,0) scale(1.06);opacity:.75} }
@keyframes sparksUp{ 0%{transform:translateY(0);opacity:.9} 70%{transform:translateY(-28px);opacity:.6} 100%{transform:translateY(-40px);opacity:0} }
@keyframes gearsSpin{ from{background-position:0 0, 0 0} to{background-position:360px 360px, -360px -360px} }

/* Logo flottant + halo */
.universe-header.mc .universe-logo{
  width:96px; margin:0 auto 12px; position:relative; z-index:4;
  filter:drop-shadow(0 0 18px rgba(57,240,201,.35)) drop-shadow(0 12px 28px rgba(0,0,0,.6));
  animation: idle 6s ease-in-out infinite;
}
.universe-header.mc .universe-logo::after{
  content:""; position:absolute; inset:-36px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(57,240,201,.45), transparent 70%);
  filter:blur(18px);
  animation: haloPulse 6.2s ease-in-out infinite;
}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.18);opacity:.95}}

.universe-header.mc h1{
  margin:12px 0 6px; color:#ecfff9; letter-spacing:.2px;
  text-shadow:0 0 18px rgba(57,240,201,.35), 0 2px 0 rgba(0,0,0,.35);
}
.universe-header.mc .subtitle{ color:#c9f7ef }

/* =================================================================
   Boutons (gros + secondaires)
   ================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; font-weight:700; border-radius:12px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change:transform, box-shadow;
}
.btn.primary{
  background:linear-gradient(180deg,var(--emerald),var(--emerald-deep));
  color:#001; border:1px solid rgba(57,240,201,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 24px rgba(57,240,201,.18);
  position:relative; padding:12px 18px;
}
.btn.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.55), 0 0 28px rgba(57,240,201,.28) }
.btn.primary:active{ transform:translateY(0) }
.btn.primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(127,255,212,.10) 50%,transparent 60%);
  transform:translateX(-120%); transition:transform .45s ease;
}
.btn.primary:hover::after{ transform:translateX(120%) }
.btn-xl{ padding:14px 26px; font-size:18px; border-radius:14px }

/* Liseré cuivre (option pour machinerie) */
.btn.copper{
  background:linear-gradient(180deg, var(--copper), var(--copper-dim));
  color:#120a07; border-color:rgba(222,122,58,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 22px rgba(222,122,58,.18);
}

/* =================================================================
   Bloc téléchargement + menu plateformes
   ================================================================= */
.download-wrap{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:18px }

.btn.ghost{
  background:linear-gradient(180deg, rgba(0,24,24,.45), rgba(0,12,12,.45));
  border:1px solid rgba(57,240,201,.24);
  color:#d9fff7; border-radius:12px; padding:10px 14px; font-weight:700
}
.btn.ghost:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.45) }


/* =================================================================
   CONTENT / CARDS / FEATURES
   ================================================================= */
.mc-container{ padding:28px 0 }
.universe-content{
  position:relative; z-index:10;
  background:linear-gradient(180deg, rgba(0,24,24,.78), rgba(0,12,12,.86));
  border:1px solid var(--line);
  border-radius:20px; padding:28px; margin:24px auto; max-width:1100px; color:var(--ink-dim);
  box-shadow:0 0 0 1px rgba(57,240,201,.05) inset, 0 24px 60px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* fine bande techno cuivre en bas des cartes */
.universe-content::after{
  content:""; display:block; height:3px; margin-top:18px; border-radius:3px;
  background:linear-gradient(90deg, transparent, rgba(222,122,58,.35), transparent);
  opacity:.65;
}

.features{
  display:grid; grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:10px 22px; list-style:none; margin:18px 0 0; padding:0;
}
@media (max-width:800px){ .features{ grid-template-columns:1fr } }
.features li{ position:relative; padding-left:1.2rem; color:#cfeee7 }
.features li::before{
  content:""; position:absolute; left:0; top:.45rem; width:.55rem; height:.55rem; border-radius:2px;
  background:radial-gradient(circle at 30% 30%, #cafff0, #39f0c9 60%, #0fa585);
  box-shadow:0 0 8px rgba(57,240,201,.4);
}

/* =================================================================
   Server IP + actions
   ================================================================= */
.server-info{ text-align:center; margin-top:24px }
.server-info p{ font-size:20px; margin-bottom:12px }
.server-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px }
.btn-sm{ padding:8px 14px; font-size:14px; border-radius:10px }

.server-info .ip{
  position:relative; display:inline-block; color:#dffef6; text-shadow:0 0 10px rgba(127,255,212,.25);
  padding:2px 6px; border-radius:6px; background:rgba(57,240,201,.06); border:1px solid rgba(57,240,201,.18)
}
.server-info .ip::after{
  content:""; position:absolute; inset:0; border-radius:4px;
  background:linear-gradient(90deg, transparent, rgba(127,255,212,.18), transparent);
  transform:translateX(-120%); animation:sweep 5s ease-in-out infinite;
}
@keyframes sweep{ 0%{transform:translateX(-120%)} 50%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

/* =================================================================
   Footer
   ================================================================= */
.site-footer{
  margin-top:40px; text-align:center; padding:26px 20px; color:#bfeee4; position:relative; overflow:hidden;
  background:radial-gradient(700px 260px at 50% -20%, rgba(57,240,201,.22), transparent 72%), #081010;
  border-top:1px solid rgba(57,240,201,.28);
  box-shadow:0 -8px 30px rgba(0,0,0,.5) inset, 0 -1px 0 rgba(57,240,201,.15) inset;
}
.site-footer::after{
  content:""; position:absolute; left:50%; bottom:0; width:60%; height:2px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(57,240,201,.35), transparent);
  filter:blur(.4px); animation:footerPulse 6s ease-in-out infinite;
}
@keyframes footerPulse{ 0%,100%{opacity:.25} 50%{opacity:.6} }

/* =================================================================
   ACCESSIBILITÉ / PERF
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  .universe-header.mc{ animation:none }
  .universe-header.mc::before{ animation:none }
  .universe-header.mc .fx-sparks,
  .universe-header.mc .fx-gears{ animation:none }
  .site-footer::after{ animation:none }
  .server-info .ip::after{ animation:none }
}

/* Utilitaires */
.hidden{ display:none !important }
.center{ text-align:center }
.mt-0{ margin-top:0 } .mt-8{ margin-top:8px } .mt-16{ margin-top:16px } .mt-24{ margin-top:24px }
.mb-0{ margin-bottom:0 } .mb-8{ margin-bottom:8px } .mb-16{ margin-bottom:16px } .mb-24{ margin-bottom:24px }

/* ===== FIX empilement du menu déroulant ===== */

/* le hero au-dessus des cartes */
.universe-header.mc{
  position: relative;
  z-index: 200;            /* > z-index des cartes */
  overflow: visible !important;
}

/* les cartes en dessous (ou retire carrément leur z-index) */
.universe-content{
  position: relative;
  z-index: 5;              /* plus bas que 200 */
}

/* chaîne d'empilement claire pour le menu */
.download-wrap{ position: relative; z-index: 300; }
.dl-more{ position: relative; z-index: 400; }
.dl-menu{ position: absolute; z-index: 500; }  /* la boîte du menu au top */

/* reset du <summary> pour le styliser comme un bouton */
.dl-more > summary {
  list-style: none;          /* supprime le triangle */
  cursor: pointer;
}
.dl-more > summary::-webkit-details-marker { display: none; }  /* Chrome/Safari */

/* boîte du menu (fermée par défaut) */
.dl-menu{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 230px;
  padding: 8px;

  background: linear-gradient(180deg, rgba(0,24,24,.96), rgba(0,12,12,.92));
  border: 1px solid rgba(57,240,201,.28);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.55), 0 0 22px rgba(57,240,201,.10);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* état ouvert natif de <details> */
.dl-more[open] .dl-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* pont anti-perte de hover (si on utilise aussi la souris) */
.dl-more::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:8px;
}

/* items */
.dl-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  color:#dff9f3; text-decoration:none; border-radius:10px; outline:none;
}
.dl-item:hover, .dl-item:focus{
  background:rgba(57,240,201,.10); color:#eafffb;
}

/* mobile : centrer */
@media (max-width:640px){
  .dl-more{ position: static; }
  .dl-menu{ left:50%; right:auto; transform:translate(-50%, -6px); }
  .dl-more[open] .dl-menu{ transform:translate(-50%, 0); }
}
/* =========================================================
   CRYPTALIS — "Magie +" layer pack (lightweight, GPU-friendly)
   Add at the end of minecraft.css
   ========================================================= */

/* Global night-sky twinkle behind everything */
body.theme-mc::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  /* three tiny star fields at different scales for depth */
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(170,255,230,.28), transparent 60%),
    radial-gradient(1px 1px at 76% 11%, rgba(90,240,200,.22), transparent 60%),
    radial-gradient(1px 1px at 41% 71%, rgba(120,255,235,.26), transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 2px rgba(127,255,212,.35));
}
@keyframes twinkle{
  0%{opacity:.55; transform:translate3d(0,0,0)}
  50%{opacity:.85}
  100%{opacity:.65; transform:translate3d(0,-0.8vh,0)}
}

/* Soft "aurora veil" that drifts across the hero */
.universe-header.mc .fx-aurora{
  position:absolute; inset:-2% -2% -8% -2%; z-index:2; pointer-events:none;
  background:
    conic-gradient(from 0deg at 30% 20%,
      rgba(70,255,210,.20),
      rgba(0,0,0,0) 22% 42%,
      rgba(0,220,180,.16) 55%,
      rgba(0,0,0,0) 70% 86%,
      rgba(120,255,235,.18)
    );
  filter: blur(28px) saturate(120%);
  mix-blend-mode: screen;
  animation: auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%  { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.04); opacity:.65 }
  50% { transform: translate3d( 2%,  0%, 0) rotate(8deg)  scale(1.08); opacity:.85 }
  100%{ transform: translate3d( 1%,-1.5%,0) rotate(-6deg) scale(1.06); opacity:.7  }
}

/* Enchanted underline for H1/H2 */
.universe-header.mc h1,
.universe-content h2{
  position:relative;
}
.universe-header.mc h1::after,
.universe-content h2::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:220px; height:3px; border-radius:4px;
  background:
    linear-gradient(90deg, transparent, rgba(57,240,201,.6), #98ffe9, rgba(57,240,201,.6), transparent);
  filter: drop-shadow(0 0 6px rgba(57,240,201,.35));
  animation: linePulse 3.6s ease-in-out infinite;
}
@keyframes linePulse {
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* Cards: faint border shimmer that runs along the frame */
.universe-content{
  position:relative;
  overflow:visible;
}
.universe-content::before{
  content:"";
  position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%,
      rgba(127,255,212,.18) 35%, rgba(127,255,212,.35) 50%,
      rgba(127,255,212,.18) 65%, transparent 100%);
  mask: radial-gradient(110% 140% at 50% -20%, #000 35%, transparent 60%) /* top sweep */,
        linear-gradient(#000,#000) content-box;   /* keep it to the border */
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; border-radius:20px;     /* align with real border */
  opacity:.55;
  animation: frameSweep 7s linear infinite;
}
@keyframes frameSweep{
  from { background-position: 0% 0% }
  to   { background-position: 200% 0% }
}

/* Buttons: magical ring & spark motes on hover/focus */
.btn.primary,
.btn.ghost{
  position:relative;
  isolation:isolate;
}
.btn.primary::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:
    radial-gradient(24px 14px at 20% 40%, rgba(127,255,212,.18), transparent 55%),
    radial-gradient(18px 12px at 70% 80%, rgba(57,240,201,.16), transparent 55%);
  opacity:.0; transform:scale(.96);
  transition:opacity .25s ease, transform .25s ease;
  filter: blur(6px) saturate(120%);
}
.btn.primary:hover::before,
.btn.primary:focus-visible::before{
  opacity:.85; transform:scale(1.02);
}
.btn.primary:focus-visible{ outline:2px solid rgba(127,255,212,.55); outline-offset:3px }

/* Navbar: very subtle gradient shimmer */
.navbar-mc{
  background:
    linear-gradient(180deg, rgba(6,16,14,.86), rgba(6,16,14,.86)) padding-box,
    linear-gradient(90deg, rgba(57,240,201,.18), rgba(0,0,0,0), rgba(57,240,201,.18)) border-box;
  border-bottom:1px solid transparent; /* we paint it with the gradient above */
  animation: navShimmer 9s linear infinite;
}
@keyframes navShimmer{ from{background-position:0 0, 0 0} to{background-position:0 0, 200% 0} }

/* Cursor highlight on interactive elements for a magic feel */
a:hover, button:hover{ text-shadow: 0 0 8px rgba(127,255,212,.28) }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .universe-header.mc .fx-aurora,
  body.theme-mc::after,
  .universe-content::before,
  .navbar-mc{ animation:none }
}
/* =========================================================
   BOOST MAGIQUE/FANTASY + MACHINERIE
   ========================================================= */

/* Variables de parallaxe pilotées par JS */
:root{
  --parx: 0px;      /* -40..40 px environ */
  --pary: 0px;      /* -40..40 px environ */
}

/* ---------- Aurora + faisceaux mystiques dans le HERO ---------- */
.universe-header.mc{
  /* on ajoute 2 couches "au-dessus" du fond existant : aurora + beams */
  background-image:
    /* AURORA ondulante (conic-gradient) */
    radial-gradient(1400px 900px at calc(50% + var(--parx)) calc(40% + var(--pary)),
      rgba(57,240,201,.10), transparent 60%),
    conic-gradient(from 210deg at 50% 10%,
      rgba(127,255,212,.12), transparent 25%,
      rgba(57,240,201,.10) 35%, transparent 60%,
      rgba(127,255,212,.08) 70%, transparent 100%),
    /* BEAMS faibles (s’ajoutent aux layers déjà présents dans ton fichier) */
    repeating-conic-gradient(from 0deg at 50% 40%,
      rgba(127,255,212,.08) 0 6deg, transparent 6deg 18deg),
    /* [les couches déjà en place] */
    radial-gradient(1200px 520px at 20% 10%, rgba(57,240,201,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,18,18,.60), rgba(0,0,0,.50)),
    url('../images/bg-minecraft.jpg'),
    radial-gradient(2.6px 2.6px at 20% 30%, rgba(127,255,212,.95), transparent 55%),
    radial-gradient(2.2px 2.2px at 73% 72%, rgba(57,240,201,.85),  transparent 55%),
    radial-gradient(2.4px 2.4px at 40% 60%, rgba(127,255,212,.9),  transparent 55%),
    radial-gradient(2.0px 2.0px at 80% 25%, rgba(57,240,201,.82),  transparent 55%),
    radial-gradient(1.8px 1.8px at 55% 45%, rgba(127,255,212,.9),  transparent 55%),
    repeating-linear-gradient(120deg, rgba(57,240,201,.16) 0 2px, transparent 2px 140px);

  background-size:
    auto, auto, auto,
    700px 500px, 900px 700px, 800px 600px, 750px 550px, 650px 450px,
    1000px 1000px;
  background-blend-mode:
    screen, screen, screen,
    normal, normal, normal, normal, normal, normal;

  animation:
    auroraWave 18s ease-in-out infinite alternate,
    beamSweep 12s linear infinite;
}

/* Aurora respirante */
@keyframes auroraWave{
  0%   { filter: hue-rotate(0deg) saturate(110%); }
  50%  { filter: hue-rotate(20deg) saturate(130%); }
  100% { filter: hue-rotate(0deg) saturate(115%); }
}

/* Faisceaux qui balayent très doucement */
@keyframes beamSweep{
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 360deg 0, 0 0, 0 0, 50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0; }
}

/* ---------- Anneau RUNIQUE & halo autour du logo ---------- */
.universe-header.mc .universe-logo{
  z-index: 5; /* passe devant l’aurora */
}

/* Anneau runique : ticks + glyphes stylisés */
.universe-header.mc .universe-logo::before{
  content:"";
  position:absolute; inset:-58px; border-radius:50%;
  pointer-events:none; z-index:-1;

  /* une couronne de “glyphes” grâce à repeating-conic-gradient */
  background:
    repeating-conic-gradient(from 0deg,
      rgba(57,240,201,.55) 0 2deg, transparent 2deg 15deg),
    radial-gradient(circle, rgba(57,240,201,.20), transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 76%);
          mask: radial-gradient(closest-side, transparent 74%, #000 76%);
  box-shadow: 0 0 28px rgba(57,240,201,.35), inset 0 0 18px rgba(57,240,201,.25);
  animation: runesSpin 24s linear infinite;
  mix-blend-mode: screen;
}

@keyframes runesSpin{
  from{ transform: rotate(0deg) translate(var(--parx), var(--pary)); }
  to  { transform: rotate(360deg) translate(var(--parx), var(--pary)); }
}

/* Un second léger halo externe, pulsant, pour la “magie” */
.universe-header.mc .universe-logo::after{
  /* déjà utilisé dans ton CSS : on renforce un peu l’effet */
  filter: blur(22px);
  animation: haloPulse 5.8s ease-in-out infinite;
}

/* ---------- Circuits cuivre animés sur les cartes ---------- */
.universe-content{
  position: relative;
  overflow: hidden;
}

.universe-content::before{
  content:"";
  position:absolute; inset:1px; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(90deg, rgba(222,122,58,.11) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(0deg,  rgba(222,122,58,.08) 0 2px, transparent 2px 14px);
  opacity:.35;
  -webkit-mask: radial-gradient(120% 110% at 50% 40%, #000 25%, transparent 70%);
          mask: radial-gradient(120% 110% at 50% 40%, #000 25%, transparent 70%);
  animation: circuitFlow 14s linear infinite;
}

@keyframes circuitFlow{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 120px 0, 0 120px; }
}

/* Souligner les boutons “magiques” */
.btn.primary{
  box-shadow:
    0 10px 26px rgba(0,0,0,.45),
    0 0 24px rgba(57,240,201,.22),
    0 0 60px rgba(57,240,201,.08) inset;
}
.btn.primary:hover{
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
/* --- NAVBAR: forcer le texte blanc des boutons Connexion / Inscription --- */
.navbar-mc .nav-right .btn,
.navbar-mc .nav-right .btn:link,
.navbar-mc .nav-right .btn:visited,
.navbar-mc .nav-right .btn:hover,
.navbar-mc .nav-right .btn:focus {
  color: #fff !important;
  text-decoration: none;
}

/* bouton ghost (Connexion) */
.navbar-mc .nav-right .btn-ghost { color: #fff !important; }

/* bouton vert (Inscription) – on écrase la couleur noire définie par .btn.primary */
.navbar-mc .nav-right .btn-green { color: #fff !important; }

/* Connexion (ghost) : rester en blanc */
.navbar-mc .nav-right .btn-ghost,
.navbar-mc .nav-right .btn-ghost:link,
.navbar-mc .nav-right .btn-ghost:visited,
.navbar-mc .nav-right .btn-ghost:hover,
.navbar-mc .nav-right .btn-ghost:focus {
  color: #fff !important;
}

/* Inscription (green) : texte noir */
.navbar-mc .nav-right .btn-green,
.navbar-mc .nav-right .btn-green:link,
.navbar-mc .nav-right .btn-green:visited,
.navbar-mc .nav-right .btn-green:hover,
.navbar-mc .nav-right .btn-green:focus {
  color: #001 !important; /* noir très foncé, lisible sur le dégradé vert */
  text-shadow: none;
}