/* L'ATTENTE RENDUE VISIBLE — voile, disque, squelettes, echec.
   Chargee EN DERNIER : le voile doit passer au-dessus de ce que les feuilles precedentes
   dessinent dans une carte. Aucune couleur en dur : uniquement les roles de 01-socle.css. */

/* La carte hote porte `position: relative` EXPLICITE. Sans ca, le referentiel du voile
   depend d'un effet de bord : l'animation `carte-apparait` (02-mise-en-page.css) laisse un
   `transform` fige apres sa fin, et tout ancetre porteur d'un transform, meme identite,
   devient le referentiel des descendants positionnes. */
.zone-attente-hote { position: relative; }

.zone-attente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}
.zone-attente[hidden] { display: none !important; }

/* Zone deja peinte qu'on rafraichit : le contenu reste lisible dessous, estompe. Le voile
   lui-meme n'est PAS estompe (il est enfant de la zone), d'ou l'opacite rendue a 1. */
.zone-attente-estompe > *:not(.zone-attente) { opacity: 0.35; pointer-events: none; }

.zone-attente-disque {
  width: 26px;
  height: 26px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: zone-attente-tourne 0.9s linear infinite;
}
@keyframes zone-attente-tourne { to { transform: rotate(360deg); } }

.zone-attente-texte { color: var(--muted); font-size: 0.85rem; margin: 0; }

/* Un fond, une bordure : sans eux le message se pose A NU sur la courbe (l'echec libere
   l'attente, donc le contenu cesse d'etre estompe) et devient illisible. Vu a l'ecran le
   2026-09-12, sur un vrai compte. */
.zone-attente-echec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-shadow: var(--shadow-card-sm);
}
.zone-attente-echec[hidden] { display: none !important; }

/* Les trois squelettes. Un seul motif de pouls, trois mises en page. */
/* Le squelette TAPISSE la zone, il ne prend pas sa place dans la colonne du voile : pose en
   flux normal, il occupait toute la hauteur et rejetait le disque SOUS lui, hors du cadre
   (vu a l'ecran le 2026-09-12). Le disque et le message se centrent donc par-dessus. */
.squelette { position: absolute; inset: 0; display: grid; gap: 10px; padding: 12px; }
.squelette[hidden] { display: none !important; }
.squelette > * {
  background: var(--bg-inset);
  border-radius: var(--radius-input);
  animation: pouls 1.4s ease-in-out infinite;
  --pouls-min: 0.45;
}
/* Vocabulaire visuel unique pour "ça travaille" : squelette de chargement (1,4s, 0.45) et
   pastille d'enregistrement (02-mise-en-page.css, 1,1s, 0.25) partagent ce @keyframes, seules
   la durée et --pouls-min restent propres à chaque usage. */
@keyframes pouls { 0%, 100% { opacity: 1; } 50% { opacity: var(--pouls-min, 0.45); } }

.squelette-courbe { grid-template-rows: 1fr 1fr 14px; }
.squelette-diagramme { grid-template-columns: 1fr 1fr 1fr; }
.squelette-tableau { grid-template-rows: repeat(3, 1fr); }

/* L'ecran d'accueil (app/ecran-accueil.js) : il couvre toute la page jusqu'au premier
   tableau de bord peint. Au-dessus de la barre laterale (500), sous l'ecran de connexion (1000). */
.ecran-accueil {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
}
.ecran-accueil-logo { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.ecran-accueil-texte { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Respect du reglage systeme : une animation ne doit pas s'imposer a qui n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .zone-attente-disque, .squelette > * { animation: none; }
}