/* ============================================================
   NOTRE MÉTHODE — « Le studio la nuit »
   ------------------------------------------------------------
   Direction : le diorama du studio passe en FOND (assombri, désaturé),
   et les cinq étapes montent devant lui comme des plaques de verre
   éclairées. Le « fil » du titre devient un objet : un trait vertical
   qui se remplit d'un dégradé cuivre → turquoise au fil du défilement,
   avec un jeton par étape. Toute la section est sombre, ce qui crée
   un temps fort dans une page claire.

   Le rythme : chaque carte est décalée en escalier (translateX), et
   sa plaque de verre se soulève au survol. Les numéros en filigrane
   donnent la profondeur. Aucune de ces animations ne touche le layout :
   uniquement transform, opacity et background-position.
   ============================================================ */

.method {
  position: relative;
  isolation: isolate;
  overflow: clip;                       /* le fond reste dans la section */
  background: #100c09;
  color: var(--paper);
  padding-block: clamp(90px, 12vw, 190px);
  /* les jetons du fil et les traits s'accordent sur cette variable */
  --fil: 0;
}

/* ---------- Le fond : le diorama, assombri et lité ---------- */
.method__stage { position: absolute; inset: 0; z-index: -1; }
.method__stage img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.55) brightness(.36) contrast(1.05);
  transform: scale(1.06) translateY(calc(var(--fil) * -14px));
  transition: transform .1s linear;
}
.method__stage::after {
  /* voile : plus dense en bas, la carte y glisse ses teintes */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(16, 12, 9, .92) 0%, rgba(16, 12, 9, .72) 34%, rgba(16, 12, 9, .86) 100%),
    radial-gradient(120% 80% at 12% 8%, rgba(184, 111, 43, .22), transparent 60%),
    radial-gradient(90% 70% at 88% 92%, rgba(63, 217, 192, .16), transparent 62%);
}
/* deux halos qui respirent, très lents */
.method__orb {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .62;
  animation: methodBreath 14s ease-in-out infinite;
}
.method__orb--a { left: -120px; top: 8%; width: 420px; height: 420px; background: rgba(184, 111, 43, .5); }
.method__orb--b { right: -140px; bottom: 4%; width: 480px; height: 480px; background: rgba(63, 217, 192, .42); animation-delay: -7s; }
.method__orb--c { left: 42%; top: 46%; width: 340px; height: 340px; background: rgba(255, 217, 160, .3); animation-delay: -3.5s; }
@keyframes methodBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, -18px, 0) scale(1.12); }
}

/* ---------- Tête de section ---------- */
.method__inner { display: grid; gap: clamp(34px, 5vw, 70px); }
.method__head { max-width: 900px; }
.method__head .eyebrow { color: var(--sand); }
.method__head .lead { color: rgba(255, 250, 242, .68); }
.method .h-lg { color: var(--paper); }

/* « sans perdre le fil » : le fil est souligné d'un dégradé cuivre → turquoise
   qui se déploie avec le défilement. C'est la signature de la section. */
.method__fil {
  /* deux teintes franchement distinctes : sable puis turquoise, qui balaient
     le mot au fil du défilement. Un dégradé trop doux se lisait comme uni. */
  background-image: linear-gradient(100deg, var(--sand) 0%, #ffd9a0 18%, var(--neon) 52%, var(--sand) 100%);
  background-size: 260% 100%;
  background-position: calc(100% - var(--fil) * 118%) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position .12s linear;
}

/* ---------- Le fil, avec ses jetons ---------- */
.method__rail { position: relative; display: none; }        /* visible seulement en grand écran */
.method__thread {
  position: absolute; left: 9px; top: 0; bottom: 0; width: 2px;
  background: rgba(255, 250, 242, .12); border-radius: 2px; overflow: hidden;
}
.method__thread i {
  display: block; width: 100%; height: calc(var(--fil) * 100%);
  background: linear-gradient(to bottom, var(--sand), var(--neon));
  border-radius: 2px;
}
/* Les jetons se répartissent sur cinq lignes ÉGALES de la hauteur du fil :
   un pourcentage de marge se résout contre la largeur du bloc, pas sa hauteur,
   donc on passe par une grille de lignes égales. */
.method__beads {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-rows: repeat(5, 1fr);
  height: 100%; align-items: center;
}
.method__beads li {
  position: relative; display: grid; grid-template-columns: 20px auto;
  align-items: center; gap: 12px;
}
/* Un ergot relie le jeton du fil à la carte : sans lui, le fil et les plaques
   se lisaient comme deux systèmes séparés. */
.method__beads li::after {
  content: ""; position: absolute; left: 22px; top: 50%; width: clamp(12px, 1.6vw, 26px); height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 250, 242, .34), rgba(255, 250, 242, .05));
  transition: background .5s var(--ease), width .5s var(--ease);
}
.method__beads li.sur::after { width: clamp(14px, 1.9vw, 30px);
  background: linear-gradient(90deg, var(--neon), rgba(63, 217, 192, .06)); }
.method__beads span {
  grid-column: 1; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255, 250, 242, .22); background: #17120e;
  transition: border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
/* le jeton s'allume quand le fil l'a atteint */
.method__beads li[data-on] span,
.method__beads li.sur span { border-color: var(--neon); background: var(--neon-ink); transform: scale(1.15); }
.method__beads b {
  grid-column: 2; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: rgba(255, 250, 242, .4);
}
.method__beads li.sur b { color: var(--neon); }

/* ---------- Les cinq plaques ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); }

/* Sélecteur volontairement plus spécifique que `.js [data-anim]` de base.css
   (0,3,0 contre 0,2,0) : sans cela la carte gardait `opacity: var(--in)` et
   restait invisible tant qu'elle n'était pas entrée dans l'écran. */
.method .step[data-anim] {
  position: relative; margin: 0; padding: 0;
  border-radius: calc(var(--r-lg) + 8px);
  /* l'escalier : chaque carte est légèrement rentrée vers la droite */
  margin-left: calc(var(--i) * clamp(6px, 1.7vw, 30px));
  /* on n'anime QUE le déplacement ; l'opacité garde un plancher de 30 %,
     pour qu'une carte jamais croisée reste lisible au lieu de disparaître. */
  translate: 0 calc((1 - var(--in, 1)) * 26px);
  /* plancher à .55 : une carte non encore atteinte reste parfaitement lisible.
     À .3 elle se lisait comme un défaut d'affichage, pas comme une révélation. */
  opacity: max(.55, var(--in, 1));
  transition: translate .7s var(--ease), opacity .7s var(--ease);
}

/* le noyau : plaque de verre, double bordure (liseré clair + filet sombre) */
.step__core {
  position: relative; display: grid; grid-template-columns: 66px 1fr auto;
  align-items: center; gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
  border-radius: calc(var(--r-lg) + 8px);
  background: linear-gradient(140deg, rgba(255, 250, 242, .085), rgba(255, 250, 242, .028));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 60px -30px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  transition: transform .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease);
}
/* le liseré intérieur : la « deuxième » bordure, concentrique */
.step__core::before {
  content: ""; position: absolute; inset: 5px; border-radius: calc(var(--r-lg) + 3px);
  border: 1px solid rgba(255, 255, 255, .06); pointer-events: none;
}
/* la teinte qui suit la souris : posée en dégradé, révélée au survol */
.step__core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 120% at 18% 0%, rgba(63, 217, 192, .16), transparent 62%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.step:hover .step__core {
  transform: translateY(-6px);
  border-color: rgba(63, 217, 192, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 34px 70px -28px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(63, 217, 192, .2);
}
.step:hover .step__core::after { opacity: 1; }

/* le numéro en filigrane, qui glisse au survol */
.step__ghost {
  position: absolute; right: clamp(18px, 2.4vw, 34px); top: 50%;
  font-family: var(--display); font-size: clamp(52px, 6.6vw, 96px); font-weight: 800;
  line-height: .78; letter-spacing: -.05em; color: rgba(255, 250, 242, .22);
  -webkit-text-stroke: 1px rgba(255, 250, 242, .1);
  transform: translateY(-50%) translateX(0);
  transition: transform .7s var(--ease), color .7s var(--ease);
  pointer-events: none; user-select: none;
}
.step:hover .step__ghost { transform: translateY(-50%) translateX(-12px); color: rgba(63, 217, 192, .34); }

/* l'icône : pastille qui s'illumine */
.step__icon {
  grid-column: 1; display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(63, 217, 192, .18), rgba(184, 111, 43, .14));
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--neon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease);
}
.step__icon .icon { width: 28px; height: 28px; }
.step:hover .step__icon {
  transform: rotate(-4deg) scale(1.06);
  background: linear-gradient(150deg, rgba(63, 217, 192, .34), rgba(184, 111, 43, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 34px -8px var(--neon-glow);
}

.step__text { grid-column: 2; }
.step__text h3 { margin: 0; font-family: var(--display); font-size: clamp(20px, 2vw, 27px); color: var(--paper); }
.step__text p { margin: 7px 0 0; color: rgba(255, 250, 242, .84); font-size: clamp(14px, 1.2vw, 16px); max-width: 52ch; }

/* l'étiquette de droite : la promesse en trois mots */
.step__tag {
  grid-column: 3; justify-self: end; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--neon);
  background: rgba(63, 217, 192, .08);
  border: 1px solid rgba(63, 217, 192, .26);
  transition: color .6s var(--ease), background .6s var(--ease), border-color .6s var(--ease);
}
.step:hover .step__tag { color: #0d0a08; background: var(--neon); border-color: var(--neon); }

/* ---------- Grand écran : le fil apparaît à gauche des plaques ---------- */
@media (min-width: 1100px) {
  .method__inner {
    grid-template-columns: 44px 1fr;
    align-items: start;
  }
  .method__head { grid-column: 1 / -1; }
  .method__rail { grid-column: 1; display: block; align-self: stretch; }
  .steps { grid-column: 2; }
}

/* ---------- Repli : on garde l'essentiel, on coupe l'escalier ---------- */
@media (max-width: 860px) {
  .method .step[data-anim] { margin-left: 0; }
  .step__core { grid-template-columns: 54px 1fr; }
  .step__icon { width: 54px; height: 54px; border-radius: 16px; }
  .step__tag { grid-column: 2; justify-self: start; margin-top: 12px; white-space: normal; }
  .step__ghost { font-size: 46px; opacity: .8; }
}

/* ---------- Mouvement réduit : rien ne bouge, tout reste lisible ---------- */
@media (prefers-reduced-motion: reduce) {
  .method__orb { animation: none; }
  .method__stage img { transform: none; }
  .method .step[data-anim] { opacity: 1; translate: none; margin-left: 0; }
  .step__core, .step__icon, .step__ghost, .step__tag { transition: none; }
}