/* ══════════════════════════════════════════════════════════════════
   LA PLANCHE D'ÉTATS — la mise en page des cinq.

   Une seule forme pour les quatre états qui parlent : icône, titre, texte,
   au plus une action. Les distinguer par la COULEUR de l'icône plutôt que
   par la mise en page — ce qui change d'un état à l'autre, c'est le
   diagnostic, pas la structure de la réponse.

   Rien ici n'est en position fixe et rien ne recouvre : ces états se
   posent DANS le conteneur, à la place du contenu attendu. Voir la règle
   « jamais une modale » dans js/etats.js.
   ══════════════════════════════════════════════════════════════════ */

.fy-etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  /* Le conteneur qu'on remplace est souvent une GRILLE — le catalogue en
     est une à deux colonnes sur téléphone. Sans cette ligne, l'état se
     logeait dans une seule cellule : mesuré à 186 px de large sur un écran
     de 375, titre coupé en quatre lignes. Il prend toute la largeur, comme
     le contenu qu'il remplace. Hors d'une grille, la déclaration ne fait
     rien — on peut donc la poser une fois pour toutes ici. */
  grid-column: 1 / -1;
  /* Une hauteur plancher : sans elle, un état vide dans une grande grille
     laisse la page se replier d'un coup au moment où il apparaît. */
  min-height: 180px;
}

/* Le squelette, lui, ne se centre pas : il occupe la place du contenu,
   sinon il annonce une mise en page qui n'arrivera pas. */
.fy-etat[data-etat="chargement"] {
  display: block;
  padding: 0;
  min-height: 0;
  text-align: left;
}

.fy-etat-ico {
  display: inline-flex;
  font-size: 30px;
  color: var(--text-muted, #6e6c88);
  opacity: .75;
}
/* La couleur porte le diagnostic. Ambre pour ce qui attend le réseau —
   le même ambre que le bandeau hors ligne, pour que les deux se
   reconnaissent. Rouge pour ce qui a échoué. Rien de particulier pour un
   état vide : il n'y a pas de problème à signaler. */
.fy-etat-deconnecte .fy-etat-ico { color: var(--fy-ambre, #f0b45c); opacity: 1; }
.fy-etat-erreur     .fy-etat-ico { color: var(--red, #ff5e5e); opacity: 1; }
.fy-etat-refus      .fy-etat-ico { color: var(--fy-ambre, #f0b45c); opacity: 1; }

.fy-etat-titre {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  font-weight: 700;
  color: var(--text, #eeeeff);
  text-wrap: balance;
}
.fy-etat-texte {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-sm, .9rem);
  line-height: 1.5;
  color: var(--text-muted, #a5a3bc);
  text-wrap: pretty;
}

/* 44 px : c'est un bouton, il se presse au doigt comme les autres. */
.fy-etat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 20px;
  border: 1px solid var(--border-md, rgba(255,255,255,.12));
  border-radius: 99px;
  background: transparent;
  color: var(--text, #eeeeff);
  font-family: inherit;
  font-size: var(--fs-sm, .9rem);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.fy-etat-action:hover { border-color: #8b7bff; }

/* La ligne des cinq secondes. Elle vient APRÈS le squelette, discrète :
   c'est une nouvelle, pas une alarme. */
.fy-etat-lent {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-xs, .8rem);
  color: var(--text-muted, #6e6c88);
}
.fy-etat-lent[hidden] { display: none; }

/* ── LES SQUELETTES ────────────────────────────────────────────────
   Ils empruntent `.skeleton` à tokens.css : une seule animation de
   miroitement pour tout le site, et une seule à réaccorder le jour où
   elle changera. */

.fy-sq-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.fy-sq-carte { display: flex; flex-direction: column; gap: 8px; }
.fy-sq-img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius, 14px); }

.fy-sq-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.fy-sq-rond { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.fy-sq-corps { flex: 1; min-width: 0; }

.fy-sq-texte { padding: 8px 0; }

/* Sur téléphone, deux colonnes bord à bord — la même grille que le
   catalogue, pour que le squelette ne promette pas autre chose. */
@media (max-width: 600px) {
  .fy-sq-grille { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fy-etat { padding: 32px 16px; min-height: 150px; }
}

/* Le miroitement est une animation permanente : elle doit céder à qui
   demande moins de mouvement. Le squelette reste, il cesse seulement de
   bouger — sa forme, elle, porte déjà l'information. */
@media (prefers-reduced-motion: reduce) {
  .fy-sq .skeleton { animation: none; }
}