/* Mouvement (charte v3 §8) : motion.js orchestre les entrées d'écran ; ici, le symbole, le faisceau de
   progression, les squelettes, les toasts, les indicateurs vivants. 150 ms pour un état, 300 ms pour une
   apparition, 600 ms pour une mesure qui se dessine. Tout est coupé sous prefers-reduced-motion. */

/* Symbole de la barre haute : les montants apparaissent, puis le faisceau traverse de gauche à droite
   en 500 ms. C'est la seule animation du symbole ; le mot ne bouge pas. */
.logotype-montants { animation: logotype-montants var(--duree-rapide) var(--courbe) both; }
.logotype-faisceau { transform-box: fill-box; transform-origin: 0 50%; animation: logotype-faisceau 500ms var(--expo) var(--duree-rapide) both; }
@keyframes logotype-montants { from { opacity: 0; } }
@keyframes logotype-faisceau { from { transform: scaleX(0); } }

/* Faisceau de progression (valeurs de .faisceau-ligne) : il avance à chaque lecture, jamais en boucle. */
.faisceau-ligne { position: relative; height: 6px; border-radius: var(--rayon-pilule); background: var(--voile-2); }
.faisceau-ligne i { display: block; height: 100%; width: 0; max-width: 100%; border-radius: inherit; background: var(--faisceau); box-shadow: var(--lueur); transition: width var(--duree-lente) var(--expo); }

/* Squelette : blocs à la forme de l'écran, reflet qui passe (valeurs de .squelette) */
.squelette-ecran { display: grid; gap: 14px; padding-top: 4px; }
.squelette { border-radius: var(--rayon-2); background: linear-gradient(90deg, var(--voile-1), var(--voile-2), var(--voile-1)); background-size: 200% 100%; animation: squelette 1.4s linear infinite; }
@keyframes squelette { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sq-titre { width: min(520px, 80%); height: 48px; }
.sq-ligne { width: min(620px, 90%); height: 16px; margin-bottom: 12px; }
.sq-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.sq-heros { grid-column: span 7; height: 340px; border-radius: var(--rayon-3); }
.sq-cote { grid-column: span 5; height: 340px; border-radius: var(--rayon-3); }
.sq-carte { grid-column: span 4; height: 140px; border-radius: var(--rayon-3); }
.sq-liste { display: grid; gap: 10px; }
.sq-rangee { height: 64px; border-radius: var(--rayon-3); }
@media (max-width: 1180px) { .sq-heros, .sq-cote { grid-column: span 12; height: 240px; } .sq-carte { grid-column: span 6; } }

/* Toasts (valeurs de .toast) */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--rayon-3); background: var(--panneau-2);
  border: 1px solid var(--trait); box-shadow: var(--ombre-flottante), var(--trait-lumiere); font-size: var(--taille-petit); line-height: 1.45; color: var(--encre);
  animation: toast-entree var(--duree-normale) var(--expo) both;
}
.toast .ic { width: 16px; height: 16px; margin-top: 1px; }
.toast.verte .ic { color: var(--mieux); }
.toast.ambre .ic { color: var(--attention); }
.toast-sortie { opacity: 0; transform: translateY(8px); transition: opacity var(--duree-normale) var(--courbe), transform var(--duree-normale) var(--courbe); }
@keyframes toast-entree { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 900px) { .toasts { right: 16px; bottom: 96px; } }

/* Mise à jour douce (autre relevé, autre surface) : l'écran reste en place, voilé le temps du chargement. */
.contenu { transition: opacity var(--duree-rapide) var(--courbe); }
.contenu.en-maj { opacity: 0.55; }

/* Marque survolée ou focalisée : elle reste pleine dans tous les blocs, les autres s'effacent (survol.js). */
[data-marque] { transition: opacity var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe); }
.survol-marque [data-marque]:not(.marque-survolee) { opacity: 0.36; }
.marque-survolee .logo { transform: scale(1.1); }
.marque-survolee .logo-marque:not(.moi) { box-shadow: 0 0 0 3px var(--voile-3); }

/* Tête d'écran : le halo suit le pointeur ; un éclat court le long du faisceau (transform et opacité seulement). */
.ecran-lumiere .halo { will-change: transform; }
.ecran-titre-ligne .faisceau { position: relative; overflow: visible; }
.faisceau-eclat {
  position: absolute; left: -32px; top: 50%; width: 64px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--eclat); opacity: 0; pointer-events: none; transition: opacity var(--duree-normale) var(--courbe);
}

/* Cartes compactes : elles se soulèvent de 2 px au survol ; le bord s'éclaire. */
@media (hover: hover) {
  .carte-stat, .vignette, .alp, .conq, .fait, .carte-film, .es-carte { transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), transform var(--duree-normale) var(--expo); }
  .carte-stat:hover, .vignette:hover, .alp:hover, .conq:hover, .fait:hover, .carte-film:hover { transform: translateY(-2px); }
}

/* Info-bulles des courbes (survol.js) : repère vertical, bulle en panneau flottant, point allumé. */
.courbe-interactive { position: relative; }
.courbe-interactive svg { cursor: crosshair; }
.courbe-interactive svg:focus-visible { outline: none; box-shadow: var(--anneau-focus); border-radius: var(--rayon-2); }
.courbe-repere {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--trait-fort); opacity: 0; pointer-events: none;
  transition: opacity var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe);
}
.bulle-courbe {
  position: absolute; left: 0; top: 0; z-index: 6; display: grid; gap: 4px; min-width: 132px; padding: 9px 11px; border-radius: var(--rayon-2);
  background: var(--panneau-2); border: 1px solid var(--trait-fort); box-shadow: var(--ombre-flottante), var(--trait-lumiere);
  font-size: var(--taille-etiquette); line-height: 1.35; color: var(--encre-2); white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe);
}
.bulle-courbe > b { color: var(--encre); font-weight: var(--graisse-moyenne); }
.bulle-ligne { display: flex; align-items: center; gap: 8px; }
.bulle-ligne i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bulle-ligne b { margin-left: auto; padding-left: 10px; color: var(--encre); font-weight: var(--graisse-moyenne); }
.bulle-visible .bulle-courbe, .bulle-visible .courbe-repere { opacity: 1; }
svg .point { transform-box: fill-box; transform-origin: center; transition: transform var(--duree-rapide) var(--courbe); }
svg .point.point-actif { transform: scale(1.7); }
svg .point-dernier.point-actif { transform: scale(1.25); }

/* Indicateur vivant d'une mesure en cours */
.vivant { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); box-shadow: var(--lueur-point); }
.vivant::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--bleu); animation: onde 1.6s ease-out infinite; }
@keyframes onde { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes battre { 0%, 100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .logotype-montants, .logotype-faisceau, .squelette, .toast, .vivant::after { animation: none !important; }
  .toast-sortie, .faisceau-ligne i { transition: none !important; }
}