/*
Theme Name: Pixence child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
*/
/* ============================================================
   BioMécanique — style-anatomique.css
   Variante DA "Planche anatomique" — classes préfixées "bma-".
   La majeure partie est en CSS pur (menu via :target, préchargement,
   progress bar, motifs flottants). Piloté par script-anatomique.js :
   la citation de la section « Le Constat » qui s'éclaire mot par mot
   au scroll, et la révélation en fondu + flou des blocs .bma-rv.
   Fichier source unique : copier-coller intégralement ce fichier
   dans wp-content/themes/pixence-child/style.css pour publier.
   ============================================================ */

:root{
  --bma-parchment:#E7D8B4;
  --bma-ink:#241E18;
  --bma-ink-soft:#5B4F40;
  --bma-muted:#8A7B64;
  --bma-line:rgba(74,58,42,.2);
  --bma-sanguine:#A83A2C;
  --bma-footer-bg:#241E18;
  --bma-footer-text:#E9E0CE;
  --bma-font-serif:'Spectral', serif;
  --bma-font-mono:'Space Mono', monospace;
}

html{scroll-behavior:smooth}

.bma-page, .bma-page *{margin:0;padding:0;box-sizing:border-box}
.bma-page{background:radial-gradient(ellipse 560px 440px at 6% 12%,rgba(122,88,46,.09),transparent 60%),radial-gradient(ellipse 460px 560px at 95% 82%,rgba(122,88,46,.08),transparent 60%),radial-gradient(ellipse 700px 340px at 55% 48%,rgba(122,88,46,.04),transparent 70%),var(--bma-parchment);color:var(--bma-ink);font-family:var(--bma-font-mono);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
.bma-page ::selection{background:var(--bma-sanguine);color:var(--bma-parchment)}
/* :where() = spécificité nulle : cette couleur de lien "par défaut"
   ne doit jamais pouvoir écraser une couleur plus spécifique définie
   ailleurs (boutons, header, footer, menu...), quel que soit l'ordre
   des règles dans le fichier. */
.bma-page a{text-decoration:none}
:where(.bma-page a){color:var(--bma-ink)}
:where(.bma-page a:hover){color:var(--bma-sanguine)}
.bma-page em{font-style:italic}

@keyframes bma-fade{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes bma-float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bma-spin{to{transform:rotate(360deg)}}
@keyframes bma-preloader-out{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes bma-thread-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bma-thread-mark-reveal{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:.55;transform:translateY(0) scale(1)}}

/* Révélation au scroll (fondu + flou + léger décalage), pilotée par
   script-anatomique.js (bmaInitReveal, IntersectionObserver). Visible
   par défaut : si JS est désactivé/indisponible ou en cas de
   prefers-reduced-motion, la classe --ready n'est jamais posée et les
   blocs .bma-rv restent simplement affichés (repli toujours sûr). */
.bma-rv{opacity:1}
.bma-rv.bma-rv--ready{opacity:0;filter:blur(14px);transform:translateY(46px);transition:opacity 1s cubic-bezier(.19,1,.22,1),filter 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1)}
.bma-rv.bma-rv--ready.bma-rv--in{opacity:1;filter:blur(0);transform:translateY(0)}

.bma-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Citation qui s'éclaire mot par mot : flou + estompé + grisé par
   défaut, net et en pleine opacité une fois "lit" au scroll (piloté
   par script-anatomique.js). Contrairement à un déclenchement
   IntersectionObserver à sens unique, la position est recalculée à
   chaque scroll dans les deux sens : remonter refait l'inverse
   naturellement, pas besoin de recharger la page.
   Repli sans JS : voir la balise <noscript> dans header-anatomique.php,
   qui repasse tous les mots nets et en encre pleine. */
.bma-word{display:inline-block;color:var(--bma-muted);opacity:.35;filter:blur(6px);transition:color .5s ease,opacity .5s ease,filter .5s ease}
.bma-word.is-lit{color:var(--bma-ink);opacity:1;filter:blur(0)}
.bma-constat__lead em .bma-word.is-lit{color:var(--bma-sanguine)}

.bma-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--bma-font-mono);font-size:11px;letter-spacing:.16em;padding:15px 30px;transition:background .3s ease,color .3s ease,border-color .3s ease}
.bma-btn--solid{background:var(--bma-sanguine);color:#F3ECDD}
.bma-btn--solid:hover{background:#7c2c20;color:#F3ECDD}
.bma-btn--ghost{border:1px solid var(--bma-line);color:var(--bma-ink-soft)}
.bma-btn--ghost:hover{border-color:var(--bma-sanguine);color:var(--bma-sanguine)}
.bma-tag{display:inline-block;font-family:var(--bma-font-mono);font-size:11px;color:var(--bma-ink-soft);border:1px solid var(--bma-line);padding:6px 13px}

/* ---- Préchargement (CSS pur) ---- */
.bma-preloader{position:fixed;inset:0;z-index:90;background:var(--bma-parchment);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;animation:bma-preloader-out .9s ease 1.6s forwards}
.bma-preloader__gear{width:36px;opacity:.75;animation:bma-spin 3.5s linear infinite}
.bma-preloader__title{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(30px,4.6vw,54px);color:var(--bma-ink);opacity:0;animation:bma-fade 1s .3s both}
.bma-preloader__sub{font-size:11px;letter-spacing:.26em;color:var(--bma-sanguine);opacity:0;animation:bma-fade 1s .6s both}

/* ---- En-tête ---- */
.bma-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:18px 6vw;background:rgba(231,216,180,.92);box-shadow:0 1px 0 var(--bma-line)}
.bma-header__logo{display:inline-block;font-family:var(--bma-font-serif);color:var(--bma-ink)}
.bma-header__logo img{width:250px;height:auto;display:block}
.bma-header__actions{display:flex;align-items:center;gap:24px}
.bma-header__cta{display:inline-flex;align-items:center;font-family:var(--bma-font-mono);font-size:16px;letter-spacing:.14em;padding:12px 26px;border:1px solid var(--bma-sanguine);color:var(--bma-sanguine);transition:background .3s ease,color .3s ease}
.bma-header__cta:hover{background:var(--bma-sanguine);color:#F3ECDD}
.bma-menu-trigger{display:flex;align-items:center;gap:9px;font-family:var(--bma-font-mono);font-size:16px;letter-spacing:.18em;color:var(--bma-ink);cursor:pointer}
.bma-menu-trigger__bars{display:flex;flex-direction:column;gap:3px}
.bma-menu-trigger__bars span{width:18px;height:1px;background:currentColor;display:block}

/* ---- Menu plein écran (piloté par :target) ---- */
.bma-menu{position:fixed;inset:0;z-index:80;background:rgba(231,216,180,.98);opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.19,1,.22,1),visibility .45s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:column;padding:30px 8vw}
#bma-menu:target{opacity:1;visibility:visible}
.bma-menu__top{display:flex;justify-content:space-between;align-items:center}
.bma-menu__eyebrow{font-size:10px;letter-spacing:.22em;color:var(--bma-muted)}
.bma-menu__close{font-size:16px;letter-spacing:.18em;color:var(--bma-ink);display:flex;align-items:center;gap:10px;cursor:pointer}
.bma-menu__nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow-y:auto}
.bma-menu__link{display:flex;align-items:baseline;gap:22px;padding:11px 0;border-bottom:1px solid rgba(74,58,42,.13)}
.bma-menu__link:last-child{border-bottom:0}
.bma-menu__num{font-family:var(--bma-font-mono);font-size:11px;color:var(--bma-muted);width:26px;transition:color .3s ease}
.bma-menu__label{font-family:var(--bma-font-serif);font-size:clamp(26px,3.6vw,46px);color:var(--bma-ink);transition:color .3s ease}
.bma-menu__link:hover .bma-menu__num,
.bma-menu__link:hover .bma-menu__label{color:var(--bma-sanguine)}
.bma-menu__foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;border-top:1px solid var(--bma-line);padding-top:22px}
.bma-menu__location{font-size:10px;letter-spacing:.14em;color:var(--bma-muted)}

/* ---- Progression / retour haut ----
   Remplissage piloté 100% en JS (bmaInitProgress, script-anatomique.js)
   plutôt que via animation-timeline:scroll(root) — cette dernière
   laissait le rail invisible (display:none jamais levé) sur les
   navigateurs sans support des scroll-driven animations. */
.bma-progress-track{position:fixed;left:0;top:0;bottom:0;width:5px;z-index:57;background:rgba(74,58,42,.1)}
.bma-progress-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--bma-sanguine)}
.bma-to-top{position:fixed;right:30px;bottom:24px;z-index:57;font-size:14px;letter-spacing:.14em;color:var(--bma-muted)}

/* ---- Fil unificateur (traverse les planches I à IV) ---- */
.bma-thread{position:relative}
.bma-thread__line{position:absolute;top:0;bottom:0;left:8vw;width:1px;background:var(--bma-line);pointer-events:none;z-index:5}
@supports (animation-timeline: scroll(root)){
  .bma-thread__line{background:var(--bma-sanguine);opacity:.5;transform-origin:top;transform:scaleY(0);animation:bma-thread-grow linear both;animation-timeline:scroll(root)}
}
.bma-thread__mark{position:absolute;width:46px;height:46px;opacity:.55;z-index:1;pointer-events:none}
@supports (animation-timeline: view()){
  .bma-thread__mark{opacity:0;animation:bma-thread-mark-reveal linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}

/* ---- Cadre de planche gravé (fixe, plein écran) ---- */
.bma-frame{position:fixed;inset:14px;z-index:55;pointer-events:none}
.bma-frame::before{content:"";position:absolute;inset:0;border:1px solid rgba(74,58,42,.4)}
.bma-frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(74,58,42,.18)}
.bma-frame span{position:absolute;width:15px;height:15px}
.bma-frame span:nth-child(1){top:-4px;left:-4px;border-top:2px solid var(--bma-sanguine);border-left:2px solid var(--bma-sanguine)}
.bma-frame span:nth-child(2){top:-4px;right:-4px;border-top:2px solid var(--bma-sanguine);border-right:2px solid var(--bma-sanguine)}
.bma-frame span:nth-child(3){bottom:-4px;left:-4px;border-bottom:2px solid var(--bma-sanguine);border-left:2px solid var(--bma-sanguine)}
.bma-frame span:nth-child(4){bottom:-4px;right:-4px;border-bottom:2px solid var(--bma-sanguine);border-right:2px solid var(--bma-sanguine)}

/* ---- Motifs décoratifs (parallax CSS pur via background-attachment:fixed) ---- */
.bma-motif{position:absolute;pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain;background-attachment:fixed}
.bma-motif--drift{animation:bma-float-y 8s ease-in-out infinite}
.bma-gear{position:absolute;pointer-events:none}
.bma-gear--spin{animation:bma-spin 26s linear infinite}
.bma-gear--spin-rev{animation:bma-spin 34s linear infinite reverse}
.bma-plate-label{position:absolute;font-size:10px;letter-spacing:.22em;color:var(--bma-muted)}

.bma-hero__motif-leaf{top:10vh;left:3vw;width:min(17vw,215px);aspect-ratio:4/5;opacity:.16;background-image:url(/wp-content/themes/pixence-child/images/m-plante-ink.png)}
.bma-hero__motif-gears{bottom:8vh;right:4vw;width:min(14vw,180px);aspect-ratio:4/5;opacity:.14;background-image:url(/wp-content/themes/pixence-child/images/m-plante2-ink.png)}
.bma-hero__motif-gear1{top:25vh;right:17vw;width:52px;opacity:.5}
.bma-hero__motif-gear2{bottom:22vh;left:11vw;width:34px;opacity:.35}
.bma-hero__watermark{position:absolute;top:0;left:0;right:0;bottom:0;background:url(/wp-content/themes/pixence-child/images/hero-planche-anatomique.png) center / cover no-repeat;opacity:.4;pointer-events:none}
.bma-pratique__motif-heart{top:6vh;right:3vw;width:min(15vw,190px);aspect-ratio:4/5;opacity:.09;background-image:url(/wp-content/themes/pixence-child/images/m-coeur-ink.png)}

/* ---- Hero (Frontispice) ---- */
/* Planches empilées (I à IV) : chaque planche reste "collée" en haut
   de l'écran (position:sticky) pendant que la suivante glisse
   par-dessus au scroll, la recouvrant progressivement — effet
   feuilletage de planches d'atlas anatomique. Zéro JS : dégrade
   proprement en flux normal si sticky n'est pas supporté. Désactivé
   sous 900px (cf. media query en bas) où l'empilement fixe est
   moins lisible sur petit écran. */
.bma-hero{position:sticky;top:0;z-index:1;min-height:100vh;background:var(--bma-parchment);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:14vh 8vw;overflow:hidden}
.bma-hero__content{position:relative;max-width:900px}
.bma-hero__eyebrow{font-size:11px;letter-spacing:.26em;color:var(--bma-sanguine);margin-bottom:30px;opacity:0;animation:bma-fade 1s .2s both}
.bma-hero__title{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(52px,9vw,140px);line-height:.96;letter-spacing:-.01em;color:var(--bma-ink);opacity:0;animation:bma-fade 1.1s .4s both}
.bma-hero__tagline{font-family:var(--bma-font-serif);font-style:italic;font-size:clamp(20px,2.9vw,36px);color:var(--bma-sanguine);margin-top:24px;opacity:0;animation:bma-fade 1.1s .65s both}
.bma-hero__cta{margin-top:44px;opacity:0;animation:bma-fade 1.1s .95s both}
.bma-hero__scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:var(--bma-muted);opacity:0;animation:bma-fade 1s 1.3s both}

/* ---- Sections génériques ---- */
.bma-section{position:sticky;top:0;min-height:100vh;background:var(--bma-parchment);padding:16vh 8vw;overflow:hidden}
#constat{z-index:2;background:#DBC58F}
#pratique{z-index:3}
#approche{z-index:4;background:#DBC58F}
.bma-section__eyebrow{font-size:11px;letter-spacing:.24em;color:var(--bma-sanguine);margin-bottom:22px}
.bma-section__heading{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(27px,3.6vw,48px);line-height:1.2;color:var(--bma-ink)}

/* ---- Tracé anatomique animé (fond de la section Ma Pratique) ----
   SVG inline .bma-trace, chaque <path> se dessine au scroll via
   stroke-dashoffset, entièrement calculé et mis à jour en JS pur
   (bmaInitTrace, script-anatomique.js) — pas de scroll-driven
   animations CSS cette fois, pour ne pas dépendre du support
   navigateur des view-timelines nommées. Repli : sans JS, sur
   mobile (<760px) ou avec prefers-reduced-motion, le JS ne touche
   jamais au stroke-dasharray/dashoffset : le tracé reste affiché
   complet par défaut (aucune règle ci-dessous ne le cache). */
.bma-trace{position:absolute;inset:0;z-index:0;opacity:.18;pointer-events:none;overflow:hidden}
.bma-trace svg{width:80%;height:100%;display:block;margin-left:auto}
.bma-trace path{fill:none;stroke:var(--bma-ink);stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;vector-effect:non-scaling-stroke}
@media (max-width:760px){
  .bma-trace{display:none}
}

/* ---- Le constat ---- */
.bma-constat{text-align:center}
.bma-constat__testimonial{position:absolute;max-width:230px;font-family:var(--bma-font-serif);font-style:italic;font-size:15px;line-height:1.55;color:var(--bma-ink-soft);opacity:.6;z-index:0}
.bma-constat__testimonial cite{display:block;margin-top:10px;font-family:var(--bma-font-mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--bma-muted)}
.bma-constat__testimonial--a{top:14vh;left:2vw;text-align:right;transform:rotate(-2deg)}
.bma-constat__testimonial--b{bottom:12vh;right:2vw;transform:rotate(2deg)}
@media (max-width:1100px){
  .bma-constat__testimonial{display:none}
}
.bma-constat__lead{position:relative;z-index:1;max-width:820px;margin:0 auto;font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(25px,3.5vw,46px);line-height:1.32;color:var(--bma-ink)}
.bma-constat__echo{position:relative;z-index:1;max-width:600px;margin:48px auto 0}
.bma-constat__echo p{font-family:var(--bma-font-serif);font-style:italic;font-size:clamp(18px,2.3vw,26px);line-height:1.7;color:var(--bma-ink-soft)}

/* ---- Ma pratique ---- */
.bma-pratique__grid{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:center}
.bma-pratique__photo-wrap{position:relative}
.bma-pratique__photo-frame{position:relative;border:1px solid rgba(74,58,42,.4);padding:7px;overflow:hidden}
.bma-pratique__photo-frame span{position:absolute;width:11px;height:11px}
.bma-pratique__photo-frame span:nth-child(2){top:2px;left:2px;border-top:1px solid var(--bma-sanguine);border-left:1px solid var(--bma-sanguine)}
.bma-pratique__photo-frame span:nth-child(3){top:2px;right:2px;border-top:1px solid var(--bma-sanguine);border-right:1px solid var(--bma-sanguine)}
.bma-pratique__photo-frame span:nth-child(4){bottom:2px;left:2px;border-bottom:1px solid var(--bma-sanguine);border-left:1px solid var(--bma-sanguine)}
.bma-pratique__photo-frame span:nth-child(5){bottom:2px;right:2px;border-bottom:1px solid var(--bma-sanguine);border-right:1px solid var(--bma-sanguine)}
.bma-pratique__photo{position:relative;border:1px solid var(--bma-line);overflow:hidden}
.bma-pratique__photo img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center 28%;filter:sepia(.3) contrast(1.05) saturate(.85)}
.bma-pratique__eyebrow{font-size:11px;letter-spacing:.24em;color:var(--bma-sanguine);margin-bottom:26px}
.bma-pratique__title{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(28px,3.8vw,50px);line-height:1.12;color:var(--bma-ink)}
.bma-pratique__title em{color:#7A6B55}
.bma-pratique__text{margin-top:24px;max-width:540px;font-size:14.5px;line-height:1.95;color:var(--bma-ink-soft)}
.bma-pratique__text strong{color:var(--bma-ink)}
.bma-pratique__tags{margin-top:24px;display:flex;flex-wrap:wrap;gap:9px;max-width:560px}
.bma-pratique__footer{margin-top:34px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.bma-signature{font-family:var(--bma-font-serif);font-style:italic;font-size:30px;color:var(--bma-sanguine)}

/* ---- Mon approche ---- */
.bma-approche__intro{max-width:820px;margin:0 auto 54px}
.bma-approche__outcome{text-align:center;max-width:700px;margin:52px auto 0;font-family:var(--bma-font-serif);font-style:italic;font-size:clamp(19px,2.5vw,28px);line-height:1.55;color:var(--bma-ink-soft)}

/* ---- Pied de page / rendez-vous ---- */
.bma-footer{position:sticky;top:0;z-index:6;min-height:100vh;background:var(--bma-footer-bg);color:var(--bma-footer-text);padding:16vh 8vw 5vh;overflow:hidden}
.bma-footer__cta{max-width:900px;margin:0 auto;text-align:center}
.bma-footer__eyebrow{font-size:11px;letter-spacing:.24em;color:#c79a8d;margin-bottom:24px}
.bma-footer__heading{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(32px,5vw,74px);line-height:1.02;color:#F3ECDD}
.bma-footer__cta-btn{margin-top:40px}
.bma-footer__grid{max-width:1120px;margin:9vh auto 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid rgba(231,216,180,.16);padding-top:44px;text-align:left;font-family:var(--bma-font-mono)}
.bma-footer__brand{font-family:var(--bma-font-serif);font-size:23px;color:#F3ECDD;margin-bottom:6px}
.bma-footer__tagline{font-size:11px;letter-spacing:.14em;color:var(--bma-sanguine);margin-bottom:10px}
.bma-footer__signature{font-family:var(--bma-font-serif);font-style:italic;font-size:26px;color:#c79a8d;display:block;margin-top:8px}
.bma-footer__label{font-size:10px;letter-spacing:.18em;color:var(--bma-muted);margin-bottom:14px}
.bma-footer__link{display:block;font-size:13px;color:var(--bma-footer-text);margin-bottom:7px}
.bma-footer__link:hover{color:var(--bma-sanguine)}
.bma-footer__text{font-size:13px;line-height:1.8;color:#c9c0b0}
.bma-footer__bottom{max-width:1120px;margin:5vh auto 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:10px;letter-spacing:.08em;color:#8a8175;font-family:var(--bma-font-mono)}
.bma-footer__legal{display:flex;gap:20px}
.bma-footer__legal a{color:#8a8175}
.bma-footer__legal a:hover{color:var(--bma-sanguine)}

@media (max-width:900px){
  .bma-pratique__grid,.bma-footer__grid{grid-template-columns:1fr !important}
  .bma-hero,.bma-section,.bma-footer{position:relative;top:auto;min-height:0}
}

/* ============ MON APPROCHE — grille d'illustrations ============
   Remplace l'ancienne liste à rouages.
   • Même largeur que le titre (820px, centré) pour un alignement net.
   • Toutes les illustrations dans une boîte de hauteur identique
     -> les légendes s'alignent sur la même ligne.
   • Respiration lente et cyclique sur les illustrations.
   ============================================================ */

/* Le titre et la grille partagent exactement la même largeur */
.bma-approche__intro,
.bma-approche__grid{ max-width:820px; margin-left:auto; margin-right:auto; }

.bma-approche__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:46px 34px;
}

.bma-appro-card{ margin:0; text-align:center; }

/* Boîte d'image commune : les illustrations se centrent dedans sans se déformer */
.bma-appro-card img{
  width:100%; height:190px;
  object-fit:contain; object-position:center bottom;
  display:block; margin:0 auto 10px;      /* 10px = écart image / légende */
  mix-blend-mode:multiply;                /* fond l'illustration dans le parchemin */
  animation:bma-appro-breathe 7.5s ease-in-out infinite;
  will-change:transform;
}

/* Décalage entre les cartes : la respiration n'est pas synchronisée */
.bma-appro-card:nth-child(2) img{ animation-delay:-1.2s }
.bma-appro-card:nth-child(3) img{ animation-delay:-2.4s }
.bma-appro-card:nth-child(4) img{ animation-delay:-3.6s }
.bma-appro-card:nth-child(5) img{ animation-delay:-4.8s }
.bma-appro-card:nth-child(6) img{ animation-delay:-6.0s }

@keyframes bma-appro-breathe{
  0%,100%{ transform:scale(1);     opacity:.93 }
  50%    { transform:scale(1.035); opacity:1   }
}

.bma-appro-card figcaption{
  font-family:var(--bma-font-serif);
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.35; color:var(--bma-ink);
  max-width:24ch; margin:0 auto;
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion:reduce){
  .bma-appro-card img{ animation:none; opacity:1 }
}

@media (max-width:900px){
  .bma-approche__grid{ grid-template-columns:repeat(2,1fr); gap:38px 26px; }
  .bma-appro-card img{ height:165px; }
}
@media (max-width:560px){
  .bma-approche__grid{ grid-template-columns:1fr; gap:32px; }
  .bma-appro-card img{ height:180px; }
}

/* ============================================================
   Gabarit commun — pages intérieures (Entrer dans l'atelier,
   Les outils de l'atelier, La mécanicienne, Sous le capot des
   humains). Mêmes composants que l'accueil (.bma-section,
   .bma-rv, .bma-word, .bma-plate-label, .bma-thread) ; les
   classes ci-dessous ne sont que des primitives génériques
   (intro, citation flou->net, texte courant, tags, CTA) pour
   éviter de réutiliser des noms propres à l'accueil (bma-constat__,
   bma-pratique__) sur des pages qui n'ont rien à voir avec « le
   constat » ou « la pratique ». Une seule définition, partagée
   par les 4 pages intérieures.
   ============================================================ */
.bma-plate--center{text-align:center}
.bma-plate__intro{max-width:820px;margin:0 auto 54px}

/* Planche I façon frontispice — alignée à gauche, titre pleine
   échelle, comme .bma-ent-hero de la maquette (pas de centrage). */
.bma-plate--hero{padding-top:max(190px,20vh);padding-bottom:12vh}
.bma-plate--hero .bma-plate__intro{max-width:1000px;margin:0}
.bma-plate--hero .bma-section__eyebrow{margin-bottom:28px}
.bma-plate--hero .bma-section__heading{font-size:clamp(44px,7.6vw,116px);line-height:.98;letter-spacing:-.01em;text-align:left}
.bma-plate--hero .bma-plate__lead{margin:30px 0 0;text-align:left}
.bma-plate--hero .bma-plate__split{margin:9vh 0 0;grid-template-columns:1.15fr .85fr;max-width:1120px}
.bma-plate__scroll{position:absolute;bottom:40px;left:8vw;font-family:var(--bma-font-mono);font-size:10px;letter-spacing:.2em;color:var(--bma-muted)}
.bma-plate__lead{position:relative;z-index:1;max-width:760px;margin:0 auto;font-family:var(--bma-font-serif);font-style:italic;font-weight:300;font-size:clamp(19px,2.6vw,32px);line-height:1.45;color:var(--bma-sanguine)}
.bma-plate__lead em .bma-word.is-lit{color:var(--bma-sanguine)}
.bma-plate__text{margin-top:24px;max-width:640px;font-size:14.5px;line-height:1.95;color:var(--bma-ink-soft)}
.bma-plate__text strong{color:var(--bma-ink)}
.bma-plate--center .bma-plate__text em{color:var(--bma-sanguine)}
.bma-plate--center .bma-plate__text{margin-left:auto;margin-right:auto}
.bma-plate__tags{margin-top:20px;margin-bottom:24px;display:flex;flex-wrap:wrap;gap:9px}
.bma-plate__lead-in{font-size:11px;letter-spacing:.1em;color:var(--bma-muted);margin-top:24px}
.bma-plate__cta{margin-top:40px;display:flex;gap:20px;flex-wrap:wrap}
.bma-plate--center .bma-plate__cta{justify-content:center}

/* Fond alterné une planche sur deux à partir de la 2e — même règle
   et même couleur que l'accueil (#constat, #approche : #DBC58F),
   appliquée automatiquement à toutes les pages intérieures sans
   avoir à retagger chaque section à la main. */
.bma-thread > section:nth-of-type(2n){background:#DBC58F}

/* Grille 2 colonnes (Planche II : texte / liste — Planche III :
   leviers / encadré). */
.bma-plate__split{position:relative;z-index:1;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:start}
.bma-plate__split--even{grid-template-columns:1fr 1fr;max-width:1060px;gap:5vw}
@media (max-width:900px){
  .bma-plate__split,.bma-plate__split--even{grid-template-columns:1fr;gap:44px}
}

/* Liste en gros serif avec filets (Planche II). */
.bma-plate__biglist{display:flex;flex-direction:column}
.bma-plate__biglist span{display:block;font-family:var(--bma-font-serif);font-size:clamp(22px,2.6vw,30px);color:var(--bma-ink);padding:14px 0;border-top:1px solid var(--bma-line)}
.bma-plate__biglist span:last-child{border-bottom:1px solid var(--bma-line)}

/* Liste à puce (Planche III, « on travaille avec ») — puce CSS,
   pas d'icône image. */
.bma-plate__levier-list{display:flex;flex-direction:column}
.bma-plate__levier{display:flex;align-items:center;gap:20px;padding:16px 0;border-top:1px solid var(--bma-line)}
.bma-plate__levier:last-child{border-bottom:1px solid var(--bma-line)}
.bma-plate__levier::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bma-sanguine);opacity:.7;flex-shrink:0}
.bma-plate__levier span{font-family:var(--bma-font-serif);font-size:22px;color:var(--bma-ink)}

/* Encadré double filet (« Ce que beaucoup observent ») — coins
   gravés en CSS pur, aucune image. */
.bma-plate__callout{position:relative;border:1px solid rgba(74,58,42,.4);padding:7px}
.bma-plate__callout-inner{border:1px solid rgba(74,58,42,.22);padding:clamp(34px,5vw,64px);background:rgba(251,246,238,.5)}
.bma-plate__callout-corner{position:absolute;width:11px;height:11px}
.bma-plate__callout-corner:nth-child(1){top:2px;left:2px;border-top:1px solid var(--bma-sanguine);border-left:1px solid var(--bma-sanguine)}
.bma-plate__callout-corner:nth-child(2){top:2px;right:2px;border-top:1px solid var(--bma-sanguine);border-right:1px solid var(--bma-sanguine)}
.bma-plate__callout-corner:nth-child(3){bottom:2px;left:2px;border-bottom:1px solid var(--bma-sanguine);border-left:1px solid var(--bma-sanguine)}
.bma-plate__callout-corner:nth-child(4){bottom:2px;right:2px;border-bottom:1px solid var(--bma-sanguine);border-right:1px solid var(--bma-sanguine)}
.bma-plate__callout-list{display:flex;flex-direction:column;gap:14px;font-size:14.5px;line-height:1.7;color:var(--bma-ink)}

/* Séances numérotées (Planche IV) — le gap:1px + background crée
   les filets de séparation entre cellules. */
.bma-plate__numbered{position:relative;z-index:1;max-width:1060px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(36,30,24,.2)}
.bma-plate__num-item{background:var(--bma-parchment);padding:36px 30px;display:flex;gap:18px;align-items:baseline}
.bma-thread > section:nth-of-type(2n) .bma-plate__num-item{background:#DBC58F}
.bma-plate__num{font-family:var(--bma-font-mono);font-size:11px;color:var(--bma-ink)}
.bma-plate__num-label{font-family:var(--bma-font-serif);font-size:clamp(20px,2.4vw,28px);line-height:1.3;color:var(--bma-ink)}
@media (max-width:700px){
  .bma-plate__numbered{grid-template-columns:1fr}
}

/* Corps de texte « une phrase = un bloc respiré » — chaque <span>
   du .bma-plate__prose est une phrase du contenu source, empilée
   avec un léger espace, plutôt qu'un unique <p> avec des <br>. */
.bma-plate__prose{font-size:16.5px;line-height:2.02;color:var(--bma-ink-soft);max-width:62ch}
.bma-thread > section:nth-of-type(2n) .bma-plate__prose{color:var(--bma-ink)}
.bma-plate__prose span{display:block}
.bma-plate__prose span + span{margin-top:.85em}
@media (max-width:900px){
  .bma-plate__prose{font-size:16px;line-height:1.95}
}

/* Citation d'accent — sans filet par défaut ; .bma-plate__quote--rule
   ajoute le filet gauche pour les citations qui doivent ressortir
   davantage. */
.bma-plate__quote{font-family:var(--bma-font-serif);font-style:italic;font-size:clamp(19px,2.4vw,28px);line-height:1.5;color:var(--bma-ink)}
.bma-thread > section:nth-of-type(2n) .bma-plate__quote{color:var(--bma-ink)}
.bma-plate__quote--rule{border-left:2px solid var(--bma-sanguine);padding-left:26px}
.bma-plate__quote--sanguine{color:var(--bma-sanguine) !important;font-size:clamp(19px,2.5vw,30px)}
/* Variante lisible sur fond terre/doré (#DBC58F) : rouge plus sombre
   que --bma-sanguine, appliquée automatiquement sur les planches
   paires (même détection que le fond alterné). */
.bma-thread > section:nth-of-type(2n) .bma-plate__quote--rule{border-color:#8C2E22;color:#8C2E22}

/* Phrases mises en valeur, en cascade (ex. « J'ai vécu vite. »...) —
   réutilisent .bma-rv pour la révélation (même observer/mécanisme
   que le reste du site), avec un flou plus léger et un décalage
   plus court adapté aux phrases courtes qui s'enchaînent. */
.bma-plate__lines{display:flex;flex-direction:column;gap:14px}
.bma-plate__lines--tight{gap:12px}
.bma-plate__line{display:block;font-family:var(--bma-font-serif);font-size:clamp(21px,2.7vw,32px);line-height:1.35;color:var(--bma-ink)}
.bma-plate__line--lg{font-size:clamp(24px,3.2vw,38px);line-height:1.2}
.bma-plate__line--xl{font-size:clamp(22px,3vw,36px);line-height:1.25}
.bma-plate__line--accent{font-style:italic;color:var(--bma-sanguine)}
.bma-thread > section:nth-of-type(2n) .bma-plate__line--accent{color:#8C2E22}
.bma-rv.bma-plate__line.bma-rv--ready{opacity:0;filter:blur(9px);transform:translateY(10px);transition:opacity 1.2s cubic-bezier(.19,1,.22,1),filter 1.3s cubic-bezier(.19,1,.22,1),transform 1.2s cubic-bezier(.19,1,.22,1)}
.bma-rv.bma-plate__line.bma-rv--ready.bma-rv--in{opacity:1;filter:blur(0);transform:none}
.bma-plate__line--d1{transition-delay:.12s}
.bma-plate__line--d2{transition-delay:.24s}
.bma-plate__line--d3{transition-delay:.36s}
.bma-plate__line--d4{transition-delay:.52s}

/* Emplacement portrait vide (aucune image tant que Chloé n'en a pas
   fourni une) — cadre + texte indicatif, même mécanique de coins
   gravés que .bma-plate__callout. */
.bma-plate__portrait-slot{position:relative;border:1px solid rgba(74,58,42,.24);aspect-ratio:4/5;background:rgba(251,246,238,.35);display:flex;align-items:center;justify-content:center}
.bma-plate__portrait-hint{font-family:var(--bma-font-mono);font-size:10px;letter-spacing:.16em;color:var(--bma-muted);text-align:center;padding:0 20px}
.bma-plate__portrait-tag{position:absolute;top:10px;left:10px;background:var(--bma-parchment);padding:5px 10px;font-family:var(--bma-font-mono);font-size:9px;letter-spacing:.12em;color:var(--bma-muted)}

/* Bloc encadré par deux filets horizontaux (ex. « mouvements
   sauvages »), centré. */
.bma-plate__ruled-block{position:relative;z-index:1;max-width:820px;margin:0 auto 56px;padding:34px 0;border-top:1px solid var(--bma-line);border-bottom:1px solid var(--bma-line)}
.bma-plate__ruled-block .bma-plate__prose{margin-top:18px}

/* Grille de cartes texte à filets (ex. « Selon les personnes, cela
   peut passer par »), 3 colonnes. */
.bma-plate__cardgrid{position:relative;z-index:1;max-width:1060px;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(36,30,24,.22)}
.bma-plate__cardgrid-item{background:var(--bma-parchment);padding:30px 26px;font-family:var(--bma-font-serif);font-size:20px;line-height:1.35;color:var(--bma-ink)}
.bma-thread > section:nth-of-type(2n) .bma-plate__cardgrid-item{background:#DBC58F}
@media (max-width:900px){
  .bma-plate__cardgrid{grid-template-columns:1fr}
}

/* Liste numérotée à un rang (ex. les 6 niveaux, Planche I). */
.bma-plate__niveau-list{display:flex;flex-direction:column}
.bma-plate__niveau{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--bma-line)}
.bma-plate__niveau:last-child{border-bottom:1px solid var(--bma-line)}
.bma-plate__niveau-num{font-family:var(--bma-font-mono);font-size:10px;color:var(--bma-sanguine)}
.bma-plate__niveau-label{font-family:var(--bma-font-serif);font-size:21px;color:var(--bma-ink)}

/* 3 colonnes à filet supérieur (ex. les technologies corporelles). */
.bma-plate__cols3{position:relative;z-index:1;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.bma-plate__col{border-top:1px solid rgba(74,58,42,.35);padding:30px 20px 0 0}
.bma-plate__col-num{font-family:var(--bma-font-mono);font-size:10px;letter-spacing:.2em;color:var(--bma-sanguine);margin-bottom:14px}
.bma-plate__col-title{font-family:var(--bma-font-serif);font-weight:400;font-size:26px;color:var(--bma-ink);margin-bottom:14px}
.bma-plate__col-text{font-size:15.5px;line-height:1.95;color:var(--bma-ink-soft)}
@media (max-width:900px){
  .bma-plate__cols3{grid-template-columns:1fr;gap:30px}
}

/* Liste à tirets et filets (ex. l'environnement et l'image de soi). */
.bma-plate__dashlist{margin-top:20px;max-width:900px;display:flex;flex-direction:column}
.bma-plate__dashlist div{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--bma-line)}
.bma-plate__dashlist div:last-child{border-bottom:1px solid var(--bma-line)}
.bma-plate__dashlist span:first-child{font-family:var(--bma-font-mono);font-size:10px;color:var(--bma-sanguine)}
.bma-plate__dashlist span:last-child{font-family:var(--bma-font-serif);font-size:clamp(20px,2.3vw,26px);color:var(--bma-ink)}

/* Déclaration finale (conclusion) — pas la citation flou->net, un
   simple grand paragraphe serif léger. */
.bma-plate__statement{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(24px,3.2vw,42px);line-height:1.34;color:var(--bma-ink);max-width:840px;margin:0 auto}

/* Grand titre en colonne (ex. Planche « L'hygiène de vie »). */
.bma-plate__split-title{font-family:var(--bma-font-serif);font-weight:300;font-size:clamp(30px,4.2vw,54px);line-height:1.08;color:var(--bma-ink)}
.bma-plate__split--narrow-left{grid-template-columns:.8fr 1.2fr}

/* Contenu non fourni (ex. articles du blog, réseaux sociaux) —
   cadre en tirets, ton discret, jamais de fausse donnée. */
.bma-plate__placeholder{border:1px dashed rgba(74,58,42,.35);color:var(--bma-muted);font-family:var(--bma-font-mono)}
.bma-plate__placeholder-link{display:inline-flex;align-items:center;font-size:11px;letter-spacing:.14em;padding:13px 22px}

/* Case vide dans la grille numérotée (Planche « Le blog » : aucun
   article publié à ce stade) — même grille que .bma-plate__num-item,
   mise en page interne différente (empilée + lien). */
.bma-plate__num-item--empty{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;background:rgba(251,246,238,.45)}
.bma-plate__num-item--empty span{font-size:10px;letter-spacing:.18em}
.bma-plate__num-item--empty a{font-family:var(--bma-font-mono);font-size:11px;letter-spacing:.14em;color:var(--bma-sanguine)}