@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1420;
  --panel: #1a2233;
  --panel-2: #222c42;
  --text: #e8ecf4;
  --muted: #9aa4b9;
  --accent: #4f8cff;
  --accent-2: #22c55e;
  --danger: #ef4444;
  --radius: 14px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f4f8; --panel: #ffffff; --panel-2: #eef1f6;
    --text: #1a2233; --muted: #556074;
  }
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  /* dvh suit le clavier virtuel et la barre d'adresse mobile ; 100% en secours */
  height: 100dvh;
  overflow: hidden;
}

header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--panel);
  /* safe-area : encoche iPhone (PWA plein écran) et bords arrondis en paysage */
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-size: 1.1rem; white-space: nowrap; }
.badges {
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.badges::-webkit-scrollbar { display: none; }
.badge { white-space: nowrap; flex-shrink: 0; }
.badge {
  background: var(--panel-2); border-radius: 999px; padding: 4px 10px;
  font-size: .82rem; color: var(--text); border: none;
}
.btn-badge { cursor: pointer; }
.btn-badge:hover { background: var(--accent); color: #fff; }
#b-review.has-due { background: var(--accent-2); color: #fff; }

main {
  flex: 1; overflow-y: auto; padding: 16px 12px 24px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 780px; width: 100%; margin: 0 auto;
}

.msg { max-width: 88%; padding: 10px 14px; border-radius: var(--radius); line-height: 1.45; font-size: .95rem; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.msg img { max-width: 100%; border-radius: 10px; }
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.model { align-self: flex-start; background: var(--panel); border-bottom-left-radius: 4px; }
.msg.model b, .msg.model strong { color: var(--accent); }
.msg .speak { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; margin-left: 6px; }
.msg .speak:hover { opacity: 1; }
.msg.thinking { color: var(--muted); font-style: italic; }
.msg.error { background: rgba(239,68,68,.15); border: 1px solid var(--danger); }

.xp-pop { align-self: center; font-size: .8rem; color: var(--accent-2); }
.quest-pop { font-size: .9rem; font-weight: 600; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); border-radius: 999px; padding: 4px 14px; }

.exercise {
  align-self: flex-start; max-width: 88%;
  background: var(--panel-2); border: 1px solid rgba(79,140,255,.35);
  border-radius: var(--radius); padding: 12px 14px; font-size: .95rem;
}
.exercise .ex-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 6px; }
.exercise img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.exercise .video-wrap { position: relative; padding-top: 56.25%; margin: 8px 0; }
.exercise .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.qcm-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.qcm-options button {
  text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: var(--panel); color: var(--text); cursor: pointer; font-size: .92rem;
}
.qcm-options button:hover:not(:disabled) { border-color: var(--accent); }
.qcm-options button:disabled { opacity: .55; cursor: default; }

footer {
  background: var(--panel); padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
  border-top: 1px solid rgba(255,255,255,.06);
}
.input-row { display: flex; gap: 8px; max-width: 780px; margin: 0 auto; align-items: flex-end; }
#input {
  flex: 1; resize: none; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  background: var(--panel-2); color: var(--text); padding: 10px 12px; font-size: 1rem; font-family: inherit;
  max-height: 120px;
}
#input:focus { outline: none; border-color: var(--accent); }
#send, #mic {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  font-size: 1.15rem; background: var(--accent); color: #fff; flex-shrink: 0;
}
#mic { background: var(--accent-2); color: #fff; }
#photo { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.05rem; background: var(--panel-2); color: var(--text); flex-shrink: 0; }
#mic.recording { background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }

.hidden { display: none !important; }

/* Modals */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-card { background: var(--panel); border-radius: 16px; width: 100%; max-width: 480px; max-height: 85dvh; overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-head h2 { font-size: 1.15rem; }
.close { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }

/* Révisions */
.flashcard { background: var(--panel-2); border-radius: 12px; padding: 22px 16px; text-align: center; margin-bottom: 12px; }
.flashcard .front { font-size: 1.3rem; font-weight: 600; }
.flashcard .back { margin-top: 12px; color: var(--muted); border-top: 1px dashed rgba(255,255,255,.15); padding-top: 12px; }
.review-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.review-actions button { padding: 8px 14px; border-radius: 10px; border: none; cursor: pointer; font-size: .9rem; color: #fff; }
.q-again { background: var(--danger); }
.q-hard { background: #f59e0b; }
.q-good { background: var(--accent); }
.q-easy { background: var(--accent-2); }
.show-answer { background: var(--panel-2); color: var(--text); border: 1px solid rgba(255,255,255,.15); padding: 10px 18px; border-radius: 10px; cursor: pointer; width: 100%; }
.review-progress { text-align: center; color: var(--muted); font-size: .85rem; margin-bottom: 10px; }

/* Usage / crédits */
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.usage-tile { background: var(--panel-2); border-radius: 12px; padding: 12px; text-align: center; }
.usage-tile .val { font-size: 1.25rem; font-weight: 700; }
.usage-tile .val.neg { color: var(--danger); }
.usage-tile .lab { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.usage-models { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }
.usage-models div { display: flex; justify-content: space-between; padding: 3px 0; }
.recharge-box { background: var(--panel-2); border-radius: 12px; padding: 14px; }
.recharge-box h3 { font-size: .95rem; margin-bottom: 8px; }
.recharge-row { display: flex; gap: 8px; margin-bottom: 10px; }
.recharge-row input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: var(--panel); color: var(--text); }
.recharge-row button { padding: 8px 14px; border-radius: 10px; border: none; background: var(--accent-2); color: #fff; cursor: pointer; }
.recharge-note { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.pay-presets { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: stretch; }
.pay-preset { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: var(--panel); color: var(--text); cursor: pointer; font-size: .95rem; font-weight: 600; }
.pay-preset:hover { border-color: var(--accent); }
.pay-preset.sel { border-color: var(--accent); background: var(--accent); color: #fff; }
#pay-amount { flex: 1; min-width: 70px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: var(--panel); color: var(--text); }
.pay-main { width: 100%; padding: 11px; border-radius: 10px; border: none; background: var(--accent-2); color: #fff; cursor: pointer; font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.pay-main:disabled { opacity: .5; cursor: default; }
.manual-credit { margin-top: 10px; }
.manual-credit summary { font-size: .8rem; color: var(--muted); cursor: pointer; }
.recharge-box + .recharge-box { margin-top: 12px; }
.kind-name { text-transform: none; width: 128px; }

/* Classeur de fiches */
.lesson-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: var(--panel-2); color: var(--text); cursor: pointer; margin-bottom: 8px; font-size: .92rem; }
.lesson-item:hover { border-color: var(--accent); }
.lesson-item small { color: var(--muted); flex-shrink: 0; }
.lesson-back { background: none; border: none; color: var(--accent); cursor: pointer; margin-bottom: 10px; font-size: .85rem; padding: 0; }
.lesson-content { white-space: pre-wrap; line-height: 1.55; font-size: .92rem; }
.lesson-content strong { color: var(--accent); }
#b-usage.neg-balance { background: var(--danger); color: #fff; }
.recharge-note a { color: var(--accent); }

/* Progression */
.stats-section { margin-bottom: 16px; }
.stats-section h3 { font-size: .9rem; margin-bottom: 8px; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; background: var(--panel-2); border-radius: 10px; padding: 10px 10px 4px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar { width: 100%; background: linear-gradient(180deg, var(--accent), #2563eb); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-col.empty .bar { background: rgba(255,255,255,.08); }
.bar-lab { font-size: .58rem; color: var(--muted); margin-top: 3px; }
.level-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--panel-2); border-radius: 10px; padding: 12px; }
.level-chip { background: var(--accent); color: #fff; border-radius: 8px; padding: 4px 10px; font-weight: 700; }
.level-chip small { display: block; font-weight: 400; font-size: .62rem; opacity: .8; }
.level-arrow { color: var(--muted); }

/* Appel live unifié dans le chat */
.call-bar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(34,197,94,.18), rgba(79,140,255,.14));
  border-bottom: 1px solid rgba(34,197,94,.35);
  padding: 8px 14px; font-size: .9rem;
  position: sticky; top: 0; z-index: 9;
}
.call-avatar { font-size: 1.3rem; transition: transform .15s, filter .15s; }
.call-avatar.speaking { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(79,140,255,.8)); }
#call-status { flex: 1; color: var(--text); }
#mic-select { max-width: 130px; background: var(--panel-2); color: var(--text); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 4px 6px; font-size: .78rem; }
#live-hangup { background: var(--danger); color: #fff; border: none; border-radius: 999px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; }
.msg.live-partial { opacity: .85; }
.vocab-pop { align-self: center; font-size: .8rem; color: var(--accent); }

/* Analytique */
.skill-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .85rem; }
.skill-name { width: 105px; text-transform: capitalize; color: var(--muted); }
.skill-track { flex: 1; height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.skill-fill { height: 100%; background: var(--accent); border-radius: 5px; }
.skill-fill.low { background: var(--danger); }
.skill-fill.high { background: var(--accent-2); }
.skill-rate { width: 70px; text-align: right; }
.ctx-chip { background: var(--panel-2); border-radius: 8px; padding: 4px 10px; font-size: .82rem; }
.ctx-chip small { color: var(--muted); }
.memo-list { margin: 0 0 8px 18px; font-size: .85rem; line-height: 1.5; }
.memo-list li { margin-bottom: 3px; }

/* Gate */
.gate { position: fixed; inset: 0; background: var(--bg); z-index: 100; display: flex; align-items: center; justify-content: center; }
.gate-card { background: var(--panel); padding: 28px; border-radius: 16px; text-align: center; width: 90%; max-width: 340px; }
.gate-card h1 { margin-bottom: 6px; }
.gate-card p { color: var(--muted); margin-bottom: 14px; }
.gate-card input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: var(--panel-2); color: var(--text); margin-bottom: 10px; font-size: 1rem; }
.gate-card button { width: 100%; padding: 10px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-size: 1rem; cursor: pointer; }
.gate-error { color: var(--danger); font-size: .85rem; margin-top: 8px; }

/* ---------- Responsive ---------- */

/* Petits écrans (téléphones) */
@media (max-width: 480px) {
  header { padding-bottom: 8px; }
  .brand { font-size: 1rem; }
  .badge { font-size: .78rem; padding: 3px 8px; }
  main { padding: 12px 10px 18px; }
  .msg, .exercise { max-width: 92%; font-size: .92rem; }
  .input-row { gap: 6px; }
  #send, #mic, #photo { width: 42px; height: 42px; }

  /* Modales en bottom-sheet, plus naturelles au pouce */
  .modal { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: 100%; border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .skill-name { width: 82px; font-size: .8rem; }
  .skill-rate { width: 58px; }
  #mic-select { max-width: 96px; }
  .flashcard .front { font-size: 1.15rem; }
}

/* Téléphone en paysage : on économise la hauteur */
@media (max-height: 480px) and (orientation: landscape) {
  header { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .badge { font-size: .75rem; padding: 2px 8px; }
  main { padding: 8px 12px 12px; }
  footer { padding-top: 6px; }
  #input { max-height: 72px; }
  #send, #mic, #photo { width: 38px; height: 38px; font-size: 1rem; }
  .call-bar { padding: 4px 14px; }
  .modal-card { max-height: 96dvh; }
}

/* Grands écrans : chat plus large, texte un peu plus grand */
@media (min-width: 1100px) {
  main, .input-row { max-width: 900px; }
  .msg, .exercise { font-size: 1rem; max-width: 78%; }
  .modal-card { max-width: 560px; }
}


/* ---- Examen chronométré ---- */
.exam-choices,.exam-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.exam-opt{text-align:left;padding:10px 12px;border:1px solid rgba(128,128,128,.35);border-radius:10px;background:rgba(128,128,128,.08);color:inherit;cursor:pointer;font:inherit}
.exam-opt.sel{border-color:#2563eb;background:rgba(37,99,235,.18)}
.exam-top{display:flex;justify-content:space-between;align-items:center;font-size:.88em;opacity:.75;margin-bottom:6px}
.exam-timer{font-weight:700;color:#2563eb}.exam-timer.low{color:#e11d48}
.exam-q{font-size:1.12em;font-weight:600;margin:8px 0}
.exam-nav{display:flex;justify-content:space-between;margin-top:12px;gap:8px}
.exam-nav button{padding:8px 14px;border-radius:8px;border:0;background:#2563eb;color:#fff;cursor:pointer}
.exam-nav button[disabled]{opacity:.4;cursor:default}
.exam-score{text-align:center;margin:12px 0}
.exam-pct{font-size:2.6em;font-weight:800}.exam-pct.high{color:#16a34a}.exam-pct.low{color:#e11d48}
.exam-skills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0;font-size:.88em;opacity:.8}
.exam-corr .exam-c{padding:8px 10px;border-radius:8px;margin:6px 0;border-left:3px solid #999}
.exam-c.ok{border-color:#16a34a;background:rgba(22,163,74,.08)}
.exam-c.ko{border-color:#e11d48;background:rgba(225,29,72,.08)}
.exam-c .sm{font-size:.85em;opacity:.85;margin-top:3px}.exam-c .expl{font-style:italic}


/* ---- Séance du jour ---- */
.seance-step{width:100%;margin:6px 0}
.seance-step.done{opacity:.65}

.exam-fill{width:100%;padding:10px 12px;border:1px solid rgba(128,128,128,.4);border-radius:10px;background:rgba(128,128,128,.06);color:inherit;font:inherit}

.writing-ta{width:100%;min-height:140px;padding:10px 12px;border:1px solid rgba(128,128,128,.4);border-radius:10px;background:rgba(128,128,128,.06);color:inherit;font:inherit;resize:vertical}
.writing-note{font-size:2.2em;font-weight:800;text-align:center}
.writing-corr{padding:8px 10px;border-radius:8px;margin:6px 0;border-left:3px solid #e11d48;background:rgba(225,29,72,.07)}
.writing-corr .ok{color:#16a34a;font-weight:600}

/* ============ UX Polish (incrémental) ============ */
button, .badge, .btn-badge, .exam-opt, .lesson-item, input, textarea, .msg, a.chip, a.btn {
  transition: transform .13s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
button:active, .badge:active, .exam-opt:active, .lesson-item:active, a.chip:active { transform: scale(.96); }
button:hover:not(:disabled), .btn-badge:hover, .lesson-item:hover, a.chip:hover { filter: brightness(1.08); }
:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; border-radius: 6px; }
button:disabled { opacity: .45; cursor: default; }

/* Modales : entrée depuis leur source + fond fondu */
.modal:not(.hidden) { animation: ovIn .18s ease-out; }
.modal:not(.hidden) .modal-card { animation: cardIn .24s cubic-bezier(.2,.9,.25,1); }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* Messages du chat : apparition douce */
.msg { animation: msgIn .26s ease-out; }
@keyframes msgIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Barres animées */
.bar, .skill-fill, .skill-track > div { transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
.exam-pct, .writing-note { animation: popIn .35s cubic-bezier(.2,1.4,.3,1); }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Skeleton shimmer (pour remplacer les "Chargement…") */
.skeleton { position: relative; overflow: hidden; background: rgba(128,128,128,.12); border-radius: 8px; min-height: 14px; }
.skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: sh 1.2s infinite; }
@keyframes sh { to { transform: translateX(100%); } }

/* Indicateur "Emma écrit" */
.typing { display:inline-flex; gap:4px; align-items:center; }
.typing i { width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.5; animation: td 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes td { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

/* Scrollbars discrètes */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.55); }

/* Accessibilité : respect du reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.pron-phrase{font-size:1.3em;font-weight:600;line-height:1.6;margin:10px 0}
.pron-w{padding:0 2px;border-radius:4px}.pron-w.ok{color:#16a34a}.pron-w.ko{color:#e11d48;text-decoration:underline}
.pron-score{font-size:2.4em;font-weight:800;text-align:center}
.pron-listening{color:#e11d48;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}

/* ============ Look playful/premium (clay, typo amicale) ============ */
body, input, textarea, button, select { font-family: 'Nunito', system-ui, -apple-system, sans-serif; }
h1, h2, h3, header, .modal-head h2, .exam-q, .pron-phrase, .exam-pct, .writing-note, .pron-score, .usage-tile .val, .exam-score {
  font-family: 'Baloo 2', system-ui, sans-serif; letter-spacing: .2px;
}
/* Formes arrondies + ombres douces (clay) */
.modal-card { border-radius: 24px !important; box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); }
button, .badge, .btn-badge, .exam-opt, .lesson-item, input, textarea, a.chip, a.btn, .usage-tile, .stats-section, .writing-corr, .exam-c, .writing-ta, .exam-fill {
  border-radius: 15px !important;
}
.msg { border-radius: 18px !important; }
/* Boutons d'action : profondeur douce + pression */
button:not(.close):not(.lo) { box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.22); }
button:not(.close):not(.lo):active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.exam-opt, .lesson-item { box-shadow: 0 3px 0 rgba(0,0,0,.14); }
/* Badges/en-tête un peu plus généreux */
.badge, .btn-badge { padding: .35rem .55rem; }

/* ============ Identité visible (fond + accents) ============ */
body { background: radial-gradient(1100px 720px at 50% -8%, #1a2350, #0b0f1a 58%) fixed !important; }
.modal-card { border-radius: 28px !important; border: 1px solid rgba(129,140,248,.22) !important; }
header { background: linear-gradient(90deg, rgba(99,102,241,.20), transparent 70%); font-size: 1.05rem; }
header .dot, .dot { box-shadow: 0 0 12px rgba(34,197,94,.9); }
.exam-opt, .lesson-item, .usage-tile, .stats-section, .writing-corr, .exam-c {
  background: rgba(99,102,241,.09) !important; border: 1px solid rgba(129,140,248,.18) !important;
}
.exam-opt.sel { background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(124,58,237,.4)) !important; border-color: #818cf8 !important; }
.badge, .btn-badge { background: rgba(99,102,241,.14); }

/* ============ Look plus vif (visible) ============ */
body { background: radial-gradient(900px 520px at 50% -2%, #2b2a72, #14152f 50%, #0a0b16) fixed !important; }
.msg.model { background: rgba(129,140,248,.12) !important; border: 1px solid rgba(129,140,248,.24) !important; }
.msg.user { background: linear-gradient(135deg, #4f46e5, #6d28d9) !important; }
header { background: linear-gradient(90deg, rgba(109,40,217,.30), rgba(79,70,229,.10) 60%, transparent) !important; }
.bar, .composer, form { }

/* ============ Look premium vif ============ */
body { background: radial-gradient(1000px 620px at 50% -4%, #34309a, #191a3d 46%, #0b0c1a) fixed !important; }
.msg.model { background: rgba(129,140,248,.14) !important; border: 1px solid rgba(129,140,248,.28) !important; box-shadow: 0 6px 22px rgba(0,0,0,.32); }
.msg.user { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 6px 18px rgba(99,102,241,.35); }
.badge, .btn-badge { background: rgba(129,140,248,.16) !important; border: 1px solid rgba(129,140,248,.22) !important; }

/* ============ Aurora premium (waouh) ============ */
body { background: #0a0b18 !important; position: relative; }
body::before, body::after { content:""; position: fixed; z-index: 0; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
body::before { width: 540px; height: 540px; background: radial-gradient(circle, #7c3aed, transparent 70%); top: -140px; left: -90px; animation: blobA 20s ease-in-out infinite; }
body::after  { width: 640px; height: 640px; background: radial-gradient(circle, #2563eb, transparent 70%); bottom: -180px; right: -130px; animation: blobB 26s ease-in-out infinite; }
@keyframes blobA { 50% { transform: translate(70px, 50px) scale(1.12); } }
@keyframes blobB { 50% { transform: translate(-60px, -40px) scale(1.06); } }
header, .split, .chat, main, #app, .composer, .bar, form { position: relative; z-index: 1; }
/* Verre (glass) sur les surfaces */
.msg.model { background: rgba(28,30,60,.55) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(129,140,248,.30) !important; }
.modal-card { background: rgba(18,20,42,.82) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(129,140,248,.28) !important; }
.msg.user { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 8px 24px rgba(124,58,237,.4) !important; }

/* ============ Modales : panneau droit (PC/tablette) / plein écran (tel) — "Modales panneau droit" ============ */
@media (min-width: 700px) {
  .modal { align-items: stretch !important; justify-content: flex-end !important; padding: 0 !important; }
  .modal-card {
    width: 460px !important; max-width: 94vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 24px 0 0 24px !important; margin: 0 !important;
    box-shadow: -26px 0 70px rgba(0,0,0,.55) !important;
  }
  .modal:not(.hidden) .modal-card { animation: drawerIn .3s cubic-bezier(.2,.9,.25,1) !important; }
}
@media (max-width: 699px) {
  .modal { align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; }
  .modal-card {
    width: 100vw !important; max-width: 100vw !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0 !important; margin: 0 !important;
    padding-top: calc(18px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
  .modal:not(.hidden) .modal-card { animation: pageIn .26s ease-out !important; }
}
@keyframes drawerIn { from { transform: translateX(100%); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes pageIn { from { transform: translateX(100%); } to { transform: none; } }

/* ============ fix .modal fixed (au-dessus de l'aurora) ============ */
.modal:not(.hidden) { position: fixed !important; inset: 0 !important; z-index: 60 !important; }

/* ============ Header : menus déroulants (rangement des actions) ============ */
.badges { overflow: visible !important; flex-wrap: wrap !important; row-gap: 6px; }
.menu { position: relative; display: inline-flex; }
.menu-trigger { cursor: pointer; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 224px; background: var(--panel); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 24px 60px rgba(0,0,0,.55); z-index: 58; animation: menuIn .16s ease-out; }
.menu-panel.hidden { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 11px 12px; border-radius: 10px; font-size: .95rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel-2); }
.menu-item .mi-ico { font-size: 1.15rem; width: 1.4rem; text-align: center; flex-shrink: 0; }

/* ============ États vides soignés ============ */
.empty-state { text-align: center; padding: 34px 16px 26px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.es-ico { font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 6px 16px rgba(99,102,241,.45)); animation: floatY 3s ease-in-out infinite; }
.es-title { font-size: 1.08rem; font-weight: 700; }
.es-msg { color: var(--muted); font-size: .9rem; max-width: 34ch; margin: 0; line-height: 1.55; }
.es-cta { margin-top: 8px; background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; padding: 11px 22px; border-radius: 12px; font-size: .92rem; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: 0 8px 22px rgba(99,102,241,.4); }
.es-cta:hover { filter: brightness(1.08); }
@keyframes floatY { 50% { transform: translateY(-6px); } }

/* ============ Onboarding ============ */
.ob-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ob-row:last-of-type { border-bottom: none; }
.ob-ico { font-size: 1.6rem; width: 2.2rem; text-align: center; flex-shrink: 0; }
.ob-t { font-weight: 700; margin-bottom: 1px; }
.ob-d { color: var(--muted); font-size: .88rem; line-height: 1.45; }

/* ============ Vocabulaire par thème ============ */
.vocab-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vt { background: var(--panel-2); color: var(--text); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px 15px; font-size: .9rem; cursor: pointer; font-family: inherit; }
.vt:hover { background: var(--accent, #4F46E5); color: #fff; border-color: transparent; }
.vocab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
#vocab-back { background: var(--panel-2); color: var(--text); border: none; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: .88rem; }
.vocab-card { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; background: var(--panel-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.vc-word { font-weight: 700; font-size: 1.06rem; }
.vc-tr { color: #a5b4fc; font-size: .92rem; margin-top: 2px; }
.vc-ex { color: var(--muted); font-size: .85rem; margin-top: 6px; font-style: italic; }
.vc-actions { display: flex; gap: 2px; flex-shrink: 0; }
.vc-actions button, .vc-actions .speak { background: none; border: none; font-size: 1.05rem; cursor: pointer; padding: 5px; border-radius: 8px; color: var(--text); }
.vc-actions button:hover { background: var(--panel); }
.vc-save:disabled { opacity: .75; cursor: default; }

/* ============ Dictée audio ============ */
.dict-controls { display: flex; gap: 8px; margin: 12px 0; align-items: center; flex-wrap: wrap; }
.dict-score { font-weight: 700; font-size: 1.15rem; margin: 16px 0 4px; }
.dict-target { line-height: 1.95; font-size: 1.02rem; }
.dw { padding: 1px 4px; border-radius: 6px; }
.dw.ok { background: rgba(22,163,74,.25); }
.dw.ko { background: rgba(220,38,38,.28); text-decoration: line-through; text-decoration-color: rgba(220,38,38,.6); }

/* ============ Réglages ============ */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--panel-2); border: none; border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; cursor: pointer; color: var(--text); font-family: inherit; }
.set-l { display: flex; gap: 12px; align-items: flex-start; }
.set-ico { font-size: 1.4rem; width: 1.8rem; text-align: center; flex-shrink: 0; }
.set-chevron { color: var(--muted); font-size: 1.5rem; line-height: 1; }
.set-toggle { width: 46px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.16); position: relative; flex-shrink: 0; transition: background .2s; }
.set-toggle.on { background: var(--accent-2); }
.set-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.set-toggle.on .set-knob { left: 23px; }
.set-row .ob-t, .set-row .ob-d { display: block; }
.set-l > span:last-child { display: flex; flex-direction: column; gap: 1px; }

/* ============ Lisibilité du chat (bulles nettes, largeur maîtrisée) ============ */
.msg { max-width: min(680px, 88%) !important; }
.msg.model {
  background: rgba(31,35,66,.94) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #eceffb !important;
  border: 1px solid rgba(129,140,248,.20) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.30) !important;
}
.msg.model b, .msg.model strong { color: #aab6ff !important; }
.msg.user {
  background: linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(99,102,241,.32) !important;
}

/* ============ Front polish (barre, bulles, fond) — v19 ============ */
/* Barre du haut : pastilles plus nettes + aérées */
.badges { gap: 8px !important; align-items: center; }
.badge, .btn-badge, .menu-trigger { background: rgba(129,140,248,.24) !important; border: 1px solid rgba(129,140,248,.34) !important; color: var(--text) !important; }
.menu-trigger { font-weight: 600; }
/* Bulles plus étroites, plus « chat » */
.msg { max-width: min(560px, 86%) !important; }
/* Fond plus sobre : halos aurora adoucis + base un poil moins noire */
body { background: #101126 !important; }
body::before, body::after { opacity: .26 !important; filter: blur(100px) !important; }

/* ============ Thème chaleureux (ambre / corail) — v20 ============ */
:root {
  --accent: #f59e0b;
  --bg: #1a1410;
  --panel: #241d16;
  --panel-2: #2e2419;
  --text: #f3ede4;
  --muted: #b8a894;
}
/* Fond brun sombre + halos chauds */
body { background: #1a1410 !important; }
body::before { background: radial-gradient(circle, #b45309, transparent 70%) !important; }
body::after  { background: radial-gradient(circle, #ea580c, transparent 70%) !important; }
/* En-tête + pastilles chaudes */
header { background: linear-gradient(90deg, rgba(245,158,11,.24), rgba(234,88,12,.08) 60%, transparent) !important; }
.badge, .btn-badge, .menu-trigger { background: rgba(245,158,11,.20) !important; border: 1px solid rgba(245,158,11,.36) !important; color: var(--text) !important; }
.btn-badge:hover, .vt:hover, .menu-item:hover { background: rgba(245,158,11,.30) !important; }
/* Bulles */
.msg.user { background: linear-gradient(135deg, #f59e0b, #fb7185) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(244,63,94,.30) !important; }
.msg.model { background: rgba(40,32,24,.94) !important; border: 1px solid rgba(245,158,11,.22) !important; }
.msg.model b, .msg.model strong { color: #fbbf24 !important; }
/* Boutons / CTA chauds */
.es-cta { background: linear-gradient(135deg, #f59e0b, #fb7185) !important; box-shadow: 0 8px 22px rgba(244,63,94,.35) !important; }
.exam-opt.sel { background: linear-gradient(135deg, rgba(245,158,11,.40), rgba(251,113,133,.40)) !important; border-color: #f59e0b !important; }
/* Surfaces modales : liseré chaud */
.modal-card { border: 1px solid rgba(245,158,11,.26) !important; }
/* Détails : traduction vocab en corail doux */
.vc-tr { color: #fca5a5 !important; }

/* Barre de saisie : envoi + micro en chaud, immunisés mode clair */
.composer { border-top: 1px solid rgba(245,158,11,.18) !important; }
#send { background: linear-gradient(135deg, #f59e0b, #fb7185) !important; color: #fff !important; }
#mic { background: #f97316 !important; color: #fff !important; }
#input::placeholder { color: #b8a894 !important; }

/* Sélecteur de genre (Réglages) */
.gender-row { display: flex; gap: 8px; }
.gbtn, .tbtn { flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 6px; cursor: pointer; font-family: inherit; font-size: .9rem; }
.gbtn.sel, .tbtn.sel { background: var(--accent); color: #fff; border-color: transparent; }

/* ============ Variante ROSE (élève fille) — v22 ============ */
html[data-gender="f"] { --accent: #ec4899; --panel: #251019; --panel-2: #311b27; }
html[data-gender="f"] body { background: #180f14 !important; }
html[data-gender="f"] body::before { background: radial-gradient(circle, #be185d, transparent 70%) !important; }
html[data-gender="f"] body::after  { background: radial-gradient(circle, #db2777, transparent 70%) !important; }
html[data-gender="f"] header { background: linear-gradient(90deg, rgba(236,72,153,.24), rgba(219,39,119,.08) 60%, transparent) !important; }
html[data-gender="f"] .badge, html[data-gender="f"] .btn-badge, html[data-gender="f"] .menu-trigger { background: rgba(236,72,153,.20) !important; border: 1px solid rgba(236,72,153,.36) !important; }
html[data-gender="f"] .btn-badge:hover, html[data-gender="f"] .vt:hover, html[data-gender="f"] .menu-item:hover { background: rgba(236,72,153,.30) !important; }
html[data-gender="f"] .msg.user { background: linear-gradient(135deg, #ec4899, #f472b6) !important; box-shadow: 0 6px 18px rgba(236,72,153,.32) !important; }
html[data-gender="f"] .msg.model { background: rgba(44,26,36,.94) !important; border: 1px solid rgba(236,72,153,.22) !important; }
html[data-gender="f"] .msg.model b, html[data-gender="f"] .msg.model strong { color: #f9a8d4 !important; }
html[data-gender="f"] .es-cta { background: linear-gradient(135deg, #ec4899, #f472b6) !important; box-shadow: 0 8px 22px rgba(236,72,153,.35) !important; }
html[data-gender="f"] .exam-opt.sel { background: linear-gradient(135deg, rgba(236,72,153,.40), rgba(244,114,182,.40)) !important; border-color: #ec4899 !important; }
html[data-gender="f"] .modal-card { border: 1px solid rgba(236,72,153,.26) !important; }
html[data-gender="f"] .vc-tr { color: #f9a8d4 !important; }
html[data-gender="f"] #send { background: linear-gradient(135deg, #ec4899, #f472b6) !important; }
html[data-gender="f"] #mic { background: #db2777 !important; }

/* ============ Variante VERTE (élève neutre) — v26 ============ */
html[data-gender="n"] { --accent: #10b981; --panel: #14231a; --panel-2: #1b2e22; }
html[data-gender="n"] body { background: #0e1712 !important; }
html[data-gender="n"] body::before { background: radial-gradient(circle, #047857, transparent 70%) !important; }
html[data-gender="n"] body::after  { background: radial-gradient(circle, #059669, transparent 70%) !important; }
html[data-gender="n"] header { background: linear-gradient(90deg, rgba(16,185,129,.22), rgba(5,150,105,.08) 60%, transparent) !important; }
html[data-gender="n"] .badge, html[data-gender="n"] .btn-badge, html[data-gender="n"] .menu-trigger { background: rgba(16,185,129,.20) !important; border: 1px solid rgba(16,185,129,.36) !important; }
html[data-gender="n"] .btn-badge:hover, html[data-gender="n"] .vt:hover, html[data-gender="n"] .menu-item:hover { background: rgba(16,185,129,.30) !important; }
html[data-gender="n"] .msg.user { background: linear-gradient(135deg, #10b981, #34d399) !important; box-shadow: 0 6px 18px rgba(16,185,129,.32) !important; }
html[data-gender="n"] .msg.model { background: rgba(24,38,30,.94) !important; border: 1px solid rgba(16,185,129,.22) !important; }
html[data-gender="n"] .msg.model b, html[data-gender="n"] .msg.model strong { color: #6ee7b7 !important; }
html[data-gender="n"] .es-cta { background: linear-gradient(135deg, #10b981, #34d399) !important; box-shadow: 0 8px 22px rgba(16,185,129,.35) !important; }
html[data-gender="n"] .exam-opt.sel { background: linear-gradient(135deg, rgba(16,185,129,.40), rgba(52,211,153,.40)) !important; border-color: #10b981 !important; }
html[data-gender="n"] .modal-card { border: 1px solid rgba(16,185,129,.26) !important; }
html[data-gender="n"] .vc-tr { color: #6ee7b7 !important; }
html[data-gender="n"] #send { background: linear-gradient(135deg, #10b981, #34d399) !important; }
html[data-gender="n"] #mic { background: #059669 !important; }

/* ============ Mode JOUR (clair) — v25 ============ */
html[data-theme="jour"] { --bg: #f6f2ea; --panel: #ffffff; --panel-2: #f0ebe1; --text: #2b2119; --muted: #6f6455; }
html[data-theme="jour"] body { background: #f6f2ea !important; }
html[data-theme="jour"] body::before, html[data-theme="jour"] body::after { opacity: .10 !important; }
html[data-theme="jour"] header { background: linear-gradient(90deg, rgba(245,158,11,.16), transparent 70%) !important; }
html[data-theme="jour"] .msg.model { background: #ffffff !important; color: #2b2119 !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 2px 10px rgba(0,0,0,.07) !important; }
html[data-theme="jour"] .modal-card { background: rgba(255,255,255,.97) !important; color: #2b2119 !important; border: 1px solid rgba(0,0,0,.08) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
html[data-theme="jour"] .badge, html[data-theme="jour"] .btn-badge, html[data-theme="jour"] .menu-trigger { color: #2b2119 !important; }
html[data-theme="jour"] .composer { border-top: 1px solid rgba(0,0,0,.08) !important; }
html[data-theme="jour"] #input { border-color: rgba(0,0,0,.14) !important; }
html[data-theme="jour"] .exam-opt, html[data-theme="jour"] .lesson-item, html[data-theme="jour"] .usage-tile, html[data-theme="jour"] .stats-section, html[data-theme="jour"] .writing-corr, html[data-theme="jour"] .exam-c, html[data-theme="jour"] .vocab-card, html[data-theme="jour"] .flashcard, html[data-theme="jour"] .recharge-box { background: #f0ebe1 !important; border-color: rgba(0,0,0,.08) !important; }
html[data-theme="jour"] .es-msg, html[data-theme="jour"] .ob-d, html[data-theme="jour"] .recharge-note { color: #6f6455 !important; }

/* ============ Mode Jour — complétude composants (v28) ============ */
html[data-theme="jour"] .show-answer,
html[data-theme="jour"] .recharge-row input,
html[data-theme="jour"] .pay-preset,
html[data-theme="jour"] #pay-amount,
html[data-theme="jour"] .lesson-item,
html[data-theme="jour"] #mic-select,
html[data-theme="jour"] .gate-card input,
html[data-theme="jour"] .vt,
html[data-theme="jour"] #vocab-back,
html[data-theme="jour"] .writing-ta,
html[data-theme="jour"] .exam-fill,
html[data-theme="jour"] .gbtn,
html[data-theme="jour"] .tbtn { border-color: rgba(0,0,0,.14) !important; }
html[data-theme="jour"] .flashcard .back { border-top-color: rgba(0,0,0,.14) !important; }
html[data-theme="jour"] .menu-panel { border-color: rgba(0,0,0,.10) !important; box-shadow: 0 20px 50px rgba(0,0,0,.20) !important; }
html[data-theme="jour"] .ob-row { border-bottom-color: rgba(0,0,0,.08) !important; }
html[data-theme="jour"] .modal-head { border-bottom-color: rgba(0,0,0,.08) !important; }
html[data-theme="jour"] .set-toggle { background: rgba(0,0,0,.18) !important; }
html[data-theme="jour"] .vc-tr { color: var(--muted) !important; }
html[data-theme="jour"] .msg.model b, html[data-theme="jour"] .msg.model strong { color: #b45309 !important; }
html[data-theme="jour"][data-gender="f"] .msg.model b, html[data-theme="jour"][data-gender="f"] .msg.model strong { color: #be185d !important; }
html[data-theme="jour"][data-gender="n"] .msg.model b, html[data-theme="jour"][data-gender="n"] .msg.model strong { color: #047857 !important; }