/* =========================================================
   DESIGNER BY NATURE — 10. PROCESSUS
   Surface noire. Cinq étapes 01 → 05 sur une timeline horizontale.

   UN SEUL RÉGIME, PARTOUT
   La section est épinglée et la piste — plus large que l'écran — se
   déplace latéralement au fil du défilement vertical. Le téléphone se
   parcourait auparavant au doigt : le geste était naturel, mais le
   rendu n'était pas celui du bureau. Seule la course diffère.
   ========================================================= */

.processus {
  position: relative;
  background-color: var(--surface);
  color: var(--fg);
}

.processus__pin {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-bloc);
  overflow: hidden;
}

/* ---------- EN-TÊTE ---------- */

.processus__entete { position: relative; z-index: 2; }

.processus__entete .filet { transform-origin: left center; }

/* Masques de mots créés par `decouperMots`. */
.processus__entete .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .16em;
  margin-block: -.16em;
}

.processus__entete .mot__i {
  display: inline-block;
}

/* ---------- PISTE ---------- */

.processus__cadre {
  position: relative;
  width: 100%;
}

.processus__piste {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--gouttiere);
  width: max-content;

  /* La largeur d'étape est déclarée ici, sur la piste, et non sur
     l'étape : le rail en a besoin pour calculer où se trouve le dernier
     anneau, et une variable posée sur un enfant lui serait invisible. */
  --largeur-etape: min(72vw, 18rem);
  --rayon-anneau: 1.625rem;

  /* La première étape s'aligne sur la marge du site ; la dernière garde
     la même respiration à droite. Sans ce padding, la piste commencerait
     collée au bord de l'écran. */
  padding-inline: var(--marge);

  /* CENTRÉE QUAND ELLE TIENT, ALIGNÉE À GAUCHE QUAND ELLE DÉBORDE
     Avec cinq étapes la piste dépassait toujours du cadre : la marge
     automatique n'avait aucun effet et le parcours commençait au bord
     gauche, ce qui est juste. Ramenée à trois — le nombre réel d'étapes
     du studio — elle mesure 1337 px pour un cadre de 1425, et restait
     collée à gauche : 59 px de vide d'un côté, 147 de l'autre. Le
     déséquilibre se voyait tout de suite.

     Une marge automatique répond aux deux cas sans condition : sur une
     largeur « max-content » plus petite que son cadre elle centre, sur une
     plus grande elle ne peut rien et la piste reste alignée à gauche. Le
     rail est posé DANS la piste : il se déplace avec elle et reste calé
     sur les anneaux. */
  margin-inline: auto;
}

/* ---------- RAIL ---------- */
/* Le rail court derrière les anneaux, d'un centre à l'autre. Il est
   posé dans la piste et non dans le cadre : il doit se déplacer avec
   elle, sinon la ligne resterait fixe pendant que les étapes glissent. */

.processus__rail,
.processus__progres {
  position: absolute;
  /* D'UN CENTRE D'ANNEAU À L'AUTRE
     Les anneaux sont alignés à GAUCHE de leur étape, pas au centre.
     Le rail partait pourtant d'une demi-largeur d'étape : il commençait
     166 px après le premier anneau, qu'il ne touchait donc jamais.
     Il part maintenant du rayon de l'anneau, et s'arrête à une largeur
     d'étape moins ce même rayon — c'est-à-dire exactement au centre du
     cinquième. */
  left: calc(var(--marge) + var(--rayon-anneau));
  right: calc(var(--marge) + var(--largeur-etape) - var(--rayon-anneau));

  /* Mi-hauteur de l'anneau : le rail relie des centres, il n'effleure
     pas des bords. Toute retouche du diamètre se répercute ici. */
  top: var(--rayon-anneau);
  height: var(--trait);
}

.processus__rail { background-color: var(--rule); }

.processus__progres {
  background-color: var(--or);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- ÉTAPE ---------- */

.etape {
  position: relative;
  flex: 0 0 auto;
  width: var(--largeur-etape);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

/* ---------- ANNEAU ---------- */
/* Le chiffre est dans la police de titrage, à la même taille que les
   numéros de projet : c'est le seul chiffre visible de la section, il
   doit porter. Un caractère de dix pixels perdu dans un cercle de
   quarante laissait un anneau vide — un point, pas une étape. */

.etape__anneau {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--rayon-rond);

  /* Fond opaque : le rail passe dessous, sans lui la ligne traverserait
     le chiffre. */
  background-color: var(--noir);
  color: rgba(182, 154, 104, .55);
  transition:
    color var(--dur-moyen) var(--ease-net),
    transform var(--dur-moyen) var(--ease-sortie);
}

/* Deux cercles concentriques plutôt qu'une simple bordure : le cercle
   extérieur reste fin et discret, l'intérieur ne s'allume qu'à l'étape
   courante. C'est ce décalage qui donne à l'anneau son épaisseur
   optique sans l'alourdir. */
.etape__anneau::before,
.etape__anneau::after {
  content: "";
  position: absolute;
  border-radius: var(--rayon-rond);
  transition:
    border-color var(--dur-moyen) var(--ease-net),
    opacity var(--dur-moyen) var(--ease-net),
    transform var(--dur-moyen) var(--ease-sortie);
}

.etape__anneau::before {
  inset: 0;
  border: var(--trait) solid rgba(182, 154, 104, .3);
}

.etape__anneau::after {
  inset: .3125rem;
  border: var(--trait) solid var(--or);
  opacity: 0;
  transform: scale(.86);
}

.etape__num {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
}

/* Étape franchie : l'anneau s'affirme, sans se remplir. Un remplissage
   ferait de chaque étape passée un point d'attention concurrent de
   l'étape courante. */
.etape[data-passee="true"] .etape__anneau { color: var(--or); }
.etape[data-passee="true"] .etape__anneau::before {
  border-color: rgba(182, 154, 104, .7);
}

/* Étape courante : le cercle intérieur s'ouvre, l'anneau grandit
   légèrement et prend un halo. Le seul élément mis en avant à un
   instant donné. */
.etape[data-actif="true"] .etape__anneau {
  color: var(--blanc-casse);
  transform: scale(1.08);
}

.etape[data-actif="true"] .etape__anneau::before {
  border-color: var(--or);
  box-shadow: 0 0 0 7px rgba(182, 154, 104, .1);
}

.etape[data-actif="true"] .etape__anneau::after {
  opacity: 1;
  transform: scale(1);
}

/* Pleinement lisible par défaut. L'atténuation des étapes non courantes
   n'est appliquée que lorsque le JavaScript a pris la main sur la
   section — sans lui, personne ne viendrait relever l'étape courante et
   les cinq resteraient à moitié effacées. */
.etape__corps {
  opacity: 1;
  transition: opacity var(--dur-moyen) var(--ease-net);
}

[data-processus-pilote] .etape__corps { opacity: .45; }
[data-processus-pilote] .etape[data-passee="true"] .etape__corps { opacity: .7; }
[data-processus-pilote] .etape[data-actif="true"] .etape__corps { opacity: 1; }

.etape__titre {
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Même correction que pour les services : dix pixels conviennent à un
   compteur, pas à une phrase qu'on lit. */
.etape__texte {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.7;
  color: var(--muted);
  max-width: 26ch;
}

/* ---------- COMPTEUR ---------- */

.processus__compteur {
  position: relative;
  z-index: 2;
  padding-inline: var(--marge);
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--or);
  line-height: 1;
}

.processus__total {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--muted);
}

/* ---------- BUREAU : SECTION ÉPINGLÉE ---------- */

@media (min-width: 64rem) {

  /* Aucune hauteur imposée : c'est ScrollTrigger qui réserve la course
     verticale, calculée à partir du débordement réel de la piste. Une
     hauteur écrite ici serait une devinette, et le rapport entre
     défilement vertical et déplacement latéral dépendrait de la
     largeur de l'écran. */
  .processus { height: auto; }

  .processus__pin { height: 100svh; }

  .processus__piste {
    --largeur-etape: clamp(20rem, 27vw, 28rem);

    /* ÉTALÉES SUR TOUTE LA LARGEUR, PAS CENTRÉES
       Les trois étapes du studio mesurent ensemble 1337 px pour un cadre
       de 1425 : la piste restait collée à gauche, 59 px de vide d'un côté
       contre 147 de l'autre. Les centrer corrigeait le déséquilibre mais
       laissait 103 px de part et d'autre, sous un titre de section resté
       aligné sur la marge gauche — la piste paraissait alors flotter.

       Elles occupent maintenant la largeur du cadre : la première
       s'aligne sur le titre, la dernière sur la marge droite, et le vide
       part dans les intervalles plutôt que dans les bords. Le rail suit
       sans retouche : il se cale sur le rayon d'anneau et sur la largeur
       d'étape, deux valeurs que ce changement ne touche pas.

       Quand la piste déborde vraiment — plus d'étapes, écran plus
       étroit — il n'y a plus de vide à distribuer et les étapes
       reprennent leur défilement latéral. */
    width: 100%;
    justify-content: space-between;
  }
}

/* ---------- SOUS 1024 PX ---------- */

/* Sous 1024 px, MÊME comportement qu'au bureau : la section est
   épinglée et la piste se déplace au défilement vertical. Elle se
   parcourait auparavant au doigt, horizontalement — un geste naturel
   sur téléphone, mais un rendu différent de celui du bureau. */
@media (max-width: 63.99rem) {
  .processus { height: auto; }

  .processus__pin {
    height: 100svh;
    justify-content: center;
    padding-block: calc(var(--h-nav) + var(--sp-4)) var(--sp-6);
    gap: var(--sp-6);
  }

  .processus__cadre { overflow: hidden; }

  /* Une seule étape tient à l'écran : les voisines peuvent s'effacer
     franchement, comme au bureau. */
  [data-processus-pilote] .etape__corps { opacity: .45; }
}