/* base.css — jetons de la charte Lily of the Valley + polices servies par nous (aucun CDN).
   Valeurs reprises de lotv-dashboard/main.css (:root et html[data-theme="dark"]).
   Chargé par login.html ET index.html : les deux redéfinissent donc les mêmes jetons. */

@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/fonts/merriweather-900.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/montserrat-500.woff2') format('woff2'); }

:root {
  --gold: #bd5728; --bg: #FFF6DF; --bg2: #FFF0D0; --bg3: #FAE8B4;
  --sf: rgba(189,87,40,.05); --sf2: rgba(189,87,40,.1);
  --bd: rgba(189,87,40,.16); --bd2: rgba(189,87,40,.08);
  --tx: #292115; --tx2: #6b4c35; --tx3: #a08060;
  --gr: #1a7a58; --rd: #cd0000; --bl: #5a78b8; --pe: #1f7a8c; --vi: #7b5ea7;
  --verre: rgba(255,250,238,.72); --ombre: 0 18px 50px -24px rgba(90,40,10,.35);
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ser: 'Merriweather', Georgia, serif; --num: 'Montserrat', var(--sys);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1610; --bg2: #221a13; --bg3: #2a2018;
    --sf: rgba(189,87,40,.09); --sf2: rgba(189,87,40,.16);
    --bd: rgba(189,87,40,.28); --bd2: rgba(189,87,40,.14);
    --tx: #f0e4d0; --tx2: #c4a882; --tx3: #8a7060;
    --gold: #d4713a; --gr: #2ea87a; --rd: #e84040; --bl: #7f9ad6; --pe: #3aa3b6; --vi: #a58bd0;
    --verre: rgba(40,30,22,.7); --ombre: 0 18px 50px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--sys); font-size: 14px; background: var(--bg); color: var(--tx);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea { font: inherit; color: inherit; }
/* `hidden` doit gagner contre tout `display` de classe (.btn, .menu, .badge…) : piège payé 2 fois. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: var(--gold); color: #fff8ec; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 10px 30px -12px var(--gold); transition: transform .2s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px var(--gold); filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.btn-ghost { background: transparent; color: var(--tx2); box-shadow: none; border: .5px solid var(--bd); }
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); box-shadow: none; }

.titre { font-family: var(--ser); font-weight: 900; letter-spacing: -.01em; }
.num { font-family: var(--num); font-weight: 500; font-variant-numeric: tabular-nums; }

/* L'orbe — avatar de l'assistante. Couches de dégradés qui tournent l'une contre l'autre. */
.orbe { position: relative; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #fff7e6 0 8%, #f7c99a 22%, #d9773f 52%, #8a3413 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 8px 30px -6px rgba(189,87,40,.65);
  animation: orbe-respire 4.5s ease-in-out infinite; }
.orbe::before, .orbe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.orbe::before { background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,240,215,.55) 30%, transparent 45% 70%, rgba(255,190,140,.45) 82%, transparent 92%);
  filter: blur(3px); animation: orbe-tourne 7s linear infinite; mix-blend-mode: screen; }
.orbe::after { inset: -14px; background: radial-gradient(circle, rgba(212,113,58,.35), transparent 65%);
  z-index: -1; animation: orbe-halo 4.5s ease-in-out infinite; }
@keyframes orbe-respire { 50% { transform: scale(1.05); } }
@keyframes orbe-tourne { to { transform: rotate(360deg); } }
@keyframes orbe-halo { 50% { opacity: .55; transform: scale(1.15); } }

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