/* ============================================================
   DA « ATELIER » — À propos · ADOPTÉE (6 juillet 2026)
   ------------------------------------------------------------
   Proposition validée fondateur, appliquée en dur (plus de
   toggle — l'ancienne mise en page a été retirée de Marque.jsx).
   Passe « atelier » : ligne de faits mono sous le hero, manifeste
   asymétrique (tête sticky) + pull-quote display pleine largeur,
   chronologie « journal de banc » (numérotation mono + fil),
   principes en rangées éditoriales, portrait du concepteur en
   fiche technique sur écrin, révélations au scroll sobres.
   Tokens DS uniquement — à reporter au projet DS en fin de
   refonte (avec ds-overrides.css) si ces patterns se généralisent.
   ============================================================ */

/* ---- Hero : ligne de faits mono ---- */
.ap-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font: 500 12px var(--font-mono); letter-spacing: .06em; color: var(--cream-300); }
.ap-facts span { display: inline-flex; align-items: center; gap: 8px; }
.ap-facts .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--cream-300); opacity: .5; align-self: center; }

/* ---- Manifeste : tête sticky + colonne de lecture ---- */
.ap-manifeste { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 24px 72px; max-width: 1080px; }
.ap-manifeste .ap-mhead { position: sticky; top: 96px; align-self: start; }
@media (max-width: 860px) { .ap-manifeste { grid-template-columns: 1fr; } .ap-manifeste .ap-mhead { position: static; } }

/* ---- Pull-quote display (le moment Barlow de la section) ---- */
.ap-pull { max-width: 1080px; margin: 46px auto 10px; padding: 30px 0 26px; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); position: relative; }
.ap-pull::before { content: ''; position: absolute; top: -2px; left: 0; width: 32px; height: 3px; background: var(--accent-500); }
.ap-pull p { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.2vw, 50px); line-height: .99; letter-spacing: .01em; text-transform: uppercase; color: var(--gray-900); margin: 0; text-wrap: balance; }
.ap-pull cite { display: block; margin-top: 16px; font: 500 12px var(--font-mono); letter-spacing: .08em; color: var(--gray-500); font-style: normal; }

/* ---- Chronologie « journal de banc » ---- */
.ap-tl { border-bottom: 1px solid var(--gray-200); }
.ap-tl-row { display: grid; grid-template-columns: 96px 26px minmax(0, 1fr); gap: 0 26px; padding: 26px 0; border-top: 1px solid var(--gray-200); }
.ap-tl-y .num { display: block; font: 700 11px var(--font-mono); letter-spacing: .1em; color: var(--gray-400); }
.ap-tl-y .yr { display: block; margin-top: 4px; font: 700 24px var(--font-mono); letter-spacing: -.01em; color: var(--gray-900); }
.ap-tl-node { position: relative; }
.ap-tl-node::before { content: ''; position: absolute; top: 0; bottom: -26px; left: 50%; width: 1px; background: var(--gray-200); }
.ap-tl-row:last-child .ap-tl-node::before { bottom: 0; }
.ap-tl-node .dot { position: absolute; top: 10px; left: 50%; transform: translate(-50%, 0); width: 9px; height: 9px; border-radius: 9999px; background: var(--accent-500); border: 2px solid var(--cream-100); box-shadow: 0 0 0 1px var(--gray-200); }
.ap-tl-b h3 { font: 600 20px var(--font-body); color: var(--gray-900); margin: 0 0 8px; }
.ap-tl-b p { font: 400 15px/1.7 var(--font-body); color: var(--gray-700); margin: 0; max-width: 640px; }
@media (max-width: 640px) { .ap-tl-row { grid-template-columns: 64px 18px minmax(0, 1fr); gap: 0 14px; } .ap-tl-y .yr { font-size: 18px; } }

/* ---- Le banc : tampon protocole (neutre — pas une mesure) ---- */
.ap-stamp { color: var(--cream-300); margin-top: 26px; }

/* ---- Principes : rangées éditoriales numérotées ---- */
.ap-vals { border-bottom: 1px solid var(--gray-200); max-width: 1080px; }
.ap-val { display: grid; grid-template-columns: 56px minmax(200px, 300px) minmax(0, 1fr); gap: 16px 36px; align-items: start; padding: 28px 0; border-top: 1px solid var(--gray-200); }
.ap-val .vnum { font: 700 13px var(--font-mono); letter-spacing: .06em; color: var(--gray-400); padding-top: 3px; }
.ap-val .vhead { display: flex; align-items: flex-start; gap: 12px; }
.ap-val .vhead .vic { color: var(--accent-500); flex-shrink: 0; padding-top: 1px; }
.ap-val .vhead h3 { font: 600 19px var(--font-body); color: var(--gray-900); margin: 0; letter-spacing: -.008em; }
.ap-val > p { font: 400 14.5px/1.65 var(--font-body); color: var(--gray-600); margin: 0; max-width: 620px; }
@media (max-width: 860px) { .ap-val { grid-template-columns: 40px minmax(0, 1fr); } .ap-val > p { grid-column: 2; } }

/* ---- Concepteur : fiche technique sur écrin ---- */
.ap-conc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 56px; max-width: 980px; align-items: start; }
.ap-conc .ap-cid .ava { aspect-ratio: 4 / 5; background: var(--ecrin); border: 1px solid var(--noir-700); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 120px; line-height: 1; color: var(--cream-100); text-transform: uppercase; }
.ap-conc .ap-cid .cap { margin: 12px 0 0; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-300); }
.ap-conc .ap-cbody .lede { margin-top: 12px; max-width: 560px; }
.ap-cfiche { margin-top: 22px; border-bottom: 1px solid var(--noir-700); }
.ap-cfiche .row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 11px 0; border-top: 1px solid var(--noir-700); }
.ap-cfiche .l { font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-500); padding-top: 2px; }
.ap-cfiche .v { font: 500 14px var(--font-body); color: var(--cream-100); }
.ap-cnote { margin: 22px 0 0; padding-left: 18px; border-left: 2px solid var(--brand-600); font: 400 14px/1.65 var(--font-body); color: var(--cream-300); max-width: 540px; }
@media (max-width: 760px) { .ap-conc { grid-template-columns: 1fr; } .ap-conc .ap-cid { display: flex; align-items: center; gap: 18px; } .ap-conc .ap-cid .ava { width: 110px; aspect-ratio: 1; font-size: 54px; flex-shrink: 0; } .ap-conc .ap-cid .cap { margin: 0; } }

/* ---- Révélations au scroll (sobres, une fois) ---- */
@media (prefers-reduced-motion: no-preference) {
  .ap-da [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease, ease), transform .55s var(--ease, ease); }
  .ap-da [data-rv].rv-in { opacity: 1; transform: none; }
}