/* ==========================================================================
   atelier-studio.css — page /atelier (version studio) : la démo en direct, la séquence « on fabrique », les quatre
   temps épinglés, les étiquettes de tarifs, les polaroïds d'exemples, Nathalie, le devis simplifié, venir à l'atelier.
   Dépend de main.css (container, section, btn…) et de studio.css (tokens --st-*, st-*). Chargé APRÈS les deux.
   Seuls transform / opacity / clip-path sont animés.
   ========================================================================== */

/* l'attribut hidden garde le dernier mot sur les display inline-flex / grid des composants (interrupteurs, étiquettes, boutons) */
#main [hidden] { display: none !important; }

/* ---------- Hero ---------- */
.at-hero { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(48px, 7vw, 96px); position: relative; overflow: clip; }
.at-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 70% 30%, rgba(243,237,249,.95), transparent 70%), radial-gradient(40% 40% at 15% 60%, rgba(251,227,222,.6), transparent 70%); }
.at-head { display: grid; gap: 14px; max-width: 980px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.at-head .st-h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.7rem); max-width: 16ch; }
.at-head .st-lead { max-width: 64ch; }
html.lfn-js .at-head > * { opacity: 0; }
html.lfn-js .at-head > .is-in, html.lfn-js.lfn-rm .at-head > * { opacity: 1; }

/* ---------- Démo : scène + panneau ---------- */
.demo { display: grid; grid-template-columns: minmax(380px, 520px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.demo-scene { display: grid; gap: 10px; }
html.lfn-js .demo-stage, html.lfn-js .demo-panel, html.lfn-js .demo-help { opacity: 0; }
html.lfn-js .demo-stage.is-in, html.lfn-js .demo-panel.is-in, html.lfn-js .demo-help.is-in, html.lfn-js.lfn-rm .demo-stage, html.lfn-js.lfn-rm .demo-panel, html.lfn-js.lfn-rm .demo-help { opacity: 1; }
.demo-help { margin: 0; text-align: center; transition: opacity var(--st-d-short) var(--st-ease-out); font-size: var(--st-fs-0); font-weight: 500; color: var(--st-ink-soft); text-wrap: balance; }
.demo-help kbd { display: inline-block; min-width: 1.5em; padding: 0 .3em; border: 1px solid var(--st-line); border-bottom-width: 2px; border-radius: 4px; background: #fff; font-family: var(--st-font-title); font-weight: 700; font-size: .85em; line-height: 1.4; text-align: center; }
.demo-help .dh-touch { display: none; }
html.lfn-js .demo.is-making .demo-help { opacity: 0; }
@media (pointer: coarse), (max-width: 760px) { .demo-help .dh-fine { display: none; } .demo-help .dh-touch { display: inline; } }

.demo-stage { position: relative; aspect-ratio: 1; border-radius: var(--st-r-l); overflow: hidden; background: var(--st-cream-2); box-shadow: var(--st-sh-2), 0 0 0 1px var(--st-line);
  container-type: inline-size; user-select: none; -webkit-user-select: none; will-change: transform, opacity; }
/* le curseur du socle est caché sur la scène (data-cursor="hide") : le curseur natif reprend la main (flèche, main, redimension) */
html.lfn-has-cursor .demo-stage[data-cursor] { cursor: default; }
html.lfn-has-cursor .demo-mark, html.lfn-has-cursor .demo-logo { cursor: grab; }
html.lfn-has-cursor .demo-mark.is-dragging, html.lfn-has-cursor .demo-logo.is-dragging { cursor: grabbing; }
html.lfn-has-cursor .mk-handle { cursor: nwse-resize; }
.demo-canvas { position: absolute; inset: 0; }
.demo-product { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--st-d-mid) var(--st-ease-out), transform var(--st-d-long) var(--st-ease-out); transform: scale(1.03); }
.demo-product.is-on { opacity: 1; transform: scale(1); }
.demo-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(42,33,56,.06), inset 0 -60px 80px -60px rgba(42,33,56,.18); }

/* le texte posé sur le produit : déplaçable, redimensionnable */
.demo-mark { --fs: 11cqw; --scale: 1; --dx: 0px; --dy: 0px; --mk-font: var(--st-font-demo-1); --mk-color: #2A2138; --mk-weight: 400;
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); z-index: 3;
  padding: .12em .28em; font-family: var(--mk-font); font-weight: var(--mk-weight); font-size: calc(var(--fs) * var(--scale)); line-height: 1.1; color: var(--mk-color); white-space: nowrap;
  cursor: grab; touch-action: none; border-radius: 6px; will-change: transform; }
.demo-mark .mk-text { display: block; mix-blend-mode: multiply; text-shadow: 0 .02em .03em rgba(42,33,56,.14); }
.demo-mark.is-empty .mk-text { opacity: .32; font-family: var(--st-font-text); font-weight: 600; font-size: .5em; letter-spacing: .02em; mix-blend-mode: normal; text-shadow: none; }
.demo-mark::before { content: ""; position: absolute; inset: -4px; border: 1.5px dashed rgba(91,63,122,.6); border-radius: 8px; opacity: 0; transition: opacity var(--st-d-micro) var(--st-ease-out); pointer-events: none; }
.demo-mark:hover::before, .demo-mark:focus-visible::before, .demo-mark.is-active::before, .demo-stage.is-touched .demo-mark::before { opacity: 1; }
.demo-mark:focus-visible { outline: none; box-shadow: none; }
.demo-mark:active, .demo-mark.is-dragging { cursor: grabbing; }
.demo-mark.is-dragging::before { border-style: solid; }
.mk-handle { position: absolute; right: -11px; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--st-violet); box-shadow: var(--st-sh-1); cursor: nwse-resize; touch-action: none; padding: 0;
  opacity: 0; transform: scale(.6); transition: opacity var(--st-d-micro) var(--st-ease-out), transform var(--st-d-micro) var(--st-ease-out); }
.mk-handle::after { content: ""; position: absolute; inset: 5px; border-right: 2px solid var(--st-violet); border-bottom: 2px solid var(--st-violet); border-radius: 1px; }
.demo-mark:hover .mk-handle, .demo-mark.is-active .mk-handle, .demo-mark:focus-visible .mk-handle, .demo-stage.is-touched .mk-handle { opacity: 1; transform: scale(1); }
.demo-mark.is-empty .mk-handle { display: none; }
@media (pointer: coarse) { .mk-handle { width: 30px; height: 30px; right: -16px; bottom: -16px; } .mk-handle::after { inset: 8px; } }
/* texte floqué sur le doudou : rendu flex satiné (reflet, léger bord), jamais un relief de fil */
.demo-stage.is-floc .demo-mark .mk-text { text-shadow: 0 .035em .02em rgba(255,255,255,.72), 0 -.015em 0 rgba(42,33,56,.14), 0 0 .12em rgba(255,255,255,.35); filter: drop-shadow(0 .03em .06em rgba(42,33,56,.18)); mix-blend-mode: normal; letter-spacing: .01em; }

/* le logo exemple */
.demo-logo { --dx: 0px; --dy: 0px; --lg: 22cqw; position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: var(--lg); height: var(--lg); transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); z-index: 2; cursor: grab; touch-action: none; border-radius: 8px; will-change: transform; }
.demo-logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; pointer-events: none; display: block; }
.demo-logo::before { content: ""; position: absolute; inset: -4px; border: 1.5px dashed rgba(91,63,122,.6); border-radius: 8px; opacity: 0; transition: opacity var(--st-d-micro) var(--st-ease-out); }
.demo-logo:hover::before, .demo-logo:focus-visible::before, .demo-logo.is-dragging::before { opacity: 1; }
.demo-logo:focus-visible { outline: none; box-shadow: none; }

/* aide + étiquette de prix */
.demo-hint { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 6px); z-index: 4; pointer-events: none; margin: 0; white-space: nowrap; opacity: 0;
  transition: opacity var(--st-d-short) var(--st-ease-out), transform var(--st-d-short) var(--st-ease-out); }
.demo-hint span { display: inline-block; padding: 6px 12px; border-radius: var(--st-r-pill); background: rgba(42,33,56,.78); color: #fff; font-size: var(--st-fs-0); font-weight: 600; backdrop-filter: blur(6px); }
.demo-stage.has-text:not(.is-touched) .demo-hint { opacity: 1; transform: translate(-50%, 0); transition-delay: .55s; }
.demo-price { position: absolute; right: 14px; top: 14px; z-index: 4; display: grid; gap: 1px; padding: 10px 14px 11px 22px; border-radius: 5px 12px 12px 5px; text-align: left; transform: rotate(2deg); transform-origin: 14px 50%;
  color: var(--st-kraft-text); background: linear-gradient(135deg, #e3c79f, var(--st-kraft) 55%, var(--st-kraft-2)); box-shadow: 0 2px 0 rgba(90,63,28,.18), 0 10px 22px -10px rgba(42,33,56,.5); will-change: transform; }
.demo-price::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--st-cream); box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }
.demo-price::after { content: ""; position: absolute; left: -7px; top: 50%; width: 16px; height: 1.5px; margin-top: -6px; background: rgba(90,63,28,.55); transform: rotate(-35deg); transform-origin: right center; }
.demo-price .lbl { font-family: var(--st-font-title); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.demo-price .total { display: block; font-family: var(--st-font-title); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; will-change: transform; }
.demo-price .detail { font-size: .74rem; font-weight: 600; opacity: .85; max-width: 170px; line-height: 1.25; }
.demo-price .detail s { opacity: .7; }
.demo-price.is-quote .total { font-size: 1.25rem; }
@media (max-width: 760px) { .demo-price { right: 10px; top: 10px; padding: 8px 12px 9px 20px; } .demo-price .total { font-size: 1.4rem; } .demo-price .detail { max-width: 140px; } }

/* ---------- Panneau ---------- */
.demo-panel { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-r-l); box-shadow: var(--st-sh-1); will-change: transform, opacity; }
.dp-row { display: grid; gap: 8px; }
.dp-row-2 { grid-template-columns: auto 1fr; gap: 24px; }
.dp-row-2 > div { display: grid; gap: 8px; }
.dp-lbl { font-family: var(--st-font-title); font-weight: 700; font-size: var(--st-fs-1); color: var(--st-ink); }
.dp-lbl .hint { font-family: var(--st-font-text); font-weight: 500; font-size: var(--st-fs-0); color: var(--st-ink-soft); }
.supports { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.support { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 8px; border: 1.5px solid var(--st-line); border-radius: var(--st-r-m); background: var(--st-cream); font-family: var(--st-font-title); font-weight: 700; font-size: .82rem; color: var(--st-ink); line-height: 1.1; cursor: pointer;
  transition: border-color var(--st-d-micro), background-color var(--st-d-micro), transform var(--st-d-short) var(--st-ease-out); }
.support img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--st-cream-2); transition: transform var(--st-d-short) var(--st-ease-out); display: block; }
.support small { font-size: .72rem; font-weight: 600; color: var(--st-ink-soft); }
.support:hover { border-color: var(--st-violet); }
.support:hover img { transform: scale(1.06); }
.support[aria-pressed="true"] { border-color: var(--st-violet); background: var(--st-lavender); box-shadow: 0 0 0 1px var(--st-violet); }
.support[aria-pressed="true"] small { color: var(--st-violet-deep); }
.support.is-off { opacity: .55; }
.support.is-off small { color: var(--st-coral-text); }
.dp-input { position: relative; }
.dp-input .st-input { padding-right: 44px; font-weight: 600; font-size: 1.05rem; }
.dp-clear { position: absolute; right: 8px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--st-ink-soft); background: none; border: 0; cursor: pointer; }
.dp-clear:hover { background: var(--st-lavender); color: var(--st-violet-deep); }
.fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.font { display: grid; gap: 2px; justify-items: center; min-height: 64px; padding: 6px 4px; border: 1.5px solid var(--st-line); border-radius: var(--st-r-m); background: var(--st-cream); color: var(--st-ink); line-height: 1; cursor: pointer; transition: border-color var(--st-d-micro), background-color var(--st-d-micro); }
.font .smp { font-size: 1.55rem; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font small { font-family: var(--st-font-text); font-weight: 600; font-size: .7rem; color: var(--st-ink-soft); }
.font:hover { border-color: var(--st-violet); }
.font[aria-pressed="true"] { border-color: var(--st-violet); background: var(--st-lavender); box-shadow: 0 0 0 1px var(--st-violet); }
.colors { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.colors .st-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(42,33,56,.18); }
.colors .st-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st-violet); }
.range { width: 100%; height: 40px; margin: 0; accent-color: var(--st-violet); cursor: pointer; }
.dp-options { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: var(--st-fs-1); }
.switch small { display: block; font-weight: 500; font-size: var(--st-fs-0); color: var(--st-ink-soft); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: #d9d0e6; transition: background-color var(--st-d-short) var(--st-ease-out); }
.switch .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(42,33,56,.3); transition: transform var(--st-d-short) var(--st-ease-out); }
.switch input:checked + .sw { background: var(--st-violet); }
.switch input:checked + .sw::after { transform: translateX(18px); }
.switch input:focus-visible + .sw { box-shadow: var(--st-sh-focus); }
.dp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--st-line); margin-top: 2px; }
.dp-cta .st-small { flex-basis: 100%; margin: 0; }
html.lfn-js .dp-row, html.lfn-js .dp-cta { opacity: 0; }
html.lfn-js .dp-row.is-in, html.lfn-js .dp-cta.is-in, html.lfn-js.lfn-rm .dp-row, html.lfn-js.lfn-rm .dp-cta { opacity: 1; }

@media (max-width: 1000px) { .demo { grid-template-columns: minmax(320px, 440px) 1fr; } .support img { width: 44px; height: 44px; } }
@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .demo-scene { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 760px) {
  .supports { gap: 6px; }
  .support { padding: 6px 2px; font-size: .72rem; gap: 3px; } .support img { width: 40px; height: 40px; border-radius: 8px; } .support small { font-size: .66rem; }
  .fonts { gap: 6px; } .font .smp { font-size: 1.3rem; } .font small { font-size: .62rem; }
  .dp-row-2 { grid-template-columns: 1fr; gap: 14px; }
  .dp-cta .btn { flex: 1 1 auto; }
  .demo-hint { display: none; }
}

/* ---------- Séquence « on fabrique » (dans le cadre de la scène) ---------- */
.demo-make { position: absolute; inset: 0; z-index: 10; background: var(--st-night); color: #fff; overflow: hidden; border-radius: inherit; }
.demo-make .st-kicker { color: #f6d3cb; }
.mk-skip { position: absolute; right: 12px; top: 12px; z-index: 6; }
.mk-shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; transform-origin: 0 0; will-change: transform; }
.mk-shot-in { position: absolute; inset: 0; background: var(--st-cream-2); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.8), 0 0 0 6px #fff; }
.mk-shot-in .demo-product { transition: none; }
.mk-shot-in .demo-mark, .mk-shot-in .demo-logo { pointer-events: none; }
.mk-shot-in .demo-mark::before, .mk-shot-in .mk-handle { display: none; }
.mk-shot-cap { position: absolute; left: 0; top: 100%; margin: 18px 0 0; width: 300%; font-family: var(--st-font-title); font-weight: 700; font-size: 3.2em; color: #fff; white-space: nowrap; opacity: 0; transform-origin: 0 0; }
.mk-shot-cap .chk { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .3em; border-radius: 50%; background: var(--st-ok); font-size: .8em; }
.mk-press, .mk-box { position: absolute; inset: 0; display: grid; align-content: end; gap: 12px; padding: 18px; visibility: hidden; }
.mk-press img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; will-change: transform; }
.mk-press::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,18,38,.14), rgba(26,18,38,.5) 42%, rgba(26,18,38,.94)); }
.mk-cap { position: relative; display: grid; gap: 4px; max-width: 34ch; font-weight: 500; font-size: var(--st-fs-1); line-height: 1.4; text-wrap: pretty; text-shadow: 0 1px 2px rgba(26,18,38,.7), 0 0 16px rgba(26,18,38,.55); }
.mk-cap p { margin: 0; }
.mk-cap p:not(.st-kicker) { color: rgba(255,255,255,.9); }
.mk-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.mk-steps li { position: relative; padding-top: 18px; text-shadow: 0 1px 2px rgba(26,18,38,.7); font-family: var(--st-font-title); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mk-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; }
.mk-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; background: var(--st-coral); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--st-ease-in-out); }
.mk-steps li.is-on { color: #fff; } .mk-steps li.is-on::after { transform: scaleX(1); }
.mk-box { background: radial-gradient(80% 60% at 50% 30%, #3a2850, var(--st-night) 75%); }
.mk-box-svg { position: absolute; left: 50%; top: 8%; width: min(70%, 320px); transform: translateX(-50%); }
.mk-box-svg .bx-back { fill: #b08a55; } .mk-box-svg .bx-front { fill: #c9a271; }
.mk-box-svg .bx-lid { fill: #d7b98f; }
.mk-box-svg .bx-tag rect { fill: var(--st-paper); stroke: rgba(42,33,56,.35); stroke-width: 1; } .mk-box-svg .bx-string { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.5; } .mk-box-svg .bx-hole { fill: var(--st-night); }
.mk-box-svg .bx-tag text { font-family: var(--st-font-hand); font-size: 22px; fill: var(--st-violet); }
.mk-box-svg .bx-heart { fill: var(--st-coral); }
.mk-actions { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.mk-actions .btn { padding: 12px 22px; font-size: .95rem; }
@media (max-width: 480px) { .mk-actions .btn { flex: 1 1 100%; } .mk-cap { font-size: var(--st-fs-0); } .mk-box-svg { top: 4%; width: 58%; } }

/* ---------- Étapes épinglées : une seule illustration qui se transforme ---------- */
.steps { position: relative; }
.steps-pin { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-h) + 8px) clamp(40px, 6vw, 72px); }
.steps-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.steps-side { display: grid; gap: 16px; }
.steps-side .st-h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.steps-list { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 12px 14px; border-radius: var(--st-r-m); opacity: .42; transition: opacity var(--st-d-mid) var(--st-ease-out), background-color var(--st-d-mid) var(--st-ease-out), transform var(--st-d-mid) var(--st-ease-out); }
.step .num { grid-row: 1 / 3; font-family: var(--st-font-title); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; color: var(--st-coral-text); line-height: 1; padding-top: 4px; }
.step .st-h3 { font-size: 1.2rem; margin: 0; }
.step p { color: var(--st-ink-soft); font-size: var(--st-fs-1); max-width: 40ch; margin: 2px 0 0; }
.step.is-on { opacity: 1; background: #fff; box-shadow: var(--st-sh-1); transform: translateX(6px); }
.steps-dots { display: none; gap: 8px; justify-content: center; }
.steps-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(91,63,122,.25); transition: transform var(--st-d-short) var(--st-ease-out), background-color var(--st-d-short); }
.steps-dots i.is-on { background: var(--st-coral); transform: scale(1.3); }
.steps-art { position: relative; display: grid; place-items: center; }
.steps-svg { width: 100%; max-width: 620px; height: auto; overflow: visible; }
.sv-bubble { fill: none; stroke: var(--st-ink-soft); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-word { font-family: var(--st-font-hand); font-size: 84px; fill: var(--st-violet); }
.sv-pencil { opacity: 0; } .pc-body { fill: #e8b86d; } .pc-tip { fill: var(--st-ink); } .pc-cap { fill: var(--st-coral); }
.sv-tee { fill: #fff; fill-opacity: 0; stroke: var(--st-violet); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#artWord { opacity: 0; }
#artChips { opacity: 0; } .sv-chip { fill: #fff; stroke: var(--st-line); stroke-width: 1.5; }
#artPress { opacity: 0; } .sv-press { fill: var(--st-violet-deep); } .sv-press-arm { fill: #8a76a6; }
.sv-heat { fill: none; stroke: var(--st-coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#artBox, #artBoxBack { opacity: 0; } .sv-box { fill: #c9a271; stroke: #8b6a3e; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-box-front { fill: #d7b98f; }
.sv-lid { fill: #e3c79f; stroke: #8b6a3e; stroke-width: 2; stroke-linejoin: round; }
.sv-tag { fill: var(--st-paper); stroke: rgba(42,33,56,.35); stroke-width: 1.2; } .sv-string { fill: none; stroke: rgba(42,33,56,.45); stroke-width: 1.5; } .sv-hole { fill: var(--st-kraft-2); }
.sv-tag-text { font-family: var(--st-font-hand); font-size: 26px; fill: var(--st-violet); }
#artTag { opacity: 0; }
.sv-heart { fill: var(--st-coral); opacity: 0; }
/* mouvement réduit ou sans GSAP : état statique lisible (la pièce composée), les 4 étapes toutes visibles */
html.lfn-rm .sv-tee, .at-static .sv-tee { stroke-dashoffset: 0; fill-opacity: 1; }
html.lfn-rm #artWord, .at-static #artWord, html.lfn-rm #artChips, .at-static #artChips { opacity: 1; }
html.lfn-rm #artBubble, .at-static #artBubble, html.lfn-rm #artPress, .at-static #artPress, html.lfn-rm #artBox, .at-static #artBox, html.lfn-rm #artBoxBack, .at-static #artBoxBack { display: none; }
html.lfn-rm .step, .at-static .step { opacity: 1; }
html.lfn-rm .step.is-on, .at-static .step.is-on { background: none; box-shadow: none; transform: none; }
.at-static .steps-pin { min-height: 0; padding-block: clamp(48px, 7vw, 96px); }
@media (max-width: 900px) {
  .steps-pin { padding-block: calc(var(--header-h) + 8px) 24px; align-items: start; }
  .steps-grid { grid-template-columns: 1fr; gap: 10px; align-items: start; }
  .steps-side { order: 2; gap: 10px; }
  .steps-art { order: 1; }
  .steps-svg { max-width: min(100%, 46svh); overflow: hidden; }
  .steps-list { display: grid; margin-top: 0; }
  .steps-list .step { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); pointer-events: none; padding: 12px 14px; }
  .steps-list .step.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .steps-dots { display: flex; justify-content: flex-start; padding-left: 14px; }
  html.lfn-rm .steps-list .step, .at-static .steps-list .step { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }
  html.lfn-rm .steps-dots, .at-static .steps-dots { display: none; }
  .step .st-h3 { font-size: 1.1rem; } .step .num { font-size: 1.3rem; }
}

/* ---------- Tarifs : étiquettes kraft suspendues ---------- */
.tags-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); align-items: start; padding-top: 28px; }
.price-tag { position: relative; display: grid; gap: 8px; padding: 34px 26px 26px; border-radius: 10px 10px 14px 14px; text-align: center; color: var(--st-kraft-text);
  background: linear-gradient(160deg, #ead3ad, var(--st-kraft) 55%, var(--st-kraft-2)); box-shadow: 0 2px 0 rgba(90,63,28,.18), 0 20px 36px -18px rgba(42,33,56,.5);
  transform: rotate(var(--rot, 0deg)); transform-origin: 50% -30px; transition: transform var(--st-d-mid) var(--st-ease-out); }
.price-tag::before { content: ""; position: absolute; left: 50%; top: -30px; width: 2px; height: 32px; margin-left: -1px; background: rgba(90,63,28,.55); }
.price-tag .hole { position: absolute; left: 50%; top: 10px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--st-cream); box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.35); }
.price-tag:hover { transform: rotate(0deg); }
.pt-name { font-family: var(--st-font-title); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; }
.pt-price { font-family: var(--st-font-title); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--st-violet-deep); font-variant-numeric: tabular-nums; }
.pt-price.is-free { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-family: var(--st-font-hand); font-weight: 400; letter-spacing: 0; }
.pt-desc { font-size: var(--st-fs-1); font-weight: 500; line-height: 1.4; }
.tarifs-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 0; }
@media (max-width: 700px) { .tags-row { grid-template-columns: 1fr; gap: 42px; max-width: 420px; margin-inline: auto; } .price-tag:nth-child(2) { margin-top: 0; } }
@media (min-width: 701px) { .price-tag:nth-child(2) { margin-top: 28px; } }

/* ---------- Exemples : polaroïds ---------- */
.ex-head { margin-inline: auto; text-align: center; }
.pola-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: start; padding: 20px 10px 0; }
.pola-grid .st-pola:nth-child(2) { margin-top: 44px; } .pola-grid .st-pola:nth-child(4) { margin-top: 28px; }
.ex-cta { justify-content: center; margin: 40px 0 0; }
@media (max-width: 760px) { .pola-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 10px 4px 0; } .pola-grid .st-pola:nth-child(2) { margin-top: 24px; } .pola-grid .st-pola:nth-child(4) { margin-top: 0; } .pola-grid .st-pola figcaption { font-size: 1.15rem; } }

/* ---------- Nathalie : histoire complète (réglages about_*) ---------- */
.nath-grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.nath-photo { display: grid; gap: 18px; justify-items: center; }
.nath-pola { width: 100%; max-width: 340px; }
.nath-quote { margin: 0; text-align: center; }
.nath-text { display: grid; gap: 14px; }
.nath-text .st-h2 { margin: 0; }
.nath-intro { font-weight: 600; color: var(--st-violet-deep); }
.nath-story { display: grid; gap: 10px; }
.nath-story p { margin: 0; color: var(--st-ink-soft); line-height: 1.6; }
.nath-story p:empty { display: none; }
.nath-story .nath-last { font-weight: 600; color: var(--st-violet); }
.nath-cta { gap: 12px 24px; align-items: center; margin-top: 6px; }
.nath-sign { font-size: 2.6rem; color: var(--st-violet); line-height: 1; margin: 0; clip-path: inset(-20% 100% -20% 0); }
html.lfn-rm .nath-sign, .nath-sign.is-in { clip-path: inset(-20% 0 -20% 0); }
@media (max-width: 760px) { .nath-grid { grid-template-columns: 1fr; gap: 28px; } .nath-pola { max-width: 280px; } }

/* ---------- Devis simplifié (3 champs → /devis) ---------- */
.devis-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.devis-side { display: grid; gap: 14px; }
.devis-points { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.devis-points li { position: relative; padding-left: 28px; font-weight: 500; }
.devis-points li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--st-ok-soft); color: var(--st-ok); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.idea-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; padding: clamp(20px, 3vw, 32px); background: #fff; border-radius: var(--st-r-l); border: 1px solid var(--st-line); box-shadow: var(--st-sh-1); }
.idea-form .field-wide { grid-column: 1 / -1; }
.idea-form textarea.st-input { min-height: 120px; resize: vertical; }
.idea-form .st-field .check { top: 37px; }
.idea-actions { gap: 12px 16px; }
.idea-form.is-done .idea-actions { display: none; }
.st-form-success .btn { margin-top: 4px; }
@media (max-width: 900px) { .devis-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .idea-form { grid-template-columns: 1fr; } }

/* ---------- Venir : infos pratiques (réglages) + poster carte (LFNVenir) ---------- */
.venir { overflow: hidden; }
.venir-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.venir-card { display: grid; gap: 14px; }
.venir-card .st-h2 { margin: 0; }
.venir-card .practical { font-size: 1.1rem; line-height: 1.5; margin: 0; color: var(--st-ink); }
.venir-card .practical strong { font-family: var(--st-font-title); font-weight: 700; }
.venir-card .st-small { margin: 0; }
.venir-poster { --rot: 1.4deg; }
@media (max-width: 900px) { .venir-grid { grid-template-columns: 1fr; } .venir-poster { order: -1; } }