/* ============================================================
   PAGE — L'APPROCHE (la page « qui je suis », sans visage)
   Noah 2026-08-09 : pas de biographie, pas de trading, pas de photo.
   Ce qui se vend ici : l'école d'art, le regard, la psychologie,
   et la façon de travailler — très personnelle, on apprend l'un de l'autre.
   Voix : « je » sur CETTE page uniquement (le reste du site parle en « nous »).
   Mécanique signature : un trait qui se dessine au scroll — le geste du
   dessin, puisqu'on ne montre pas de visage.
   ============================================================ */

/* ---------- héros ---------- */
.ap-hero { display: flex; align-items: flex-end; padding-bottom: 12vh; }
.ap-hero .statement { padding: 0 clamp(1.25rem, 5vw, 4rem); }
.ap-hero .kicker { display: block; margin-bottom: 1.6rem; }
.ap-hero .sub { margin-top: 1.8rem; max-width: 35rem; font-size: 1rem; line-height: 1.75; opacity: 0.92; }

/* le trait qui se dessine — remplace le portrait */
.stroke-wrap { position: absolute; right: clamp(1.25rem, 4vw, 3rem); top: 22vh; z-index: 3; width: min(26rem, 38vw); pointer-events: none; }
.stroke-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.stroke-wrap path { fill: none; stroke: var(--gold); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.js .stroke-wrap path { stroke-dasharray: var(--len, 1400); stroke-dashoffset: calc(var(--len, 1400) * (1 - var(--draw, 0))); }
.stroke-cap { margin-top: 1rem; text-align: right; font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-mut); }
@media (prefers-reduced-motion: reduce) { .js .stroke-wrap path { stroke-dashoffset: 0; } }

/* ---------- sections communes ---------- */
.ap-sec { padding: 13vh clamp(1.25rem, 5vw, 4rem); }
.ap-sec.deep { background: var(--noir-deep); }
.ap-inner { max-width: 74rem; margin: 0 auto; }
.ap-head { margin-bottom: 3.4rem; }
.ap-head .statement { margin-top: 1.4rem; }
.ap-lede { max-width: 42rem; font-size: 1.0625rem; line-height: 1.8; color: var(--cream); opacity: 0.94; }
.ap-body { max-width: 42rem; margin-top: 1.6rem; font-size: 0.9375rem; line-height: 1.85; color: var(--cream-mut); }
.ap-body + .ap-body { margin-top: 1.1rem; }
.ap-body b { color: var(--cream); font-weight: 400; }

/* deux colonnes : la formation */
.duo { display: grid; gap: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); max-width: 74rem; margin: 3rem auto 0; }
.duo-col { border-top: 1px solid var(--gold-soft); padding-top: 1.4rem; }
.duo-col h3 { font-family: var(--font-d); font-weight: 340; font-size: 1.45rem; margin-bottom: 0.8rem; }
.duo-col p { font-size: 0.9375rem; line-height: 1.8; color: var(--cream-mut); }
.duo-col .mark { display: block; font-family: var(--font-d); font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: 0.7rem; }

/* les questions que je pose — le cœur de la page */
.asks { list-style: none; max-width: 60rem; margin: 3rem auto 0; }
.asks li {
  position: relative; padding: 1.5rem 0 1.5rem 4.2rem;
  border-bottom: 1px solid rgb(198 165 108 / 0.16);
  font-family: var(--font-d); font-weight: 340;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.35; color: var(--cream);
}
.asks li::before {
  content: attr(data-n); position: absolute; left: 0; top: 1.9rem;
  font-family: var(--font-b); font-size: 0.625rem; letter-spacing: 0.2em; color: var(--gold);
}
.asks li span { display: block; margin-top: 0.6rem; font-family: var(--font-b); font-size: 0.875rem; line-height: 1.7; color: var(--cream-mut); }

/* la traduction : sentiment -> décisions */
.trans { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 74rem; margin: 3rem auto 0; background: rgb(198 165 108 / 0.18); border: 1px solid rgb(198 165 108 / 0.18); }
.trans div { background: var(--noir); padding: 1.7rem 1.5rem; }
.trans .from { font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.trans .to { display: block; margin-top: 0.7rem; font-family: var(--font-d); font-size: 1.2rem; line-height: 1.3; }
.trans .why { display: block; margin-top: 0.6rem; font-size: 0.8125rem; line-height: 1.7; color: var(--cream-mut); }

/* la façon de travailler */
.steps { counter-reset: s; max-width: 60rem; margin: 3rem auto 0; }
.step { position: relative; padding: 0 0 2.4rem 3.4rem; border-left: 1px solid rgb(198 165 108 / 0.22); margin-left: 0.5rem; }
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; left: -1.35rem; top: -0.15rem; width: 2.6rem; text-align: center;
  font-size: 0.625rem; letter-spacing: 0.14em; color: var(--gold);
  background: var(--noir-deep); padding: 0.25rem 0;
}
.ap-sec:not(.deep) .step::before { background: var(--noir); }
.step h3 { font-family: var(--font-d); font-weight: 340; font-size: 1.3rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.9375rem; line-height: 1.8; color: var(--cream-mut); max-width: 40rem; }

/* ce que je ne ferai pas */
.nos { list-style: none; max-width: 74rem; margin: 2.6rem auto 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.nos li { border: 1px solid rgb(198 165 108 / 0.22); padding: 1.2rem 1.3rem; font-size: 0.9rem; line-height: 1.7; color: var(--cream-mut); }
.nos li b { display: block; color: var(--gold); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.55rem; }

/* clôture */
.ap-end .note { margin-top: 1.6rem; max-width: 40rem; font-size: 0.9375rem; line-height: 1.8; color: var(--cream-mut); }
.ap-end .cta-row { margin-top: 2.4rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.back-home { display: inline-block; margin-top: 3rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-mut); text-decoration: none; }
.back-home:hover { color: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.3rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 0.09s; }
  .js .reveal.d2 { transition-delay: 0.18s; }
}

@media (max-width: 47rem) {
  .ap-hero { padding-bottom: 8vh; }
  .stroke-wrap { position: static; width: 100%; margin: 2.4rem 0 0; padding: 0 clamp(1.25rem, 5vw, 4rem); }
  .stroke-cap { text-align: left; }
  .ap-sec { padding: 9vh 1.25rem; }
  .asks li { padding-left: 2.9rem; }
  .step { padding-left: 2.4rem; }
}