/* Jasmine — UI prototype styles
   Warm, professional, mobile-first. Self-contained. */

:root {
  --bg:        #f6f1ea;         /* warm sand */
  --bg-2:      #efe6d8;
  --surface:   #ffffff;
  --ink:       #2b2622;         /* warm near-black */
  --ink-soft:  #6b6259;
  --line:      #e4d9c8;
  --brand:     #1f6f8b;         /* caftan blue */
  --brand-2:   #2f8fb0;
  --brand-ink: #ffffff;
  --accent:    #c9862f;         /* warm gold */
  --user-bg:   #1f6f8b;
  --user-ink:  #ffffff;
  --jas-bg:    #ffffff;
  --jas-ink:   #2b2622;
  --danger:    #b0413e;
  --ok:        #3a7d44;
  --shadow:    0 10px 30px rgba(43, 38, 34, .10);
  --radius:    18px;
  --font:      system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-2), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #e9dcc8, transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Avatar ---------- */
.avatar {
  --size: 44px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-2) 55%, var(--accent) 130%);
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 12px rgba(31,111,139,.28);
  user-select: none;
}
.avatar .avatar-initials {
  font-size: calc(var(--size) * .4);
  line-height: 1;
  z-index: 1;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;              /* revealed by app.js once /avatar.png loads */
}
.avatar.has-image img { display: block; }
.avatar.has-image .avatar-initials { display: none; }
.avatar.lg { --size: 72px; }
.avatar.xl { --size: 96px; }

/* ── Lip-sync : barre "bouche" pilotée par la voix (voice.js -> driveMouth) ── */
.avatar .lipsync {
  position: absolute;
  left: 47%;                  /* calé sur la bouche de l'avatar (visage cadré) */
  bottom: 21%;
  transform: translateX(-50%) scaleY(0.15);
  width: calc(var(--size) * .30);
  height: calc(var(--size) * .14);
  border-radius: 46% 46% 999px 999px;
  background: radial-gradient(ellipse at 50% 28%, #fdf6ee 0%, #fdf6ee 26%, #7a2f2c 34%, #4a1512 78%);
  box-shadow: 0 0 5px rgba(0,0,0,.3), inset 0 -2px 4px rgba(0,0,0,.45);
  transform-origin: center;
  opacity: 0;
  transition: transform .05s linear, opacity .12s;
  z-index: 2;
  pointer-events: none;
}
.avatar.speaking {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 0 0 4px rgba(14,165,164,.35), 0 6px 18px rgba(14,165,164,.4);
  animation: jas-pulse 1.4s ease-in-out infinite;
}
@keyframes jas-pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.04); } }

/* ── Bouton micro ── */
.mic-btn {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: none; border-radius: 12px;
  background: #eef2f4; color: #0f766e;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s, transform .1s;
}
.mic-btn svg { width: 20px; height: 20px; }
.mic-btn:hover { background: #e2e8ea; }
.mic-btn:disabled { opacity: .4; cursor: not-allowed; }
.mic-btn.listening {
  background: #ef4444; color: #fff;
  animation: mic-glow 1s ease-in-out infinite;
}
@keyframes mic-glow { 0%,100%{ box-shadow: 0 0 0 0 rgba(239,68,68,.5);} 50%{ box-shadow: 0 0 0 8px rgba(239,68,68,0);} }

/* =====================================================
   LOGIN PAGE
   ===================================================== */
.login-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 36px 30px 30px;
  text-align: center;
  animation: rise .5s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.login-card .avatar { margin: 0 auto 16px; }
.login-card h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}
.login-card .tagline {
  margin: 6px 0 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
.field {
  text-align: left;
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fbf8f3;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31,111,139,.15);
  background: #fff;
}
.btn {
  width: 100%;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:hover  { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }

.login-error {
  margin-top: 14px;
  color: var(--danger);
  font-size: 13.5px;
  min-height: 18px;
}
.login-hint {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.login-hint code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12px;
}

/* =====================================================
   CHAT PAGE
   ===================================================== */
.chat-shell {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdf9, #fbf6ee);
  position: sticky;
  top: 0;
  z-index: 5;
}
.chat-header .who { display: flex; flex-direction: column; line-height: 1.2; }
.chat-header .who .name { font-weight: 700; font-size: 16px; }
.chat-header .who .status {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-header .who .status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(58,125,68,.18);
}
.chat-header .spacer { flex: 1; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.user-chip .u-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.user-chip .u-name { font-weight: 600; font-size: 13.5px; }
.user-chip .u-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--brand);
}
.user-chip .u-role.direction { color: var(--accent); }
.u-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
}
.logout-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.logout-btn:hover { background: var(--bg-2); color: var(--ink); }

/* ---- transcript ---- */
.transcript {
  flex: 1;
  overflow-y: auto;
  padding: 22px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}

.welcome {
  text-align: center;
  margin: auto;
  padding: 30px 18px;
  color: var(--ink-soft);
  max-width: 460px;
}
.welcome .avatar { margin: 0 auto 16px; }
.welcome h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; }
.welcome p { margin: 0 0 18px; font-size: 14px; line-height: 1.6; }
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.suggestion {
  background: #fbf6ee;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.suggestion:hover { background: #fff; border-color: var(--brand); }

/* ---- message rows ---- */
.msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 100%;
  animation: pop .28s ease both;
}
@keyframes pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.msg.user { flex-direction: row-reverse; }
.msg .bubble {
  padding: 11px 15px;
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: min(78%, 560px);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.msg.jasmine .bubble {
  background: var(--jas-bg);
  color: var(--jas-ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.msg.user .bubble {
  background: var(--user-bg);
  color: var(--user-ink);
  border-bottom-right-radius: 6px;
}
.msg.user .avatar {
  --size: 34px;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: none;
  font-size: 13px;
}
.msg.jasmine .avatar { --size: 34px; }

/* rich content inside Jasmine bubbles */
.bubble strong { font-weight: 700; }
.bubble table {
  border-collapse: collapse;
  margin: 8px 0 2px;
  font-size: 13px;
  width: 100%;
}
.bubble th, .bubble td {
  border: 1px solid var(--line);
  padding: 5px 8px;
  text-align: left;
}
.bubble th { background: var(--bg-2); }

/* ---- tool-call trace ---- */
.tool-trace {
  margin-top: 8px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbf8f3;
  overflow: hidden;
}
.tool-trace summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-trace summary::-webkit-details-marker { display: none; }
.tool-trace summary .gear { font-size: 13px; }
.tool-trace summary .count {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 8px;
}
.tool-trace .trace-body { padding: 4px 12px 12px; }
.tool-item {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}
.tool-item:first-child { border-top: none; }
.tool-item .tname {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--brand);
  font-weight: 600;
}
.tool-item pre {
  margin: 6px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  overflow-x: auto;
  color: var(--ink);
}
.tool-item .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ---- typing indicator ---- */
.typing .bubble {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 14px 16px;
}
.typing .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-soft);
  opacity: .5;
  animation: blink 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2) { animation-delay: .2s; }
.typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: .9; transform: translateY(-3px); }
}

/* ---- composer ---- */
.composer {
  border-top: 1px solid var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fffdf9;
}
.composer form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  resize: none;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px 15px;
  max-height: 140px;
  transition: border-color .15s, box-shadow .15s;
}
.composer textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31,111,139,.15);
}
.send-btn {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  display: grid;
  place-items: center;
  transition: filter .15s, transform .05s;
}
.send-btn:hover  { filter: brightness(1.06); }
.send-btn:active { transform: scale(.95); }
.send-btn:disabled { opacity: .5; cursor: default; }
.send-btn svg { width: 20px; height: 20px; }

.composer .hint {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin: 8px 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .chat-shell { border-left: none; border-right: none; box-shadow: none; }
  .user-chip .u-meta { display: none; }
  .chat-header .who .name { font-size: 15px; }
  .msg .bubble { max-width: 84%; }
  .logout-btn { padding: 8px 10px; }
}

/* scrollbar */
.transcript::-webkit-scrollbar { width: 9px; }
.transcript::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

/* ---------- rapport intégré au chat (show_report) ---------- */
.msg.report-msg .bubble.report-bubble {
  max-width: 92%;
  width: 92%;
  padding: 10px;
}
.report-frame {
  width: 100%;
  height: 560px;
  border: none;
  border-radius: 10px;
  background: #fff;
  display: block;
}
.report-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
.report-btn {
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #0ea5a4, #0369a1);
}
.report-btn:hover { filter: brightness(1.08); }
.report-btn.ghost {
  background: transparent;
  color: var(--ink2, #475569);
  border: 1px solid var(--line, #e2e8f0);
}

/* ---------- mot-réveil « Hey Jasmine » ---------- */
.wake-btn.on {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  color: #fff;
  border: none;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
  animation: wake-pulse 2.2s infinite;
}
@keyframes wake-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---------- avatar vidéo réaliste (Wav2Lip) ---------- */
.avatar video.talk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
  z-index: 3;
}
.avatar.video-playing video.talk { display: block; }
.avatar.video-playing .lipsync { display: none; }
.avatar.generating {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 0 0 4px rgba(201,162,39,.4);
  animation: jas-gen 1s linear infinite;
}
@keyframes jas-gen {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.25); }
  100% { filter: brightness(1); }
}
.video-btn.on {
  background: linear-gradient(135deg, #c9a227, #b45309);
  color: #fff;
  border: none;
}

/* =====================================================
   SCÈNE JASMINE — grand avatar, entrée spectaculaire
   ===================================================== */
#jas-stage {
  position: fixed;
  right: 28px;
  bottom: 96px;
  z-index: 40;
  width: min(38vw, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateX(120%) scale(.4) rotate(8deg);
  filter: blur(6px);
  transition: none;
}
#jas-stage.enter {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0deg);
  filter: blur(0);
  transition:
    transform .7s cubic-bezier(.22, 1.4, .36, 1),
    opacity .45s ease,
    filter .5s ease;
}
#jas-stage.exit {
  opacity: 0;
  transform: translateX(40%) scale(.6);
  filter: blur(4px);
  transition: transform .5s ease-in, opacity .4s ease-in, filter .4s ease-in;
}

/* halo tournant doré/sarcelle derrière le visage */
#jas-stage .stage-halo {
  position: absolute;
  inset: -9%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(14,165,164,.0) 0deg, rgba(14,165,164,.55) 70deg,
    rgba(201,162,39,.55) 160deg, rgba(14,165,164,.0) 250deg,
    rgba(201,162,39,.45) 320deg, rgba(14,165,164,.0) 360deg);
  animation: stage-spin 6s linear infinite;
  filter: blur(10px);
}
@keyframes stage-spin { to { transform: rotate(360deg); } }

#jas-stage .stage-frame {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #0d1f1a;
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.65),
    0 20px 60px rgba(31,111,139,.45),
    0 0 0 10px rgba(255,255,255,.08);
}
#jas-stage .stage-face,
#jas-stage .stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#jas-stage .stage-video { display: none; }
#jas-stage.video .stage-video { display: block; }
#jas-stage.video .stage-face { display: none; }
#jas-stage.video .stage-mouth { display: none; }

/* bouche amplitude (mode voix) — même géométrie que l'avatar miniature */
#jas-stage .stage-mouth {
  position: absolute;
  left: 47%;
  bottom: 22.5%;
  width: 22%;
  height: 10%;
  transform: translateX(-50%) scaleY(.15);
  transform-origin: center;
  border-radius: 46% 46% 999px 999px;
  background: radial-gradient(ellipse at 50% 28%, #fdf6ee 0%, #fdf6ee 26%, #7a2f2c 34%, #4a1512 78%);
  box-shadow: 0 0 8px rgba(0,0,0,.3), inset 0 -3px 6px rgba(0,0,0,.45);
  opacity: 0;
  transition: transform .05s linear, opacity .12s;
}

/* vie pendant la parole : respiration + léger balancement */
#jas-stage.talking .stage-frame {
  animation: stage-sway 3.4s ease-in-out infinite;
}
@keyframes stage-sway {
  0%   { transform: rotate(-1.3deg) translateY(0); }
  25%  { transform: rotate(0deg)    translateY(-5px); }
  50%  { transform: rotate(1.3deg)  translateY(0); }
  75%  { transform: rotate(0deg)    translateY(-3px); }
  100% { transform: rotate(-1.3deg) translateY(0); }
}

/* génération en cours : halo qui pulse plus vite */
#jas-stage.generating .stage-halo { animation: stage-spin 1.4s linear infinite; }

#jas-stage .stage-name {
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
  font-weight: 800;
  letter-spacing: 2.5px;
  font-size: 15px;
  text-transform: uppercase;
  color: #0d1f1a;
  background: linear-gradient(135deg, #fff, #f0e7d4);
  border: 1px solid var(--line);
  padding: 7px 22px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(43,38,34,.18);
}

@media (max-width: 720px) {
  #jas-stage { width: 56vw; right: 12px; bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  #jas-stage, #jas-stage.enter, #jas-stage.exit { transition: opacity .3s; transform: none; filter: none; }
  #jas-stage .stage-halo, #jas-stage.talking .stage-frame { animation: none; }
}

/* ---------- corps entier + zéro fausse bouche ---------- */
/* La fausse bouche est abandonnée : les lèvres réelles viennent de Wav2Lip. */
.avatar .lipsync, #jas-stage .stage-mouth { display: none !important; }

/* Scène corps entier : carte arrondie (plus un cercle serré sur le visage). */
#jas-stage { width: min(40vw, 400px); }
#jas-stage .stage-frame { border-radius: 28px; }
#jas-stage .stage-halo { inset: -6%; border-radius: 36px; }

/* ---------- entrée spectaculaire : rayons + étincelles ---------- */
#jas-stage::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(201,162,39,.28) 8deg, transparent 16deg,
    transparent 40deg, rgba(14,165,164,.22) 48deg, transparent 56deg,
    transparent 90deg, rgba(201,162,39,.28) 98deg, transparent 106deg,
    transparent 140deg, rgba(14,165,164,.22) 148deg, transparent 156deg,
    transparent 190deg, rgba(201,162,39,.28) 198deg, transparent 206deg,
    transparent 250deg, rgba(14,165,164,.22) 258deg, transparent 266deg,
    transparent 300deg, rgba(201,162,39,.28) 308deg, transparent 316deg, transparent 360deg);
  opacity: 0;
  transform: scale(.3) rotate(0deg);
}
#jas-stage.enter::before {
  animation: stage-rays 2.6s ease-out forwards;
}
@keyframes stage-rays {
  0%   { opacity: 0; transform: scale(.3) rotate(-40deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6) rotate(50deg); }
}
#jas-stage::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position: absolute;
  inset: -14% -10% auto -10%;
  z-index: 1;
  text-align: center;
  font-size: 22px;
  letter-spacing: 18px;
  color: #c9a227;
  text-shadow: 0 0 12px rgba(201,162,39,.9);
  opacity: 0;
  pointer-events: none;
}
#jas-stage.enter::after {
  animation: stage-sparkle 1.9s ease-out .15s forwards;
}
@keyframes stage-sparkle {
  0%   { opacity: 0; transform: translateY(26px) scale(.5); }
  30%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 0; transform: translateY(-30px) scale(1.25); }
}

/* verrou de langue actif */
.lang-btn.on { background: linear-gradient(135deg, #1f6f8b, #2f8fb0); color: #fff; border: none; }