/* Méthode (v9) : le parcours. Un trait unique relie les cinq étapes et se dessine au défilement ;
   chaque étape passe de l’éteint à l’encre quand le trait l’atteint. Voir docs/PLAN.md, 24.
   Le tracé et la place des blocs sont calculés par js/sections/methode.js : aucune coordonnée n’est
   écrite ici. Ce fichier ne tient que l’apparence, et la mise en page de secours, sans JavaScript. */

.methode {
  padding-block: var(--pas);
  background: var(--lavis-violet);
}

.methode__titre {
  max-width: 16ch;
}

.methode__chapo {
  max-width: 34em;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  line-height: 1.4;
  color: var(--texte);
}

/* Le cadre : le repère commun du trait et des blocs. Sa largeur est bornée, sinon les blocs
   s’étireraient jusqu’à devenir illisibles et le trait n’aurait plus de virages à faire. */

.methode__parcours {
  margin-top: clamp(56px, 8vw, 112px);
}

.methode__cadre {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
}

.methode__trait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.methode__ligne {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* L’épaisseur ne suit pas l’échelle : le trait reste le même partout. */
  vector-effect: non-scaling-stroke;
}

.methode__etapes {
  position: relative;
  margin: 0;
  /* Le retrait laisse la place au point, qui tient lieu de puce tant que le parcours n’est pas composé. */
  padding: 0 0 0 26px;
  list-style: none;
}

.methode__etape {
  position: relative;
  max-width: 36em;
}

.methode__etape + .methode__etape {
  margin-top: clamp(96px, 16vw, 184px);
}

/* Le point : l’endroit où le trait s’arrête pour poser une étape. Il est posé sur la courbe par le
   script ; sans JavaScript, il tient lieu de puce devant le numéro. */
.methode__noeud {
  position: absolute;
  top: .1em;
  left: -22px;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  background: var(--lavis-violet);
}

.methode__rang {
  margin: 0 0 10px;
  font-family: var(--grotesque);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--encre);
}

.methode__nom {
  margin: 0;
  font-size: clamp(1.75rem, 2.9vw, 3rem);
  font-variation-settings: "opsz" 48;
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--encre);
}

.methode__description {
  margin: 14px 0 0;
  color: var(--texte);
}

/* L’annotation : la petite voix qui commente, en italique du site. L’italique suffit à la distinguer :
   en --secondaire, elle tombait à 2,67:1 sur le lavis violet, sous le minimum de 4,5:1 du texte courant. */
.methode__note {
  margin: 14px 0 0;
  font-size: var(--t-texte);
  font-variation-settings: "opsz" 20;
  font-style: italic;
  color: var(--texte);
}

.methode__jalon {
  margin: 18px 0 0;
  color: var(--texte);
}

.methode__fin {
  max-width: 40em;
  margin-top: clamp(72px, 10vw, 144px);
  font-size: var(--t-grand);
  font-variation-settings: "opsz" 28;
  font-weight: 380;
  line-height: 1.4;
  color: var(--texte);
}

/* Une fois le parcours composé, les blocs quittent le fil du texte : le script les accroche aux
   points calculés sur la courbe. Tant qu’il ne l’a pas fait, et sans JavaScript du tout, la liste
   reste une liste, lisible d’emblée et à pleine encre. La bascule tient à la classe posée par le
   script après une mesure réussie : si elle manque, rien ne se décroche. */

.est-compose .methode__etapes {
  position: absolute;
  inset: 0;
  padding-left: 0;
}

.est-compose .methode__etape {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transition: opacity .5s var(--courbe-sortie);
}

.est-compose .methode__etape + .methode__etape {
  margin-top: 0;
}

.est-compose .methode__noeud {
  left: 0;
  top: 0;
}

.est-compose .methode__etape:not(.est-atteinte) {
  opacity: .34;
}

@media (prefers-reduced-motion: reduce) {
  .est-compose .methode__etape {
    opacity: 1;
    transition: none;
  }
}