/* Atelier WP — scènes 3D (20/10/2026). Sans JavaScript, sans WebGL ou avec « réduire les animations » :
   la section reste une section ordinaire (image de repli .atelier-3d__repli + étapes lisibles les unes sous les autres). */
.atelier-3d { position: relative; }
.atelier-3d__collant { position: relative; }
.atelier-3d__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.atelier-3d__repli { display: block; width: 100%; height: auto; }
.a3d-pret .atelier-3d__repli { display: none; }
/* section épinglée : la scène occupe l'écran pendant que la section défile */
.a3d-epingle.a3d-pret .atelier-3d__collant { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.a3d-epingle.a3d-pret .atelier-3d__etapes { position: relative; display: grid; }
.a3d-epingle.a3d-pret .atelier-3d__etape { grid-area: 1 / 1; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.a3d-epingle.a3d-pret .atelier-3d__etape.is-active { opacity: 1; transform: none; pointer-events: auto; }
.a3d-epingle.a3d-pret .atelier-3d__etape.is-past { transform: translateY(-24px); }
.atelier-3d__texte { position: relative; z-index: 1; }
/* barre de progression discrète */
.atelier-3d__progres { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--a3d-p, 0) * 100%); background: var(--a3d-accent, currentColor); opacity: .6; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .atelier-3d__etape { transition: none !important; } }

/* --- Sections générées par le moteur de pages (scripts/atelier_scenes3d.py) --- */
.atelier-3d { --a3d-accent: var(--wp--preset--color--accent, #b08d57); --a3d-papier: var(--wp--preset--color--paper, #f4eee2);
  --a3d-encre: var(--wp--preset--color--ink, #2b2219); --a3d-matiere: var(--wp--preset--color--surface, #e8dfcc); }
.atelier-3d.is-sombre { color: var(--wp--preset--color--surface, #f4eee2); --a3d-papier: var(--wp--preset--color--paper, #f4eee2); }
.atelier-3d__cadre { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 1200px; margin-inline: auto;
  padding: clamp(64px, 9vw, 120px) max(24px, env(safe-area-inset-right, 0px)) clamp(64px, 9vw, 120px) max(24px, env(safe-area-inset-left, 0px));
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .atelier-3d__cadre:has(.atelier-3d__repli) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.atelier-3d__texte { max-width: 460px; min-width: 0; }
.atelier-3d__surtitre { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--a3d-accent); margin: 0 0 18px; }
.atelier-3d__titre { margin: 0 0 24px; }
.atelier-3d__intro { margin: 0 0 24px; opacity: .85; }
.atelier-3d__etapes { display: grid; gap: 22px; }
.atelier-3d__etape h3 { margin: 0 0 6px; }
.atelier-3d__etape p { margin: 0; opacity: .82; }
.atelier-3d__num { display: block; font-family: var(--wp--preset--font-family--heading, Georgia, serif); font-size: 2.4rem; line-height: 1; color: var(--a3d-accent); margin-bottom: 6px; }
.atelier-3d__repli { border-radius: 2px; }
/* section prête : texte d'un côté, scène plein cadre */
.a3d-pret .atelier-3d__cadre { height: 100%; }
.a3d-epingle.a3d-pret .atelier-3d__cadre { min-height: 100svh; }
.a3d-pret[data-cote="gauche"] .atelier-3d__texte { margin-left: auto; }
.a3d-pret[data-cote="centre"] .atelier-3d__texte, .a3d-pret:not([data-cote]) .atelier-3d__texte { max-width: 520px; }
@media (max-width: 781px) {
  .a3d-epingle.a3d-pret .atelier-3d__cadre { align-items: end; padding-bottom: 6svh; }
  .a3d-pret .atelier-3d__texte { margin-left: 0; padding-top: 36px; background: linear-gradient(0deg, var(--a3d-scrim, color-mix(in srgb, var(--a3d-papier) 92%, transparent)) 72%, transparent); }
  .a3d-pret.is-sombre .atelier-3d__texte { --a3d-scrim: rgba(0,0,0,.6); }
  .a3d-pret .atelier-3d__titre { font-size: 1.9rem; margin-bottom: 14px; }
}

/* capture de l'image de repli */
.a3d-repli .atelier-3d__texte, .a3d-repli .atelier-3d__progres { visibility: hidden; }
.atelier-3d__titre { font-size: var(--wp--preset--font-size--x-large, clamp(2rem, 4vw, 3.2rem)); line-height: 1.1; }
.atelier-3d__etape h3 { font-size: var(--wp--preset--font-size--large, 1.5rem); }
.atelier-3d.is-sombre :is(.atelier-3d__titre, h3, p) { color: inherit; }