/* =====================================================================
   CYBERLUCIDE — mouvement & UX de l'application (toutes les vues connectées)
   Même univers que les pages publiques : la nuit, la lanterne, l'ambre.
   ===================================================================== */
:root{
  --bg:#0A1628; --bg2:#0D1D32; --surface:#10223A; --surface2:#132842; --line:#1E3656;
  --muted:#8FA4BC; --dim:#5D7692;
  --ax-amber:#FFB547; --ax-amber-2:#FFCB7A;
  --ax-ease:cubic-bezier(.2,.8,.2,1);
  --ax-spring:cubic-bezier(.2,1.35,.32,1);
}

/* ---------- Fond : la même nuit que l'accueil, en plus discret ---------- */
body.ax-on{ background:var(--bg) !important; background-image:none !important }
body.ax-on #mk-field{ opacity:.45 }
body.ax-on #mk-lantern{ opacity:.7 }
body.ax-on main, body.ax-on footer{ position:relative; z-index:1 }
body.ax-on footer{ background:transparent }
nav{ background:rgba(10,22,40,.78) !important; view-transition-name:ax-nav }

/* ---------- Barre de progression de lecture ---------- */
#ax-progress{ position:fixed; left:0; right:0; top:0; height:2px; z-index:60; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--ax-amber),var(--ax-amber-2) 60%,var(--cyan));
  box-shadow:0 0 12px rgba(255,181,71,.55); opacity:0; transition:opacity .3s }
#ax-progress.on{ opacity:1 }

/* ---------- Navigation : la pastille qui glisse ---------- */
#links{ position:relative }
#ax-ind{ position:absolute; left:0; top:0; width:0; height:0; border-radius:8px; pointer-events:none; z-index:0;
  background:rgba(255,181,71,.10); border:1px solid rgba(255,181,71,.32);
  box-shadow:0 0 18px rgba(255,181,71,.12) inset, 0 0 14px rgba(255,181,71,.08);
  transition:left .5s var(--ax-spring), top .5s var(--ax-spring), width .5s var(--ax-spring), height .5s var(--ax-spring), opacity .25s;
  view-transition-name:ax-ind }
#links button{ position:relative; z-index:1; transition:color .25s, background .25s }
#links.ax-has-ind button.on{ background:transparent; color:var(--ax-amber) }

/* ---------- Transitions entre vues (View Transitions API) ---------- */
::view-transition-group(root){ animation-duration:.5s }
::view-transition-old(root){ animation:ax-vt-out .26s ease-in both }
::view-transition-new(root){ animation:ax-vt-in .5s var(--ax-ease) both }
html[data-axdir="back"]::view-transition-old(root){ animation-name:ax-vt-out-back }
html[data-axdir="back"]::view-transition-new(root){ animation-name:ax-vt-in-back }
::view-transition-group(ax-ind){ animation-duration:.55s; animation-timing-function:var(--ax-spring) }
::view-transition-old(ax-nav), ::view-transition-new(ax-nav){ animation:none; mix-blend-mode:normal }
::view-transition-old(ax-nav){ display:none }
@keyframes ax-vt-out{ to{ opacity:0; transform:translateX(-28px) scale(.985); filter:blur(6px) } }
@keyframes ax-vt-in{ from{ opacity:0; transform:translateX(36px) scale(.985); filter:blur(8px) } }
@keyframes ax-vt-out-back{ to{ opacity:0; transform:translateX(28px) scale(.985); filter:blur(6px) } }
@keyframes ax-vt-in-back{ from{ opacity:0; transform:translateX(-36px) scale(.985); filter:blur(8px) } }

/* Titre de vue : le faisceau le révèle */
.worktop .t span{ color:var(--ax-amber) }
.worktop .t{ position:relative }
.worktop .t::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:56px; border-radius:2px;
  background:linear-gradient(90deg,var(--ax-amber),transparent); transform-origin:0 50% }
.view.active .worktop .t::after{ animation:ax-line .9s .15s var(--ax-ease) both }
@keyframes ax-line{ from{ transform:scaleX(0); opacity:0 } }

/* ---------- Squelettes de chargement ---------- */
.ax-skel{ display:flex; flex-direction:column; gap:14px; width:100% }
.ax-sk-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.ax-sk{ border-radius:12px; background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden }
.ax-sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,181,71,.07) 40%,rgba(143,164,188,.10) 50%,transparent 70%);
  animation:ax-shim 1.4s ease-in-out infinite }
.ax-sk.tile{ height:82px } .ax-sk.block{ height:150px } .ax-sk.line{ height:14px; border-radius:7px; border:0; background:var(--surface2) }
.ax-sk.line.w60{ width:60% } .ax-sk.line.w40{ width:40% } .ax-sk.line.w80{ width:80% }
.ax-sk-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px }
.ax-sk-label{ font:12px var(--mono); color:var(--dim); letter-spacing:.08em; display:flex; align-items:center; gap:8px }
.ax-sk-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ax-amber); box-shadow:0 0 10px var(--ax-amber); animation:ax-blink 1s ease-in-out infinite }
@keyframes ax-shim{ to{ transform:translateX(100%) } }
@keyframes ax-blink{ 50%{ opacity:.25 } }

/* ---------- Boutons : ambre, pression, onde ---------- */
.primary, .btn-primary, .ui-btn.primary{
  background:linear-gradient(180deg,var(--ax-amber-2),var(--ax-amber)) !important; color:#1A1205 !important; border-color:var(--ax-amber) !important;
  box-shadow:0 8px 24px -8px rgba(255,181,71,.55), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:transform .25s var(--ax-spring), box-shadow .25s, filter .2s }
.primary:hover:not(:disabled), .btn-primary:hover, .ui-btn.primary:hover{ filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 12px 30px -8px rgba(255,181,71,.7), inset 0 1px 0 rgba(255,255,255,.4) !important }
.primary:disabled{ box-shadow:none !important; filter:saturate(.4) }
.primary, .btn-primary, .mini-btn, button.mini, .ui-btn, .qopt, .opt, .links button, .hbtn{ position:relative; overflow:hidden }
.primary:active:not(:disabled), .btn-primary:active, .mini-btn:active, button.mini:active, .ui-btn:active, .qopt:active:not(:disabled), .opt:active{ transform:scale(.965) }
.mini-btn, button.mini, .ui-btn, .qopt{ transition:transform .2s var(--ax-spring), border-color .2s, background .2s, color .2s }
.mini-btn:hover, button.mini:hover{ border-color:var(--ax-amber) }
.ax-ripple{ position:absolute; border-radius:50%; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px;
  background:radial-gradient(circle,rgba(255,255,255,.45),rgba(255,255,255,0) 70%); animation:ax-ripple .6s ease-out forwards }
@keyframes ax-ripple{ to{ transform:scale(24); opacity:0 } }

/* ---------- Champs ---------- */
input, select, textarea{ transition:border-color .2s, box-shadow .25s, background .2s }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--ax-amber) !important; box-shadow:0 0 0 3px rgba(255,181,71,.16) }

/* ---------- Cartes : élévation + halo qui suit le curseur ---------- */
.modcard, .dtile{ transition:transform .35s var(--ax-ease), border-color .35s, box-shadow .35s; --gx:50%; --gy:50% }
.modcard:hover, .dtile:hover{ transform:translateY(-3px); border-color:rgba(255,181,71,.35);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(255,181,71,.06) }
.modcard:hover{ background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,181,71,.08),transparent 45%),linear-gradient(160deg,var(--surface),var(--bg2)) }
.dtile:hover{ background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,181,71,.09),transparent 55%),var(--surface) }
.dtile b{ font-variant-numeric:tabular-nums }
.sim-card{ transition:border-color .35s }
.badge{ transition:transform .3s var(--ax-spring), border-color .3s }
.badge:hover{ transform:translateY(-2px) }
.badge.got{ position:relative; overflow:hidden }
.badge.got::after{ content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,rgba(255,203,122,.22) 50%,transparent 65%); pointer-events:none }
.badge.got:hover::after{ animation:ax-shine .9s ease }
@keyframes ax-shine{ to{ transform:translateX(120%) } }
.rtable tbody tr, .rtable tr{ transition:background .2s }
.rtable tbody tr:hover td{ background:rgba(255,181,71,.035) }

/* ---------- Formation : réponses qui réagissent ---------- */
.qopt.correct{ animation:ax-ok .7s var(--ax-ease) }
.qopt.wrong{ animation:ax-shake .45s ease }
.feedback.good{ animation:ax-pop .55s var(--ax-spring) both; position:relative }
.feedback.bad{ animation:ax-shake .45s ease, ax-fade .4s ease both }
.feedback.good .verdict, .feedback.bad .verdict{ display:inline-block }
@keyframes ax-ok{ 0%{ box-shadow:0 0 0 0 rgba(81,226,154,.55) } 100%{ box-shadow:0 0 0 16px rgba(81,226,154,0) } }
@keyframes ax-shake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-7px) } 40%{ transform:translateX(6px) } 60%{ transform:translateX(-4px) } 80%{ transform:translateX(2px) } }
@keyframes ax-pop{ from{ opacity:0; transform:scale(.94) translateY(8px) } }
@keyframes ax-fade{ from{ opacity:0 } }
.result .score{ position:relative; display:inline-block; animation:ax-pop .7s var(--ax-spring) both }
.result .score::after{ content:""; position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%;
  border:2px solid var(--ax-amber); opacity:0; animation:ax-ring 1.1s .2s ease-out both; pointer-events:none }
@keyframes ax-ring{ 0%{ transform:scale(.4); opacity:.8 } 100%{ transform:scale(1.8); opacity:0 } }

/* ---------- Fenêtres & notifications : entrée à ressort ---------- */
.ui-overlay{ transition:opacity .28s ease, backdrop-filter .28s !important; background:rgba(5,12,24,.62) !important }
.ui-overlay.show{ backdrop-filter:blur(8px) }
.ui-modal{ transform:translateY(22px) scale(.93) !important; opacity:.4; transition:transform .5s var(--ax-spring), opacity .25s !important;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,181,71,.05) !important }
.ui-overlay.show .ui-modal{ transform:none !important; opacity:1 }
.ui-toast{ transform:translateX(30px) scale(.95) !important; transition:opacity .25s, transform .5s var(--ax-spring) !important;
  border-left-color:var(--ax-amber) !important; backdrop-filter:blur(10px); background:rgba(16,34,58,.92) !important }
.ui-toast.show{ transform:none !important }
.ui-toast.ok{ border-left-color:var(--ok) !important } .ui-toast.err{ border-left-color:var(--bad) !important }

/* ---------- Connexion / inscription : verre dépoli dans la nuit ---------- */
.auth-card{ background:linear-gradient(160deg,rgba(16,34,58,.82),rgba(10,22,40,.82)) !important; backdrop-filter:blur(14px);
  border:1px solid rgba(143,164,188,.18) !important; box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,181,71,.04) inset;
  position:relative }
.auth-card::before{ content:""; position:absolute; left:24px; right:24px; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--ax-amber),transparent); opacity:.7 }

/* Repli sans View Transitions */
.view.ax-enter{ animation:ax-vt-in .5s var(--ax-ease) both }
html[data-axdir="back"] .view.ax-enter{ animation-name:ax-vt-in-back }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*){ animation:none !important }
  .ax-sk::after, .ax-sk-label::before, .qopt.correct, .qopt.wrong, .feedback.good, .feedback.bad, .result .score, .result .score::after, .view.ax-enter, .view.active .worktop .t::after{ animation:none !important }
  #ax-ind{ transition:none } #ax-progress{ display:none }
  .modcard:hover, .dtile:hover{ transform:none }
}