/* BILLIONNAIRE AI · couche mouvement et progression.
   Chargée après reference.css : animations, micro-interactions et objectifs
   d'usage. Aucune règle ici ne cache du contenu si motion.js ne tourne pas :
   les classes d'apparition ne sont posées que par le script. */

:root{
  --motion-fast:140ms;
  --motion-mid:260ms;
  --motion-slow:520ms;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Entrée de page et apparition au défilement ---------- */
/* Fondu seul : animer un transform sur #page promeut toute la page dans une
   couche composée, ce qui laisse le texte légèrement flou après un rendu à
   largeur fractionnaire. Les blocs, eux, gardent leur glissement. */
#page{animation:motion-page-in var(--motion-slow) var(--motion-ease) both}
@keyframes motion-page-in{
  from{opacity:0}
  to{opacity:1}
}
.motion-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--motion-slow) var(--motion-ease),
             transform var(--motion-slow) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
}
.motion-reveal.motion-seen{opacity:1;transform:none}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- Micro-interactions de survol ---------- */
@media (hover:hover) and (pointer:fine){
  .home-tile,.home-shortcut,.visual-row,.community-room-row,
  .feature-link,.steps-list li,.signal,.trader-card{
    transition:transform var(--motion-mid) var(--motion-ease),
               border-color var(--motion-mid) var(--motion-ease),
               background-color var(--motion-mid) var(--motion-ease),
               box-shadow var(--motion-mid) var(--motion-ease);
  }
  .home-tile:hover,.home-shortcut:hover,.feature-link:hover,.steps-list li:hover{
    transform:translateY(-3px);
    border-color:var(--line);
    box-shadow:0 12px 30px #0007;
  }
  .visual-row:hover,.community-room-row:hover{
    transform:translateX(2px);
    border-color:var(--line);
  }
  .signal:hover{
    transform:translateY(-2px);
    border-color:var(--line);
    box-shadow:0 14px 34px #0008;
  }
  .trader-card:hover{
    transform:translateY(-3px) rotate(-.35deg);
    box-shadow:0 24px 60px #000a;
  }
  .home-tile:hover>.ui-icon,.home-shortcut:hover>.ui-icon,
  .visual-row:hover>.ui-icon,.community-room-row:hover>.ui-icon{
    transform:scale(1.08);
    background-color:color-mix(in srgb, var(--accent) 11%, transparent);
  }
  .btn:hover .icon,.text-link:hover .icon{transform:translateX(2px)}
  .help-row summary:hover{background:var(--panel2)}
  .mobile-nav a:hover{color:var(--txt)}
  body.light .home-tile:hover,body.light .home-shortcut:hover,
  body.light .feature-link:hover,body.light .visual-row:hover{
    background:#fff;
    box-shadow:0 12px 28px #0000001a;
  }
}

.ui-icon,.btn .icon,.text-link .icon{
  transition:transform var(--motion-mid) var(--motion-ease),
             background-color var(--motion-mid) var(--motion-ease);
}
.btn,.home-tile,.home-shortcut,.visual-row,.community-room-row,.mobile-nav a,
.theme-seg button,.lang-seg button,.window-actions button{
  transition:transform var(--motion-fast) var(--motion-ease),
             background-color var(--motion-mid) var(--motion-ease),
             border-color var(--motion-mid) var(--motion-ease),
             color var(--motion-mid) var(--motion-ease);
}
.btn:active,.theme-seg button:active,.lang-seg button:active{transform:scale(.97)}
.mobile-nav a:active .icon{transform:scale(.88)}
.mobile-nav a.active{transition:background-color var(--motion-mid) var(--motion-ease),
                                color var(--motion-mid) var(--motion-ease)}
.mobile-nav a.active .icon{animation:motion-nav-pop var(--motion-slow) var(--motion-ease)}
@keyframes motion-nav-pop{
  0%{transform:scale(.86)}
  55%{transform:scale(1.08)}
  100%{transform:none}
}

/* ---------- Retours visuels : toast, modale, focus ---------- */
#toast{transition:transform var(--motion-mid) var(--motion-ease),
                    opacity var(--motion-fast) linear}
#toast.visible{animation:motion-toast-in 340ms var(--motion-ease)}
@keyframes motion-toast-in{
  0%{transform:translate(-50%,18px) scale(.94)}
  60%{transform:translate(-50%,-2px) scale(1.02)}
  100%{transform:translate(-50%,0) scale(1)}
}
.modal-backdrop{animation:motion-fade-in 180ms var(--motion-ease) both}
.modal{animation:motion-modal-in var(--motion-mid) var(--motion-ease) both}
@keyframes motion-fade-in{from{opacity:0}to{opacity:1}}
@keyframes motion-modal-in{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ---------- Carte de progression (gamification) ---------- */
.quest-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 16px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(135deg,var(--panel),var(--bg));
  overflow:hidden;
  animation:motion-card-in var(--motion-slow) var(--motion-ease) both;
}
.quest-card:after{
  content:"";
  position:absolute;
  right:-30%;
  bottom:-90%;
  width:230px;
  height:230px;
  background:radial-gradient(circle,color-mix(in srgb, var(--accent) 8.6%, transparent),transparent 65%);
  pointer-events:none;
}
@keyframes motion-card-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.quest-ring{
  --p:0%;
  position:relative;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:50%;
  background:conic-gradient(var(--green) var(--p),var(--line) 0);
  transition:background var(--motion-slow) var(--motion-ease);
}
.quest-ring:before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:var(--panel);
}
.quest-ring span{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:1px;
  font-variant-numeric:tabular-nums;
}
.quest-ring b{font-size:16px;line-height:1;color:var(--txt)}
.quest-ring small{font-size:9px;color:var(--muted)}
.quest-body{display:grid;gap:7px;min-width:0;flex:1;z-index:1}
.quest-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.quest-head strong{font-size:13px;letter-spacing:-.01em}
.quest-head small{font-size:10.5px;color:var(--muted);white-space:nowrap}
.quest-next{margin:0;font-size:11px;line-height:1.4;color:var(--muted)}
.quest-badges{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.quest-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:99px;
  background:var(--panel2);
  color:var(--muted);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.01em;
}
.quest-badge .icon{width:11px;height:11px}
.quest-badge.on{color:var(--green);border-color:color-mix(in srgb, var(--accent) 20%, transparent);background:color-mix(in srgb, var(--accent) 6.3%, transparent)}
.quest-badge.quest-new{animation:motion-badge-pop 640ms var(--motion-ease)}
@keyframes motion-badge-pop{
  0%{transform:scale(.82);box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent)}
  60%{transform:scale(1.06)}
  100%{transform:none;box-shadow:0 0 0 12px transparent}
}
.quest-note{margin:0;font-size:9px;line-height:1.4;color:var(--muted)}
.quest-spark{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:5px;
  height:5px;
  border-radius:1px;
  background:var(--green);
  pointer-events:none;
  animation:motion-spark 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
.quest-spark:nth-of-type(3n){background:var(--gold)}
@keyframes motion-spark{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx,0),var(--ty,-34px)) scale(1)}
}

@media (max-width:700px){
  .quest-card{gap:11px;padding:12px 13px;border-radius:18px;align-items:flex-start}
  .quest-ring{width:50px;height:50px;flex-basis:50px;margin-top:2px}
  .quest-ring:before{inset:4px}
  .quest-ring b{font-size:15px}
  .quest-head{display:grid;gap:1px}
  .quest-head small{font-size:10px}
  .quest-badge{font-size:9px;padding:3px 6px}
  .quest-note{font-size:8.5px}
}
@media (max-width:360px){
  .quest-ring{display:none}
  .quest-card{padding:11px 12px}
}

/* ---------- Thème clair ---------- */
body.light .quest-card{background:linear-gradient(135deg,#fff,#f4f6ea);border-color:#dfe2d3}
body.light .quest-card:after{background:radial-gradient(circle,#55750a12,transparent 65%)}
body.light .quest-ring{background:conic-gradient(#55750a var(--p),#dfe2d3 0)}
body.light .quest-ring:before{background:#fff}
body.light .quest-badge{background:#f1f3e6;border-color:#dde0d2;color:#7b806d}
body.light .quest-badge.on{color:#4f6f00;border-color:#8aa62e40;background:#c9f94b26}
body.light .quest-note{color:#6f7462}
body.light .help-row summary:hover{background:#f7f8f1}

/* ---------- Matière : verre, profondeur, chrome flottant ----------
   Repère : BLACK RICH utilise blur(18px) saturate(1.4) sur sa barre haute et
   sa barre d'onglets. On garde le même dosage, mais seulement sur les surfaces
   qui flottent au-dessus du contenu : barre haute, onglets mobiles, modale et
   carte de progression. Les panneaux de contenu restent opaques (lisibilité,
   coût GPU). */
:root{
  --glass-strong:color-mix(in srgb, var(--bg) 78%, transparent);
  --glass-soft:color-mix(in srgb, var(--panel2) 58%, transparent);
  --glass-edge:rgba(255,255,255,.09);
  --glass-edge-top:rgba(255,255,255,.20);
  --glass-blur:saturate(1.5) blur(20px);
  --glass-shadow:0 18px 50px rgba(0,0,0,.55);
  --ease-out-strong:cubic-bezier(.2,.8,.2,1);
}

body,body.black{--glass-strong:color-mix(in srgb, var(--bg) 78%, transparent);--glass-soft:color-mix(in srgb, var(--panel2) 58%, transparent);--glass-edge:rgba(255,255,255,.09)}

.topbar{
  background:var(--glass-strong)!important;
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-edge)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
/* Bords de défilement : le contenu s'efface sous la barre au lieu d'être coupé net. */
.topbar:after{
  content:"";
  position:absolute;
  left:0;right:0;top:100%;
  height:18px;
  pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb, var(--bg) 50%, transparent),transparent);
}

.modal-backdrop{
  background:color-mix(in srgb, var(--bg) 62%, transparent)!important;
  -webkit-backdrop-filter:saturate(1.15) blur(14px);
  backdrop-filter:saturate(1.15) blur(14px);
}
.modal{
  background:linear-gradient(180deg,color-mix(in srgb, var(--panel2) 94%, transparent),color-mix(in srgb, var(--panel) 97%, transparent))!important;
  border:1px solid var(--glass-edge)!important;
  box-shadow:var(--glass-shadow),0 1px 0 rgba(255,255,255,.14) inset!important;
}
/* Le focus d'ouverture est posé sur la boîte (tabindex=-1) : l'anneau global
   dessinerait un liseré vert sur tout le pourtour. Les contrôles internes,
   eux, gardent leur anneau de focus. */
.modal:focus,.modal:focus-visible{outline:none}

.quest-card{
  background:linear-gradient(140deg,color-mix(in srgb, var(--panel2) 66%, transparent),color-mix(in srgb, var(--panel) 88%, transparent))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border-color:var(--glass-edge)!important;
  box-shadow:var(--glass-shadow),0 1px 0 rgba(255,255,255,.11) inset;
}
.access-banner{
  background:linear-gradient(140deg,color-mix(in srgb, var(--panel) 72%, transparent),color-mix(in srgb, var(--panel) 86%, transparent))!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border-color:var(--glass-edge)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.08) inset;
}

/* ---------- Onglets mobiles : capsule de verre, segment actif net ---------- */
@media (max-width:700px){
  .mobile-nav{
    left:10px;right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    padding:7px 8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--panel) 72%, transparent)!important;
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-edge)!important;
    box-shadow:0 20px 44px rgba(0,0,0,.62),0 1px 0 rgba(255,255,255,.12) inset!important;
    justify-content:space-between;
    align-items:center;
    gap:2px;
  }
  .mobile-nav a{
    padding:7px 11px;
    border-radius:999px;
    min-width:0;
    min-height:44px;
    justify-content:center;
    font-size:9px;
    letter-spacing:.02em;
    gap:4px;
    transition:transform 120ms var(--ease-out-strong),background-color 220ms var(--ease-out-strong),color 220ms var(--ease-out-strong),box-shadow 220ms var(--ease-out-strong);
  }
  .mobile-nav a .icon{width:18px;height:18px}
  .mobile-nav a.active{
    flex:0 0 auto;
    padding:5px 13px;
    background:var(--green)!important;
    color:var(--accent-ink)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.25) inset!important;
  }
  .mobile-nav a:active{transform:scale(.94)}
  .content{padding-bottom:124px}
}

/* ---------- Contrôle segmenté (thème, langue) ---------- */
.theme-seg,.lang-seg{position:relative;isolation:isolate}
.seg-glider{
  position:absolute;
  top:3px;
  bottom:3px;
  left:0;
  width:0;
  z-index:0;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.07));
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 6px 16px rgba(0,0,0,.45);
  pointer-events:none;
  transition:transform 280ms var(--ease-out-strong),width 280ms var(--ease-out-strong);
}
.seg-has-glider button{position:relative;z-index:1;background:transparent!important;box-shadow:none!important}
.seg-has-glider button[aria-pressed=true]{color:var(--txt)}

/* ---------- Retour au toucher : la pression se voit tout de suite ---------- */
.home-tile:active,.home-shortcut:active,.feature-link:active,.visual-row:active,
.community-room-row:active,.signal:active,.trader-card:active,.help-row summary:active,
.quest-badge:active{
  transform:scale(.985);
  transition-duration:90ms;
}
:where(a,button,summary,[role=button]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:12px;
}

/* ---------- Typographie : approche par taille ---------- */
body{font-optical-sizing:auto}
h1,h2,.home-welcome h1,.title h1{letter-spacing:-.022em;text-wrap:balance}
.eyebrow,.stat-head,.quest-head small,.mobile-brand-copy small{letter-spacing:.02em}

/* ---------- Thème clair ---------- */
body.light{--glass-strong:rgba(244,245,239,.84);--glass-soft:rgba(255,255,255,.62);--glass-edge:rgba(22,24,15,.10)}
body.light .topbar{background:var(--glass-strong)!important}
body.light .topbar:after{background:linear-gradient(180deg,rgba(244,245,239,.6),transparent)}
body.light .modal-backdrop{background:rgba(20,22,14,.42)!important}
body.light .modal{background:linear-gradient(180deg,#ffffff,#f6f7f0)!important;border-color:#dfe2d3!important}
body.light .quest-card{background:linear-gradient(140deg,#ffffff,#f1f3e2)!important;border-color:#dfe2d3!important;box-shadow:0 14px 34px #00000016,0 1px 0 #fff inset}
body.light .access-banner{background:linear-gradient(140deg,#ffffff,#f3f4ea)!important;border-color:#dfe2d3!important;box-shadow:0 10px 26px #00000012,0 1px 0 #fff inset}
body.light .seg-glider{background:linear-gradient(180deg,#fff,#e9ecdd);box-shadow:0 1px 0 #fff inset,0 4px 12px rgba(0,0,0,.12)}
body.light .mobile-nav{background:rgba(255,255,255,.80)!important;border-color:rgba(22,24,15,.10)!important;box-shadow:0 18px 38px rgba(0,0,0,.14),0 1px 0 #fff inset!important}

/* ---------- Repli sans transparence ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar,.mobile-nav,.modal,.quest-card,.access-banner,.motion-fab{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:var(--panel)!important;
  }
  body.light .topbar,body.light .mobile-nav,body.light .modal,
  body.light .quest-card,body.light .access-banner,body.light .motion-fab{background:#fff!important}
}
@media (prefers-reduced-transparency: reduce){
  .topbar,.mobile-nav,.modal,.modal-backdrop,.quest-card,.access-banner,.motion-fab{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .topbar,.mobile-nav,.quest-card,.access-banner,.motion-fab{background:var(--panel)!important}
  body.light .topbar,body.light .mobile-nav,body.light .quest-card,
  body.light .access-banner,body.light .motion-fab{background:#fff!important}
}
@media (prefers-contrast: more){
  .topbar,.mobile-nav,.quest-card,.access-banner{
    background:var(--bg)!important;
    border-color:var(--muted)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body.light .topbar,body.light .mobile-nav,body.light .quest-card,
  body.light .access-banner{background:#fff!important;border-color:#3a4030!important}
  .conn-pill{border-color:var(--muted)!important;background:var(--panel)!important}
  body.light .conn-pill{border-color:#3a4030!important;background:#fff!important}
  .motion-fab{border-color:var(--muted)!important;background:var(--panel)!important}
  body.light .motion-fab{border-color:#3a4030!important;background:#fff!important}
  .term{text-decoration-color:currentColor}
}

/* ---------- Alignement BLACK RICH : surfaces, contrôles, feuilles ----------
   Valeurs relevées sur la référence : carte #0D0E10 rayon 22 hairline 7 %,
   bouton pilule 13,5 px / 700, pastille rayon 99 avec anneau intérieur 1 px,
   feuille basse rayon 22 sur mobile et boîte centrée au-dessus de 700 px. */
body:not(.light){--panel:var(--panel);--panel2:var(--panel2)}

.panel,.home-tile,.home-shortcut,.signal,.trader-card,.stat,.quest-card{border-radius:22px}
body:not(.light) .panel,
body:not(.light) .home-tile,
body:not(.light) .home-shortcut,
body:not(.light) .signal,
body:not(.light) .stat{border-color:rgba(255,255,255,.075)}

/* 36 px sur la référence ; 40 px garde une cible tactile confortable. */
.btn{
  border-radius:999px;
  padding:10px 16px;
  min-height:40px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.005em;
  gap:8px;
}
.btn .icon{width:15px;height:15px}
.btn.small{min-height:34px;padding:7px 12px;font-size:12.5px}
body:not(.light) .btn.secondary{border-color:rgba(255,255,255,.14)}

.pill{border-radius:999px;font-size:10px;padding:5px 10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body:not(.light) .pill{background:var(--panel2);border-color:rgba(255,255,255,.10)}
.badge{border-radius:999px;padding:5px 10px;font-size:10.5px}

/* ---------- Indicateur de connexion ----------
   État réel : réseau du navigateur + GET /healthz. Le point de la cloche suit
   le même état. Aucune valeur inventée, aucun état « connecté » par défaut. */
.conn-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 10px 0 9px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:var(--panel2);
  color:var(--muted);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  transition:color 220ms var(--ease-out-strong),border-color 220ms var(--ease-out-strong);
}
.conn-pill .conn-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 2px rgba(227,176,75,.18);
}
.conn-pill[data-state="online"]{color:#bdf3c9;border-color:rgba(110,231,135,.34)}
.conn-pill[data-state="online"] .conn-dot{background:#6ee787;box-shadow:0 0 0 2px rgba(110,231,135,.16)}
.conn-pill[data-state="offline"]{color:#ffbdb6;border-color:rgba(255,91,74,.38)}
.conn-pill[data-state="offline"] .conn-dot{background:#ff5b4a;box-shadow:0 0 0 2px rgba(255,91,74,.16)}
.conn-pill[data-state="checking"] .conn-dot{animation:conn-pulse 1.6s ease-in-out infinite}
body.light .conn-pill{background:#fff;border-color:#dde0d2;color:#3f4550}
body.light .conn-pill[data-state="online"]{color:#1c6b33;border-color:rgba(21,128,61,.34)}
body.light .conn-pill[data-state="online"] .conn-dot{background:#15803d;box-shadow:0 0 0 2px rgba(21,128,61,.14)}
body.light .conn-pill[data-state="offline"]{color:#a02a1f;border-color:rgba(212,58,42,.36)}
body.light .conn-pill[data-state="offline"] .conn-dot{background:#d43a2a;box-shadow:0 0 0 2px rgba(212,58,42,.14)}
@keyframes conn-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* La pastille de la cloche n'est plus une alerte permanente : elle reflète
   l'état de connexion (vert en ligne, rouge hors ligne, ambre en vérification). */
html[data-conn="online"] .notif-dot{background:#6ee787;box-shadow:0 0 0 2px var(--panel)}
html[data-conn="offline"] .notif-dot{background:#ff5b4a;box-shadow:0 0 0 2px var(--panel)}
html[data-conn="checking"] .notif-dot{background:var(--gold)}
html[data-conn="online"] body.light .notif-dot{background:#15803d;box-shadow:0 0 0 2px #fff}
html[data-conn="offline"] body.light .notif-dot{background:#d43a2a;box-shadow:0 0 0 2px #fff}

/* ---------- Lexique : mots cliquables et fiche de définition ---------- */
.term{
  cursor:help;
  color:inherit;
  text-decoration:underline dotted rgba(255,255,255,.26);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  border-radius:3px;
}
.term:hover{text-decoration-color:var(--green);color:var(--txt)}
.term:focus-visible{outline:2px solid var(--green);outline-offset:2px;text-decoration-color:var(--green)}
body.light .term{text-decoration-color:rgba(22,24,15,.28)}
body.light .term:hover,body.light .term:focus-visible{text-decoration-color:#55750a}
.lex-def{margin:0 0 8px;font-size:14.5px;line-height:1.65}
.lex-note{margin:0 0 14px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.guide-step{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.guide-step:first-of-type{border-top:0;padding-top:0}
.guide-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb, var(--accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);color:var(--green);font-size:11.5px;font-weight:700}
.guide-step h3{margin:2px 0 4px;font-size:14px}
.guide-step p{margin:0 0 6px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.guide-step .text-link{font-size:12px}
body.light .guide-step{border-top-color:#e1e6de}
body.light .guide-num{background:rgba(85,117,10,.10);border-color:rgba(85,117,10,.3)}
#modal-wrap .btn.block{width:100%;justify-content:center}
.glossary-hint{margin:-4px 0 14px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.glossary-hint a{color:var(--green);font-weight:600}

.home-demo{grid-column:1/-1;display:grid;gap:8px}
.home-demo .signal{width:100%}
.signal-demo-wrap{grid-column:1/-1;display:grid;gap:10px}
.home-demo-note,.signal-demo-note{margin:0;font-size:11.5px;line-height:1.55;color:var(--muted)}
.signal-demo-note{margin:14px 0 10px}
.home-demo-note a,.signal-demo-note a{color:var(--green);font-weight:600}

/* ---------- Boutons flottants : remonter / actualiser ---------- */
.motion-fabs{
  position:fixed;
  right:14px;
  bottom:calc(86px + env(safe-area-inset-bottom,0px));
  z-index:45;
  display:grid;
  gap:8px;
}
body:has(#modal-wrap) .motion-fabs{opacity:0;visibility:hidden}
.motion-fab{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  background:color-mix(in srgb, var(--panel2) 92%, transparent);
  border:1px solid rgba(255,255,255,.12);
  color:var(--txt);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform 160ms var(--ease-out-strong),opacity 160ms var(--ease-out-strong),background-color 160ms var(--ease-out-strong);
}
.motion-fab svg{width:16px;height:16px}
.motion-fab:hover{background:var(--panel2)}
.motion-fab:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.motion-fab[data-motion-fab="top"]{opacity:0;visibility:hidden;transform:translateY(6px)}
.motion-fab[data-motion-fab="top"].show{opacity:1;visibility:visible;transform:none}
.motion-fab.busy svg{animation:motion-spin .8s linear infinite}
body.light .motion-fab{background:rgba(255,255,255,.96);border-color:#d9ded0;color:#16180f;box-shadow:0 10px 26px rgba(30,40,20,.16)}
body.light .motion-fab:hover{background:#f2f4ee}
@keyframes motion-spin{to{transform:rotate(360deg)}}
@media (min-width:701px){
  .motion-fabs{right:22px;bottom:22px}
}

.quest-bar{height:6px;border-radius:999px;background:var(--panel2);overflow:hidden}
.quest-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 12px rgba(0,0,0,.18);
  transition:width 620ms var(--ease-out-strong);
}
body.light .quest-bar{background:#e2e5ea}
body.light .quest-bar span{box-shadow:none}

@media (max-width:700px){
  .home-welcome h1{font-size:30px;line-height:1.16}
  .conn-pill{height:24px;padding:0 8px;gap:5px;font-size:9.5px}
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{
    width:100%;
    max-width:none;
    max-height:88dvh;
    border-radius:22px 22px 0 0;
    border-bottom:0!important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    animation:motion-sheet-up 320ms var(--ease-out-strong) both;
  }
  /* Le focus d'ouverture reste sur la feuille (tabindex=-1) : l'anneau global
     dessinerait un liseré vert sur tout le pourtour. Les contrôles internes,
     eux, gardent leur anneau de focus. */
  .modal:before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:10px auto 0;
    border-radius:999px;
    background:rgba(255,255,255,.18);
  }
  body.light .modal:before{background:rgba(22,24,15,.18)}
  .modal .panel-body{padding-bottom:20px}
}
@keyframes motion-sheet-up{
  from{opacity:.7;transform:translateY(34px)}
  to{opacity:1;transform:none}
}

/* Écrans très étroits : le point suffit, le libellé reste dans le title. */
@media (max-width:359px){
  .conn-pill{width:24px;padding:0;justify-content:center}
  .conn-pill .conn-label{display:none}
}

/* ---------- Mouvement réduit : tout reste lisible et immobile ---------- */
@media (prefers-reduced-motion: reduce){
  #page,.quest-card,.modal-backdrop,.modal,#toast.visible,
  .quest-badge.quest-new,.quest-spark,.conn-dot,.mobile-nav a.active .icon{animation:none!important}
  .motion-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .home-tile,.home-shortcut,.visual-row,.community-room-row,.feature-link,
  .steps-list li,.signal,.trader-card,.ui-icon,.btn,.btn .icon,.text-link .icon,
  .mobile-nav a,.theme-seg button,.lang-seg button{
    transition:none!important;
    transform:none!important;
  }
  .seg-glider,.quest-bar span{transition:none!important}
  .motion-fab,.motion-fab svg{transition:none!important;animation:none!important}
  .motion-fab.busy{opacity:.6}
  html{scroll-behavior:auto}
}
.signalx-route{--bg:#050607;--panel:#0d0e10;--panel2:#15171a;--line:#ffffff12;--txt:#f3f4f5;--muted:#a3a8b0;--accent:#c6ff3e;--green:#c6ff3e;--success:#c6ff3e;--gold:#e3b04b;--red:#ff5b4a;--action:#c6ff3e;background:var(--bg)}
.signalx-route .panel,.signalx-route .signal,.signalx-route .visual-list,.signalx-route .community-compose{border-radius:22px;background:var(--panel);border-color:var(--line);box-shadow:none}.signalx-route .btn:not(.secondary),.signalx-route .signalx-tabs .btn:not(.secondary){background:var(--accent);border-color:var(--accent);color:#080a06;box-shadow:none}.signalx-route .btn.secondary{border-color:#ffffff1f;background:var(--panel2);color:var(--txt)}.signalx-route .signalx-tabs{gap:8px}.signalx-route .signalx-tabs .btn{border-radius:999px;min-height:48px;font-size:15px;font-weight:700}.signalx-route .signalx-tabs .btn:not(.secondary){min-height:52px}.signalx-route .positive,.signalx-route .signal .levels b.positive{color:var(--accent)}.signalx-route .negative,.signalx-route .signal .levels b.negative{color:var(--red)}.signalx-route .intro h1{letter-spacing:-.03em}.signalx-route .stat-value{color:var(--accent);font-variant-numeric:tabular-nums}.signalx-route .mobile-nav{background:#15171af2;border-color:#ffffff12}.signalx-route .mobile-nav a.active{color:var(--accent)}
@media(max-width:700px){.signalx-route .content{padding-left:14px;padding-right:14px}.signalx-route .intro h1{font-size:30px}.signalx-route .panel-body{padding:18px}.signalx-route .signalx-tabs .btn{padding-inline:10px;font-size:12px}.signalx-route .signalx-tabs .btn:not(.secondary){min-height:48px}}
@media(prefers-reduced-motion:reduce){.signalx-route *,.signalx-route *::before,.signalx-route *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}