:root{
  --bg:#090e1a; --txt:#e9f2ff; --muted:#9fb4d8; --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.14);
  --accent1:#6e5bff; --accent2:#00d1b2; --accent3:#ff6b6b; --glow:#4dd0e1;
}
*{box-sizing:border-box}
html,body{height:100%}

/* Page : fond + centrage parfait de la carte */
body{
  margin:0; color:var(--txt); font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(1400px 900px at 10% 10%, rgba(0,85,164,.30), transparent 70%),
    radial-gradient(1200px 800px at 85% 15%, rgba(255,215,0,.28), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(110,91,255,.18), transparent 60%),
    var(--bg);
  overflow:hidden;

  display:grid;
  min-height:100svh;
  place-items:center;
  padding:24px;
}

/* Effets de fond */
.fx{position:fixed; inset:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; width:260px; height:260px; border-radius:50%;
     filter:blur(28px); opacity:.26; animation:float 13s ease-in-out infinite}
.orb.a{background:var(--accent1); top:12%; left:6%}
.orb.b{background:var(--accent2); top:22%; right:10%}
.orb.c{background:var(--accent3); bottom:8%; left:18%; opacity:.22}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
.sweep{position:absolute; inset:-20% -10% auto auto; height:280px; width:200%;
       transform:rotate(-8deg); opacity:.08;
       background:
         linear-gradient(90deg, rgba(255,255,255,.12), transparent 45%),
         repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 14px);
       animation:sweep 9s linear infinite}
@keyframes sweep{from{transform:translateX(0) rotate(-8deg)} to{transform:translateX(-18%) rotate(-8deg)}}

/* Mode perf léger */
body.perf-low .orb{animation:none!important; filter:none!important; opacity:.18!important;}
body.perf-low .sweep{display:none!important;}
body.perf-low .flo{display:none!important;}
body.perf-low .flag-float{animation:bob 6.5s ease-in-out infinite;}
body.perf-low .hero{box-shadow:0 10px 28px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){
  .orb{animation:none!important; filter:none!important; opacity:.18!important;}
  .sweep,.flo{display:none!important;}
  .flag-float{animation:bob 6.5s ease-in-out infinite;}
}

/* Drapeaux flottants */
.flag-float{position:fixed; width:min(18vw,260px); aspect-ratio:3/2; border-radius:12px; overflow:hidden;
            border:1px solid rgba(255,255,255,.22); box-shadow:0 14px 40px rgba(0,0,0,.5);
            z-index:1; filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.flag-fr{top:24px; left:24px; animation:bob 5.2s ease-in-out infinite}
.flag-be{top:24px; right:24px; animation:bob 5.2s ease-in-out .9s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-10px) rotate(1.2deg)}}
.mast{position:absolute; left:-8px; top:-8px; bottom:-8px; width:10px; background:linear-gradient(#bdbdbd,#757575); border-radius:6px}

/* Émojis flottants */
.floaters{position:fixed; inset:0; pointer-events:none; z-index:0}
.flo{position:absolute; font-size:clamp(20px, 3.5vw, 42px); opacity:.9; filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.flo.g1{left:10%; bottom:8%; animation:rise 12s linear infinite}
.flo.g2{left:22%; top:18%;  animation:rise 14s linear 1.5s infinite}
.flo.g3{right:12%; bottom:12%; animation:rise 16s linear .8s infinite}
.flo.g4{right:28%; top:30%;  animation:rise 13s linear 2.2s infinite}
.flo.g5{left:45%; bottom:6%; animation:rise 18s linear .4s infinite}
.flo.g6{right:42%; top:14%;  animation:rise 15s linear 1.1s infinite}
@keyframes rise{from{transform:translateY(100px)} to{transform:translateY(-120vh)}}

/* Carte héros */
.hero{
  position:relative;
  margin:0;                 /* pas de marge haute par défaut */
  padding:46px 30px;
  border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  transform-style:preserve-3d; will-change:transform; max-width:980px;
  text-align:center;
  /* ↓ décale légèrement la carte vers le bas */
  margin-top: clamp(40px, 8vh, 120px);
}
.ring{position:absolute; inset:-2px; border-radius:24px; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(77,208,225,0), rgba(77,208,225,.95), rgba(77,208,225,0));
  filter:blur(12px); opacity:.38; animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Titres / Texte */
h1{
  margin:0 0 10px; font-size:clamp(36px,6.2vw,60px); line-height:1.05;
  background:linear-gradient(90deg,#fff,var(--glow),#fff 60%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 8s ease-in-out infinite; text-shadow:0 8px 30px rgba(77,208,225,.25);
}
@keyframes shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.sub{color:var(--muted); font-size:16px; max-width:720px; margin:0 auto}

/* Boutons */
.cta{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{
  cursor:pointer; border:none; padding:14px 18px; border-radius:14px; font-weight:800; letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease; text-decoration:none; display:inline-block;
}
.btn.login{
  color:#0b1220; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.87));
  border:1px solid rgba(255,255,255,.28); box-shadow:0 14px 30px rgba(77,208,225,.28); position:relative; overflow:hidden;
}
.btn.login::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(77,208,225,.24), transparent);
  transform:translateX(-120%); animation:gloss 2.6s ease-in-out infinite}
@keyframes gloss{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.btn.secondary{color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22)}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.28)}

/* Footer fixé pour ne pas gêner le centrage */
footer{
  position:fixed;
  left:0; right:0; bottom:8px;
  margin:0;
  text-align:center; color:var(--muted); font-size:13px;
}

/* Responsive */
@media (max-width:720px){
  .flag-float{width:min(28vw,200px)}
  .flag-fr{top:16px; left:12px}
  .flag-be{top:16px; right:12px}
  .hero{ margin-top:40px; } /* un peu moins sur mobile */
}