:root{
  --bg1:#05070D; --bg2:#0B0F1F; --fg:#EAF6FF; --muted:#A7B3C4;
  --gold1:#F7D07A; --gold2:#D6A84A; --goldGlow:rgba(255,210,120,.25);
  --cardBorder: rgba(255,255,255,.10); --cardBg1: rgba(255,255,255,.06); --cardBg2: rgba(255,255,255,.02);
  --accent:#00E5FF;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background: radial-gradient(1400px 1000px at 50% 16%, var(--bg2), var(--bg1));
  color:var(--fg);
  font:14px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

/* Couches canvas (ordre visuel) */
.layer{position:fixed; inset:-7% -7% -7% -7%; pointer-events:none}
#cmb{ z-index:0; filter: drop-shadow(0 0 24px var(--goldGlow)); opacity:.95; } /* Fond diffus filamentaire */
#bg{  z-index:0; }                                                             /* Étoiles */
#rivers{ z-index:0; filter: drop-shadow(0 0 28px var(--goldGlow)); }           /* Fleuves 3D */
#fg{  z-index:0; }                                                              /* Halos / lensing */

/* Carte */
.wrap{ position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center; padding:48px 24px; text-align:center; }
.card{
  max-width:820px; width:100%;
  background: linear-gradient(180deg, var(--cardBg1), var(--cardBg2));
  border:1px solid var(--cardBorder); border-radius:24px; backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:44px 32px 48px; position:relative;
}
.card:before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(180deg, rgba(247,208,122,.22), rgba(214,168,74,.08) 35%, transparent 72%);
  -webkit-mask: linear-gradient(#000, transparent 65%); mask: linear-gradient(#000, transparent 65%);
}
.brand{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px }
.brand h1{ margin:0; font-weight:700; letter-spacing:.4px; font-size:clamp(20px,4vw,28px) }
.sub{ color:var(--muted); margin:0 0 22px 0; font-size:clamp(12px,2.5vw,14px) }

.avatar-wrap{ width:184px; height:184px; margin:10px auto 18px; position:relative;
  filter: drop-shadow(0 0 24px rgba(0,229,255,.28)) drop-shadow(0 0 26px var(--goldGlow)); }
.halo{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 50% 48%, rgba(0,229,255,.16) 8%, rgba(0,229,255,.34) 42%, rgba(0,229,255,0) 70%);
  box-shadow: 0 0 70px 26px rgba(0,229,255,.28), 0 0 110px 22px var(--goldGlow), inset 0 0 40px rgba(0,229,255,.16);
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.avatar{ position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; display:grid; place-items:center; background: radial-gradient(120px 120px at 50% 35%, #0E2233, #051017); border:1px solid rgba(255,255,255,.10); }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.97 }
.fallback{ display:none; font-weight:700; font-size:48px; color:#CFF7FF; opacity:.85; user-select:none }

.title{
  font-size:clamp(18px,4vw,22px); line-height:1.45; margin:12px 0 10px 0; font-weight:600;
  background:linear-gradient(90deg, var(--gold1), #FFFFFF 40%, var(--gold2));
  background-size:220% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 8s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

.msg{ color:var(--fg); opacity:.94; margin:6px 0 18px 0; font-size:clamp(14px,2.6vw,16px) }

.cta{ margin-top:24px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:var(--fg); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  text-decoration:none; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; position:relative;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(247,208,122,.6); box-shadow: 0 10px 28px rgba(247,208,122,.22); }
.btn::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(247,208,122,.22), transparent 60%); opacity:0; transition: opacity .2s ease; }
.btn:hover::after{ opacity:.9 }

/* ——— Titre doré avec effet "shimmer" ——— */
.brand { 
  /* l’icône <svg> hérite de currentColor → elle devient dorée aussi */
  color: #F7D07A; 
}

.brand h1{
  margin: 0;
  font-weight: 800;
  letter-spacing: .3px;

  /* dégradé doré animé appliqué au texte */
  background: linear-gradient(
    90deg,
    #B98A2A, #FFFFFF 35%, #F7D07A 55%, #D6A84A 75%, #B98A2A
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;

  text-shadow: 0 0 18px rgba(247,208,122,.18);
  animation: ae-gold-shimmer 10s ease-in-out infinite;
}

@keyframes ae-gold-shimmer{
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Respecte l’accessibilité (pas d’anim si l’utilisateur la réduit) */
@media (prefers-reduced-motion: reduce){
  .brand h1{ animation: none; background-position: 100% 50%; }
}
footer{ margin-top:24px; color:var(--muted); font-size:11px; opacity:.85 }

@media (prefers-reduced-motion: reduce){
  .halo, .title { animation:none !important }
  #cmb, #bg, #rivers, #fg { display:none }
}@media (prefers-reduced-motion: reduce){
  .halo, .title { animation: none !important; }
  #cmb, #bg, #rivers, #fg { display: none; }
  /* Quand on force via ?fx=1, la classe .fx-on est posée sur <html> */
  .fx-on #cmb, .fx-on #bg, .fx-on #rivers, .fx-on #fg { display: block; }
}
/* === Styles premium partagés (Aeonys infos/offline/status) === */

/* Effet texte doré brillant */
@keyframes shine {0%{background-position:0% 50%}100%{background-position:200% 50%}}
.gold-text{
  background:linear-gradient(90deg,#fceabb,#f8b500,#fceabb);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:shine 12s linear infinite;
  text-shadow:0 0 14px rgba(212,175,55,0.35);
}

/* Cadres glassmorphism dorés */
.card{
  background:rgba(17,20,24,0.35);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.55);
  position:relative;
}
.card.gold-border::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(90deg,#fceabb,#f8b500,#fceabb);
  background-size:200% auto;
  animation:shine 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  box-shadow:0 0 12px rgba(212,175,55,0.35);
}

/* Boutons, badges, pill */
.btn,.badge,.pill{
  color:#d4af37!important;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
}
.btn.gold-border::before,
.badge.gold-border::before,
.pill.gold-border::before{
  border-radius:999px;
  box-shadow:0 0 12px rgba(212,175,55,0.35);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(212,175,55,0.55);
  border-color:#d4af37;
}
/* Fix: statut "À venir" collé au texte de gauche */
.kv{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; }
.kv b{ margin-left:12px; white-space:nowrap; } /* espace garanti même en wrap */

/* Liens lisibles sur cartes glass */
.card a{
  color:#bfefff;           /* teal très clair */
  text-decoration:none;
}
.card a:hover{
  color:#ffffff;           /* blanc au survol */
  text-decoration:underline;
}