/* Maurice : verre dépoli, clair/sombre automatique. Partagé par l'interface et
   la page de connexion.
   Performances (Safari, iPhone) : le flou (backdrop-filter) n'est posé que sur
   quelques panneaux fixes, jamais au-dessus de la sphère animée ; la sphère ne
   s'anime que par transform et opacity (composition GPU, sans repeindre). */

:root {
  color-scheme: light dark;
  --bg: #eef1f6;
  --bg-2: #f8f9fc;
  --text: #1d1d1f;
  --dim: #6e6e73;
  --faint: #a1a1a6;
  --glass: rgba(255, 255, 255, .58);
  --glass-solid: #f6f7fa;
  --glass-border: rgba(255, 255, 255, .75);
  --glass-shadow: 0 10px 34px rgba(31, 41, 64, .08), 0 1px 2px rgba(31, 41, 64, .05);
  --line: rgba(60, 60, 67, .12);
  --track: rgba(60, 60, 67, .10);
  --bar: #8a93a3;
  --bar-strong: #5c6575;
  --accent: #5c6575;
  --ok: #34a853;
  --warn: #c77700;
  --err: #d93025;
  --orb-glow: rgba(255, 255, 255, 0);
  --orb-shadow: rgba(40, 48, 66, .22);
  --field: rgba(255, 255, 255, .7);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0f;
    --bg-2: #17181c;
    --text: #f2f2f7;
    --dim: #98989f;
    --faint: #636366;
    --glass: rgba(44, 46, 52, .55);
    --glass-solid: #202126;
    --glass-border: rgba(255, 255, 255, .09);
    --glass-shadow: 0 10px 34px rgba(0, 0, 0, .35);
    --line: rgba(255, 255, 255, .09);
    --track: rgba(255, 255, 255, .10);
    --bar: #7d8594;
    --bar-strong: #c3c8d2;
    --accent: #c3c8d2;
    --ok: #4cc26a;
    --warn: #f2a33a;
    --err: #ff6b5e;
    --orb-glow: rgba(210, 220, 240, .16);
    --orb-shadow: rgba(0, 0, 0, .6);
    --field: rgba(255, 255, 255, .06);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--text);
  background: radial-gradient(120% 90% at 30% 35%, var(--bg-2) 0%, var(--bg) 60%) fixed, var(--bg);
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------ verre */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------ sphère */
.orb {
  position: relative; display: block; aspect-ratio: 1;
  width: var(--orb-size, min(42vh, 400px));
  -webkit-tap-highlight-color: transparent; border-radius: 50%;
}
.orb .glow {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--orb-glow), transparent 72%);
}
.orb .shadow {
  position: absolute; left: 14%; right: 14%; bottom: -9%; height: 12%; pointer-events: none;
  background: radial-gradient(closest-side, var(--orb-shadow), transparent);
  animation: shadow 7s ease-in-out infinite;
}
.orb .float { position: absolute; inset: 0; animation: float 7s ease-in-out infinite; }
.orb .scale { position: absolute; inset: 0; will-change: transform; }
.orb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s ease; will-change: opacity;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.orb[data-state="repos"] img.repos,
.orb[data-state="ecoute"] img.ecoute,
.orb[data-state="reflexion"] img.reflexion,
.orb[data-state="parole"] img.parole { opacity: 1; }
@keyframes float { 50% { transform: translateY(-2.2%); } }
@keyframes shadow { 50% { transform: scale(.9); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .orb .float, .orb .shadow { animation: none; }
}

/* ------------------------------------------------ page de connexion */
.login {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.login .orb { --orb-size: min(36vw, 168px); }
.login form { width: 100%; max-width: 360px; padding: 26px 24px 24px; }
.login h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.login .sub { color: var(--dim); font-size: 14px; margin: 2px 0 20px; }
.login label { display: block; font-size: 13px; color: var(--dim); margin: 0 0 6px 2px; }
.field {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--field); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 14px; -webkit-appearance: none; appearance: none;
}
.field:focus { outline: none; border-color: var(--accent); }
.btn {
  width: 100%; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--text); color: var(--bg); margin-top: 4px;
}
.err { color: var(--err); font-size: 14px; margin-bottom: 14px; }