/* ==========================================================================
   CORNER — base.css — reset, rythme typographique, structure d'écran.
   ========================================================================== */
*{ box-sizing: border-box; }
html{ color-scheme: dark; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  position: relative;
  min-height: 100vh;
}
img, svg{ max-width: 100%; }
[hidden]{ display: none !important; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ -webkit-tap-highlight-color: transparent; }
a{ color: inherit; }
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 99px; }

.ic{ display: inline-flex; line-height: 0; vertical-align: middle; }
.ic svg{ display: block; }

/* ---------- fond spatial (§9 brief) ----------
   Couches CSS pures, aucune image chargée : étoiles très fines (un dégradé
   radial répété en tuile), deux halos violet/bleu très diffus, une ou deux
   silhouettes de planète en dégradé. Tout est fixed + pointer-events:none +
   z-index négatif : jamais entre l'utilisateur et l'interface, jamais gênant
   pour les interactions. Respecte prefers-reduced-motion (aucune parallaxe,
   le scintillement est déjà quasi imperceptible et se coupe net). */
body::before, body::after{
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
}
body::before{
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 8%, rgba(255,255,255,0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 32% 62%, rgba(255,255,255,0.35) 50%, transparent 52%),
    radial-gradient(1px 1px at 62% 42%, rgba(255,255,255,0.3) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 89% 71%, rgba(255,255,255,0.45) 50%, transparent 52%),
    radial-gradient(1px 1px at 6% 82%, rgba(255,255,255,0.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 12%, rgba(255,255,255,0.28) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 95% 35%, rgba(255,255,255,0.4) 50%, transparent 52%);
  background-repeat: repeat; background-size: 340px 340px;
  opacity: .55;
  animation: stars-twinkle 9s ease-in-out infinite;
}
body::after{
  background:
    radial-gradient(ellipse 620px 460px at 12% -6%, rgba(139,92,246,0.16), transparent 62%),
    radial-gradient(ellipse 520px 420px at 108% 18%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(ellipse 700px 560px at 50% 118%, rgba(139,92,246,0.10), transparent 58%),
    var(--ink);
}
@keyframes stars-twinkle{ 0%,100%{ opacity: .55; } 50%{ opacity: .82; } }
.reduce-motion body::before, body.reduce-motion::before{ animation: none; opacity: .68; }

/* ---------- app shell ---------- */
.shell{ min-height: 100vh; position: relative; }
/* display:none par défaut (mobile) tenu ici, avec le display:flex du
   media query desktop plus bas — même fichier, même rythme de cascade,
   pour ne jamais dépendre de l'ordre de chargement entre feuilles de
   style (voir space.css qui définit le reste de l'apparence de .sidebar,
   sans jamais toucher à sa propriété display). */
.sidebar{ display: none; }
.app{
  max-width: 520px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; position: relative;
}
.topbar{
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--sp-5) + var(--safe-t)) var(--sp-6) var(--sp-2);
}
.topbar-left{ display: flex; align-items: baseline; gap: var(--sp-3); }
.brand{ font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.22em; color: var(--paper); }
.lvl-chip{ font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.lvl-chip b{ color: var(--ember); font-weight: 500; }
.icon-btn{ background: none; border: none; color: var(--faint); cursor: pointer; padding: var(--sp-2); display: flex; border-radius: var(--r-sm); min-width: 40px; min-height: 40px; align-items: center; justify-content: center; transition: color var(--dur-fast) var(--ease); }
.icon-btn:hover{ color: var(--paper-dim); }
.icon-btn .ic svg{ width: 19px; height: 19px; }
button:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--ember-2); outline-offset: 2px; }

main{ flex: 1; padding: var(--sp-1) var(--sp-6) calc(112px + var(--safe-b)); }
.view{ animation: view-in var(--dur-base) var(--ease); }
@keyframes view-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

/* ---------- typographie ---------- */
h1{ font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; margin: var(--sp-2) 0 var(--sp-1); color: var(--paper); }
h2{ font-family: var(--font-label); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 var(--sp-1); color: var(--paper-dim); }
p{ margin: 0; }
.eyebrow{ font-family: var(--font-label); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.sub{ color: var(--muted); font-size: 14px; margin-bottom: var(--sp-2); max-width: 40ch; }
.big-num{ font-family: var(--font-display); font-weight: 600; }
.mono{ font-family: var(--font-mono); }

/* ---------- rythme : des sections, pas des cartes (hors Home, voir space.css) ---------- */
.section{ padding-top: var(--sp-7); margin-top: var(--sp-7); border-top: 1px solid var(--line); }
.section:first-child{ padding-top: 0; margin-top: 0; border-top: none; }
.section-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); gap: var(--sp-3); }
.panel{ background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-5); }

/* Verre : toutes les surfaces existantes gagnent bordure + ombre + flou en
   un seul point de contrôle, sans toucher à leur mise en page individuelle. */
.panel, .review-card, .draft-plan, .coach-entry, .toast, .scene-panel{
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}

.empty{ color: var(--faint); font-size: 13.5px; font-style: italic; }
.empty-cta{ padding: var(--sp-6) 0; text-align: center; }
.empty-cta p{ margin-bottom: var(--sp-4); }

@media (prefers-reduced-motion: reduce), (min-width:0){
  .reduce-motion .view{ animation: none; }
}

/* ==========================================================================
   Desktop : sidebar fixe à gauche, contenu principal élargi et centré.
   Mobile-first par défaut (identique à avant) ; au-delà de --desktop-bp,
   la tabbar cède la place à la sidebar et .app perd sa contrainte 520px.
   ========================================================================== */
@media (min-width: 960px){
  .shell{ display: flex; }
  .sidebar{ display: flex; }
  .topbar{ display: none; }
  .app{ max-width: none; flex: 1; margin: 0; }
  main{ padding: var(--sp-8) var(--sp-9) var(--sp-9); max-width: 1180px; margin: 0 auto; width: 100%; }
}
/* .tabbar est masquée dans space.css, pas ici : components.css (qui définit
   son display:flex par défaut) charge APRÈS base.css, donc une règle ici
   serait écrasée par la cascade quel que soit le media query. space.css
   charge en dernier — c'est le seul endroit sûr pour cette bascule. */