/* ============================================================================
   HERO — VARIANTE A · « Console d'audit »
   Le héro montre le travail : une relecture ligne à ligne qui tourne.
   Surcouche de style.css — aucun token redéfini, seulement le héro.
============================================================================ */

.hero {
  --t-hero: clamp(2.1rem, 4.2vw, 3.35rem);
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(6.5rem, 12vh, 9rem) 0 clamp(3rem, 6vh, 4.5rem);
  position: relative; overflow: hidden;
  background: var(--ink);
}

/* Le zéro passe en filigrane : la console prend la parole, la marque tient
   le fond. Même géométrie, même tracé, autre rôle. Échelle bridée pour que
   le chiffre reste lisible COMME un zéro — trop grand, il ne reste qu'un arc
   qui traverse la page sans être identifiable. */
.hero .hero__zero {
  top: 50%; right: auto; left: 50%;
  height: 76%; width: auto;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}
/* En filigrane, l'arc ne doit plus porter la couleur : il traverserait la
   console comme une courbe parasite. Le zéro reste, en filet sombre. */
.hero .hero__zero .z-arc { stroke: var(--hair-d); }
.hero .hero__zero .z-fill { fill: rgba(240, 144, 107, 0.03); }

.hero .hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* Le panneau descend sous l'axe de la colonne de texte. Le titre est le point
   d'entrée du regard : en alignant les deux blocs sur leur centre, la console
   montait au niveau des premières lignes et se disputait la primauté avec
   elles. Décalée vers le bas, elle se lit comme la démonstration de ce que le
   titre vient d'annoncer. La valeur est en em pour suivre l'échelle du corps. */
/* Descente réelle, pas un décalage visuel. Deux pièges évités :
   · un transform ne réserve aucun espace — le panneau finissait par recouvrir
     le bloc d'engagement ;
   · une marge basse compensatoire, avec align-items:center sur la grille,
     recentre la boîte agrandie et REMONTE le panneau de la moitié de ce qu'on
     vient de lui ajouter.
   Le panneau est donc calé en haut de sa ligne, et la marge haute le descend
   d'exactement la valeur écrite. */
/* La tête du panneau s'aligne sur la première ligne du titre : c'est ce
   croisement qui tient la composition. La valeur est en em pour suivre le
   corps — l'alignement est calé sur la largeur de référence ; le titre étant
   en clamp, il glisse de quelques pixels aux extrêmes, ce qu'aucune valeur
   fixe ne rattraperait sans mesure au chargement. */
.hero__panel { align-self: start; margin-top: 1.45em; }

.hero .hero__l2 { color: var(--terre); }
.hero .hero__sub { max-width: 40ch; }
/* La mise en emphase du chapeau. « Réclamer » est le seul des trois verbes qui
   nous sépare d'un logiciel de détection : traité à égalité dans une
   énumération, il se perdait. L'accent le sort de la liste pour un visiteur qui
   ne descendra jamais plus bas que le premier écran.
   font-style normal : c'est un poids, pas une citation. */
.hero .hero__sub em {
  font-style: normal; font-weight: 500; color: var(--terre);
}
/* L'engagement court sous les deux colonnes : c'est la clause qui vaut pour
   tout le héro, pas un appendice de la colonne de texte. */
.hero .xf { grid-column: 1 / -1; margin-top: clamp(1.6rem, 3.4vw, 2.6rem); }

/* ---- La console ------------------------------------------------------ *
   Un tableau au filet, pas une carte : aucun rayon, aucune ombre. Le
   dispositif tient par la grille et le contraste des colonnes. */
.cons {
  position: relative;
  border-top: 2px solid var(--blanc);
  background: rgba(251, 250, 249, 0.022);
  font-variant-numeric: tabular-nums;
}

.cons__top {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.85rem 1rem 0.8rem;
  border-bottom: 1px solid var(--hair-d);
}
.cons__label {
  font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blanc);
  /* Ne se replie jamais. Le relevé à sa droite change de largeur deux fois par
     dossier ; si l'étiquette pouvait se casser sur deux lignes, la hauteur de
     l'en-tête — donc de tout le panneau, donc de la colonne du héro — sauterait
     à chaque bascule. Le nowrap déplace la contrainte au lieu de la subir. */
  white-space: nowrap; flex-shrink: 0;
}
.cons__st {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris-inv);
  /* Le fondu porte sur le relevé ENTIER, témoin compris. Le champ du libellé
     est aligné à droite, donc son bord gauche se déplace de 65 px entre les
     deux états : le témoin, lui, ne bouge pas, et l'écart qui les sépare
     changeait brusquement. Les faire sortir et rentrer ensemble supprime le
     problème au lieu de le déplacer.

     L'opacité du témoin est pilotée par GSAP pour signaler l'activité ; les
     deux opacités se multiplient, donc le témoin reparaît à son propre niveau
     sans que rien n'ait à être synchronisé. */
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  /* Insécable, comme l'étiquette. Les deux étant nowrap, aucun des deux ne
     peut plus faire varier la hauteur de l'en-tête : la seule variable
     restante est leur cohabitation sur une ligne, réglée par l'empilement
     sous 560 px. */
  white-space: nowrap; flex-shrink: 0;
}
.cons__st.is-swap { opacity: 0; transform: translateY(-4px); }
/* Témoin d'activité : un carré, jamais un point qui clignote. */
.cons__led {
  width: 6px; height: 6px; background: var(--terre);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
}

/* ---- Le libellé du relevé ----
   Deux états de largeurs différentes se succèdent : « EN COURS » et
   « DOSSIER PRÊT ».

   Surtout PAS de champ à largeur réservée ici : il figerait la position du
   témoin, mais au prix de le détacher du libellé court — le carré resterait
   au point qui convient au libellé long, à 65 px du texte. Le témoin doit
   rester collé au texte.

   C'est donc le groupe entier qui est aligné à droite (margin-left: auto),
   contre la même gouttière que la colonne « recalculé » et le total. Son bord
   gauche se déplace d'un état à l'autre, et rien ne se trouve à sa gauche pour
   que ça se remarque — le fondu du groupe couvre le déplacement. */
.cons__st > span { display: inline-block; }

.cons__grid { display: grid; grid-template-columns: 1fr auto auto; }

.cons__hd {
  display: contents;
}
.cons__hd > span {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--hair-d);
  font-size: 0.5625rem; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; color: var(--gris-inv);
}
.cons__hd > span:nth-child(n+2) { text-align: right; }

/* Une ligne = trois cellules, liées par la grille du parent. */
.cons__row { display: contents; }
.cons__row > span {
  padding: 0.52rem 1rem;
  font-size: clamp(0.7rem, 0.66rem + 0.14vw, 0.8125rem);
  border-bottom: 1px solid rgba(53, 48, 43, 0.55);
  color: var(--gris-inv);
  transition: color var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.cons__row > span:nth-child(n+2) { text-align: right; }
.cons__poste { color: var(--blanc); }
.cons__poste b { font-weight: 500; }
.cons__ref {
  display: block;
  font-size: 0.5625rem; letter-spacing: 0.1em;
  color: var(--gris-inv); opacity: 0.75; margin-top: 0.2rem;
  /* Une ligne, toujours. Cinq dossiers se succèdent dans le même panneau :
     si une cause passait sur deux lignes, la hauteur changerait au moment du
     changement de dossier et toute la colonne du héro sauterait. Les libellés
     sont écrits assez court pour ne jamais être tronqués ; la troncature est
     là comme garde-fou, pas comme mise en page. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La rature se trace, elle n'apparaît pas : c'est le geste de la relecture.
   Elle s'accroche à un inline-block dont la hauteur EST celle des glyphes.
   L'ancrer sur la cellule ne marcherait pas : .cons__row est en
   display:contents, donc chaque cellule s'étire à la hauteur de la plus
   haute — celle du poste, sur deux lignes. Un top en pourcentage tomberait
   alors SOUS le nombre, et le trait se lirait comme un soulignement. */
.cons__amt { position: relative; display: inline-block; }
.cons__amt::after {
  content: ""; position: absolute; left: -0.09em; right: -0.09em; top: 50%;
  height: 1px; background: var(--terre);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.cons__now { color: var(--blanc); font-weight: 500; }

/* État « relu » posé par le JS quand le balayage passe la ligne. */
.cons--live .cons__row.is-read > span { color: var(--gris-inv); }
.cons__row.is-read .cons__poste { color: var(--blanc); }
.cons__row.is-hit .cons__was { color: var(--gris-inv); opacity: 0.6; }
.cons__row.is-hit .cons__now { color: var(--terre); }

/* État statique (moteur d'animation absent) : les postes en écart sont déjà
   raturés — rien n'attend un script pour être lisible. */
.cons__row.is-hit .cons__amt::after { transform: scaleX(1); }
/* Sous le balayage, la rature repart de zéro et se trace au passage de la
   ligne, à chaque tour de boucle. */
.cons--live .cons__row.is-hit .cons__amt::after { transform: scaleX(0); }
.cons--live .cons__row.is-hit.is-read .cons__amt::after { transform: scaleX(1); }
/* Sans moteur d'animation, aucune ligne n'est mise en retrait : le tableau
   se lit intégralement. Le retrait n'existe que pendant le balayage. */
.cons--live .cons__row:not(.is-read) > span { opacity: 0.38; }

.cons__foot {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.95rem 1rem 1rem;
  border-top: 1px solid var(--hair-d);
}
.cons__flabel {
  font-size: var(--t-label); letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 500; color: var(--gris-inv);
}
.cons__delta {
  margin-left: auto;
  font-weight: 800; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  letter-spacing: -0.03em; color: var(--terre);
}

/* Le balayage : un filet 1 px qui descend. Piloté par GSAP. */
.cons__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--terre); opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero .hero__in { grid-template-columns: minmax(0, 1fr); }
  /* En colonne unique, le panneau suit déjà le texte : le décalage n'a plus
     de raison d'être et ne ferait que creuser un vide. */
  .hero__panel { transform: none; margin-top: 0; margin-bottom: 0; }
  .hero .hero__zero { height: 80%; opacity: 0.28; }
  .hero .line-mask { overflow: visible; }
}
@media (max-width: 560px) {
  /* Sous cette largeur, l'étiquette et le relevé ne tiennent plus côte à côte :
     « RELECTURE LIGNE À LIGNE » fait ~170 px, pour un panneau qui descend sous
     300 px sur un iPhone SE. Ils sont donc empilés — toujours, pas seulement
     dans l'état long : un empilement conditionnel rejouerait exactement le
     saut de hauteur qu'on veut éviter.

     margin-left: auto est conservé sur le relevé : en colonne, il le pousse à
     droite, donc son bord reste aligné sur la colonne « recalculé » et sur le
     total. */
  .cons__top { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  .cons__hd > span, .cons__row > span { padding-left: 0.6rem; padding-right: 0.6rem; }
  .cons__row > span { font-size: 0.6875rem; }
  .cons__ref { font-size: 0.5rem; letter-spacing: 0.06em; }
  .cons__top, .cons__foot { padding-left: 0.6rem; padding-right: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cons__scan { display: none; }
  .cons__st { transition: none; }
  .cons__st.is-swap { opacity: 1; transform: none; }
  .cons__row > span { opacity: 1 !important; }
  .cons__row.is-hit .cons__amt::after { transform: scaleX(1) !important; }
}