/* États vides (Favoris, Planning) — mesures Figma. */

.screen__body--empty {
  padding: 0 var(--content-inset);
}

.screen__body--lists {
  padding-top: var(--cards-top-space-lists);
  padding-bottom: var(--clearance-lists);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--empty-gap);
  width: 100%;
  max-width: var(--content-width);
  padding: var(--empty-padding-top) var(--space-4) var(--space-4);
}

/* Surlignage jaune incliné derrière le titre. */
.empty__title {
  position: relative;
  isolation: isolate;
  height: var(--empty-title-height);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--empty-title-leading);
  color: var(--color-black);
  text-align: center;
  white-space: nowrap;
}

.empty__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(50% + var(--highlight-offset-y));
  left: 50%;
  width: var(--highlight-width);
  height: var(--highlight-height);
  background: var(--color-yellow);
  transform: translate(-50%, -50%) rotate(var(--highlight-rotation));
}

/* « Ah !? » : surlignage plus court, mesuré sur la maquette du Planning. */
.empty__title[data-highlight="narrow"]::before {
  width: var(--highlight-width-narrow);
}

.empty__lead {
  max-width: var(--empty-lead-width);
  font-size: var(--empty-lead-size);
  font-weight: var(--weight-bold);
  line-height: var(--empty-lead-leading);
  color: var(--color-black);
  text-align: center;
}

.empty__art {
  width: var(--empty-art-size);
  height: var(--empty-art-size);
}

.empty__hint {
  max-width: var(--empty-hint-width);
  font-size: var(--empty-hint-size);
  font-weight: var(--weight-regular);
  line-height: var(--empty-hint-leading);
  color: var(--color-black);
  text-align: center;
}

.empty__hint--short {
  max-width: var(--empty-hint-width-wide);
  min-height: var(--empty-hint-height-short);
}

.cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: var(--cta-width);
  height: var(--cta-height);
  padding: var(--space-1) var(--space-2);
  background: var(--color-yellow);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-cta);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-sm);
  color: var(--color-on-color);
}

.cta--centered {
  justify-content: center;
}

.cta__icon--large {
  width: var(--cta-icon-large);
  height: var(--cta-icon-large);
}

.cta__icon--small {
  width: var(--cta-icon-small);
  height: var(--cta-icon-small);
}

/* Raccourci de démonstration présent dans la maquette. */
.demo-fill {
  position: absolute;
  right: var(--demo-right);
  bottom: var(--demo-bottom);
  z-index: var(--z-screen);
  width: var(--demo-width);
  height: var(--demo-height);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-demo);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-xs);
  color: var(--color-black);
}