/* ==========================================================================
   D&L IMMOBILIER — V4, LE SUPPLÉMENT D'ANIMATION
   --------------------------------------------------------------------------
   Ugo : « je trouve que ça a l'air figé ». Le diagnostic : la V3 animait
   surtout l'ARRIVÉE des éléments (révélations une fois, puis plus rien).
   Une fois une section révélée, l'écran redevenait une image fixe.

   Ce qu'on ajoute est donc du mouvement CONTINU ou LIÉ AU DÉFILEMENT, pas
   d'autres apparitions :
     - un fil de progression de lecture,
     - un décalage du héros au défilement (parallaxe),
     - les lignes de biens qui se révèlent en cascade,
     - les filets de section qui se tracent,
     - la bande des territoires qui dérive doucement,
     - le survol des lignes qui déplace le numéro.

   Rien ne clignote et rien ne rebondit : le registre reste éditorial.
   Tout est désactivé sous `prefers-reduced-motion`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FIL DE PROGRESSION DE LECTURE
   Un cheveu de laiton en haut de l'écran. C'est le seul élément qui bouge
   en permanence, et il dit quelque chose d'utile : où l'on en est.
   -------------------------------------------------------------------------- */
.progression{
  position:fixed; left:0; top:0; z-index:140;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--laiton), #c8ab77);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   2. PARALLAXE DU HÉROS
   Le média descend moins vite que le texte : la profondeur naît de l'écart.
   Les variables sont écrites par le JS.
   -------------------------------------------------------------------------- */
.heros__media{ will-change:transform }
.heros[data-heros]{ --dec:0px; --fondu:1 }
.heros__media video, .heros__media img{ transform:scale(1.06) translateY(var(--dec)) }
.heros__bas{ opacity:var(--fondu) }

/* --------------------------------------------------------------------------
   3. LES LIGNES DE BIENS SE RÉVÈLENT EN CASCADE
   Elles arrivaient toutes ensemble, ce qui donnait un bloc inerte.
   Le décalage est porté par une variable pour rester lisible.
   -------------------------------------------------------------------------- */
.liste .ligne{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--rang, 0) * .07s);
}
.liste .ligne.entre{ opacity:1; transform:none }

/* Le numéro glisse au survol : un détail, mais c'est ce qui fait qu'une
   ligne semble vivante quand la souris la traverse. */
.ligne__numero{ transition:transform .5s cubic-bezier(.2,.7,.3,1), color .5s ease }
.ligne:hover .ligne__numero{ transform:translateX(6px); color:var(--laiton) }

/* --------------------------------------------------------------------------
   4. LES FILETS DE SECTION SE TRACENT
   Chaque `.caps` reçoit un trait qui se dessine quand la section entre.
   -------------------------------------------------------------------------- */
.caps{ position:relative }
.caps::after{
  content:""; position:absolute; left:0; bottom:-12px;
  height:1px; width:52px; background:var(--laiton);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.7,.3,1) .15s;
}
[data-reveler].vu .caps::after,
.fiche.vu .caps::after{ transform:scaleX(1) }
/* Le chapô de la fiche n'a pas de section parente : on le trace à l'ouverture. */
.fiche__couv-texte .caps::after{ bottom:-9px }

/* --------------------------------------------------------------------------
   5. LA BANDE DES TERRITOIRES DÉRIVE
   Décalage horizontal très léger, piloté par le défilement. C'est le seul
   endroit où l'on se permet un mouvement latéral : la bande s'y prête.
   -------------------------------------------------------------------------- */
.territoires{ --derive:0px }
.territoire{ transform:translateX(var(--derive)); transition:transform .1s linear }
.territoire__mono{ transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease }
.territoire:hover .territoire__mono{ transform:translateY(-6px); opacity:1 }

/* --------------------------------------------------------------------------
   6. LES MÉTIERS
   Le filet du bas se tend au survol, au lieu de rester inerte.
   -------------------------------------------------------------------------- */
.metier{ position:relative }
.metier::after{
  content:""; position:absolute; left:0; bottom:-1px;
  height:1px; width:100%; background:var(--laiton);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.metier:hover::after{ transform:scaleX(1) }

/* --------------------------------------------------------------------------
   7. ON RESPECTE LE RÉGLAGE SYSTÈME
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .progression{ display:none }
  .heros__media video, .heros__media img{ transform:none }
  .heros__bas{ opacity:1 }
  .liste .ligne{ opacity:1; transform:none; transition:none }
  .caps::after{ transform:scaleX(1); transition:none }
  .territoire{ transform:none }
  .metier::after{ display:none }
}