/* ════════════════════════════════════════════════════════════════════════
   empty-state.css — États vides réutilisables (lot D, additif & opt-in)
   ────────────────────────────────────────────────────────────────────────
   La primitive `.empty-state` (+ enfants hyphénés `.empty-state-icon/-title/
   -text/-action` et `.halo`) vit déjà dans ui-kit.css. Ce fichier :
     1. expose des ALIAS BEM (`.empty-state__icon/__title/__text/__action`)
        pour le partial views/partials/empty-state.ejs, sans rien casser ;
     2. ajoute une décoration de marque douce (halo bleu désaturé en fond) ;
     3. raffine l'icône SVG line-art (trait fin, couleur via les tokens).
   Consomme uniquement les tokens d'app.css. Variantes dark héritées des
   tokens. reduced-motion respecté (aucune animation lourde ici).
   ════════════════════════════════════════════════════════════════════════ */

/* Conteneur — réutilise la primitive ui-kit ; on garantit juste le centrage
   et un fond de carte discret quand l'état vide est posé seul (hors .app-card). */
.empty-state {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  overflow: hidden;
}

/* Halo de marque doux derrière le picto (décoratif, n'intercepte rien).
   Posé via ::before pour ne pas exiger de markup .halo supplémentaire. */
.empty-state::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(420px, 90%);
  height: 220px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 80% at 50% 0%,
              var(--brand-sig-halo, rgba(94,127,168,0.14)) 0%, transparent 70%);
}
.empty-state > * { position: relative; z-index: 1; }

/* ─── Alias BEM (__) → reprennent le rendu des enfants hyphénés d'ui-kit ─── */
.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-xl, 18px);
  background: var(--fill-secondary);
  color: var(--tint, #0f2544);
}
.empty-state__icon svg { width: 30px; height: 30px; }

.empty-state__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--label-primary);
}

.empty-state__text {
  margin: 0;
  max-width: 38ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--label-secondary);
}

.empty-state__action { margin-top: 0.75rem; }

/* En sombre, l'icône reprend un contraste plus lisible (le navy devient peu
   visible sur fond foncé). */
:root[data-theme="dark"] .empty-state__icon { color: var(--label-primary); }
:root[data-theme="dark"] .empty-state-icon  { color: var(--label-primary); }

/* Variante compacte (états vides dans une carte étroite, une colonne). */
.empty-state--compact { padding: clamp(1.25rem, 4vw, 2rem) 1rem; }
.empty-state--compact .empty-state__icon,
.empty-state--compact .empty-state-icon { width: 52px; height: 52px; }
.empty-state--compact .empty-state__icon svg,
.empty-state--compact .empty-state-icon svg { width: 26px; height: 26px; }

/* ─── Hauteur adaptative ────────────────────────────────────────────────
   Dans une grille, une carte dont le contenu est un état vide est étirée
   (comportement grid par défaut) mais son contenu restait collé en haut,
   laissant un grand vide sous le texte. Ici : le conteneur devient une
   colonne flex et l'état vide occupe la hauteur restante en se centrant.
   Additif : ne s'applique qu'aux conteneurs ayant un état vide en enfant
   direct. */
.app-card:has(> .empty-state),
.compo-panel:has(> .empty-state) {
  display: flex;
  flex-direction: column;
}
.app-card > .empty-state,
.compo-panel > .empty-state {
  flex: 1 1 auto;
  justify-content: center;
}