/* Lot 17, tableau de bord (dossier/26, R11, R12 et R13). Aucun littéral de couleur : les jetons de ../assets/tokens.css
   (thème sombre de l'application, et `[data-theme="light"]`). Mouvement en transform et opacity seulement, coupé sous
   prefers-reduced-motion (en fin de fichier). */

/* ---------- R11 · Concurrents, survol calme ----------
   Rien ne s'allume, ne s'assombrit ni ne se soulève sous le pointeur sur cet onglet : un trait plus net suffit. */
.ecran-concurrents .carte {
  transition: none;
}
.ecran-concurrents .carte:hover {
  --carte-voile: var(--voile-2); border-color: var(--trait-fort); transform: none;
}

/* ---------- R13 · Le tableau de bord pendant un relevé ---------- */
.direct-scene { display: grid; gap: 20px; padding: 24px 26px; }
.direct-scene:hover { --carte-voile: var(--voile-2); border-color: var(--trait); }
.direct-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 40px; align-items: center; }
.direct-principal .es-statut { margin-bottom: 10px; }
.direct-etapes { margin: 0; }
.direct-etapes .prep-etape { min-height: 54px; }
.direct-barre { position: relative; height: 6px; border-radius: var(--rayon-pilule); background: var(--voile-2); overflow: hidden; }
.direct-barre i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--faisceau); box-shadow: var(--lueur);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duree-lente) var(--expo);
}
/* Un reflet passe sur la barre tant que la mesure court : l'écran ne paraît jamais figé entre deux lectures. */
.direct-barre::after {
  content: ""; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--voile-4), transparent);
  transform: translateX(-110%); animation: direct-reflet 2.4s var(--courbe) infinite; pointer-events: none;
}
.ecran-direct[data-etape="fin"] .direct-barre::after, .ecran-direct[data-etape="tableau"] .direct-barre::after { animation: none; opacity: 0; }
@keyframes direct-reflet {
  from { transform: translateX(-110%); }
  to { transform: translateX(380%); }
}
.direct-note { margin: 0; }
.direct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.direct-actions .lien-carte { margin: 0; }
.direct-actions .lien-discret { font-size: var(--taille-petit); }

/* Squelettes des blocs : la forme du tableau de bord, un reflet qui passe (transform), rien de chiffré avant la fin. */
.direct-squelette { margin-top: 16px; }
.direct-bloc { display: grid; align-content: start; gap: 12px; }
.direct-bloc:hover { --carte-voile: var(--voile-2); border-color: var(--trait); }
.direct-bloc .etiquette { margin-bottom: 4px; }
.sq-vif { position: relative; display: block; overflow: hidden; border-radius: var(--rayon-1); background: var(--voile-2); }
.sq-vif::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--voile-2), transparent);
  transform: translateX(-100%); animation: sq-reflet 1.6s var(--courbe) infinite;
}
@keyframes sq-reflet {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.sq-chiffre { width: min(220px, 60%); height: 64px; border-radius: var(--rayon-2); }
.sq-texte { width: 88%; height: 12px; }
.sq-texte.court { width: 56%; }
.sq-courbe { width: 100%; height: 72px; margin-top: 6px; border-radius: var(--rayon-2); }
.sq-barre { flex: 1; height: 6px; border-radius: var(--rayon-pilule); }
.sq-etiquette { width: 46%; height: 10px; }
.sq-stat { width: 64%; height: 34px; border-radius: var(--rayon-2); }
.direct-a-la-fin { font-size: var(--taille-etiquette); color: var(--encre-2); }
.direct-ia { display: grid; }
.direct-ia li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) 52px; align-items: center; gap: 12px; min-height: 42px; border-top: 1px solid var(--trait); }
.direct-ia li:first-child { border-top: 0; }
.direct-ia li[data-statut="attente"] .surf { color: var(--encre-2); }
.direct-ia .piste i { width: 100%; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duree-lente) var(--expo); }
.direct-ia li[data-statut="en_cours"] .surf i { animation: prep-pulse 1.6s ease-in-out infinite; }
.direct-ia li[data-statut="ok"] .surf i { box-shadow: 0 0 8px var(--c); }
.direct-ia-compte { font-size: var(--taille-etiquette); text-align: right; color: var(--encre-2); }
.direct-marques { display: grid; gap: 4px; }
.direct-marques li { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.direct-marque-nom { flex: 0 1 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--encre-2); }
.direct-marques li.moi .direct-marque-nom { color: var(--encre); }

/* Bandeau des autres onglets : la barre avance par transform ; fini, il garde la même place. */
.bandeau-piste i { width: 100%; transform-origin: 0 50%; transition: transform var(--duree-lente) var(--expo); }
.bandeau-encours .es-ok { flex: none; }
.bandeau-encours .es-echec { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--attention); }

@media (max-width: 1180px) { .direct-haut { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .direct-scene { padding: 18px 16px; }
  .direct-ia li { grid-template-columns: minmax(0, 1fr) 52px; }
  .direct-ia .piste { grid-column: 1 / -1; grid-row: 2; margin-bottom: 8px; }
}

/* ---------- R13 · L'aperçu du film, à la fin d'un relevé ---------- */
.apercu-film { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 28px; align-items: center; margin-bottom: 16px; padding: 14px; }
.apercu-film:hover { --carte-voile: var(--voile-2); border-color: var(--trait-fort); }
.apercu-texte { display: grid; gap: 6px; padding: 6px 8px; }
.apercu-texte h2 { justify-self: start; }
.apercu-texte h2:focus { outline: none; }
.apercu-texte h2:focus-visible { box-shadow: var(--anneau-focus); border-radius: var(--rayon-1); }
.apercu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.apercu-vignette { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--rayon-3); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.apercu-vignette:focus-visible { box-shadow: var(--anneau-focus); }
.apercu-scene {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon-3);
  background: radial-gradient(120% 90% at 20% 0%, var(--bleu-voile), transparent 60%), var(--panneau);
  border: 1px solid var(--trait); box-shadow: var(--trait-lumiere);
}
.apercu-image {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 8px; padding: 8% 9%;
  opacity: 0; transform-origin: 30% 50%;
}
.apercu-image:first-child { opacity: 1; } /* l'image de repos : le chiffre (fixe sous prefers-reduced-motion) */
.apercu-n2 .apercu-image { animation: apercu-image-2 5s linear 3 backwards; animation-delay: calc(var(--i) * 2.5s); }
.apercu-n3 .apercu-image { animation: apercu-image-3 7.5s linear 3 backwards; animation-delay: calc(var(--i) * 2.5s); }
.apercu-n1 .apercu-image { animation: apercu-derive 7.5s ease-out 1 backwards; }
@keyframes apercu-image-3 {
  0% { opacity: 0; transform: scale(1.04); }
  4% { opacity: 1; }
  30% { opacity: 1; }
  34% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes apercu-image-2 {
  0% { opacity: 0; transform: scale(1.04); }
  6% { opacity: 1; }
  45% { opacity: 1; }
  51% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes apercu-derive {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}
.apercu-marque { display: inline-flex; align-items: center; gap: 8px; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.apercu-taux { font-size: clamp(40px, 6vw, 64px); font-weight: var(--graisse-moyenne); line-height: 0.95; letter-spacing: var(--approche-heros); color: var(--encre); }
.apercu-phrase { max-width: 26ch; font-size: var(--taille-petit); line-height: 1.4; color: var(--encre-2); }
.apercu-liste { gap: 10px; }
.apercu-etiquette { font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.apercu-ligne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 44px; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-2); }
.apercu-ligne.moi { color: var(--encre); }
.apercu-ligne b { text-align: right; font-weight: var(--graisse-moyenne); color: var(--encre); }
.apercu-nom { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.apercu-piste { display: block; height: 6px; overflow: hidden; border-radius: var(--rayon-pilule); background: var(--voile-3); }
.apercu-piste i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--c, var(--moteur-autre)); transform-origin: 0 50%; }
.apercu-ligne.moi .apercu-piste i { background: var(--bleu); }
.apercu-faisceau {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--faisceau); box-shadow: var(--lueur);
  opacity: 0; transform: translateX(-100%); animation: apercu-faisceau 2.5s var(--courbe) 9; pointer-events: none;
}
@keyframes apercu-faisceau {
  0% { opacity: 0; transform: translateX(-100%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
.apercu-lire {
  position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bouton-primaire-fond); color: var(--bouton-primaire-encre, var(--fond)); box-shadow: var(--ombre-flottante);
  transition: transform var(--duree-rapide) var(--courbe);
}
.apercu-lire .ic { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
@media (hover: hover) { .apercu-vignette:hover .apercu-lire { transform: scale(1.06); } }
@media (max-width: 900px) { .apercu-film { grid-template-columns: 1fr; } }

/* ---------- R12 · Retirer un concurrent ---------- */
.carte-concurrents .conc-liste li { margin: 0 -10px; padding: 0 10px; border-radius: var(--rayon-2); transition: background var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe); }
.carte-concurrents .conc-liste li { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) auto; }
.conc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.conc-question { font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--moins); }
.conc-liste li[data-etat="demande"], .conc-liste li[data-etat="retrait"], .conc-liste li[data-etat="retire"] { background: var(--moins-fond); box-shadow: inset 3px 0 0 var(--moins); }
.conc-liste li[data-etat="demande"] .dom, .conc-liste li[data-etat="retrait"] .dom, .conc-liste li[data-etat="retire"] .dom { display: none; }
.conc-liste li[data-etat="demande"] .conc-actions, .conc-liste li[data-etat="retrait"] .conc-actions, .conc-liste li[data-etat="retire"] .conc-actions { grid-column: 3 / -1; }
.conc-liste li[data-etat="retrait"] .nm, .conc-liste li[data-etat="retire"] .nm { color: var(--encre-2); }
.btn-retrait { background: var(--moins); color: var(--encre-inverse); }
.btn-retrait:hover:not(:disabled) { background: var(--moins); box-shadow: 0 0 0 3px var(--moins-fond); }
.conc-liste .nm { position: relative; justify-self: start; }
.barre-retrait {
  position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; border-radius: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.conc-liste li[data-etat="retrait"] .barre-retrait, .conc-liste li[data-etat="retire"] .barre-retrait { animation: retrait-barrer 220ms var(--expo) forwards; }
.conc-liste li.tremble { animation: retrait-trembler 300ms var(--courbe); }
@keyframes retrait-trembler {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes retrait-barrer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.retrait-bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding: 8px 8px 8px 14px; border-radius: var(--rayon-3);
  background: var(--panneau-2); border: 1px solid var(--trait-fort); box-shadow: var(--trait-lumiere); font-size: var(--taille-petit); color: var(--encre-2);
  animation: retrait-bandeau var(--duree-normale) var(--expo) both;
}
.retrait-bandeau[hidden] { display: none; }
.retrait-bandeau b { color: var(--encre); font-weight: var(--graisse-moyenne); }
.retrait-bandeau-texte { flex: 1 1 220px; min-width: 0; }
.retrait-bandeau .es-ok { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mieux); }
.retrait-bandeau-fermer { width: 32px; padding: 0; }
@keyframes retrait-bandeau {
  from { opacity: 0; transform: translateY(6px); }
}
@media (max-width: 600px) {
  .carte-concurrents .conc-liste li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .conc-liste li[data-etat="demande"], .conc-liste li[data-etat="retrait"], .conc-liste li[data-etat="retire"] { grid-template-columns: 32px minmax(0, 1fr); padding-top: 8px; padding-bottom: 10px; }
  .conc-liste li[data-etat="demande"] .conc-actions, .conc-liste li[data-etat="retrait"] .conc-actions, .conc-liste li[data-etat="retire"] .conc-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Lot 24 · « Cités à votre place » (dossier/31 C5) : sous les concurrents suivis, ceux que les IA citent ---------- */
.conc-cites { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--trait); }
.conc-cites[hidden] { display: none; }
.conc-cites-titre { font-size: 15px; font-weight: var(--graisse-moyenne); color: var(--encre); }
.conc-cites-aide { margin-top: 4px; max-width: 68ch; }
.carte-concurrents .conc-cites-liste { margin-top: 8px; }
.carte-concurrents .conc-cites-liste li { grid-template-columns: 32px minmax(0, 1fr) auto; animation: cites-entree var(--duree-normale) var(--expo) both; transition: opacity var(--duree-rapide) var(--courbe); }
.carte-concurrents .conc-cites-liste li[hidden] { display: none; }
.carte-concurrents .conc-cites-liste li[data-etat="envoi"] { opacity: .6; }
.conc-cite-texte { display: grid; gap: 2px; min-width: 0; padding: 8px 0; }
.conc-cite-compte { font-size: var(--taille-petit); color: var(--encre-2); }
.conc-cites-plein { margin-top: 10px; color: var(--attention); }
.conc-cites-plein[hidden] { display: none; }
@keyframes cites-entree {
  from { opacity: 0; transform: translateY(4px); }
}

/* ---------- Mouvement réduit : l'état change, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .direct-barre::after, .sq-vif::after { animation: none !important; opacity: 0; }
  .direct-ia li[data-statut="en_cours"] .surf i { animation: none !important; }
  .direct-barre i, .direct-ia .piste i, .bandeau-piste i, .apercu-lire { transition: none !important; }
  .apercu-image, .apercu-faisceau { animation: none !important; }
  .conc-liste li.tremble, .conc-liste li .barre-retrait, .retrait-bandeau { animation: none !important; }
  .carte-concurrents .conc-cites-liste li { animation: none !important; transition: none !important; }
  .conc-liste li[data-etat="retrait"] .barre-retrait, .conc-liste li[data-etat="retire"] .barre-retrait { transform: scaleX(1); }
  .chaleur-bulle { transition: none !important; }
}