/* =====================================================================
   ASTERIA PREMIUM — couche visuelle "Noir & Or"
   Chargee en dernier. Ne touche pas a la logique : jetons + composants.
   Sombre = html[data-theme="dark"]  (Noir & Or)
   Clair  = html[data-theme="light"] (Ivoire epure)
   ===================================================================== */

/* ---------- 1. Jetons communs ---------------------------------------- */
:root{
  --gold-1:#efe3bf;
  --gold-2:#d7bc7c;
  --gold-3:#b8934a;
  --gold-4:#7d5f26;
  --gold-grad:linear-gradient(135deg,#efe3bf 0%,#d7bc7c 36%,#b8934a 72%,#8f6f2e 100%);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --premium-radius:22px;
}

/* ---------- 2. Jetons SOMBRE : Noir & Or ----------------------------- */
:root,
html[data-theme="dark"]{
  color-scheme:dark;

  --ui-bg:#050506;
  --ui-bg-raised:#0a0a0c;
  --ui-bg-secondary:#0d0c10;
  --ui-surface:rgba(22,20,24,.58);
  --ui-surface-raised:rgba(32,29,34,.72);
  --ui-surface-solid:#121014;
  --ui-control-bg:rgba(250,240,214,.035);
  --ui-control-hover:rgba(250,240,214,.06);
  --ui-control-active:rgba(250,240,214,.09);
  --ui-input-bg:#0c0b0f;
  --ui-nav-bg:rgba(16,14,18,.66);
  --ui-nav-backdrop:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.78) 30%,rgba(5,5,6,.96));
  --ui-text:#f7f2e6;
  --ui-text-soft:#e4dcc9;
  --ui-text-secondary:#aaa18c;
  --ui-text-muted:#7e7768;
  --ui-border:rgba(232,212,160,.08);
  --ui-border-strong:rgba(232,212,160,.15);
  --ui-border-brand:rgba(215,188,124,.26);
  --ui-shadow:0 10px 30px rgba(0,0,0,.35);
  --ui-shadow-raised:0 18px 48px rgba(0,0,0,.45);
  --ui-shadow-floating:0 24px 64px rgba(0,0,0,.55);
  --ui-brand-glow:rgba(215,188,124,.09);
  --ui-hover-light:rgba(250,240,214,.07);
  --ui-switch-off-top:#2b2923;
  --ui-switch-off-bottom:#1b1a16;
  --ui-switch-thumb-top:#fbf3d6;
  --ui-switch-thumb-bottom:#d8c48a;
  --ui-skeleton:rgba(255,236,180,.06);

  --bg:var(--ui-bg);
  --bg2:var(--ui-bg-secondary);
  --surface:var(--ui-surface);
  --surface2:var(--ui-surface-raised);
  --surface3:var(--ui-control-bg);
  --line:var(--ui-border);
  --text:var(--ui-text);
  --muted:var(--ui-text-secondary);
  --app-bg:var(--ui-bg);
  --app-surface:var(--ui-surface);
  --app-text:var(--ui-text);
  --app-text-secondary:var(--ui-text-secondary);
  --app-text-muted:var(--ui-text-muted);
  --app-border:var(--ui-border);

  --gradient:var(--gold-grad);
  --gradient-button:var(--gold-grad);
  --gradient-text:var(--gold-grad);
  --gradient-selected:linear-gradient(135deg,rgba(239,227,191,.18),rgba(184,147,74,.08));
  --gradient-soft:linear-gradient(135deg,rgba(239,227,191,.10),rgba(184,147,74,.04));
  --gradient-border:linear-gradient(135deg,rgba(239,227,191,.5),rgba(184,147,74,.12));
  --gradient-icon:linear-gradient(135deg,rgba(239,227,191,.18),rgba(184,147,74,.06));
  --gradient-shadow:rgba(215,188,124,.28);
  --violet:#d7bc7c;
  --purple:#b8934a;
  --blue:#e3cd96;
  --cyan:#d7bc7c;
  --pink:#d9a05b;
  --ambient-one:rgba(215,188,124,.10);
  --ambient-two:rgba(184,147,74,.07);
}

/* ---------- 3. Jetons CLAIR : Ivoire epure --------------------------- */
html[data-theme="light"]{
  color-scheme:light;

  --ui-bg:#f6f2e8;
  --ui-bg-raised:#fbf8f1;
  --ui-bg-secondary:#efe9da;
  --ui-surface:rgba(255,255,255,.74);
  --ui-surface-raised:rgba(255,255,255,.9);
  --ui-surface-solid:#fffdf8;
  --ui-control-bg:rgba(120,92,24,.045);
  --ui-control-hover:rgba(120,92,24,.075);
  --ui-control-active:rgba(120,92,24,.1);
  --ui-input-bg:#fffdf8;
  --ui-nav-bg:rgba(255,253,246,.78);
  --ui-nav-backdrop:linear-gradient(180deg,rgba(246,242,232,0),rgba(246,242,232,.85) 30%,rgba(246,242,232,.97));
  --ui-text:#1c1810;
  --ui-text-soft:#3a3322;
  --ui-text-secondary:#6f6650;
  --ui-text-muted:#978d75;
  --ui-border:rgba(120,92,24,.13);
  --ui-border-strong:rgba(120,92,24,.22);
  --ui-border-brand:rgba(176,126,28,.38);
  --ui-shadow:0 8px 26px rgba(90,65,10,.08);
  --ui-shadow-raised:0 16px 40px rgba(90,65,10,.12);
  --ui-shadow-floating:0 22px 56px rgba(90,65,10,.16);
  --ui-brand-glow:rgba(184,147,74,.14);
  --ui-hover-light:rgba(120,92,24,.06);
  --ui-switch-off-top:#ddd5c0;
  --ui-switch-off-bottom:#cfc6ae;
  --ui-switch-thumb-top:#ffffff;
  --ui-switch-thumb-bottom:#f4efe2;
  --ui-skeleton:rgba(120,92,24,.07);

  --bg:var(--ui-bg);
  --bg2:var(--ui-bg-secondary);
  --surface:var(--ui-surface);
  --surface2:var(--ui-surface-raised);
  --surface3:var(--ui-control-bg);
  --line:var(--ui-border);
  --text:var(--ui-text);
  --muted:var(--ui-text-secondary);
  --app-bg:var(--ui-bg);
  --app-surface:var(--ui-surface);
  --app-text:var(--ui-text);
  --app-text-secondary:var(--ui-text-secondary);
  --app-text-muted:var(--ui-text-muted);
  --app-border:var(--ui-border);
  --app-button-text:#1c1305;

  --gradient:var(--gold-grad);
  --gradient-button:var(--gold-grad);
  --gradient-text:linear-gradient(135deg,#8f6f2e,#b8934a 55%,#7d5f26);
  --gradient-selected:linear-gradient(135deg,rgba(215,188,124,.28),rgba(184,147,74,.1));
  --gradient-soft:linear-gradient(135deg,rgba(215,188,124,.16),rgba(184,147,74,.05));
  --gradient-border:linear-gradient(135deg,rgba(184,147,74,.55),rgba(184,147,74,.12));
  --gradient-icon:linear-gradient(135deg,rgba(215,188,124,.3),rgba(184,147,74,.1));
  --gradient-shadow:rgba(184,147,74,.28);
  --violet:#b07e1c;
  --purple:#8f6f2e;
  --blue:#b8934a;
  --cyan:#b07e1c;
  --pink:#b9803a;
  --ambient-one:rgba(215,188,124,.28);
  --ambient-two:rgba(184,147,74,.16);
}

/* ---------- 4. Base : fond, typographie, defilement ------------------ */
html,
body{
  background-color:var(--ui-bg)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  font-feature-settings:"ss01","cv11";
  letter-spacing:-.005em;
}

/* Fond ambiant : lueurs dorees lentes, couteuses seulement en transform */
.ambient{
  background:
    radial-gradient(70% 45% at 50% -8%,rgba(215,188,124,.08),transparent 70%),
    var(--ui-bg)!important;
}

html[data-theme="light"] .ambient{
  background:
    radial-gradient(70% 45% at 50% -8%,rgba(215,188,124,.32),transparent 70%),
    var(--ui-bg)!important;
}

.orb{
  filter:blur(80px);
  will-change:transform;
}

.orb.one{ background:rgba(215,188,124,.30)!important; opacity:.24!important; }
.orb.two{ background:rgba(184,147,74,.26)!important;  opacity:.16!important; }
.orb.three{ background:rgba(170,125,60,.24)!important; opacity:.12!important; }

html[data-theme="light"] .orb.one{ opacity:.5!important; }
html[data-theme="light"] .orb.two{ opacity:.35!important; }
html[data-theme="light"] .orb.three{ opacity:.3!important; }

/* Grain tres leger pour un rendu "metal brosse" (une seule couche) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

html.asteria-route-pending body::after{
  content:"";
}

/* ---------- 5. Ecran de chargement : gemme doree --------------------- */
html.asteria-route-pending body::before{
  content:"ASTERIA"!important;
  background:
    radial-gradient(60% 40% at 50% 42%,rgba(215,188,124,.10),transparent 70%),
    #050506!important;
  background-image:radial-gradient(60% 40% at 50% 42%,rgba(215,188,124,.10),transparent 70%)!important;
  background-color:#050506!important;
  -webkit-text-fill-color:initial!important;
  color:rgba(215,188,124,.5)!important;
  letter-spacing:.5em!important;
  font-weight:600!important;
  font-size:13px!important;
  text-indent:.5em;
  place-items:center!important;
  animation:premiumBrandBreath 2.6s ease-in-out infinite!important;
}

html.asteria-route-pending body::after{
  content:""!important;
  position:fixed!important;
  z-index:1000000!important;
  left:50%!important;
  top:calc(50% + 34px)!important;
  width:36px!important;
  height:36px!important;
  margin:-18px 0 0 -18px!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  border-radius:50%!important;
  border:1px solid rgba(215,188,124,.12)!important;
  border-top-color:#e3cd96!important;
  box-shadow:0 0 16px rgba(215,188,124,.14)!important;
  background:none!important;
  animation:asteria-route-spin .9s cubic-bezier(.5,.1,.5,.9) infinite!important;
}

@keyframes premiumBrandBreath{
  0%,100%{ color:rgba(215,188,124,.28); }
  50%{     color:rgba(239,227,191,.78); }
}

/* ---------- 6. Verre : surfaces principales -------------------------- */
.panel,
.stat,
.quick-btn,
.setting-card,
.settings-card,
.group-switcher,
.log,
.member-profile,
.group-settings-card{
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--ui-border)!important;
  border-radius:var(--premium-radius)!important;
  box-shadow:
    inset 0 1px 0 rgba(250,242,222,.07),
    var(--ui-shadow)!important;
  transition:
    transform .45s var(--ease-out),
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

html[data-theme="light"] .panel,
html[data-theme="light"] .stat,
html[data-theme="light"] .quick-btn,
html[data-theme="light"] .setting-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .group-switcher,
html[data-theme="light"] .log{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    var(--ui-shadow)!important;
}

.stat:active,
.quick-btn:active,
.group-switcher:active{
  transform:scale(.97);
  border-color:var(--ui-border-brand)!important;
}

/* ---------- 7. En-tete -------------------------------------------- */
.brand-mark{
  background:var(--gold-grad)!important;
  color:#1a1206!important;
  border:0!important;
  box-shadow:
    0 8px 20px rgba(184,147,74,.2),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
}

.brand-mark i,
.brand-mark svg{
  color:#1a1206!important;
  stroke:#1a1206!important;
}

.brand-name{
  font-weight:700!important;
  letter-spacing:-.01em!important;
}

.online{
  background:var(--ui-success-bg,rgba(52,211,153,.08))!important;
  border:1px solid var(--ui-success-border,rgba(52,211,153,.2))!important;
  color:var(--ui-success-text,#75e7bb)!important;
}

/* ---------- 8. Selecteur de communaute ----------------------------- */
.group-switcher-icon{
  background:var(--gradient-icon)!important;
  color:var(--gold-2)!important;
  border:1px solid var(--ui-border-brand)!important;
}

html[data-theme="light"] .group-switcher-icon{ color:#8f6f2e!important; }

/* ---------- 9. Hero : tuile de verre doree -------------------------- */
.hero,
html[data-theme] #page-home .hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--ui-border-brand)!important;
  border-radius:28px!important;
  background:
    radial-gradient(120% 130% at 0% 0%,rgba(215,188,124,.16),transparent 55%),
    radial-gradient(90% 90% at 100% 100%,rgba(184,147,74,.10),transparent 60%),
    linear-gradient(160deg,#1a160c 0%,#0c0a07 60%,#080706 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(250,242,222,.14),
    0 26px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.4)!important;
  color:var(--ui-text)!important;
}

html[data-theme="light"] .hero,
html[data-theme="light"] #page-home .hero{
  background:
    radial-gradient(120% 130% at 0% 0%,rgba(239,227,191,.9),transparent 55%),
    radial-gradient(90% 90% at 100% 100%,rgba(215,188,124,.35),transparent 60%),
    linear-gradient(160deg,#fffaf0 0%,#f6ecd2 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 22px 50px rgba(120,90,20,.18)!important;
}

.hero .hero-shine,
html[data-theme] #page-home .hero .hero-shine{
  background:linear-gradient(110deg,transparent 35%,rgba(250,242,222,.16) 50%,transparent 65%)!important;
  background-size:250% 100%!important;
  animation:premiumHeroSheen 7s ease-in-out infinite!important;
  opacity:1!important;
}

@keyframes premiumHeroSheen{
  0%,35%{ background-position:140% 0; }
  70%,100%{ background-position:-80% 0; }
}

.hero .eyebrow,
html[data-theme] #page-home .hero .eyebrow{
  color:var(--gold-2)!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
  font-size:11px!important;
}

html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] #page-home .hero .eyebrow{ color:#8f6f2e!important; }

.hero h1,
html[data-theme] #page-home .hero h1{
  color:var(--ui-text)!important;
  font-weight:700!important;
  letter-spacing:-.03em!important;
  background:linear-gradient(180deg,var(--ui-text) 45%,var(--gold-2) 190%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero .hero-desc,
html[data-theme] #page-home .hero .hero-desc{ color:var(--ui-text-secondary)!important; }

.hero .score,
html[data-theme] #page-home .hero .score{
  background:rgba(250,240,214,.05)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:18px!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

html[data-theme="light"] .hero .score,
html[data-theme="light"] #page-home .hero .score{
  background:rgba(255,255,255,.6)!important;
}

.hero .score-title,
html[data-theme] #page-home .hero .score-title{ color:var(--ui-text-secondary)!important; }

.hero .score-value,
html[data-theme] #page-home .hero .score-value{
  color:transparent!important;
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  font-weight:700!important;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

html[data-theme="light"] .hero .score-value,
html[data-theme="light"] #page-home .hero .score-value{
  background:linear-gradient(135deg,#8f6f2e,#b8934a);
  -webkit-background-clip:text;
  background-clip:text;
}

.progress{
  background:rgba(250,240,214,.08)!important;
  border-radius:99px!important;
  overflow:hidden;
}

html[data-theme="light"] .progress{ background:rgba(120,92,24,.12)!important; }

.progress > span{
  background:var(--gold-grad)!important;
  border-radius:99px!important;
  box-shadow:0 0 10px rgba(215,188,124,.26);
  position:relative;
  overflow:hidden;
}

.progress > span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:premiumBarShine 3.2s ease-in-out infinite;
}

@keyframes premiumBarShine{
  0%,40%{ transform:translateX(-100%); }
  80%,100%{ transform:translateX(100%); }
}

/* ---------- 10. Statistiques ---------------------------------------- */
.stat{
  position:relative;
  overflow:hidden;
}

.stat::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(80% 70% at 0% 0%,color-mix(in srgb,var(--stat-color,#d7bc7c) 18%,transparent),transparent 65%);
  opacity:.55;
  pointer-events:none;
}

.stat-icon{
  background:var(--gradient-icon)!important;
  border:1px solid var(--ui-border-brand)!important;
  color:var(--gold-2)!important;
  border-radius:14px!important;
}

html[data-theme="light"] .stat-icon{ color:#8f6f2e!important; }

.stat-num{
  font-weight:700!important;
  letter-spacing:-.03em!important;
  font-variant-numeric:tabular-nums;
}

.stat-label{
  letter-spacing:.02em;
}

/* ---------- 11. Titres de section ----------------------------------- */
.section-title,
.page-header h2{
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

.section-link{
  color:var(--gold-2)!important;
  background:var(--ui-control-bg)!important;
  border:1px solid var(--ui-border-brand)!important;
  font-weight:600!important;
  letter-spacing:.01em;
}

html[data-theme="light"] .section-link{ color:#8f6f2e!important; }

/* ---------- 12. Listes de controles et icones ----------------------- */
.control{
  position:relative;
  transition:background-color .25s ease,transform .35s var(--ease-out);
}

.control:active{
  transform:scale(.985);
  background-color:var(--ui-control-active)!important;
}

.icon-box{
  --icon-gold:color-mix(in srgb,var(--icon,#d7bc7c) 38%,#d7bc7c);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--icon,#d7bc7c) 16%,transparent),transparent),
    var(--ui-control-bg)!important;
  border:1px solid var(--ui-border-strong)!important;
  color:var(--icon-gold)!important;
  border-radius:15px!important;
}

.icon-box i,
.icon-box svg{
  color:var(--icon-gold)!important;
  stroke:var(--icon-gold)!important;
}

html[data-theme="light"] .icon-box{
  --icon-gold:color-mix(in srgb,var(--icon,#b07e1c) 30%,#8f6f2e);
}

.badge{
  background:var(--ui-control-bg)!important;
  border:1px solid var(--ui-border-brand)!important;
  color:var(--gold-2)!important;
  font-weight:600!important;
}

html[data-theme="light"] .badge{ color:#7d5f26!important; }

.quick-btn .quick-label{ font-weight:600; letter-spacing:-.005em; }

/* ---------- 13. Boutons --------------------------------------------- */
.primary,
.welcome-primary,
.welcome-cta{
  background:var(--gold-grad)!important;
  color:#1a1206!important;
  border:0!important;
  font-weight:700!important;
  letter-spacing:-.005em;
  box-shadow:
    0 10px 24px rgba(184,147,74,.2),
    inset 0 1px 0 rgba(255,255,255,.55)!important;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .3s ease,filter .3s ease;
}

.primary:active,
.welcome-primary:active,
.welcome-cta:active{
  transform:scale(.96);
  filter:brightness(.96);
  box-shadow:0 6px 16px rgba(184,147,74,.3),inset 0 1px 0 rgba(255,255,255,.4)!important;
}

.primary i,
.primary svg{ color:#1a1206!important; stroke:#1a1206!important; }

.secondary,
.welcome-secondary{
  background:var(--ui-control-bg)!important;
  border:1px solid var(--ui-border-strong)!important;
  color:var(--ui-text)!important;
  font-weight:600!important;
  transition:transform .35s var(--ease-out),background-color .25s ease,border-color .25s ease;
}

.secondary:active,
.welcome-secondary:active{
  transform:scale(.96);
  border-color:var(--ui-border-brand)!important;
}

/* Ondulation doree creee par premium.js */
.premium-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(239,227,191,.55),rgba(215,188,124,0) 65%);
  transform:scale(0);
  animation:premiumRipple .7s var(--ease-out) forwards;
}

@keyframes premiumRipple{
  to{ transform:scale(1); opacity:0; }
}

/* ---------- 14. Champs & interrupteurs ----------------------------- */
input,
textarea,
select,
.field input,
.field textarea,
.field select{
  background:var(--ui-input-bg)!important;
  border:1px solid var(--ui-border-strong)!important;
  color:var(--ui-text)!important;
  border-radius:14px!important;
  transition:border-color .25s ease,box-shadow .25s ease;
}

input:focus,
textarea:focus,
select:focus{
  outline:none!important;
  border-color:var(--gold-2)!important;
  box-shadow:0 0 0 4px rgba(215,188,124,.16)!important;
}

.toggle,
.switch{
  transition:background .35s ease,box-shadow .35s ease!important;
}

.toggle.active,
.switch.active{
  background:var(--gold-grad)!important;
  box-shadow:0 0 12px rgba(215,188,124,.2)!important;
  border-color:transparent!important;
}

/* ---------- 15. Navigation basse : dock de verre -------------------- */
.bottom{
  background:var(--ui-nav-backdrop)!important;
}

.bottom .nav{
  background:var(--ui-nav-bg)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  backdrop-filter:blur(26px) saturate(170%);
  border:1px solid var(--ui-border-strong)!important;
  border-radius:26px!important;
  box-shadow:
    inset 0 1px 0 rgba(250,242,222,.1),
    var(--ui-shadow-floating)!important;
}

.bottom .nav-btn{
  color:var(--ui-text-muted)!important;
  transition:color .3s ease,transform .4s var(--ease-spring);
}

.bottom .nav-btn.active{
  color:var(--gold-2)!important;
}

html[data-theme="light"] .bottom .nav-btn.active{ color:#7d5f26!important; }

.bottom .nav-btn.active i,
.bottom .nav-btn.active svg{
  filter:drop-shadow(0 0 5px rgba(215,188,124,.32));
}

.bottom .nav-btn:active{ transform:scale(.9); }

.bottom .nav::before{
  background:var(--gradient-selected)!important;
  border:1px solid var(--ui-border-brand)!important;
  box-shadow:0 8px 24px rgba(184,147,74,.2)!important;
}

/* ---------- 16. Transitions de page --------------------------------- */
html:not([data-booted]) .page.active{
  animation:premiumPageIn .8s var(--ease-out) backwards!important;
}

html:not([data-booted]) .page.active > *{
  animation:premiumRise .9s cubic-bezier(.2,.9,.25,1.08) backwards;
}

html:not([data-booted]) .page.active > *:nth-child(1){ animation-delay:.03s; }
html:not([data-booted]) .page.active > *:nth-child(2){ animation-delay:.08s; }
html:not([data-booted]) .page.active > *:nth-child(3){ animation-delay:.13s; }
html:not([data-booted]) .page.active > *:nth-child(4){ animation-delay:.18s; }
html:not([data-booted]) .page.active > *:nth-child(5){ animation-delay:.23s; }
html:not([data-booted]) .page.active > *:nth-child(6){ animation-delay:.28s; }
html:not([data-booted]) .page.active > *:nth-child(n+7){ animation-delay:.32s; }

@keyframes premiumPageIn{
  from{ opacity:0; transform:translate3d(0,26px,0) scale(.985); filter:blur(8px); }
  to{   opacity:1; transform:none; filter:blur(0); }
}

@keyframes premiumRise{
  from{ opacity:0; transform:translate3d(0,34px,0) scale(.97); }
  to{   opacity:1; transform:none; }
}

/* ---------- 17. Squelettes de chargement ---------------------------- */
.skeleton{
  position:relative;
  overflow:hidden;
  color:var(--ui-text-muted)!important;
}

.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 25%,rgba(239,227,191,.12) 50%,transparent 75%);
  transform:translateX(-100%);
  animation:premiumSkeleton 1.6s ease-in-out infinite;
}

@keyframes premiumSkeleton{
  to{ transform:translateX(100%); }
}

/* ---------- 18. Accessibilite : mouvement reduit -------------------- */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) *,
  html:not([data-motion="force"]) *::before,
  html:not([data-motion="force"]) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---------- 19. Interactions : poussiere d'or & lumiere du hero ------ */
.hero{
  --mx:70%;
  --my:20%;
  --glow:0;
}

.hero > .premium-dust{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
}

html[data-theme="light"] .hero > .premium-dust{
  mix-blend-mode:multiply;
  opacity:.5;
}

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

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:var(--glow);
  transition:opacity .5s ease;
  background:radial-gradient(220px circle at var(--mx) var(--my),rgba(239,222,170,.22),transparent 65%);
}

/* ---------- 20. Accents residuels ----------------------------------- */
.control::before,
.control.open-module::before{
  background:var(--gold-grad)!important;
  box-shadow:0 0 12px rgba(215,188,124,.45);
}

.page-header::after{
  background:linear-gradient(90deg,var(--gold-2),var(--gold-3),transparent)!important;
}

.page-header h2{
  background:linear-gradient(180deg,var(--ui-text) 40%,var(--gold-2) 160%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

html[data-theme="light"] .page-header h2{
  background:linear-gradient(180deg,var(--ui-text) 50%,#8f6f2e 170%);
  -webkit-background-clip:text;
  background-clip:text;
}

/* ---------- 21. Icones des lignes de reglages ----------------------- */
.settings-icon,
.welcome-feature-icon,
.welcome-mini-icon{
  background:var(--gradient-icon)!important;
  border:1px solid var(--ui-border-strong)!important;
  color:var(--gold-2)!important;
  border-radius:15px!important;
}

.settings-icon i,
.settings-icon svg,
.welcome-feature-icon i,
.welcome-feature-icon svg{
  color:var(--gold-2)!important;
  stroke:var(--gold-2)!important;
}

html[data-theme="light"] .settings-icon,
html[data-theme="light"] .welcome-feature-icon{ color:#8f6f2e!important; }

html[data-theme="light"] .settings-icon i,
html[data-theme="light"] .settings-icon svg,
html[data-theme="light"] .welcome-feature-icon i,
html[data-theme="light"] .welcome-feature-icon svg{
  color:#8f6f2e!important;
  stroke:#8f6f2e!important;
}

.settings-section-label,
.welcome-section-label{
  color:var(--gold-2)!important;
  letter-spacing:.14em!important;
  font-weight:700!important;
}

html[data-theme="light"] .settings-section-label,
html[data-theme="light"] .welcome-section-label{ color:#7d5f26!important; }


/* ---------- 22. v2 : animations plus marquees ----------------------- */

/* Hero : entree en profondeur, flou -> net */
html:not([data-booted]) .page.active > .hero{
  animation:premiumHeroIn 1.2s var(--ease-out) .05s backwards;
}

@keyframes premiumHeroIn{
  0%{   opacity:0; transform:translate3d(0,40px,0) scale(.93); filter:blur(14px); }
  60%{  filter:blur(0); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}

/* Statistiques : rebond en cascade */
html:not([data-booted]) .stats .stat{
  animation:premiumPop .85s var(--ease-spring) backwards;
}

html:not([data-booted]) .stats .stat:nth-child(1){ animation-delay:.28s; }
html:not([data-booted]) .stats .stat:nth-child(2){ animation-delay:.36s; }
html:not([data-booted]) .stats .stat:nth-child(3){ animation-delay:.44s; }
html:not([data-booted]) .stats .stat:nth-child(4){ animation-delay:.52s; }
html:not([data-booted]) .stats .stat:nth-child(n+5){ animation-delay:.6s; }

@keyframes premiumPop{
  from{ opacity:0; transform:translate3d(0,26px,0) scale(.86); }
  to{   opacity:1; transform:none; }
}

/* Score : la barre se remplit depuis zero, avec decalage */
.progress > span{
  transform-origin:left center;
  transition:width 1.6s cubic-bezier(.16,1,.3,1);
}

html:not([data-booted]) .page.active .progress > span{
  animation:premiumFill 1.7s cubic-bezier(.16,1,.3,1) .45s backwards;
}

@keyframes premiumFill{
  from{ transform:scaleX(0); }
  to{   transform:scaleX(1); }
}

/* Sections qui apparaissent au defilement : un peu plus de profondeur */
.asteria-reveal{
  transform:translate3d(0,26px,0) scale(.97)!important;
  filter:blur(6px)!important;
  transition:
    opacity .45s var(--ease-out),
    transform .5s var(--ease-out),
    filter .4s ease!important;
}

.asteria-reveal.asteria-visible{
  transform:none!important;
  filter:blur(0)!important;
}

/* Navigation : le dock monte, l'indicateur rebondit, l'icone saute */
.bottom .nav{
  animation:premiumDockIn 1s var(--ease-out) .35s backwards;
}

@keyframes premiumDockIn{
  from{ opacity:0; transform:translate3d(0,90px,0) scale(.94); }
  to{   opacity:1; transform:none; }
}

.nav-indicator{
  transition:
    transform .75s cubic-bezier(.34,1.5,.5,1),
    width .55s cubic-bezier(.34,1.3,.5,1)!important;
  box-shadow:inset 0 1px rgba(250,242,222,.06),0 6px 18px rgba(0,0,0,.25)!important;
}

.bottom .nav-btn.active i,
.bottom .nav-btn.active svg{
  animation:premiumNavPop .7s var(--ease-spring);
  transform:translateY(-1px) scale(1.08);
}

.bottom .nav-btn.active span{
  animation:premiumNavLabel .6s var(--ease-out) backwards;
}

@keyframes premiumNavPop{
  0%{   transform:translateY(0) scale(1); }
  35%{  transform:translateY(-6px) scale(1.3); }
  65%{  transform:translateY(1px) scale(.94); }
  100%{ transform:translateY(-1px) scale(1.08); }
}

@keyframes premiumNavLabel{
  from{ opacity:0; transform:translateY(6px); }
  to{   opacity:1; transform:none; }
}

/* Rideau de sortie de l'ecran de chargement (cree par premium.js) */
#premium-curtain{
  position:fixed;
  inset:0;
  z-index:999998;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 42%,rgba(215,188,124,.12),transparent 70%),
    var(--ui-bg,#050506);
  color:rgba(215,188,124,.42);
  font:600 13px/1 system-ui,sans-serif;
  letter-spacing:.5em;
  text-indent:.5em;
  opacity:1;
  transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.1s var(--ease-out),filter .9s ease;
}

#premium-curtain.out{
  opacity:0;
  transform:scale(1.08);
  filter:blur(10px);
}

/* ---------- 23. Dock : 6 onglets toujours visibles ------------------ */
/* Plus de defilement : l'onglet actif s'elargit et montre son libelle,
   les autres se reduisent a leur icone. */
html .bottom .nav{
  display:flex!important;
  overflow:hidden!important;
  gap:2px!important;
  padding:6px!important;
  grid-template-columns:none!important;
  scroll-snap-type:none!important;
}

html .bottom .nav::before,
html .bottom .nav .nav-indicator{
  display:none!important;
}

html .bottom .nav .nav-btn{
  flex:1 1 0!important;
  min-width:0!important;
  width:auto!important;
  height:52px!important;
  padding:0 4px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  position:relative;
  z-index:1;
  border-radius:18px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  transition:
    flex-grow .65s cubic-bezier(.34,1.35,.5,1),
    background-color .4s ease,
    border-color .4s ease,
    color .3s ease,
    transform .4s var(--ease-spring);
}

html .bottom .nav .nav-btn span{
  display:block!important;
  max-height:0;
  margin-top:0;
  opacity:0;
  transform:translateY(5px);
  overflow:hidden;
  white-space:nowrap;
  font-size:10px;
  line-height:1.2;
  transition:
    max-height .45s ease,
    margin .35s ease,
    opacity .35s ease .1s,
    transform .5s var(--ease-out) .06s;
}

html .bottom .nav .nav-btn.active{
  flex:2.35 1 0!important;
  background:var(--gradient-selected)!important;
  border-color:var(--ui-border-brand)!important;
  box-shadow:inset 0 1px rgba(250,242,222,.07),0 6px 16px rgba(0,0,0,.22)!important;
}

html .bottom .nav .nav-btn.active span{
  max-height:14px;
  margin-top:3px;
  opacity:1;
  transform:none;
}

html[data-theme="light"] .bottom .nav .nav-btn.active{
  box-shadow:inset 0 1px rgba(255,255,255,.8),0 6px 16px rgba(120,90,20,.14)!important;
}


/* ---------- 24. Changement d'onglet : quasi instantane --------------- */
html[data-booted] .page.active{
  animation:premiumTabIn .2s ease-out backwards!important;
}

@keyframes premiumTabIn{
  from{ opacity:0; transform:translate3d(0,8px,0); }
  to{   opacity:1; transform:none; }
}


/* ---------- 25. Lisibilite : tailles, contrastes, zones tactiles ------ */
/* Gris secondaires assombris/eclaircis pour atteindre 4.5:1 minimum */
:root,
html[data-theme="dark"]{
  --ui-text-muted:#9a927f;
  --ui-text-secondary:#b9b09a;
}
html[data-theme="light"]{
  --ui-text-muted:#645c48;
  --ui-text-secondary:#5a523e;
  --ui-text-soft:#2f2a1c;
}

/* Plancher de taille : plus aucun texte sous 11px, libelles a 12px */
html body .group-switcher-label,
html body .group-switcher-meta,
html body .settings-section-label,
html body .section-link,
html body .badge,
html body .log-time,
html body .log-desc,
html body .control-desc,
html body .settings-sub,
html body .field-label,
html body .quick-label,
html body .theme-option,
html body .stat-label,
html body .brand-sub,
html body .eyebrow,
html body .community-empty,
html body .online,
html body .page-header p{
  font-size:12px!important;
  line-height:1.35;
}
html body .page-header p{ font-size:13px!important; line-height:1.4; }
html body .bottom .nav .nav-btn span{ font-size:11px!important; }

/* Libelles de raccourcis : couleur de texte sur surface, jamais fixe */
html body .quick-label{
  color:var(--ui-text-soft)!important;
  font-weight:600;
  overflow-wrap:anywhere;
  text-align:center;
}
html body .section-link,
html body .field-label{ color:var(--ui-text-secondary)!important; }

/* Pastille "Online" et textes d'etat vides en clair */
html[data-theme="light"] .online{ color:#0d6b45!important; }
html[data-theme="light"] .community-empty,
html[data-theme="light"] .eyebrow{ color:var(--ui-text-secondary)!important; }

/* Texte fonce sur tout fond dore (le blanc y est illisible) */
html body .theme-option.active,
html body .duration-btn.active,
html body .member-avatar,
html body .welcome-primary,
html body .welcome-brand-mark,
html body .welcome-symbol-core,
html body .welcome-cta-icon,
html body .primary{
  color:#1a1206!important;
}
html body .theme-option.active svg,
html body .primary svg,
html body .welcome-primary svg{ stroke:currentColor; }

/* Zones tactiles : 40px minimum */
html body .asteria-confirm-close{ min-width:40px; min-height:40px; }
html body .theme-option{ min-height:42px; }
html body button.section-link,
html body .section-link{ min-height:36px; display:inline-flex; align-items:center; padding-inline:10px; }
html body .primary,
html body .secondary,
html body .danger{ min-height:44px; }

/* Texte plus visible quand l'utilisateur reduit le contraste ou agrandit */
@media (prefers-contrast:more){
  html body{ --ui-text-secondary:var(--ui-text); --ui-text-muted:var(--ui-text-soft); }
}