/* ================================================================
   PROJECTION — glue accueil (static/css/projection-home.css)
   ================================================================
   NE FAIT PAS PARTIE du design system de référence (systeme/projection.css,
   copié à l'identique dans static/css/projection.css — son hash doit rester
   égal à la référence, voir outils/fidelite/verif_hash.py). Ce fichier
   couvre uniquement les états RÉELS que la maquette statique ne modélisait
   pas (upload en cours, erreur de dépôt) : la maquette n'a qu'un survol
   ".dragover", pas de barre de progression ni de message d'erreur, puisque
   rien n'y uploade vraiment. Classes et logique Alpine (dz==='uploading'/
   'error') reprises telles quelles de l'ancien static/css/home.css — seul
   l'habillage change, pour rester cohérent avec .proj (jetons --night-2,
   --beam-bright, --line-d, --muted-d, --danger, globaux sur :root).
   Portée : uniquement les zones de dépôt de l'accueil (.proj .drop-zone). */

/* Collision résiduelle avec static/css/style.css (chargé sitewide, non
   retirable) : sa règle historique ".hero{text-align:center;background:
   radial-gradient(...)}" (style.css:338) a une spécificité INFÉRIEURE à
   ".proj .hero" pour les propriétés que projection.css réaffirme (padding,
   overflow...), donc écrasée sans problème sur celles-là. Mais projection.css
   ne fixe jamais explicitly text-align/background sur ".proj .hero" lui-même
   (son survol vient de ".hero::before", pas d'un background de base) — sur
   CES deux propriétés précises, rien de plus spécifique que style.css ne les
   recouvre, et elles fuient : le h1 hérite text-align:center (décalage
   visuel confirmé par mesure de pixels), et un dégradé bleu de l'ancien site
   s'intercale derrière le vrai fond nuit. Neutralisé ici, jamais dans
   static/css/projection.css (hash verrouillé, doit rester identique à la
   référence system/projection.css). */
.proj .hero { text-align: left; background: none; }

.proj .drop-zone { position: relative; }
.proj .khm-hidden-file { display: none; }

.proj .khm-prep-head { display:flex; align-items:center; gap:10px; }
.proj .khm-prep-spin {
  width:18px; height:18px; border-radius:50%; flex:none;
  border:2.5px solid rgba(77,130,243,.25); border-top-color: var(--beam-bright);
  animation: proj-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .proj .khm-prep-spin { animation: none; }
}
@keyframes proj-spin { to { transform: rotate(360deg); } }
.proj .khm-prep-text { flex:1; min-width:0; text-align:left; }
.proj .khm-prep-status { display:block; font-size:14px; color:#fff; font-weight:600; }
.proj .khm-prep-name { display:block; font-size:12.5px; color:var(--muted-d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj .khm-prep-pct { font-family:var(--mono); font-size:13px; color:var(--beam-bright); flex:none; }
.proj .khm-prep-bar { margin-top:12px; height:4px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.proj .khm-prep-bar span { display:block; height:100%; background:var(--beam-bright); border-radius:2px; transition:width .25s var(--ease); }

.proj .khm-errbox { text-align:left; }
.proj .khm-errbox-row { display:flex; gap:10px; align-items:flex-start; }
.proj .khm-errbox-title { font-size:14.5px; font-weight:600; color:#fff; }
.proj .khm-errbox-hint { font-size:13px; color:var(--muted-d); margin-top:2px; }
.proj .khm-ghost-btn {
  margin-top:12px; display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1px solid var(--line-d); color:#E8EDF7;
  border-radius:8px; padding:8px 14px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:var(--sans);
}
.proj .khm-ghost-btn:hover { border-color: var(--beam-bright); color: var(--beam-bright); }

/* Pilule collante : n'affiche que le lien (pas de dépôt de fichier, comme la
   maquette) — bouton désactivé tant que le champ est vide. */
.proj .sticky-pill .btn:disabled { opacity:.55; cursor:default; }