/* ============================================================================
   cab-vide — les trois écrans que tout le monde bâcle : vide, chargement, erreur.

   Ils décident de la qualité perçue plus sûrement que l'écran nominal, parce
   qu'on les rencontre au pire moment : quand on cherche quelque chose et qu'on
   ne le trouve pas.

   Règle tenue ici : un état vide dit ce qui manque ET ce qu'on peut faire.
   « Aucun résultat » tout seul est un cul-de-sac.
   ============================================================================ */

.cab-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 24px;
  text-align: center;
  font-family: var(--cab-font-sans, system-ui, sans-serif);
}

.cab-vide__glyphe {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  color: var(--cab-ink-3, #687585);
  opacity: .75;
}
.cab-vide__glyphe svg { width: 100%; height: 100%; display: block; }

.cab-vide__titre {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--cab-ink, #06121A);
  margin: 0;
}

.cab-vide__texte {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cab-ink-2, #4D5B68);
  margin: 0;
  max-width: 40ch;
}

/* L'action de sortie : sans elle, un état vide est une impasse. */
.cab-vide__action {
  margin-top: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--cab-accent-ink, #9A1B38);
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: var(--cab-tap, 44px);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cab-vide__action:hover { text-decoration-thickness: 2px; }
/* Réponse à la pression, pas au relâchement (apple-design §1) : la cible réagit à
   l'instant où le doigt la touche, sans attendre le clic. Ajouté le 2026-08-19. */
.cab-vide__action:active { text-decoration-thickness: 2px; opacity: .7; }

.cab-vide__action:focus-visible {
  outline: 2px solid var(--cab-accent, #9A1B38);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- erreur : même structure, ton différent -------------------------------- */

.cab-vide--erreur .cab-vide__glyphe { color: var(--cab-danger-ink, #C2334A); opacity: 1; }
.cab-vide--erreur .cab-vide__titre  { color: var(--cab-danger-ink, #C2334A); }

/* --- chargement : le squelette, jamais un tourniquet ----------------------- */
/* Un tourniquet dit « attends ». Un squelette dit « voilà ce qui arrive »,
   et il empêche la page de sauter quand les données tombent. */

.cab-squelette {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--cab-ink-3, #687585) 14%, transparent);
  animation: cab-squelette-pulse 1.4s ease-in-out infinite;
}
.cab-squelette--titre  { height: 15px; width: 42%; }
.cab-squelette--ligne  { width: 100%; }
.cab-squelette--court  { width: 62%; }

/* Décalage léger d'une ligne à l'autre : sans lui, le bloc pulse d'un bloc et
   ressemble à un clignotement. */
.cab-squelette:nth-child(2) { animation-delay: 90ms }
.cab-squelette:nth-child(3) { animation-delay: 180ms }
.cab-squelette:nth-child(4) { animation-delay: 270ms }

@keyframes cab-squelette-pulse { 50% { opacity: .45 } }

@media (prefers-reduced-motion: reduce) {
  .cab-squelette { animation: none; opacity: .7; }
}