/* Écran squelette (vocabulaire de l'éditeur, 22/10 : « exactement, applique-le, on va l'utiliser à pas mal d'endroits »).
   Composant js/squelette.js : des blocs aux formes du contenu à venir (titre, chiffre, lignes, et la forme du
   graphique : barres, calendrier, jauge, courbe, nuage), surface nette, un balayage doux en boucle, puis les blocs
   cèdent la place aux éléments réels (chaque forme glisse sur la boîte de ce qu'elle annonçait et s'y fond).
   Références : notre squelette partagé du journal (v2/src/mouvement/squelette.css, SqueletteForme.jsx : formes
   sans chiffre ni phrase), Arc UI › Skeleton (vague décalée, contenu qui monte de 4 px au remplacement), beUI ›
   Loader (mouvement réduit : plus aucune transformation).
   Balayage : UNE bande plus claire qui traverse tout le squelette de gauche à droite, cohérente d'un bloc à l'autre
   (chaque bloc porte une couche de la largeur du squelette, recalée par --sx), en `transform` seulement, 1,6 s.
   Pause hors écran (.sq-pause), aucun balayage en mouvement réduit. */

.sq { --sq-c: rgba(18, 48, 47, .11); --sq-balai: rgba(255, 255, 255, .8); --sq-gap: 10px;
  position: relative; display: flex; flex-direction: column; gap: var(--sq-gap); min-width: 0; min-height: 0; pointer-events: none; }
.sq-sombre { --sq-c: rgba(243, 241, 234, .1); --sq-balai: rgba(243, 241, 234, .2); }

/* un bloc : surface nette, coins doux ; sa couche de balayage est recalée sur le squelette entier */
.sq-b { position: relative; overflow: hidden; flex: none; border-radius: 6px; background: var(--sq-c); transition: background-color .26s cubic-bezier(0.23, 1, 0.32, 1); }
.sq-b::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--sx, 0px) * -1); width: var(--sw, 100%);
  background: linear-gradient(90deg, transparent 38%, var(--sq-balai) 50%, transparent 62%);
  transform: translateX(-62%); animation: sq-balai 1.6s cubic-bezier(0.45, 0, 0.4, 1) var(--sq-t0, 0ms) infinite; will-change: transform; transition: opacity .2s ease; }
@keyframes sq-balai { 0% { transform: translateX(-62%); } 82%, 100% { transform: translateX(62%); } }
.sq-pause .sq-b::after { animation-play-state: paused; }
.sq-remplit .sq-b::after { opacity: 0; }

/* les briques */
.sq-tete { flex: none; display: flex; align-items: center; height: 26px; }
.sq-titre { height: 14px; width: var(--l, 58%); margin-left: var(--sq-titre-x, 0px); border-radius: 7px; }
.sq-kpi { flex: none; display: flex; flex-direction: column; gap: 7px; }
.sq-chiffre { height: 28px; width: var(--l, 34%); border-radius: 8px; }
.sq-ligne { height: var(--h, 11px); width: var(--l, 72%); border-radius: 6px; }
.sq-lignes { flex: none; display: flex; flex-direction: column; gap: 8px; }
.sq-pied { flex: none; height: 10px; width: var(--l, 46%); margin-top: auto; border-radius: 5px; }
.sq-forme { position: relative; flex: none; height: var(--h, 72px); min-height: 0; }
.sq-forme.sq-grand { flex: 1 1 0; height: auto; min-height: var(--h, 72px); }

/* barres verticales (posées sur une ligne, ou de part et d'autre d'un zéro) */
.sq-barres { display: flex; align-items: flex-end; gap: 6px; }
.sq-barres .sq-b { flex: 1 1 0; height: var(--v); border-radius: 4px 4px 2px 2px; }
.sq-barres.sq-zero { align-items: stretch; }
.sq-barres.sq-zero .sq-col { position: relative; flex: 1 1 0; }
.sq-barres.sq-zero .sq-col .sq-b { position: absolute; left: 0; right: 0; }
.sq-barres.sq-zero .sq-haut { bottom: 38%; height: calc(var(--v) * .6); border-radius: 4px 4px 1px 1px; }
.sq-barres.sq-zero .sq-bas { top: 62%; height: calc(var(--v) * .36); border-radius: 1px 1px 4px 4px; }
.sq-barres .sq-axe { position: absolute; left: 0; right: 0; top: 62%; height: 2px; border-radius: 1px; }

/* barres horizontales (une ligne par entité : libellé, piste, valeur) */
.sq-barresh { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.sq-rang { display: grid; grid-template-columns: minmax(0, 26%) minmax(0, 1fr) minmax(0, 16%); align-items: center; gap: 10px; }
.sq-rang .sq-lab { height: 10px; }
.sq-rang .sq-piste { height: 16px; width: var(--v); border-radius: 5px; }
.sq-rang .sq-val { height: 10px; justify-self: end; width: 100%; }

/* calendrier : en-tête des jours, puis les semaines */
.sq-cal { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); grid-template-rows: 9px repeat(var(--r, 4), minmax(0, 1fr)); gap: 6px; }
.sq-cal .sq-jour { height: 9px; width: 46%; justify-self: center; border-radius: 4px; }
.sq-cal .sq-case { height: auto; border-radius: 7px; }

/* jauge : demi-anneau, chiffre au centre */
.sq-jauge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.sq-arc { width: min(78%, 250px); aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0;
  -webkit-mask: radial-gradient(circle farthest-side at 50% 100%, transparent 70%, #000 calc(70% + 1px));
  mask: radial-gradient(circle farthest-side at 50% 100%, transparent 70%, #000 calc(70% + 1px)); }
.sq-jauge .sq-chiffre { width: min(34%, 110px); margin-top: -46px; height: 24px; }

/* courbe : l'aire sous la courbe, puis son trait (découpes en pourcentage, la forme suit la taille) */
.sq-courbe .sq-b { position: absolute; inset: 0; border-radius: 0; }
.sq-courbe .sq-aire { opacity: .5; }

/* nuage de points */
.sq-nuage .sq-point { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; }

/* une rangée de liste (heure, pastille, texte, montant) */
.sq-rangee { display: flex; align-items: center; gap: 10px; height: var(--h, 40px); }
.sq-rangee .sq-h { width: 44px; height: 10px; }
.sq-rangee .sq-pil { width: 58px; height: 22px; border-radius: 11px; }
.sq-rangee .sq-txt { width: 34%; height: 10px; }
.sq-rangee .sq-mt { width: 62px; height: 14px; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .sq-b::after { display: none; }
  .sq-b { transition: none; }
}