/* ==========================================================================
   CORNER — space.css — shell desktop (sidebar) + système de cartes flottantes
   de la Home, construits sur la référence visuelle "dark space / premium
   productivity". Isolé dans son propre fichier parce que c'est la seule
   partie de l'app qui introduit une vraie nouvelle composition (le reste de
   l'app hérite du nouveau thème via les tokens, voir tokens.css/base.css).
   Tout ici consomme les variables de tokens.css — aucune couleur en dur.
   ========================================================================== */

/* ---------- sidebar (desktop uniquement, voir base.css) ---------- */
.sidebar{
  /* display géré dans base.css (mobile-first + media query desktop),
     jamais ici : évite qu'un ordre de chargement de feuilles de style
     n'écrase silencieusement le passage en sidebar sur desktop. */
  flex-direction: column; width: var(--sidebar-w); flex-shrink: 0;
  background: rgba(8,8,18,0.7); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--line);
  padding: var(--sp-6) var(--sp-4); position: sticky; top: 0; height: 100vh;
}
.sidebar-brand{ display: flex; align-items: center; gap: 9px; padding: 0 var(--sp-2) var(--sp-7); }
.sidebar-logo{ width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ember-2), var(--ember)); box-shadow: var(--glow-accent); color: #fff; }
.sidebar-logo svg{ width: 15px; height: 15px; }
.sidebar-brand-text{ font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .16em; color: var(--paper); }

.sidebar-nav{ display: flex; flex-direction: column; gap: 3px; flex: 1; }
.side-link{
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--r-md); padding: 11px var(--sp-3);
  color: var(--muted); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.side-link .ic svg{ width: 18px; height: 18px; }
.side-link:hover{ background: var(--surface-2); color: var(--paper-dim); }
.side-link.active{
  background: linear-gradient(90deg, var(--ember-dim), transparent);
  color: var(--paper); box-shadow: inset 2px 0 0 0 var(--ember);
}
.side-link.active .ic{ color: var(--ember); filter: drop-shadow(0 0 6px rgba(139,92,246,0.6)); }

.sidebar-foot{ border-top: 1px solid var(--line); padding-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.side-profile{ display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; border-radius: var(--r-md); background: none; border: none; text-align: left; width: 100%; }
.side-profile:hover{ background: var(--surface-2); }
.side-profile-ring{
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-solid); border: 1.5px solid var(--ember); box-shadow: var(--glow-accent);
  font-family: var(--font-mono); font-size: 11px; color: var(--paper);
}
.side-profile-body{ flex: 1; min-width: 0; }
.side-profile-name{ font-size: 12.5px; color: var(--paper-dim); font-weight: 600; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-profile .bar-track{ height: 3px; }
.side-actions{ display: flex; gap: 4px; }
.side-actions .icon-btn{ min-width: 0; min-height: 0; padding: 8px; flex: 1; justify-content: center; background: var(--surface-2); border-radius: var(--r-sm); }

/* ---------- cartes flottantes de la Home ---------- */
.space-card{
  background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-lift);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.space-card-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.space-card-title{ display: flex; align-items: center; gap: 8px; font-family: var(--font-label); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--paper-dim); }
.space-card-title .ic{ color: var(--ember); }
.space-card-title .ic svg{ width: 15px; height: 15px; }
.space-card-count{ font-family: var(--font-mono); font-size: 11px; background: var(--ember-dim); color: var(--ember-2); padding: 2px 8px; border-radius: var(--r-pill); }

/* ---------- header ---------- */
.home-header{ display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.home-header h1{ margin: 4px 0 6px; }
.home-header .sub{ margin: 0; max-width: 46ch; }
.home-chips{ display: flex; gap: 10px; flex-wrap: wrap; }
.xp-chip{
  display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 9px 14px; box-shadow: var(--shadow); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.xp-chip-ic{ width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.xp-chip-ic svg{ width: 14px; height: 14px; }
.xp-chip-ic.violet{ background: var(--ember-dim); color: var(--ember-2); }
.xp-chip-ic.flame{ background: rgba(245,165,36,0.16); color: var(--flame); }
.xp-chip-label{ font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.xp-chip-val{ font-family: var(--font-mono); font-size: 14px; color: var(--paper); font-weight: 500; margin-top: 1px; }

/* ---------- grille responsive de la Home ---------- */
.home-grid{ display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.home-grid.today-grid{ grid-template-columns: 1fr; }
@media (min-width: 720px){
  .home-grid{ grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .home-grid.today-grid{ grid-template-columns: 1.5fr 1fr; }
}

/* ---------- Ton Moment ---------- */
.moment-card{ display: flex; flex-direction: column; }
.moment-eyebrow{ color: var(--muted); font-size: 10.5px; margin-bottom: 4px; }
.moment-goal-title{ font-family: var(--font-display); font-weight: 600; font-size: 25px; letter-spacing: -0.01em; margin: 2px 0 var(--sp-3); }
.moment-pct{ font-family: var(--font-mono); font-size: 13px; color: var(--ember-2); margin-top: 9px; }
.moment-next{ margin-top: var(--sp-5); }
.moment-next-label{ font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.moment-next-title{ font-size: 15px; font-weight: 600; color: var(--paper); }
.moment-action{
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4);
}
.moment-action-dot{ width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex-shrink: 0; }
.moment-action-body{ flex: 1; min-width: 0; }
.moment-action-label{ font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.moment-action-title{ font-size: 14.5px; font-weight: 600; }
.moment-action-meta{ font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 10px; }
.moment-action-xp{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ember-2); flex-shrink: 0; }
.moment-cta{ margin-top: var(--sp-5); }
.moment-empty{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-3); }

/* ---------- Ton Corner ---------- */
.corner-card{ display: flex; flex-direction: column; }
.corner-scene-wrap{ margin: var(--sp-2) -4px var(--sp-3); }
.corner-lvl-row{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.corner-lvl{ font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.corner-xp{ font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.corner-evolution{ display: flex; align-items: center; gap: 9px; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.corner-evolution-ic{ width: 28px; height: 28px; border-radius: 8px; background: var(--ember-dim); color: var(--ember-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.corner-evolution-ic svg{ width: 15px; height: 15px; }
.corner-evolution-label{ font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.corner-evolution-title{ font-size: 13px; font-weight: 600; color: var(--paper-dim); }

/* ---------- Rythme — élément de marque CORNER (Phase G) ---------- */
.rhythm-card{ margin-bottom: var(--sp-5); }
.rhythm-row{ display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.rhythm-fig-wrap{ display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.rhythm-fig{ font-family: var(--font-display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--paper); text-shadow: 0 0 30px rgba(245,165,36,0.35); }
.rhythm-fig-unit{ font-size: 13px; color: var(--flame); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.rhythm-line{ margin: 0; color: var(--paper-dim); font-size: 15px; max-width: 40ch; }

/* ---------- Aujourd'hui (liste) ---------- */
.today-card .focus-list{ margin: 0; }
.today-card .focus-item{ min-height: 48px; }
.focus-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--line-strong); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.focus-item.done .focus-dot{ background: var(--ember); border-color: var(--ember); box-shadow: 0 0 6px rgba(139,92,246,0.7); }
.focus-xp{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ember-2); flex-shrink: 0; }
.today-more{ margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- modules statistiques compacts ---------- */
.stat-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.stat-tile{ padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.stat-tile-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.stat-tile-label{ font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stat-tile-fig{ font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1; }
.stat-tile-sub{ font-size: 11px; color: var(--faint); }
.stat-viz{ flex-shrink: 0; }
.stat-spark{ width: 44px; height: 22px; display: block; }
.stat-ring{ width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-ring-fig{ width: 20px; height: 20px; border-radius: 50%; background: var(--surface-solid); font-family: var(--font-mono); font-size: 8px; display: flex; align-items: center; justify-content: center; color: var(--paper-dim); }
.stat-dots{ display: flex; gap: 4px; margin-top: 2px; }
.stat-dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); }
.stat-dots span.on{ background: var(--ember); box-shadow: 0 0 6px rgba(139,92,246,0.8); }
.stat-tile .bar-track{ margin-top: 2px; }

/* ---------- Insight du Coach ---------- */
.insight-card{ display: flex; flex-direction: column; }
.insight-body{ display: flex; gap: var(--sp-4); align-items: flex-start; }
.insight-orb{
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--ember-2), var(--ember) 70%);
  box-shadow: var(--glow-accent);
  display: flex; align-items: center; justify-content: center; color: #fff;
  animation: insight-pulse 3.4s ease-in-out infinite;
}
.insight-orb svg{ width: 17px; height: 17px; }
@keyframes insight-pulse{ 0%,100%{ box-shadow: 0 0 30px -8px rgba(139,92,246,0.55); } 50%{ box-shadow: 0 0 46px -6px rgba(139,92,246,0.8); } }
.insight-text{ font-size: 14px; color: var(--paper-dim); line-height: 1.55; }
.insight-card .link{ margin-top: var(--sp-4); }

/* ---------- Focus ---------- */
.focus-card-list{ display: flex; flex-direction: column; gap: var(--sp-4); }
.focus-row-item{ cursor: pointer; }
.focus-row-top{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.focus-row-label{ font-size: 13.5px; font-weight: 500; color: var(--paper-dim); }
.focus-row-pct{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ember-2); flex-shrink: 0; }

/* ---------- tagline de fermeture ---------- */
.home-tagline{ text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-4); color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.home-tagline .ic{ color: var(--ember); margin-bottom: 8px; }
.home-tagline .ic svg{ width: 15px; height: 15px; }

@media (max-width: 420px){
  .moment-goal-title{ font-size: 21px; }
  .stat-tile-fig{ font-size: 22px; }
}

/* ---------- bascule desktop de la tabbar mobile ----------
   Doit rester ici (space.css charge en dernier) : .tabbar est définie avec
   display:flex par défaut dans components.css, qui charge après base.css —
   une règle de masquage placée dans base.css serait donc écrasée par la
   cascade même sous le bon media query. Voir la note dans base.css. */
@media (min-width: 960px){
  .tabbar{ display: none; }
}