/* ================================================================
   STAR ASSIST PRO — Design system « Nuit sahélienne »
   Ciel nocturne profond + soleil ambré. Gros boutons, zéro friction.
   ================================================================ */

:root{
  --font: "Baloo 2","Cairo",-apple-system,"Segoe UI",sans-serif;

  /* Thème sombre (défaut) — ciel de nuit sahélien */
  --bg:#070B14;
  --bg-elev:#0D1524;
  --card:#111B2E;
  --card-2:#16233B;
  --line:rgba(140,170,220,.14);
  --text:#EDF3FF;
  --text-dim:#8DA2C4;
  --sky:#4CC3FF;          /* bleu Starlink */
  --sky-deep:#1E90D8;
  --amber:#FFB43A;        /* soleil du Sahel */
  --amber-deep:#F08A00;
  --green:#3DDC84;
  --red:#FF5D5D;
  --whatsapp:#25D366;
  --shadow:0 18px 40px -18px rgba(0,0,0,.65);
  --glow-sky:0 0 34px rgba(76,195,255,.35);
  --glow-amber:0 0 34px rgba(255,180,58,.30);
  --r-lg:26px; --r-md:20px; --r-sm:14px;
  --tap:64px;
}

[data-theme="light"]{
  --bg:#F6F2E9;           /* sable clair */
  --bg-elev:#FFFFFF;
  --card:#FFFFFF;
  --card-2:#FBF7EE;
  --line:rgba(60,50,20,.10);
  --text:#1B2233;
  --text-dim:#67718A;
  --sky:#0E86D4;
  --sky-deep:#0A6BB0;
  --amber:#E8940A;
  --amber-deep:#C97700;
  --shadow:0 16px 34px -20px rgba(40,30,10,.35);
  --glow-sky:0 0 0 rgba(0,0,0,0);
  --glow-amber:0 0 0 rgba(0,0,0,0);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:17px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
[dir="rtl"] body{direction:rtl}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg{display:block}
/* IMPORTANT : l'attribut hidden doit toujours cacher l'élément,
   même si une règle .classe lui donne display:flex/grid. */
[hidden]{display:none!important}

/* ---------- Ciel décoratif ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.9) 50%,transparent 51%),
    radial-gradient(1px 1px at 34% 8%,rgba(255,255,255,.7) 50%,transparent 51%),
    radial-gradient(1.8px 1.8px at 56% 22%,rgba(160,215,255,.9) 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,rgba(255,255,255,.65) 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 28%,rgba(255,220,160,.85) 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 38%,rgba(255,255,255,.5) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 45%,rgba(255,255,255,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 66% 40%,rgba(160,215,255,.6) 50%,transparent 51%);
  animation:twinkle 6s ease-in-out infinite alternate;
  opacity:.9;
}
[data-theme="light"] .stars{opacity:0}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
.aurora{
  position:absolute;left:-30%;right:-30%;top:-45%;height:80%;
  background:
    radial-gradient(50% 60% at 30% 60%,rgba(76,195,255,.14),transparent 70%),
    radial-gradient(45% 55% at 72% 45%,rgba(255,180,58,.10),transparent 70%);
  filter:blur(30px);
  animation:drift 18s ease-in-out infinite alternate;
}
[data-theme="light"] .aurora{
  background:
    radial-gradient(50% 60% at 30% 60%,rgba(14,134,212,.08),transparent 70%),
    radial-gradient(45% 55% at 72% 45%,rgba(232,148,10,.10),transparent 70%);
}
@keyframes drift{from{transform:translateX(-4%) rotate(-2deg)}to{transform:translateX(4%) rotate(2deg)}}

/* ---------- Barre supérieure ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:.5rem;
  padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.55rem;flex:1;cursor:pointer;user-select:none}
.brand-logo svg{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(255,180,58,.5))}
.brand-name{font-weight:800;letter-spacing:.04em;font-size:1.02rem}
.brand-name em{font-style:normal;color:var(--amber);margin-inline-start:.3em;font-size:.8em;vertical-align:.12em}
.topbar-actions{display:flex;gap:.4rem}
.topbar-btn{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);
  transition:transform .15s ease,background .3s;
}
.topbar-btn:active{transform:scale(.9)}
.topbar-btn svg{width:22px;height:22px}
.lang-btn{font-size:1.3rem}
[data-theme="dark"] .ic-sun{display:none}
[data-theme="light"] .ic-moon{display:none}

/* ---------- Structure ---------- */
.app{
  position:relative;z-index:1;
  max-width:640px;margin:0 auto;
  padding:1rem 1rem calc(7.5rem + env(safe-area-inset-bottom));
  min-height:70dvh;
}
.view{animation:viewIn .42s cubic-bezier(.22,1,.36,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.stagger>*{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both}
.stagger>*:nth-child(1){animation-delay:.03s}.stagger>*:nth-child(2){animation-delay:.08s}
.stagger>*:nth-child(3){animation-delay:.13s}.stagger>*:nth-child(4){animation-delay:.18s}
.stagger>*:nth-child(5){animation-delay:.23s}.stagger>*:nth-child(6){animation-delay:.28s}
.stagger>*:nth-child(7){animation-delay:.33s}.stagger>*:nth-child(8){animation-delay:.38s}
.stagger>*:nth-child(9){animation-delay:.43s}.stagger>*:nth-child(10){animation-delay:.48s}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Héro accueil ---------- */
.hero{padding:1.2rem .2rem 1.4rem;text-align:center}
.hero h1{font-size:1.65rem;font-weight:800;line-height:1.2}
.hero h1 .hl{color:var(--sky)}
.hero p{color:var(--text-dim);margin-top:.35rem;font-size:1rem}

.hero-mic{
  margin:1.3rem auto 0;
  width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,var(--sky),var(--sky-deep));
  box-shadow:var(--glow-sky),var(--shadow);
  position:relative;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.hero-mic:active{transform:scale(.92)}
.hero-mic svg{width:52px;height:52px;color:#fff}
.hero-mic::before,.hero-mic::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--sky) 50%,transparent);
  animation:pulse 2.4s ease-out infinite;
}
.hero-mic::after{animation-delay:1.2s}
@keyframes pulse{from{transform:scale(.94);opacity:.9}to{transform:scale(1.5);opacity:0}}
.hero-mic-label{margin-top:.8rem;font-weight:700;color:var(--sky);font-size:1.05rem}

.hero-cta{
  margin:1.3rem auto 0;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:64px;padding:.9rem 2rem;border-radius:999px;
  font-weight:800;font-size:1.15rem;color:#fff;
  background:radial-gradient(circle at 32% 28%,var(--sky),var(--sky-deep));
  box-shadow:var(--glow-sky),var(--shadow);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.hero-cta:active{transform:scale(.94)}
.hero-cta .em{font-size:1.5rem}

/* ---------- Grille de modules (gros boutons) ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.bigbtn{
  min-height:128px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  padding:1rem .6rem;text-align:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .3s;
  position:relative;overflow:hidden;
}
.bigbtn:active{transform:scale(.94)}
.bigbtn .em{font-size:2.35rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.bigbtn .lb{font-weight:700;font-size:.98rem;line-height:1.25}
.bigbtn .sub{font-size:.78rem;color:var(--text-dim);line-height:1.2}
.bigbtn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.07),transparent 70%);
  pointer-events:none;
}
.bigbtn.accent-sky{border-color:color-mix(in srgb,var(--sky) 45%,transparent)}
.bigbtn.accent-amber{border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.bigbtn.accent-green{border-color:color-mix(in srgb,var(--green) 40%,transparent)}
.bigbtn.wide{grid-column:1/-1;min-height:96px;flex-direction:row;justify-content:flex-start;gap:1rem;padding:1rem 1.2rem;text-align:start}
.bigbtn.wide .lb{font-size:1.08rem}

/* ---------- Listes d'options (gros items) ---------- */
.rowbtn{
  width:100%;min-height:var(--tap);
  display:flex;align-items:center;gap:.9rem;
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:.85rem 1rem;margin-bottom:.7rem;
  box-shadow:var(--shadow);
  text-align:start;
  transition:transform .15s ease;
}
.rowbtn:active{transform:scale(.97)}
.rowbtn .em{font-size:1.8rem;width:2.4rem;text-align:center;flex-shrink:0}
.rowbtn .tx{flex:1}
.rowbtn .tx b{display:block;font-size:1rem;font-weight:700;line-height:1.25}
.rowbtn .tx small{color:var(--text-dim);font-size:.8rem}
.rowbtn .chev{color:var(--text-dim);flex-shrink:0}
[dir="rtl"] .rowbtn .chev{transform:scaleX(-1)}

/* ---------- Titres de section ---------- */
.sec-title{
  display:flex;align-items:center;gap:.6rem;
  margin:1.4rem 0 .8rem;font-size:1.12rem;font-weight:800;
}
.sec-title .bar{width:5px;height:22px;border-radius:3px;background:linear-gradient(var(--amber),var(--sky))}
.page-head{padding:.4rem .2rem 1rem}
.page-head h1{font-size:1.5rem;font-weight:800;display:flex;align-items:center;gap:.6rem}
.page-head p{color:var(--text-dim);margin-top:.25rem}

/* ---------- Flow (diagnostic pas à pas) ---------- */
.flow-card{
  background:linear-gradient(165deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:1.5rem 1.2rem;text-align:center;
}
.flow-icon{font-size:3.4rem;line-height:1;margin-bottom:.7rem;animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes bounceIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.flow-q{font-size:1.22rem;font-weight:800;line-height:1.35}
.flow-hint{color:var(--text-dim);margin-top:.4rem;font-size:.92rem}
.flow-opts{margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
.opt-btn{
  min-height:var(--tap);border-radius:var(--r-md);
  display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;
  background:var(--bg-elev);border:1.5px solid var(--line);
  font-weight:700;font-size:1.02rem;text-align:start;
  transition:transform .15s,border-color .2s,background .2s;
}
.opt-btn:active{transform:scale(.96)}
.opt-btn .em{font-size:1.55rem}
.opt-btn.yes{border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.opt-btn.no{border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.flow-progress{display:flex;gap:.35rem;justify-content:center;margin-bottom:1rem}
.flow-progress i{width:26px;height:5px;border-radius:3px;background:var(--line);transition:background .3s}
.flow-progress i.on{background:var(--sky)}

/* Solution */
.solution{border:1.5px solid color-mix(in srgb,var(--green) 45%,transparent)}
.solution .steps{text-align:start;margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.step{display:flex;gap:.8rem;align-items:flex-start}
.step .n{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
  background:linear-gradient(140deg,var(--sky),var(--sky-deep));color:#fff;
}
.step p{line-height:1.4;padding-top:.2rem}

/* ---------- Boutons génériques ---------- */
.btn{
  min-height:56px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.8rem 1.4rem;font-weight:800;font-size:1rem;width:100%;
  transition:transform .15s,filter .2s;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(140deg,var(--sky),var(--sky-deep));color:#fff;box-shadow:var(--glow-sky)}
.btn-amber{background:linear-gradient(140deg,var(--amber),var(--amber-deep));color:#2A1800;box-shadow:var(--glow-amber)}
.btn-wa{background:var(--whatsapp);color:#fff}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--text)}
.btn-danger{background:color-mix(in srgb,var(--red) 18%,var(--card));border:1px solid color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
.btn svg{width:22px;height:22px}
.btn-row{display:flex;gap:.7rem;margin-top:1rem}
.btn-row .btn{flex:1}

/* ---------- Chat assistant ---------- */
.chat{display:flex;flex-direction:column;gap:.8rem;padding-bottom:6.5rem}
.msg{max-width:86%;padding:.8rem 1rem;border-radius:20px;line-height:1.45;box-shadow:var(--shadow);animation:msgIn .35s cubic-bezier(.22,1,.36,1) both;white-space:pre-wrap}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;background:linear-gradient(160deg,var(--card),var(--card-2));border:1px solid var(--line);border-bottom-left-radius:6px}
[dir="rtl"] .msg.bot{border-bottom-left-radius:20px;border-bottom-right-radius:6px}
.msg.me{align-self:flex-end;background:linear-gradient(140deg,var(--sky),var(--sky-deep));color:#fff;border-bottom-right-radius:6px}
[dir="rtl"] .msg.me{border-bottom-right-radius:20px;border-bottom-left-radius:6px}
.msg .quick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.chip{
  border:1.5px solid color-mix(in srgb,var(--sky) 50%,transparent);
  border-radius:999px;padding:.45rem .9rem;font-weight:700;font-size:.9rem;
  background:var(--bg-elev);transition:transform .15s;
}
.chip:active{transform:scale(.93)}
.typing{display:inline-flex;gap:.3rem;padding:.4rem 0}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--text-dim);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}

.chat-input{
  position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));z-index:35;
  max-width:640px;margin:0 auto;padding:0 1rem;
  display:flex;gap:.6rem;
}
.chat-input input{
  flex:1;min-height:56px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-elev) 88%,transparent);
  backdrop-filter:blur(14px);
  padding:0 1.2rem;font-family:inherit;font-size:1rem;color:var(--text);outline:none;
}
.chat-input input:focus{border-color:var(--sky)}
.chat-mic,.chat-send{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:#fff;transition:transform .15s;
}
.chat-mic{background:linear-gradient(140deg,var(--amber),var(--amber-deep))}
.chat-send{background:linear-gradient(140deg,var(--sky),var(--sky-deep))}
.chat-mic:active,.chat-send:active{transform:scale(.9)}
.chat-mic svg,.chat-send svg{width:24px;height:24px}

/* ---------- Barre d'onglets ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;align-items:flex-end;
  max-width:640px;margin:0 auto;
  padding:.5rem .4rem calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-top:1px solid var(--line);
}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  color:var(--text-dim);font-size:.68rem;font-weight:700;
  min-width:60px;padding:.2rem .3rem;
  transition:color .25s,transform .15s;
}
.tab:active{transform:scale(.9)}
.tab svg{width:26px;height:26px}
.tab.active{color:var(--sky)}
.tab-mic{transform:translateY(-14px)}
.tab-mic:active{transform:translateY(-14px) scale(.9)}
.mic-bubble{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 32% 28%,var(--amber),var(--amber-deep));
  box-shadow:var(--glow-amber),0 8px 20px -6px rgba(0,0,0,.5);
}
.mic-bubble svg{width:28px;height:28px}
.tab-mic.active .mic-bubble{background:radial-gradient(circle at 32% 28%,var(--sky),var(--sky-deep))}

/* ---------- Feuille (bottom sheet) ---------- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:60;
  background:rgba(2,5,12,.6);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  overflow-y:auto;
  animation:fadeIn .25s both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:640px;
  max-height:88dvh;overflow-y:auto;
  background:var(--bg-elev);border-radius:28px 28px 0 0;
  border:1px solid var(--line);border-bottom:none;
  padding:1rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom));
  animation:sheetUp .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sheetUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Sur écran large : feuille centrée (modale) — toujours visible */
@media (min-width:600px){
  .sheet-backdrop{align-items:center;padding:1.5rem}
  .sheet{
    max-width:480px;border-radius:24px;border-bottom:1px solid var(--line);
    max-height:86dvh;padding-bottom:1.6rem;
  }
}
.sheet-handle{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto .9rem}
.sheet-title{font-size:1.15rem;font-weight:800;text-align:center;margin-bottom:1rem}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lang-item{
  min-height:64px;border-radius:var(--r-md);
  display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;
  background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:1rem;
  transition:transform .15s,border-color .2s;
}
.lang-item:active{transform:scale(.95)}
.lang-item.on{border-color:var(--sky);box-shadow:var(--glow-sky)}
.lang-item .fl{font-size:1.7rem}

/* ---------- Overlay vocal ---------- */
.voice-overlay{
  position:fixed;inset:0;z-index:70;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  animation:fadeIn .3s both;
}
.voice-rings{position:relative;width:170px;height:170px;display:grid;place-items:center}
.voice-rings>span{
  position:absolute;inset:0;border-radius:50%;
  border:2.5px solid color-mix(in srgb,var(--amber) 55%,transparent);
  animation:pulse 1.8s ease-out infinite;
}
.voice-rings>span:nth-child(2){animation-delay:.6s}
.voice-rings>span:nth-child(3){animation-delay:1.2s}
.voice-core{
  width:110px;height:110px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 32% 28%,var(--amber),var(--amber-deep));
  box-shadow:var(--glow-amber);
  animation:breathe 1.6s ease-in-out infinite alternate;
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.08)}}
.voice-core svg{width:46px;height:46px}
.voice-status{font-size:1.25rem;font-weight:800}
.voice-heard{color:var(--sky);font-weight:700;min-height:1.4em;text-align:center;padding:0 1.5rem}
.voice-overlay .btn-ghost{width:auto;min-height:52px;padding:.7rem 2rem;border-radius:999px}

/* ---------- Tickets ---------- */
.ticket{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:1rem 1.1rem;margin-bottom:.8rem;box-shadow:var(--shadow);
}
.ticket-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.ticket-top .em{font-size:1.5rem}
.ticket-top b{flex:1;font-size:1rem}
.badge{font-size:.72rem;font-weight:800;padding:.25rem .7rem;border-radius:999px}
.badge.open{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber)}
.badge.done{background:color-mix(in srgb,var(--green) 20%,transparent);color:var(--green)}
.ticket small{color:var(--text-dim)}
.ticket p{margin-top:.3rem;line-height:1.4;font-size:.95rem}

/* ---------- Formulaires ---------- */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;margin-bottom:.4rem;font-size:.95rem}
.field input,.field textarea,.field select{
  width:100%;min-height:56px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--bg-elev);
  color:var(--text);font-family:inherit;font-size:1rem;padding:.8rem 1rem;outline:none;
  transition:border-color .2s;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--sky)}

/* ---------- Stats admin ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.stat{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:1rem;box-shadow:var(--shadow);
}
.stat .v{font-size:1.9rem;font-weight:800;color:var(--sky)}
.stat .k{color:var(--text-dim);font-size:.85rem;font-weight:700}

/* ---------- Coffre-fort ---------- */
.code-display{
  margin:1.1rem auto;
  font-family:"Consolas","Courier New",monospace;
  font-size:1.6rem;font-weight:800;letter-spacing:.12em;
  color:var(--amber);
  background:var(--bg-elev);
  border:2px dashed color-mix(in srgb,var(--amber) 55%,transparent);
  border-radius:var(--r-md);
  padding:1rem 1.2rem;
  user-select:all;word-break:break-all;
  box-shadow:var(--glow-amber);
}

/* ---------- Divers ---------- */
.note{
  display:flex;gap:.7rem;align-items:flex-start;
  background:color-mix(in srgb,var(--amber) 10%,var(--card));
  border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);
  border-radius:var(--r-md);padding:.9rem 1rem;margin:1rem 0;
  font-size:.92rem;line-height:1.45;
}
.note .em{font-size:1.4rem}
.speak-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--sky);font-weight:800;font-size:.9rem;
  padding:.5rem .9rem;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--sky) 45%,transparent);
  margin-top:.8rem;
}
.speak-btn svg{width:18px;height:18px}
.empty{text-align:center;color:var(--text-dim);padding:2.5rem 1rem}
.empty .em{font-size:3rem;display:block;margin-bottom:.6rem}
.center{text-align:center}
.mt{margin-top:1rem}

@media (min-width:480px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid .bigbtn.wide{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}