/* ============================================================================
   Bloc « Méthode » — diagramme de Gantt sombre + colonne éditoriale claire.
   ========================================================================= */


/* Le nœud pose 816 + 64 + 488 = 1368, soit 40 de plus que les 1328 de la
   coquille : la maquette déborde sa propre gouttière droite. On garde le
   panneau à sa cote — c'est lui qui porte le dessin — et la colonne de texte
   absorbe l'écart. */
.method {
  display: grid;
  grid-template-columns: minmax(0, 816fr) minmax(0, 448fr);
  gap: var(--sp-64);
  align-items: stretch;
}

/* La colonne éditoriale est écrite en premier dans le DOM (ordre de lecture
   et de tabulation), puis replacée à droite en desktop. */
.method__summary {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-40);
  padding-block-start: var(--sp-40);
}

.method__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.method__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.method__lead {
  inline-size: 320px;
  max-inline-size: 100%;
  color: var(--c-ink-2);
  /* Filet présent dans la maquette mais invisible sur fond crème (5 % de
     #FBF6ED sur #FFFBF4). Reproduit à l'identique, sans impact de layout. */
  box-shadow: inset 1px 0 0 rgb(251 246 237 / 0.05);
}

.method__cta {
  align-self: flex-start;
}

/* ── Visuel ────────────────────────────────────────────────────────────
   Ratio verrouillé sur Figma (816 × 516) : toutes les positions internes
   sont exprimées en pourcentage et restent donc justes à toute échelle. */
.method__visual {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  aspect-ratio: 816 / 516;
  background: var(--c-brown);
  border-radius: var(--r-lg);
  overflow: clip;
  color: var(--c-cream);
  margin: 0;
}

/* La fenêtre de défilement. `overflow-x` natif : la molette horizontale, le
   tactile et le clavier marchent sans une ligne de script — js/smooth.js laisse
   déjà passer les gestes horizontaux. La barre est masquée, la frise se lit
   d'elle-même comme débordante puisque la phase 05 est coupée. */
.method__scroll {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  cursor: grab;
}

.method__scroll::-webkit-scrollbar {
  display: none;
}

.method__scroll[data-glisse] {
  cursor: grabbing;
  scroll-behavior: auto; /* pendant le glissement on suit la main, sans lissage */
  user-select: none;
}

.method__scroll:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: -3px;
  border-radius: var(--r-lg);
}

/* La piste porte les cotes du dessin : 1312 de large pour 816 de panneau, soit
   496 de course. `container-type` est ici et non sur le panneau, pour que les
   `cqi` des phases se mesurent sur la piste. */
.method__piste {
  container-type: inline-size;
  position: relative;
  inline-size: calc(1312 / 816 * 100%);
  block-size: 100%;
}

.timeline {
  /* Cotes Figma, en % de la piste (1312 × 516) : x 36, y 76.43, 1240 de large. */
  position: absolute;
  inset-inline-start: 2.7439%;  /* 36 / 1312 */
  inset-block-start: 14.8120%;  /* 76.43 / 516 */
  inline-size: 94.5122%;        /* 1240 / 1312 */
  inset-block-end: 0;           /* la maquette déborde le cadre (546 de haut), rogné */
}

/* 11 graduations, pas régulier de 124 px = 1/10 de la largeur.
   Une sur quatre est accentuée : ce sont les bornes de mois (0, 4, 8) ; les
   deux dernières (9, 10) prolongent la frise après « Mois 02 ». */
.timeline__line {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--at) * 10%);
  inline-size: 1px;
  background: rgb(255 251 244 / 0.05);
}

.timeline__line[data-accent] {
  background: var(--c-cream-deep);
  opacity: 0.6;
}

.timeline__week {
  position: absolute;
  inset-block-start: 9.5800%; /* 49.43 / 516 */
  transform: translateX(-50%);
  color: var(--c-cream-deep);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Barres d'étape ────────────────────────────────────────────────────
   `backdrop-filter: blur(24px)` figure dans la maquette mais l'aplat
   #312928 est opaque : le flou n'a aucun effet visible et coûterait une
   passe de composition par barre. Écart assumé, documenté dans le rapport. */
/* Calque des barres : il doit couvrir tout le visuel. Sans cette règle, la
   liste retombe à une hauteur nulle — les barres restent bien placées (elles
   sont absolues par rapport au visuel) mais l'observateur d'entrée ne peut
   plus mesurer aucune surface, et la révélation ne se déclenche jamais. */
.method__steps {
  position: absolute;
  inset: 0;
  /* C'est un <ol> : ses marges par défaut (16 px) rétrécissaient le calque et
     faussaient tous les % verticaux des barres. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: absolute;
  inline-size: var(--w);
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  border-radius: var(--r-sm);
  overflow: clip;
}

/* La barre est le bouton : c'est elle qu'on survole et qu'on actionne, et le
   `li` ne sert plus qu'à porter la position et le rognage d'entrée. */
.step__btn {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  inline-size: 100%;
  padding: clamp(10px, 1.0671cqi, 14px); /* 14 / 1312 */
  border: 0;
  border-radius: inherit;
  /* Le flou d'arrière-plan de la maquette : les graduations transparaissent
     sous le cartouche au lieu d'être masquées net. */
  backdrop-filter: blur(24px);
  background: var(--c-brown-light);
  color: var(--c-cream);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  /* La variable est pilotée par ses axes, hérités du body en regular. */
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  text-align: start;
  cursor: pointer;
  transition: background var(--d-micro) var(--e-inout);
}

/* Deux corps distincts dans le cartouche : 12 pour le rang, 16 pour le nom. */
.step__index {
  font-size: clamp(10px, 0.9146cqi, 12px);
}

.step__nom {
  font-size: clamp(13px, 1.2195cqi, 16px);
}

.step__btn:hover,
.step__btn:focus-visible {
  background: var(--c-label-deep);
}

.step__btn:hover .step__index,
.step__btn:focus-visible .step__index {
  opacity: 1;
}

.step__btn:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: -2px;
}

.step__index {
  opacity: 0.6;
  transition: opacity var(--d-micro) var(--e-inout);
}

/* Repères de mois, placés sur la piste et non sur le panneau. */
.timeline__week[data-week="1"] {
  inset-inline-start: 40.5488%; /* 532 / 1312 */
}

.timeline__week[data-week="2"] {
  inset-inline-start: 78.4299%; /* 1029 / 1312 */
}

/* Voile de lecture — dégradé exact du design. */
.method__scrim {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-scrim);
  block-size: 49.6124%; /* 256 / 516 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-20);
  /* Halo du design : ellipse de 509 × 267 centrée sous le titre (215 ; 238.5
     dans une boîte de 816 × 256), pleine jusqu'à 35 % puis fondue. */
  background: radial-gradient(
    ellipse 62.3775% 104.2969% at 26.3480% 93.1641%,
    rgb(42 36 35 / 1) 0%,
    rgb(42 36 35 / 0.9) 35%,
    rgb(42 36 35 / 0) 100%
  );
  pointer-events: none;
}

.method__wordmark {
  white-space: nowrap;
}

.method__process {
  text-align: end;
  color: var(--c-cream-deep);
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Repli < 1024 ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .method {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-40);
  }

  .method__summary,
  .method__visual {
    grid-column: auto;
    grid-row: auto;
  }

  .method__summary {
    padding-block-start: 0;
  }
}

@media (max-width: 640px) {
  /* En dessous, le Gantt à 3 barres devient illisible s'il garde son ratio :
     on l'allonge pour préserver la hauteur de texte des barres. */
  .method__visual {
    aspect-ratio: 5 / 6;
  }

  .method__cta {
    align-self: stretch;
  }

  /* Le conteneur s'étire ; sans ça le bouton resterait à sa largeur propre. */
  .method__cta .btn {
    flex: 1;
  }
}