/* Le Studio : styles de la page « methode ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */

/* ==================================================================
   Page Méthode (v4)
================================================================== */

/* Hero : liste des étapes, sans barres (même liste que la page Expertises, 19 oct. 2026) */
.phero .wordmark{font-size:clamp(4rem,24.3vw,30rem)}
.phero__aside{display:grid}
.toc li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;min-height:48px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.toc .meta{color:var(--on-night-2)}
.toc__name{font-size:var(--fs-lg);letter-spacing:-.03em;font-weight:450;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .toc li:hover .toc__name{transform:translateX(8px)} }
/* Titre sur deux lignes, coupées par le <br> (19 oct. 2026) */
#titre{width:max-content;max-width:calc(100vw - 88px)}

/* Les cinq étapes */
.steps{display:grid;gap:48px}
.steps__aside{display:none}
.step{display:grid;gap:clamp(24px,2.6vw,36px);padding-block-end:clamp(64px,8vw,130px);scroll-margin-top:24px}
.step:last-child{padding-block-end:0}
.step__head{display:grid;gap:14px}
.step__k{display:flex;gap:14px;align-items:baseline;color:var(--ink-2)}
.step__num{color:var(--ink)}
.step__title{font-size:clamp(2.25rem,5.4vw,5.75rem);letter-spacing:-.05em;line-height:.98}
.step .lead{max-inline-size:30em}
.step__facts{display:grid;gap:22px}
.step__facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-block-end:8px}
.step__facts dd{max-inline-size:22em}
.step__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--grey)}
.step__media img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover;object-position:50% 0}
@media (min-width:700px){ .step__facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }
@media (min-width:1024px){
  .steps{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter)}
  .js .steps__aside{display:grid;gap:clamp(16px,2vw,28px);position:sticky;inset-block-start:clamp(96px,16vh,160px);align-self:start}
  .js .step__num{display:none}
  .steps__n{display:block;font-size:clamp(7rem,17.5vw,19rem);font-weight:450;letter-spacing:-.07em;line-height:.85;block-size:.85em;overflow:hidden;color:var(--accent);font-variant-numeric:tabular-nums;margin-inline-start:-.04em}
  .steps__strip{display:block;transition:transform .7s var(--ease-out)}
  .steps__strip span{display:block;block-size:.85em}
  .steps__bar{block-size:2px;background:var(--line);max-inline-size:18rem}
  .steps__bar i{display:block;block-size:100%;background:var(--accent);transform-origin:left center;transform:scaleX(.2)}
}
@media (prefers-reduced-motion: reduce){ .steps__strip{transition:none} }

/* Rythme */
.pace{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(48px,6vw,96px)}
.pace__head{display:grid;gap:24px;justify-items:start}
.pace__grid{display:grid;gap:48px}
.pace__fig{font-size:clamp(6rem,19vw,21rem);font-weight:450;letter-spacing:-.075em;line-height:.85;display:flex;align-items:flex-start}
.pace__fig small{font-size:.3em;letter-spacing:-.04em;line-height:1;padding-block-start:.3em;margin-inline-start:.12em;color:var(--accent)}
.pace__fig .odo{block-size:.85em}
.pace__fig .odo__col span{block-size:.85em;line-height:.85}
.pace li:not(.tags > li){display:grid;gap:8px 24px;padding-block:clamp(20px,2.2vw,30px)}   /* pas les pastilles d'outils (retour de recette, 26 oct.) */
.pace li .rule{grid-column:1/-1;margin-block-end:clamp(10px,1.2vw,18px)}
.pace li p{color:var(--on-night-2);max-inline-size:26em}
.pace__tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-block-start:clamp(20px,2vw,32px);color:var(--on-night-2)}
@media (min-width:700px){ .pace li:not(.tags > li){grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:baseline} }
@media (min-width:1024px){ .pace__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:var(--gutter);align-items:end} }

/* Devis */
.deal__head{margin-block-end:clamp(40px,5vw,80px)}
.deal li{display:grid;gap:12px 24px;padding-block:clamp(24px,2.6vw,40px)}
.deal li .rule{grid-column:1/-1;margin-block-end:clamp(12px,1.4vw,20px)}
.deal h3{font-size:clamp(2.25rem,6vw,6.5rem);letter-spacing:-.06em;line-height:.95}
.deal p{color:var(--ink-2);max-inline-size:24em;font-size:var(--fs-lg);line-height:1.4}
@media (min-width:900px){ .deal li{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end} }

/* Motifs des étapes. Le socle (aplat, scène, carré du logo, onde) est dans common.css ; ici, les formes propres à chaque étape. */
/* Échelle : sur cette page, les formes sont 20 % plus petites que le socle commun (elles paraissaient trop grosses dans le cadre). Seule la taille change, pas les boucles. */
.step__media .motif__stage{font-size:max(8px,min(2.044cqw,3.64cqh))}
/* 01 Audit : un disque cherche, puis se resserre sur le carré */
.m-disc,[data-motif="audit"] .m-ping{inline-size:6.4em;block-size:6.4em;margin:-3.2em 0 0 -3.2em;border-radius:50%}
/* 02 Architecture : quatre carrés se rangent */
.m-b{inline-size:2.6em;block-size:2.6em;margin:-1.3em 0 0 -1.3em}
html:not(.anim) .m-b:nth-child(1){translate:-56% -56%}
html:not(.anim) .m-b:nth-child(2){translate:56% -56%}
html:not(.anim) .m-b:nth-child(3){translate:-56% 56%}
html:not(.anim) .m-b:nth-child(4){translate:56% 56%}
/* 03 Design : une forme passe du carré au cercle */
.m-shape{inline-size:7em;block-size:7em;margin:-3.5em 0 0 -3.5em}
html:not(.anim) .m-shape{border-radius:28%}
/* 04 Développement : trois barres s'empilent, le carré se pose dessus */
.m-bar{inline-size:7.2em;block-size:2em;margin:-.1em 0 0 -3.6em}
[data-motif="developpement"] .m-sq{inline-size:2em;block-size:2em;margin:-.1em 0 0 -1em}
html:not(.anim) .m-bar:nth-child(1){translate:0 118%}
html:not(.anim) .m-bar:nth-child(3){translate:0 -118%}
html:not(.anim) [data-motif="developpement"] .m-sq{translate:130% -236%}
/* 05 Suivi : le carré tourne sans fin autour d'un disque */
.m-core,[data-motif="suivi"] .m-ping{inline-size:4.4em;block-size:4.4em;margin:-2.2em 0 0 -2.2em;border-radius:50%}
.m-orbit{position:absolute;inset:0;display:block}
.m-orbit .m-sq{inset-block-start:calc(50% - 5.2em);inline-size:2em;block-size:2em;margin:-1em 0 0 -1em}
/* Traîne : deux copies du carré le suivent avec un léger retard ; à l'arrêt, elles sont cachées dessous */
.m-echo:nth-of-type(1) .m-sq{opacity:.16}
.m-echo:nth-of-type(2) .m-sq{opacity:.38}
html:not(.anim) .m-orbit{rotate:42deg}

/* Motifs en vidéo (19 oct. 2026) */
.step__vid{background:#191918}
.step__vid video{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;display:block}