/* ============================================================================
   REKOV — 03 · la séquence en rail vertical
   ----------------------------------------------------------------------------
   Remplace cinq colonnes côte à côte sur un rail horizontal. Deux défauts que
   cette disposition corrigeait mal :

   · La chaîne ne se lisait pas comme une chaîne. Cinq colonnes alignées se
     lisent comme cinq rubriques ; rien ne disait que l'une suit l'autre.
   · À 150 px de piste, la mesure tombait sous 20 signes et chaque description
     s'étirait sur dix lignes — un pavé qu'on parcourt sans le lire.

   La séquence descend donc : c'est le sens de lecture naturel d'un
   enchaînement, et cela rend au texte une mesure d'environ 70 signes. Le rail
   reste, à la verticale, avec un nœud par étape et le même remplissage au
   scrub du scroll.

   Ce fichier est chargé après style.css et en écrase la disposition
   horizontale. Les noms de classes sont conservés : main.js continue de
   piloter #mt-fill et de basculer .is-on sur chaque .mt-step.
============================================================================ */

/* Position du nœud sur l'axe vertical : le padding de l'étape, plus la
   demi-hauteur d'une ligne de son numéro. Une seule variable, pour que le
   rail, le remplissage et les nœuds ne puissent pas se désaligner. */
.mt-track {
  --mt-pad: clamp(1.4rem, 3vw, 2.2rem);
  --mt-node: calc(var(--mt-pad) + 0.42em);
  --mt-rail: clamp(1.6rem, 4vw, 3rem);
  position: relative;
}
/* Seule la colonne de texte se retire : le rail occupe la gouttière ainsi
   libérée, et les filets d'étape gardent la largeur du conteneur. */
.mt-step__l { padding-left: var(--mt-rail); }

/* Le rail n'est pas un filet unique mais un SEGMENT PAR ÉTAPE, tiré de son
   nœud jusqu'au nœud suivant. Un filet unique ne peut pas s'arrêter au dernier
   nœud : bottom se mesure depuis le bas de la piste, et la distance entre le
   dernier nœud et ce bas vaut « hauteur de la dernière étape moins --mt-node »
   — une valeur qui dépend du contenu et qu'aucune constante n'exprime. Le
   filet dépassait donc de 63 px sous le dernier nœud.

   height: 100% d'une étape vaut exactement la distance d'un nœud au suivant,
   quelles que soient les hauteurs : le rail devient juste par construction.
   Le dernier n'en porte pas — il n'a pas de suivant. */
.mt-step:not(:last-child)::after {
  content: ""; position: absolute;
  top: var(--mt-node); height: 100%; width: 1px;
  left: 0;
  background: var(--rule);
  pointer-events: none;
}

/* Le remplissage reste un seul élément : main.js le pilote en scaleY au scrub
   du scroll. Sa hauteur doit donc couvrir du premier au dernier nœud, soit la
   piste entière moins la hauteur de la dernière étape — c'est --mt-last, posée
   par le JS. Sans JS le filet est à scaleY(0), donc invisible : la valeur de
   repli à 0px ne se voit jamais. */
.mt-track__fill {
  position: absolute;
  top: var(--mt-node); bottom: auto;
  height: calc(100% - var(--mt-last, 0px));
  left: 0; right: auto; width: 1px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: 50% 0;
  /* Le remplissage précède .mt-steps dans le DOM et les deux sont à z-index
     auto : les segments gris se peignaient donc PAR-DESSUS l'orange et le
     masquaient entièrement. Il avance d'un cran, et les nœuds passent à 2
     pour rester devant lui — la progression s'arrête dans le nœud, elle ne
     le recouvre pas. */
  z-index: 1;
}

.mt-steps { display: block; grid-template-columns: none; gap: 0; }

.mt-step {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding: var(--mt-pad) 0;
  border-bottom: 1px solid var(--rule);
}
.mt-step:first-child { border-top: 1px solid var(--rule); }

/* Le nœud remplace le repère vertical qui montait sur le rail horizontal.
   Il grandit et passe en accent quand le filet l'a dépassé — même signal,
   autre axe.

   La hauteur est redéclarée dans CHAQUE état : style.css impose height: 20px
   à .mt-step.is-on::before, hérité du repère vertical du rail horizontal. Sans
   la redéclarer, le nœud actif devenait une barre de 7 × 20 px dont le centre
   tombait 6,5 px sous le rail. */
.mt-step::before {
  content: ""; position: absolute;
  top: calc(var(--mt-node) - 3.5px);
  left: -3px;
  width: 7px; height: 7px;
  background: var(--rule);
  /* Le nœud passe devant le segment ET devant le remplissage. Les deux
     premiers sont des pseudo-éléments de la MÊME étape, et ::after peint
     après ::before : sans cela, le filet de liaison traverse le carré au
     lieu d'y aboutir. */
  z-index: 2;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.mt-step.is-on::before {
  height: 7px;
  background: var(--accent);
  transform: scale(1.3);
}

/* Le rang et la promesse sur une même ligne, séparés par un filet vertical :
   l'étiquette ne pèse plus rien dans la colonne, et le couple se lit d'un
   coup. Le filet plutôt qu'un encadré — c'était le seul élément de la page à
   enfermer du texte dans une boîte, partout ailleurs le site sépare au trait. */
.mt-step__hd {
  /* baseline, pas center : les deux boîtes n'ont pas la même hauteur — le
     filet gauche de l'étiquette dépasse son texte — donc les centrer décale
     les deux lignes de texte l'une par rapport à l'autre. Sur la baseline,
     c'est l'écriture qui s'aligne, pas les boîtes. */
  display: flex; align-items: baseline; gap: 0.7em;
  margin-bottom: 0.5rem;
}
.mt-step__n {
  font-family: var(--fm); font-weight: 400;
  font-size: 0.5625rem; letter-spacing: 0.14em;
  color: var(--fg-2);
  transition: color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__n { color: var(--accent); }

/* Aucun titre ne doit passer sur deux lignes : la colonne de gauche fait
   ~430 px au régime desktop, donc « Remboursement » y tient largement — le
   nowrap ne coûte rien et garantit l'alignement des cinq. */
.mt-step__t {
  margin: 0 0 0.7rem;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--fg-2); white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__t { color: var(--fg); }

.mt-step__tag {
  font-family: var(--fm); font-weight: 400;
  font-size: 0.5625rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fg-2);
  /* border: 0 avant le filet gauche — style.css pose un `border` raccourci sur
     les quatre côtés, qu'une déclaration `border-left` seule ne défait pas :
     l'encadré survivait sur trois côtés. Même raison pour le padding. */
  border: 0; border-left: 1px solid var(--rule);
  margin-top: 0; padding: 0 0 0 0.7em;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__tag { border-left-color: var(--accent); color: var(--fg); }

/* ---- La lisibilité des descriptions ----
   La cause première du délavé était la mesure ; elle est réglée par la
   disposition. Les trois réglages typographiques restent utiles : graisse 500
   parce que le clair « bave » sur fond sombre et amincit le trait, corps 15 px,
   interlignage 1,65. */
.mt-step__d {
  margin: 0;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.65;
  color: var(--fg-2);
}
/* Une seule emphase par étape, en blanc chaud. Pas en accent : la terre claire
   est prise par le nœud, le numéro et le titre de l'étape 04 ; l'ajouter cinq
   fois dans le corps du texte diluerait ce qui distingue cette étape. */
/* Un SEUL accent par étape : l'em marqué .k, en 800 et souligné d'un filet
   accent. Les autres passent en blanc simple. Deux accents dans un même
   paragraphe divisent l'attention — l'œil ne sait plus quel mot compte.

   Une classe et non :first-of-type : l'accent ne tombe pas toujours sur le
   premier mot mis en relief — à l'étape 05 c'est la chute qui porte, pas le
   membre de phrase qui la précède. Un sélecteur positionnel ne peut pas
   exprimer ce choix, une classe le rend lisible dans le markup.

   Le soulignage plutôt qu'une couleur de texte : le mot garde sa pleine
   lisibilité (blanc sur encre, pas terre sur encre), et l'accent devient un
   geste de relecture plutôt qu'une teinte. text-decoration et non
   border-bottom, pour que le filet suive le texte quand il passe à la ligne. */
.mt-step__d em { font-style: normal; color: var(--fg); }
.mt-step__d em.k {
  font-weight: 800; letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---- Le chapeau ----
   Les trois clauses d'engagement passent en accent. Elles portent l'argument
   de la section ; noyées dans le gris, elles se lisaient comme du remplissage.
   em remis en romain : c'est un poids et une couleur, pas une citation. */
.mt__head .lead em { font-style: normal; font-weight: 500; color: var(--accent); }

/* ---- L'étape qui porte l'argument ----
   La livraison est l'étape la plus différenciante du site : c'est la qualité
   du dossier remis — chiffré, sourcé, prêt à envoyer — qui sépare Rekov d'un
   logiciel d'audit. Elle se signale au scan, avant toute lecture, par la
   seule couleur — le nœud est déjà en accent au repos, et le titre ne
   rejoint jamais le blanc des autres. */
.mt-step--key::before { background: var(--accent); }
.mt-step--key .mt-step__n { color: var(--accent); }
.mt-step--key .mt-step__t,
.mt-step--key.is-on .mt-step__t { color: var(--accent); }
.mt-step--key .mt-step__tag { border-left-color: var(--accent); color: var(--accent); }

/* ---- Le contenu du dossier ----
   Ces quatre lignes détaillent ce que le client reçoit à la livraison :
   chaque écart chiffré, sa source (clause ou indice), sa pièce, le total à
   réclamer. C'est la preuve, en quatre points, que le dossier est « prêt à
   envoyer » et non une liste à retravailler — l'argument central du nouveau
   positionnement.

   Deux colonnes ici, contrairement au rail horizontal où la piste était trop
   étroite : la largeur retrouvée permet de les poser côte à côte plutôt que
   d'allonger l'étape. */
.esc {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.4rem;
  margin-top: 1.1rem;
}
.esc__k {
  grid-column: 1 / -1;
  font-family: var(--fm); font-size: 0.5rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.1rem;
}
.esc__c { border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.esc__c + .esc__c { margin-top: 0; }
.esc__v { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--fg-2); }

@media (max-width: 860px) {
  /* En colonne unique, les deux blocs se retirent de la même valeur pour
     rester alignés l'un sur l'autre à droite du rail. */
  .mt-track { --mt-rail: 1.4rem; }
  .mt-step { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .mt-step__r { padding-left: var(--mt-rail); }
  .esc { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================================
   LE DOSSIER LIVRÉ — étape 04
   Une chemise et trois feuillets qui dépassent, construits uniquement en
   rectangles, aplats de la palette et filets : chemise en hairline sombre,
   feuillets en encre, onglet découpé dans le bord supérieur. Rayon 0,
   aucune ombre, aucun dessin vectoriel. La terre brûlée ne marque que le
   feuillet d'écart confirmé et le tampon.
============================================================================ */

.dos {
  position: relative;
  margin-top: clamp(1.3rem, 3vw, 2rem);
  aspect-ratio: 16 / 9;
  max-width: 28rem;
}

/* ---- Les feuillets : lignes de texte suggérées par des filets ---- */
.sh {
  position: absolute;
  background: var(--ink);
  border: 1px solid var(--hair-d);
  border-top-color: var(--fg-2);
  transform-origin: bottom center;
}
.sh__l { position: absolute; left: 8%; right: 8%; height: 1px; background: var(--hair-d); }
.sh__l:nth-of-type(1) { top: 14%; }
.sh__l:nth-of-type(2) { top: 24%; right: 38%; }
.sh__l:nth-of-type(3) { top: 34%; }
.sh__l:nth-of-type(4) { top: 44%; right: 24%; }
.sh__l:nth-of-type(5) { top: 54%; }
.sh--hit { border-left: 2px solid var(--accent); }

.sh:nth-child(1) { left: 3%; right: 32%; top: 6%; bottom: 52%; transform: rotate(-2.4deg); }
.sh:nth-child(2) { left: 17%; right: 17%; top: 2%; bottom: 52%; }
.sh:nth-child(3) { left: 32%; right: 3%; top: 6%; bottom: 52%; transform: rotate(2.4deg); }

/* ---- La chemise ---- */
.fold {
  position: absolute; left: 0; right: 0; bottom: 0; top: 48%;
  background: var(--hair-d);
  border: 1px solid var(--fg-2);
}
.fold__tab {
  position: absolute; top: -9%; left: -1px; width: 34%; height: 9%;
  background: var(--hair-d);
  border: 1px solid var(--fg-2); border-bottom: 0;
}

/* L'étiquette en deux niveaux : l'objet, puis son contenu. */
.fold__k {
  position: absolute; left: 1.1rem; bottom: 1rem;
  max-width: 58%; color: var(--fg);
}
.fold__k b { display: block; font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.025em; }
.fold__k i {
  display: block; margin-top: 0.25rem; font-style: normal;
  font-family: var(--fm); font-size: 0.5625rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-2);
}

/* Le tampon : un cachet encreur réduit à sa géométrie — double filet et
   capitales espacées, apposé de travers sur le bord de la chemise. */
.stamp {
  position: absolute; right: 5%; bottom: 18%;
  padding: 0.3rem 0.55rem 0.26rem;
  border: 1.5px solid var(--accent);
  outline: 1px solid var(--accent); outline-offset: 1.5px;
  color: var(--accent);
  font-weight: 800; font-size: 0.5625rem; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
  transform: rotate(-7deg); transform-origin: bottom right;
}

@media (max-width: 620px) {
  .dos { max-width: 100%; }
  .fold__k { left: 0.8rem; bottom: 0.8rem; max-width: 62%; }
  .fold__k b { font-size: 0.8125rem; }
}