/* =============================================================================================
   03 Méthode : planning de 4 semaines, à la manière d'un diagramme de Gantt.
   Colonne de gauche (collante) : titre, chapô, bouton (.split, .sec-head : feuilles communes).
   Colonne de droite : échelle des semaines, puis 8 étapes séparées par des filets fins.
   Chaque étape porte sa barre de durée et sa ou ses semaines en toutes lettres (.plan__weeks).
   La barre est placée par --start et --len (style en ligne dans le HTML) sur une grille de
   4 cases, une par semaine : --start est la semaine de départ, --len le nombre de semaines.

   Mise en scène : rail vertical qui se remplit au
   défilement (--progress sur .plan) et étapes qui s'allument (.is-lit : rond plein, barre de
   durée qui se remplit depuis la gauche). Moteur : js/methode.js.
   État posé dans le HTML = mouvement réduit : toutes les étapes allumées, rail plein.

   Remplace les règles .timeline, .step* et .methode__cta de css/sections.css (section
   « 03 Méthode »), qui ne servent plus.
   ============================================================================================= */

/* Colonne du titre un peu plus large que dans les autres sections : « Votre site en ligne »
   tient sur une ligne à 1440, le titre reste sur deux lignes. */
.methode .split__aside { flex-basis: 440px; }
.methode .section-lead { text-wrap: balance; }

.methode__plan {
  --plan-dot: 16px;                                   /* rond de l'étape */
  --plan-gap: clamp(16px, 2.4cqw, 36px);              /* rond → contenu */
  --plan-pad: clamp(20px, calc(0.6cqw + 17px), 26px); /* haut et bas d'une étape */
  --plan-weeks: 112px;                                /* colonne « Semaines 2 et 3 » */
  --plan-weeks-gap: var(--space-4);
  --plan-track: 8px;                                  /* épaisseur de la barre */
  --plan-title-lh: 1.15;
  flex: 1.6 1 560px;
  min-width: 0;
}

/* ---- Échelle des semaines, alignée sur les barres ---- */
.plan-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 calc(var(--plan-weeks) + var(--plan-weeks-gap)) 0 calc(var(--plan-dot) + var(--plan-gap));
  padding-bottom: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan-scale__week {
  padding-left: var(--space-2);
  border-left: 1px solid var(--line2);
  white-space: nowrap;
}

/* ---- Liste des étapes, rail et trait de progression ---- */
.plan {
  position: relative;
  isolation: isolate;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Rail (::before) et trait de progression (::after), du premier rond jusqu'au bas de la liste. */
.plan::before,
.plan::after {
  content: "";
  position: absolute;
  left: calc(var(--plan-dot) / 2 - 1px);
  top: calc(var(--plan-pad) + var(--fs-h3) * var(--plan-title-lh) / 2);
  bottom: var(--plan-pad);
  width: 2px;
  z-index: -1;
  background: var(--line);
}
.plan::after {
  background: var(--acc);
  transform-origin: top center;
  transform: scaleY(var(--progress, 1));
}

.plan__step {
  display: grid;
  grid-template-columns: var(--plan-dot) minmax(0, 1fr);
  column-gap: var(--plan-gap);
}
.plan__dot {
  width: var(--plan-dot);
  height: var(--plan-dot);
  margin-top: calc(var(--plan-pad) + (var(--fs-h3) * var(--plan-title-lh) - var(--plan-dot)) / 2);
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line2);
  box-shadow: 0 0 0 5px var(--bg);
  transform: scale(0.75);
  transition: background 250ms, border-color 250ms, transform 450ms var(--ease-out);
}
.plan__step.is-lit .plan__dot {
  background: var(--acc);
  border-color: var(--acc);
  transform: scale(1);
}

.plan__body {
  min-width: 0;
  padding: var(--plan-pad) 0;
  border-top: 1px solid var(--line);
}
.plan__step:last-child .plan__body { border-bottom: 1px solid var(--line); }

.plan__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--plan-title-lh);
  letter-spacing: var(--ls-card);
  word-spacing: 0.1em;
  text-wrap: balance;
}

/* Barre de durée : 4 semaines, séparées par un filet du fond de 2 px (l'écart de la grille). */
.plan__gantt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--plan-weeks);
  column-gap: var(--plan-weeks-gap);
  align-items: center;
  margin: var(--space-2) 0 0;
}
.plan__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2px;
  height: var(--plan-track);
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--sunk) 0 calc(25% - 1.5px), var(--bg) 0 calc(25% + 0.5px),
    var(--sunk) 0 calc(50% - 1px), var(--bg) 0 calc(50% + 1px),
    var(--sunk) 0 calc(75% - 0.5px), var(--bg) 0 calc(75% + 1.5px),
    var(--sunk) 0); /* filets calés sur les écarts de 2 px de la grille */
}
.plan__bar {
  position: relative;
  overflow: hidden;
  grid-column: var(--start) / span var(--len);
  border-radius: 999px;
  background: var(--line);
}
.plan__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--acc);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out) 150ms;
}
.plan__step.is-lit .plan__bar::after { transform: scaleX(1); }

/* Semaine(s) de l'étape, en toutes lettres : lue aussi par les lecteurs d'écran (la barre est masquée). */
.plan__weeks {
  font-size: var(--fs-small);
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan__text {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  color: var(--muted);
  text-wrap: pretty;
}
/* Livrable : à la suite du texte, à l'encre pleine, pour se lire d'un coup d'œil. */
.plan__deliverable { display: inline-block; color: var(--ink); } /* passe à la ligne d'un bloc, jamais coupé après « Livrable : » */
.plan__deliverable-label { font-weight: 700; }

/* Mobile : « S1 » au lieu de « Semaine 1 » sur l'échelle ; colonne des semaines plus serrée. */
@container page (max-width: 559px) {
  .methode__plan { --plan-weeks-gap: var(--space-3); }
  .plan-scale__word { display: none; }
  .plan-scale__week::before { content: "S"; }
}

/* Pendant l'initialisation (hors mouvement réduit), les étapes passent de l'état posé (allumé)
   à l'état éteint sans transition visible. */
.plan--instant .plan__dot,
.plan--instant .plan__bar::after {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .plan__dot,
  .plan__bar::after { transition: none; }
}