/* Reset & Basics */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Montserrat', sans-serif; }
html { scroll-behavior: smooth; }
body { background:#000; color:#fff; line-height:1.6; }

:root{
  --mck-void:#040309;
  --mck-star-gold:#F4C86B;
  --mck-core-pink:#C2185B;
}
 
#mckids-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:radial-gradient(ellipse at center, #0a0713 100%, var(--mck-void) 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#mckids-loader.hide{
  opacity:90;
  visibility:hidden;
  pointer-events:none;
}
 
#mckids-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
 
.core-stage{
  position:relative;
  width:220px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
 
/* the star point at center — explicit top/left + margin so it's
   always centered, independent of how a given browser resolves the
   "static position" of an absolutely-positioned flex child */
.core-star{
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--mck-star-gold);
  box-shadow:0 0 24px 8px rgba(244,200,107,.95), 0 0 70px 26px rgba(194,24,91,.55);
  opacity:0;
  transform:scale(.3);
  animation: mck-starBirth 0.5s ease-out 0.8s forwards, mck-starPulse 1.4s ease-in-out 1.3s;
}
@keyframes mck-starBirth{
  0%{ opacity:0; transform:scale(.2); }
  60%{ opacity:1; transform:scale(1.5); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes mck-starPulse{
  0%,100%{ box-shadow:0 0 24px 8px rgba(244,200,107,.95), 0 0 70px 26px rgba(194,24,91,.55); }
  50%{ box-shadow:0 0 36px 12px rgba(244,200,107,1), 0 0 100px 36px rgba(194,24,91,.8); }
}
 
/* energetic ring — fixed size, animated with transform:scale so it
   stays perfectly centered on the star at every frame */
.core-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  margin:-75px 0 0 -75px;
  border-radius:50%;
  border:2px solid rgba(244,200,107,.9);
  box-shadow:0 0 22px rgba(194,24,91,.55);
  opacity:0;
  transform:scale(.12);
  animation:
    mck-ringForm 0.6s ease-out 1.1s forwards,
    mck-ringOpen 0.55s cubic-bezier(.6,0,.9,.3) 2s forwards;
}
@keyframes mck-ringForm{
  0%{ opacity:0; transform:scale(.12); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes mck-ringOpen{
  0%{ opacity:1; transform:scale(1); border-width:2px; }
  100%{ opacity:0; transform:scale(5.5); border-width:0.5px; }
}
 
/* wordmark */
.core-word{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:90px;
  transform:translate(-50%, 8px);
  font-weight:800;
  font-size:17px;
  letter-spacing:.32em;
  color:#F5EFE8;
  opacity:100;
  animation: mck-wordIn 0.45s ease-out 1.25s forwards, mck-coreFadeOut 0.4s ease-in 2s forwards;
}
@keyframes mck-wordIn{
  0%{ opacity:0; transform:translate(-50%, 16px); }
  100%{ opacity:1; transform:translate(-50%, 0); }
}
 
/* three pillars */
.core-pillars{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:122px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  white-space:nowrap;
  font-size:10.5px;
  letter-spacing:.16em;
  color:rgba(245,239,232,.8);
  font-weight:600;
  font-family:'Montserrat', sans-serif;
}
.core-pillars span{
  opacity:0;
  animation: mck-pillarIn 0.35s ease-out forwards, mck-coreFadeOut 0.35s ease-in 2s forwards;
}
.core-pillars span:nth-child(1){ animation-delay:1.4s, 2s; }
.core-pillars span:nth-child(2){ animation-delay:1.5s, 2s; }
.core-pillars span:nth-child(3){ animation-delay:1.6s, 2s; }
.core-pillars .dot{ opacity:.4; }
@keyframes mck-pillarIn{
  0%{ opacity:0; transform:translateY(4px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes mck-coreFadeOut{
  to{ opacity:0; }
}
 
@media (prefers-reduced-motion: reduce){
  .core-star, .core-ring, .core-word, .core-pillars span{
    animation-duration:.01s !important;
    animation-delay:0s !important;
  }
}
 
/* Background Video */
#bg-video { position:fixed; left:0; top:-10%; width:100%; height:110%; object-fit:cover; opacity:0.6; z-index:-1; }

/* Header */
.header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:linear-gradient(90deg, #000000, #106a6d); box-shadow:0 0 15px rgba(0,0,0,0.5); position:sticky; top:0; z-index:1000; }
.logo img { height:60px; transition:transform 0.5s; }
.logo img:hover { transform:rotateY(360deg); }

/* Countdown */
#countdownContainer { background:#000; color:rgb(255,234,0); font-family:monospace; padding:1px 20px; font-size:0.7rem; text-align:center; }
.neon-glow { text-shadow:0 0 5px #a40eb8,0 0 10px #000,0 0 20px #8a1d90; }

/* Nav */
.nav-list { display:flex; list-style:none; }
.nav-list li { margin-left:30px; }
.nav-list li a { text-decoration:none; color:#fff; font-weight:bold; transition:0.3s; }
.nav-list li a:hover { color:var(--mck-accent,#00fff7); text-shadow:0 0 10px var(--mck-accent,#00fff7); transform:rotateY(15deg) scale(1.1); }

/* Mobile Nav */
.menu-toggle { display:none; flex-direction:column; cursor:pointer; }
.bar { height:3px; width:28px; background:#fff; margin:4px 0; transition:0.4s; }
@media screen and (max-width:768px){
  .nav-list { position:absolute; top:70px; right:0; width:220px; flex-direction:column; background:linear-gradient(90deg,#189aab,#000); overflow:hidden; border-radius:12px; height:0; transition:height 0.5s ease,padding 0.5s ease; }
  .nav-list.active { height:auto; padding:10px 0; }
  .menu-toggle { display:flex; }
  .nav-list li { margin:15px 0; text-align:center; }
}

/* Main Sections */
.hero { height:80vh; display:grid; place-items:center; text-align:center; overflow:hidden; perspective:1200px; }
.hero-img { width:min(60vw,320px); animation:float 6s ease-in-out infinite; }
.hero-title { font-size:clamp(2rem,6vw,4rem); opacity:0; display:inline-block; color:#ffd700; text-shadow:0 0 15px #ff69b4,0 0 30px #ff1493,0 0 45px var(--mck-accent2,#ff00ff); }
.hero-sub { font-size:1rem; color:#fff; text-shadow:0 0 5px #14f7ff; margin-top:0.5rem; }
.hero-btn { background:#ff14ff; color:#fff; padding:15px 30px; border-radius:50px; text-transform:uppercase; margin-top:1rem; box-shadow:0 0 20px #ff69b4; transition:0.3s ease; }
.hero-btn:hover { transform:scale(1.05); background:#ff69b4; }
@keyframes float {0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}

.ala-une { text-align: center;}

/* Carousel */
.carousel { overflow:hidden; width:100%; max-width:700px; margin:auto; display:flex; gap:1rem; padding:15px; border-radius:10px; box-shadow:0 0 12px rgb(96,6,64); }
.slide { min-width:150px; border-radius:12px; box-shadow:0 0 15px rgba(22, 193, 113, 0.779); }
video { width:100%; height:100px; }
.carousel.paused { animation:pause-wiggle 1.5s ease-in-out infinite; opacity:0.85; }
@keyframes pause-wiggle {0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}

/* Instigateur */
.instigateur-semaine { margin-top:2rem; background:linear-gradient(#000000da,#2b423fc6); border-radius:12px; padding:1.5rem; box-shadow:0 0 15px rgb(7, 125, 115); text-align:center; }
.instigateur-card img { width:140px; height:140px; border-radius:50%; object-fit:cover; margin-bottom:1rem; border:3px solid rgb(147,38,54); }
.instigateur-card h3 { margin-bottom:0.5rem; color:rgb(58,7,7); }
.instigateur-card p { margin-bottom:1rem; font-size:1rem; color:#bbb; }

/* Quick Links */
.quick-links .btn { background:rgb(5, 101, 108); color:#fff; padding:0.3rem 1rem; border-radius:10px; text-decoration:none; font-size:0.6rem; transition:0.3s; }

#presentation { text-align: center;}
#instigateurs { text-align: center; align-content: center;}
#blog { text-align: center;}

/* Footer */
footer {
    display: contents;
  text-align: center;
  font-size: xx-small;
  padding: 1rem;
  background: #690c6565;
  color: white;
  margin-top: 2rem;
  padding:7px 10px;
  border-radius:100px;
  border:2px solid #0000001c;
}
footer a { color:#f0a500; text-decoration:none; margin:0 0.5rem; }
/* ==========================
MCKIDS UNITED — HERO
========================== */

.united-hero{
    position:relative;
    min-height:100vh;
    align-items: center;
    align-content: center;
    text-align: center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(
        circle,
        rgba(244,200,107,0.15),
        rgba(0,0,0,0.85)
    );
}

.hero-content{
    position:relative;
    z-index:10;
}

.hero-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;
    background:rgba(244,200,107,0.15);
    border:1px solid #F4C86B;
    color:#F4C86B;
    margin-bottom:20px;
}

.hero-stats{
    display:flex;
    gap:20px;
    justify-content:center;
    margin-top:30px;
    flex-wrap:wrap;
}

.stat{
    background:rgba(255,255,255,0.08);
    padding:20px;
    border-radius:15px;
    backdrop-filter:blur(8px);
}

/* ==========================
MCKIDS UNITED — CTA
========================== */

.united-cta{
    display:flex;
    gap:16px;
    justify-content:center;
    align-items:center;
    margin-top:32px;
    flex-wrap:wrap;
}

.btn-primary{
    display:inline-block;
    padding:14px 32px;
    border-radius:50px;
    background:linear-gradient(135deg, #F4C86B, #C2185B);
    color:#0d0a14;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    box-shadow:0 4px 20px rgba(244,200,107,.25);
    transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(244,200,107,.4);
}

.secondary-btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:50px;
    background:#222;
    color:#F5EFE8;
    font-weight:600;
    text-decoration:none;
    border:1px solid rgba(245,239,232,.2);
    transition:border-color .25s ease, background .25s ease;
}
.secondary-btn:hover{
    border-color:rgba(245,239,232,.55);
    background:#2a2a2a;
}

@media (max-width:480px){
    .united-cta{
        flex-direction:column;
        width:100%;
    }
    .btn-primary,
    .secondary-btn{
        text-align:center;
        width:100%;
    }
    .BD{width:140px; height:140px; border-radius:50%; object-fit:cover; margin-bottom:1rem; border:3px solid rgb(147,38,54);}
}

.mckids-globe{
    text-align:center;
    padding:80px 20px;
}

.cities{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:30px;
}

.cities span{
    padding:10px 15px;
    border-radius:30px;
    border:1px solid #FFD700;
}

.worldcup-zone{
    text-align:center;
    padding:80px 20px;
}

.novaforge-section{
    padding:80px 20px;
    text-align:center;
}

.badge-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:40px;
}

.badge-card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,215,0,0.3);
    padding:25px;
    border-radius:20px;
}

.BD img{
width:450px; height:240px; border-radius:10%; object-fit:cover; margin-bottom:4rem; border:3px solid rgb(38, 121, 147);
}