/* ==========================================================================
   Sudyord Custom — styles (site-sudyord, 30/09/2026)
   Direction: a tailor's workshop at night. Warm black, the GOLD of the logo for thread and stitches, the yellow of a
   tape measure, pattern paper for the templates, handwritten tailor's notes. Display type Anton (fight posters),
   text Montserrat (the brand's font), notes Caveat.
   ========================================================================== */
@property --sew { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --bg: #0b0a09; --bg-2: #120f0c; --card: #141415; --card-2: #1b1b1d; --line: rgba(233, 227, 214, .1); --line-2: rgba(233, 227, 214, .18);
  --txt: #f4efe6; --muted: #b3a996; --gold: #d9a441; --gold-hi: #f3d27a; --gold-lo: #9c7427; --gold-a: 217, 164, 65;
  --grad: linear-gradient(120deg, #f6dc8c 0%, #d9a441 45%, #a77a2a 100%);
  --tape: #efc94c; --paper: #f3efe6; --ink: #1d1a16; --danger: #ff8a7a;
  --f-h: 'Anton', 'Impact', 'Arial Narrow', sans-serif; --f-b: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-hand: 'Caveat', 'Segoe Print', cursive;
  --r: 18px; --r-sm: 11px; --hdr: 76px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); overflow-x: hidden; overflow-x: clip; }
body { margin: 0; color: var(--txt); font: 500 16px/1.7 var(--f-b); -webkit-font-smoothing: antialiased;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px), var(--bg); }   /* twill weave */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: min(1240px, 100% - 40px); margin-inline: auto; }
.gold { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 16px; border-radius: 8px; background: var(--gold); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }   /* the components set display: grid/flex, which would beat the attribute */

/* ---------- Loader: a needle sews a seam across a strip of fabric ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--bg); transition: transform .9s cubic-bezier(.76, 0, .24, 1), opacity .4s .5s; }
html:not(.is-loading) .loader:not(.is-done) { display: none; }
.loader.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader__logo { width: 210px; }
.loader__strip { position: relative; width: min(340px, 80vw); height: 34px; border-radius: 4px; background: repeating-linear-gradient(90deg, #1c1813 0 3px, #211c16 3px 6px); box-shadow: inset 0 0 0 1px var(--line-2); }
.loader__seam { position: absolute; left: 10px; top: 50%; height: 2px; width: calc((100% - 20px) * var(--p, 0)); margin-top: -1px; background: repeating-linear-gradient(90deg, var(--gold) 0 7px, transparent 7px 12px); }
.loader__needle { position: absolute; top: -14px; left: calc(10px + (100% - 20px) * var(--p, 0)); width: 3px; height: 40px; margin-left: -1px; border-radius: 2px; background: linear-gradient(#f4efe6, #9a948a); animation: piquer .22s ease-in-out infinite alternate; }
@keyframes piquer { to { transform: translateY(9px); } }
.loader__pct { margin: 0; font: 400 1.05rem/1 var(--f-h); letter-spacing: .12em; color: var(--muted); }
html.is-loading, html.is-loading body { overflow: hidden; }

/* ---------- Tape measure (scroll progress) ---------- */
.tape { position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 9px; pointer-events: none; }
.tape__fill { height: 100%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .7) 0 1px, transparent 1px 8px) bottom / 100% 45% no-repeat, repeating-linear-gradient(90deg, rgba(0, 0, 0, .85) 0 1.5px, transparent 1.5px 40px) bottom / 100% 90% no-repeat, var(--tape);
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* ---------- Header ---------- */
.header { position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: var(--hdr); transition: transform .45s var(--ease); }
.header::before { content: ""; position: absolute; inset: 0; background: rgba(11, 10, 9, 0); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; }
.header.is-scrolled::before { background: rgba(11, 10, 9, .8); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: flex-end; gap: 8px; text-decoration: none; }
.brand img { width: 138px; height: auto; }
.brand__tag { margin-bottom: 6px; font: 600 .66rem/1 var(--f-b); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__link { position: relative; display: block; padding: 8px 12px; color: var(--txt); font: 600 .84rem/1 var(--f-b); letter-spacing: .04em; text-decoration: none; opacity: .85; }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 9px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav__link:hover, .nav__link.is-active { opacity: 1; }
.nav__link:hover::after, .nav__link.is-active::after { transform: none; }
.burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--txt); transition: transform .3s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-open .burger span:nth-child(2) { opacity: 0; } .nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons: on hover their stitching runs ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: var(--r-sm); font: 700 .82rem/1 var(--f-b); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s, background-color .3s; }
.btn::after { content: ""; position: absolute; inset: 4px; border-radius: 7px; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: linear-gradient(90deg, currentColor 55%, transparent 0) top left / 10px 1.2px repeat-x, linear-gradient(90deg, currentColor 55%, transparent 0) bottom left / 10px 1.2px repeat-x, linear-gradient(0deg, currentColor 55%, transparent 0) top left / 1.2px 10px repeat-y, linear-gradient(0deg, currentColor 55%, transparent 0) top right / 1.2px 10px repeat-y;
  animation: fourmis .8s linear infinite paused; }
.btn:hover::after, .btn:focus-visible::after { opacity: .45; animation-play-state: running; }
@keyframes fourmis { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
.btn--gold { background: var(--grad); color: #1a140b; box-shadow: 0 12px 30px -14px rgba(var(--gold-a), .8), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--gold:hover { box-shadow: 0 18px 40px -14px rgba(var(--gold-a), .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn--ghost { color: var(--txt); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--gold-a), .7); }
.btn--lg { padding: 18px 30px; font-size: .88rem; }
.btn--sm { padding: 11px 16px; font-size: .72rem; }
.btn--block { width: 100%; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.linklike { padding: 0; border: 0; background: none; color: var(--muted); font: 600 .82rem/1.4 var(--f-b); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; cursor: pointer; }
.linklike:hover { color: var(--gold-hi); }
.chip { padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(11, 10, 9, .6); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--txt); font: 600 .74rem/1 var(--f-b); letter-spacing: .05em; cursor: pointer; }
.chip.is-on { background: rgba(var(--gold-a), .16); box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .7); color: var(--gold-hi); }

/* ---------- The fabric behind the page (tissu.js) : fixed, under the sections, never in the way of a click ---------- */
.tissu { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: .7; }

/* ---------- The thread down the page ---------- */
main { position: relative; overflow-x: clip; }   /* the tilted paper sheet and the cards entering from the side must not widen the page (on phones it zoomed out to 436 px) ; clip, NOT hidden: hidden would make a scroll container and kill the sticky 3D stage */
.thread { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.thread__path { stroke: rgba(var(--gold-a), .5); stroke-width: 1.6; stroke-dasharray: 8 7; stroke-linecap: round; }
.thread__needle { opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 6px rgba(var(--gold-a), .6)); }
.section, .values, .hero { position: relative; z-index: 1; }

/* ---------- Reveals ---------- */
[data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal="up"] { transform: translateY(34px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="blur"] { filter: blur(10px); }
[data-reveal="card"] { transform: translateY(46px) scale(.97); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Stitched cards: the dashed border is sewn round when they appear ---------- */
.stitched { position: relative; }
.stitched::after { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(var(--gold-a), .5); border-radius: calc(var(--r) - 7px); pointer-events: none;
  -webkit-mask: conic-gradient(from 0deg, #000 var(--sew), transparent 0); mask: conic-gradient(from 0deg, #000 var(--sew), transparent 0); transition: --sew 1.6s var(--ease) .25s; }
.stitched.is-in::after, .stitched:has(.is-in)::after { --sew: 360deg; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 30px) 0 110px; overflow: hidden; }
.hero__ring { position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 72% 50%, rgba(var(--gold-a), .12), transparent 70%), linear-gradient(90deg, rgba(11, 10, 9, .96) 18%, rgba(11, 10, 9, .55) 52%, rgba(11, 10, 9, .2) 78%, rgba(11, 10, 9, .45)), url("../img/ring.webp") 70% 50% / cover no-repeat;   /* 01/10: no 3D short any more, the ring photo shows on the right */
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
.hero__content { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); font: 700 .72rem/1.3 var(--f-b); letter-spacing: .2em; text-transform: uppercase; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero__title { max-width: 10.5ch; margin-bottom: 26px; font: 400 min(clamp(3rem, 1.4rem + 5.6vw, 6.4rem), 12vh)/.95 var(--f-h); text-transform: uppercase; letter-spacing: .005em; }
.hero__lead { max-width: 42ch; font-size: 1.12rem; color: #e3dccd; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__scroll { position: absolute; left: 50%; bottom: 30px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: molette 1.8s infinite; }
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Sections ---------- */
.section { padding: clamp(90px, 11vw, 150px) 0; }
.head { max-width: 760px; margin: 0 auto clamp(44px, 6vw, 70px); text-align: center; }
.label { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 .74rem/1 var(--f-b); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.label::before, .label::after { content: ""; width: 30px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 9px); }
.title { margin-bottom: 18px; font: 400 clamp(2.2rem, 1.2rem + 3.2vw, 4rem)/1 var(--f-h); text-transform: uppercase; }
.lead { max-width: 58ch; margin-inline: auto; color: var(--muted); font-size: 1.05rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.step { padding: 34px 30px 30px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.step__num { display: block; margin-bottom: 18px; font: 400 3.4rem/1 var(--f-h); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--gold-a), .8); }
.step__ico { width: 44px; height: 44px; margin-bottom: 14px; color: var(--gold); }
.step h3 { margin-bottom: 10px; font: 400 1.5rem/1.1 var(--f-h); text-transform: uppercase; }
.step p { margin: 0; color: var(--muted); }

/* ---------- The five styles: pattern paper pinned on the wall ---------- */
.tpls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; perspective: 1200px; }
.tpl { position: relative; display: flex; flex-direction: column; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .4s; }
.tpl.is-in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tpl.is-tilt { transition: transform .12s linear, box-shadow .4s; box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .95); }
.tpl:nth-child(odd) { rotate: -.6deg; } .tpl:nth-child(even) { rotate: .7deg; }
.tpl__pin { position: absolute; left: 50%; top: -9px; z-index: 2; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #b3121c 60%, #6d0a10); box-shadow: 0 4px 6px rgba(0, 0, 0, .5); }
.tpl__img { width: 100%; border-radius: 6px 6px 0 0; mix-blend-mode: multiply; }
.tpl__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 18px; border-top: 1.5px dashed rgba(29, 26, 22, .25); }
.tpl h3 { font: 400 1.35rem/1 var(--f-h); text-transform: uppercase; }
.tpl p { flex: 1; margin: 6px 0 14px; font-size: .88rem; line-height: 1.5; color: #4a443b; }
.tpl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tpl__dl { color: #6a4f14; font: 700 .74rem/1.2 var(--f-b); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- The 3D designer ---------- */
.cz__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 26px; align-items: start; }
.cz__stage { position: sticky; top: calc(var(--hdr) + 16px); aspect-ratio: 1 / 1.02; max-width: 100%; border-radius: var(--r); background: radial-gradient(60% 55% at 50% 42%, rgba(var(--gold-a), .14), transparent 72%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 40px), var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cz__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.cz__canvas.is-grab { cursor: grabbing; }
.cz--plat .cz__canvas { inset: auto 0; top: 50%; height: auto; transform: translateY(-50%); cursor: default; }
.cz__views { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cz__hint { position: absolute; top: 16px; left: 18px; z-index: 2; margin: 0; font: 600 1.3rem/1 var(--f-hand); color: var(--gold-hi); opacity: .8; transform: rotate(-3deg); pointer-events: none; }
.cz__nogl { position: absolute; left: 20px; right: 20px; top: 16px; z-index: 3; margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(11, 10, 9, .85); font-size: .85rem; color: var(--muted); }
.cz__panel { display: grid; gap: 14px; }
.cz__group { margin: 0; padding: 18px 18px 20px; border: 0; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.cz__group > :not(legend) { clear: both; }   /* the floated legend (no fieldset notch) must not squeeze the first field */
.cz__group legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font: 400 1.15rem/1 var(--f-h); letter-spacing: .04em; text-transform: uppercase; }
.cz__styles { clear: both; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cz__styles--2 { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 14px; justify-content: center; }
.cz__styles--2 .cz__style span { font-size: .82rem; }
.cz__styles--2 .cz__style img { object-fit: contain; object-position: 50% 50%; background: radial-gradient(75% 65% at 50% 45%, rgba(233, 227, 214, .2), rgba(0, 0, 0, .3) 78%); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px transparent; }
.cz__styles--2 .cz__style input:checked + img { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--gold); }
.cz__style { position: relative; display: grid; gap: 6px; justify-items: center; cursor: pointer; }
.cz__style input { position: absolute; opacity: 0; pointer-events: none; }
.cz__style img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 62%; border-radius: 9px; background: var(--paper); box-shadow: 0 0 0 2px transparent; transition: box-shadow .2s, transform .2s; }
.cz__style span { font: 600 .7rem/1.2 var(--f-b); color: var(--muted); }
.cz__style input:checked + img { box-shadow: 0 0 0 2px var(--gold); transform: translateY(-2px); }
.cz__style input:checked ~ span { color: var(--gold-hi); }
.cz__style input:focus-visible + img { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.cz__bord { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; }
.cz__bord > span { margin-right: 4px; font: 600 .72rem/1 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cz__bord label { position: relative; cursor: pointer; }
.cz__bord input { position: absolute; opacity: 0; pointer-events: none; }
.cz__bord b { display: inline-block; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); font: 600 .74rem/1 var(--f-b); }
.cz__bord input:checked + b { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-hi); }
.cz__bord input:focus-visible + b { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.cz__targets { clear: both; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cz__target { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 6px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); color: var(--txt); font: 600 .72rem/1 var(--f-b); cursor: pointer; }
.cz__target i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.cz__target.is-on { box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold-hi); }
.cz__swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cz__swatch { aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); cursor: pointer; transition: transform .2s var(--spring); }
.cz__swatch:hover { transform: scale(1.12); }
.cz__swatch.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.cz__custom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font: 600 .78rem/1 var(--f-b); color: var(--muted); }
.cz__custom input { width: 54px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.cz__tip { margin: -2px 0 12px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cz__file { position: relative; display: grid; gap: 2px; margin-bottom: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: pointer; }
.cz__file:hover { box-shadow: inset 0 0 0 1.5px rgba(var(--gold-a), .6); }
.cz__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cz__file span { font: 600 .86rem/1.3 var(--f-b); }
.cz__file small { color: var(--muted); font-size: .74rem; }
.cz__remove { margin: -4px 0 12px; }
.cz__remove { padding: 0; border: 0; background: none; color: var(--danger); font: 600 .78rem/1 var(--f-b); cursor: pointer; text-decoration: underline; }
/* the designer's categories: panels that open and close (02/10) */
.cz__acc { border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s; }
.cz__acc[open] { box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .45); }
.cz__acc > summary { display: flex; align-items: center; gap: 12px; padding: 17px 18px; cursor: pointer; list-style: none; font: 400 1.15rem/1 var(--f-h); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r); }
.cz__acc > summary::-webkit-details-marker { display: none; }
.cz__acc > summary em { margin-left: auto; font: 600 .72rem/1.3 var(--f-b); font-style: normal; letter-spacing: .02em; text-transform: none; text-align: right; color: var(--muted); }
.cz__acc > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s; }
.cz__acc[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.cz__acc[open] > summary { color: var(--gold-hi); }
.cz__acc > summary:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -3px; }
.cz__body { display: grid; gap: 14px; padding: 2px 18px 20px; }
.cz__body > * { margin: 0; min-width: 0; }
.cz__body .cz__styles, .cz__body .cz__targets { clear: none; margin: 0; }
.cz__body .cz__bord { margin: 0; }
.cz__body .field, .cz__body .cz__file { margin-bottom: 0; }
.cz__sub { padding-top: 6px; border-top: 1.5px dashed var(--line-2); font: 600 .72rem/2.4 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cz__slot:empty { display: none; }
.cz__palette { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px var(--line); }
.cz__palette .cz__custom { margin-top: 0; }
.cz__target[hidden], .cz__palette[hidden] { display: none; }
[data-zones] { display: grid; gap: 10px; }
.cz__zone { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--line); }
.cz__zone > * { margin: 0; min-width: 0; }
.cz__zone-t { font: 600 .9rem/1.25 var(--f-b); }
.cz__zone-t small { display: block; margin-top: 3px; font: 500 .76rem/1.35 var(--f-b); color: var(--muted); }
.cz__zone-texte { display: grid; gap: 10px; }
.cz__zone-texte .field { margin-bottom: 0; }
.cz__zone--dos, .cz__zone.is-diff > .cz__face { background: rgba(0, 0, 0, .3); }
.cz__face { display: grid; gap: 10px; }
.cz__face > * { margin: 0; min-width: 0; }
.cz__zone.is-diff > .cz__face { padding: 14px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); }
.cz__regl { display: grid; gap: 8px; padding-top: 10px; border-top: 1.5px dashed var(--line-2); }
.cz__regl-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 .72rem/1 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cz__zero { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--grad); color: #1a140b; box-shadow: 0 8px 18px -10px rgba(var(--gold-a), .9), inset 0 1px 0 rgba(255, 255, 255, .45); cursor: pointer; transition: transform .35s var(--spring); }
.cz__zero svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cz__zero:hover { transform: rotate(-180deg); }
.cz__zero:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.cz__range { display: grid; grid-template-columns: 86px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font: 600 .72rem/1 var(--f-b); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cz__range output { text-align: right; font-variant-numeric: tabular-nums; text-transform: none; color: var(--txt); }
.cz__range input { width: 100%; height: 26px; margin: 0; background: none; accent-color: var(--gold); cursor: pointer; }
.cz__th { padding: 9px 12px; border-radius: 9px; background: rgba(var(--gold-a), .08); font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cz__th b { font: 600 1.15rem/1.3 Kanit, sans-serif; color: var(--gold-hi); }
.order__liens { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.order__note { margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r-sm); background: rgba(var(--gold-a), .08); font-size: .86rem; line-height: 1.5; color: var(--muted); }
.cz__actions { display: grid; gap: 12px; padding-top: 4px; }
.cz__minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.cz__saved { margin: 0; text-align: center; font-size: .78rem; color: var(--muted); }

/* ---------- Fields ---------- */
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font: 600 .74rem/1.2 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--txt); font: 500 .96rem/1.4 var(--f-b); outline: none; transition: box-shadow .25s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: #141415; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .cz__file.is-invalid { box-shadow: inset 0 0 0 1.5px var(--danger); }
.field__msg { color: var(--danger); font-size: .8rem; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: .9rem; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); }

/* ---------- Pen and paper ---------- */
.paper { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.paper__text .title { text-align: left; }
.paper__text p { color: var(--muted); }
.paper__text .btn { margin-top: 10px; }
.paper__sheet { position: relative; margin: 0; padding: 14px 14px 12px; border-radius: 4px; background: var(--paper); rotate: -1.4deg; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95); }
.paper__sheet::before, .paper__sheet::after { content: ""; position: absolute; top: -12px; width: 110px; height: 30px; background: rgba(239, 201, 76, .78); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.paper__sheet::before { left: 30px; rotate: -6deg; } .paper__sheet::after { right: 30px; rotate: 5deg; }
.paper__sheet img { border-radius: 2px; }
.paper__sheet figcaption { margin-top: 10px; font: 600 1.25rem/1.2 var(--f-hand); color: #5a4a2c; }

/* ---------- Order ---------- */
.order { max-width: 900px; margin: 0 auto; padding: clamp(26px, 4vw, 44px); border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.order__group { margin: 0 0 22px; padding: 0; border: 0; }
.order__group legend { margin: 0 0 14px; font: 400 1.35rem/1 var(--f-h); letter-spacing: .03em; text-transform: uppercase; color: var(--gold-hi); }
.order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field--wide { grid-column: 1 / -1; }
.order__design { margin-bottom: 24px; padding: 16px; border-radius: var(--r-sm); background: rgba(var(--gold-a), .06); box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .25); }
.order__nodesign p { margin: 0; color: var(--muted); }
.order__preview img { width: 100%; border-radius: 8px; }
.order__preview p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 8px; font-size: .8rem; color: var(--muted); }
.form__error { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 90, 70, .12); color: #ffc0b5; font-size: .92rem; }
.form__demo { margin: 14px 0 0; padding: 11px 14px; border-radius: var(--r-sm); background: rgba(var(--gold-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .3); font-size: .86rem; line-height: 1.5; color: var(--muted); }
.form__demo a { color: var(--gold-hi); text-decoration: underline; }
.form__demo.is-flash { animation: demo-flash .9s ease-out; }
@keyframes demo-flash { 0% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px rgba(var(--gold-a), .35); } 100% { box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .3), 0 0 0 0 rgba(var(--gold-a), 0); } }
/* 3D switched off, not removed: <html data-3d="off"> hides what belongs to the designer and shows the twin written for the site without it */
html[data-3d="off"] .x3d { display: none !important; }
html:not([data-3d="off"]) .sans3d { display: none !important; }
/* the badge, the notes under the forms and the room kept for the badge only exist on the showcase copy (class is-demo, set in <head>) */
html:not(.is-demo) .demo-badge, html:not(.is-demo) .form__demo { display: none; }
html:not(.is-demo) .footer--badge { padding-bottom: 34px; }
.demo-badge { position: fixed; left: 14px; bottom: 14px; z-index: 60; padding: 8px 12px; border-radius: 999px; background: rgba(11, 10, 9, .82); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--muted); font: 600 .72rem/1 var(--f-b); letter-spacing: .04em; text-decoration: none; }
.demo-badge b { color: var(--gold-hi); font-weight: 700; }
.demo-badge:hover { box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .7); }
.form__ok { display: grid; justify-items: center; gap: 10px; margin-top: 16px; padding: 22px; border-radius: var(--r-sm); background: rgba(var(--gold-a), .08); text-align: center; }
.form__ok[hidden] { display: none; }
.form__ok svg { width: 56px; height: 56px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form__ok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace .7s .1s ease-out forwards; }
.form__ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace .45s .7s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.form__ok p { margin: 0; max-width: 46ch; }

/* ---------- Values ---------- */
.values { padding: clamp(50px, 7vw, 80px) 0; border-block: 1.5px dashed rgba(var(--gold-a), .3); background: rgba(0, 0, 0, .25); }
.values__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value { text-align: center; }
.value svg { width: 46px; height: 46px; margin: 0 auto 12px; color: var(--gold); }
.value h3 { margin-bottom: 6px; font: 400 1.5rem/1 var(--f-h); text-transform: uppercase; }
.value p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 70px); align-items: start; }
.contact__text .title { text-align: left; }
.contact__text p { color: var(--muted); }
.socials-title { margin: 26px 0 12px !important; font: 700 .74rem/1 var(--f-b); letter-spacing: .22em; text-transform: uppercase; color: var(--txt) !important; }
.socials { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.socials a { display: inline-flex; align-items: center; gap: 12px; color: var(--txt); font-weight: 600; text-decoration: none; }
.socials svg { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: rgba(var(--gold-a), .12); fill: var(--gold); }
.socials a:hover { color: var(--gold-hi); }
.contact__form { padding: clamp(24px, 3.5vw, 36px); border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Footer, toast ---------- */
.footer { position: relative; z-index: 1; padding: 34px 0; border-top: 1px solid var(--line); background: var(--bg); }   /* opaque: the fabric and its seam (tissu.js) stop at the footer */
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.footer img { width: 104px; }
.footer p { margin: 0; color: var(--muted); font-size: .8rem; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 250; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #221c15; box-shadow: inset 0 0 0 1px rgba(var(--gold-a), .45), 0 20px 40px -10px rgba(0, 0, 0, .8); font-size: .9rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .3s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .tpls { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) {
  .burger { display: block; }
  .nav { position: fixed; left: 0; right: 0; top: var(--hdr); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 22px; background: rgba(12, 11, 9, .74); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .3s, visibility 0s .35s; }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--ease), opacity .3s, visibility 0s; }
  .nav-open .header::before { background: rgba(12, 11, 9, .74); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
  .nav__list { flex-direction: column; }
  .nav__link { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 16px; }
  .cz__grid, .paper, .contact { grid-template-columns: 1fr; }
  .cz__stage { position: relative; top: auto; max-width: 620px; width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
}
@media (max-width: 899px) {
  .hero { align-items: flex-end; padding-top: calc(var(--hdr) + 60px); }
  .hero__ring { background: linear-gradient(180deg, rgba(11, 10, 9, .35), rgba(11, 10, 9, .7) 45%, rgba(11, 10, 9, .96) 80%), url("../img/ring.webp") 62% 0 / cover no-repeat; }
  .hero__scroll { display: none; }
}
@media (max-width: 720px) {
  .cz__stage { aspect-ratio: 1 / 1.18; }
  .cz__views { left: 8px; right: 8px; bottom: 12px; gap: 5px; flex-wrap: nowrap; }
  .cz__views .chip { padding: 8px 10px 10px; font-size: .72rem; }   /* a little more room under the word */
  .tpls { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tpl:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }   /* the 5th card, alone on its row, sits in the middle */
  .order__grid { grid-template-columns: 1fr; }
  .values__list { grid-template-columns: 1fr; gap: 30px; }
  .cz__swatches { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .hero__cta .btn { width: 100%; }
}
@media (max-width: 440px) { .tpls { gap: 12px; } .tpl__body { padding: 12px 12px 14px; } .tpl p { font-size: .8rem; } .cz__styles { gap: 5px; } }
@media (max-width: 359px) { .tpls { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; } }

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; filter: none; } .stitched::after { --sew: 360deg; } }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reduce-motion [data-reveal] { opacity: 1; transform: none; filter: none; }
.reduce-motion .stitched::after { --sew: 360deg; }
/* ---------- browser autofill: the field KEEPS its colours (Chrome painted it bluish white). An autofilled background
   cannot be changed, so a solid inner shadow covers it (03/10/2026). ---------- */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--txt); caret-color: var(--txt); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 0 1000px #0f0c0a !important; transition: background-color 600000s 0s, color 600000s 0s; }
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus { box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 0 0 1000px #0f0c0a !important; }
input:autofill, textarea:autofill { filter: none; }   /* Firefox adds a yellow filter */
/* ---------- back to top ---------- */
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(23, 19, 15, .92); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -16px #000; opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .3s, transform .5s var(--spring), background .25s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--gold); }
.totop svg { width: 21px; height: 21px; fill: none; stroke: var(--txt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.totop:hover svg { stroke: #1a140b; }
@media (max-width: 620px) { .totop { right: 14px; bottom: 60px; width: 46px; height: 46px; } }
/* ---------- cookie banner (built by mesure.js; dormant on the showcase copy) ---------- */
.cookies { position: fixed; z-index: 260; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; max-width: 880px; margin-inline: auto; padding: 18px 20px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px -20px #000; }
.cookies[hidden] { display: none; }
.cookies__txt { flex: 1 1 360px; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.cookies__txt p { margin: 0; }
.cookies__titre { margin-bottom: 4px !important; font: 400 1.25rem/1.1 var(--f-h); letter-spacing: .03em; text-transform: uppercase; color: var(--txt); }
.cookies__choix { display: flex; flex: 0 1 300px; gap: 10px; }
.cookies__btn { flex: 1; padding: 14px 18px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--txt); font: 700 .8rem/1 var(--f-b); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.cookies__btn--oui { background: var(--grad); box-shadow: none; color: #1a140b; }
.cookies__gerer { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 620px) { .cookies__choix { flex: 1 1 100%; } }

/* ---------- TABLET AUDIT (02/10) ----------
   · the template cards overflowed to the right (third card cut by the screen edge): a grid column in "1fr" cannot shrink
     below the natural width of the image it holds, unless the item says it may (min-width: 0) ;
   · the last words of the footer were hidden under the "back to top" button. */
.tpl { min-width: 0; }
.tpl__img { height: auto; }
@media (max-width: 1320px) { .footer__inner { padding-right: 62px; } }

/* ---------- DEMO BADGE vs FOOTER (02/10) ----------
   the "Demo · fon10.studio" badge is fixed at the bottom left: at the end of the page it sat on the last line of the footer
   ("Less motion" on phones and tablets, the logo on laptops). The footer keeps the height of the badge free under its content. */
.footer--badge { padding-bottom: 68px; }

/* FLUIDITÉ DU DÉFILEMENT (04/10/2026) : sur écran tactile et petit écran, les entrées gardent leur fondu mais plus le flou animé
   (le filtre le plus coûteux pendant qu'on fait défiler au doigt). Rien d'autre à alléger ici : les animations 3D s'arrêtent déjà hors écran. */
@media (hover: none), (max-width: 980px) { [data-reveal="blur"] { filter: none; } }

/* ---------- Under the loader, the hero is simply THERE (07/10/2026). Its entrance used to play hidden behind the loader: nobody saw it,
   and the page title was only counted as displayed once that hidden animation had ended. Same picture, title painted from the first frame.
   (Without the loader — second visit of the session — the entrance plays as before.) ---------- */
html.is-loading .hero [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }

/* ==========================================================================
   THE ATELIER (05/10/2026) — from the « values » band down to the footer.
   The fabric and its seam stop here: these two sections are ONE opaque block, on its own backdrop — a photo of a cutting
   table, lit by the slow sway of a lamp (see THE LIGHT below), all of it BEHIND the form. And the blocks no longer
   come in as one piece: each ITEM has its own entrance, staggered — the icon springs in, the title is wiped in, the line under
   it is stitched, the text rises ; in the contact section each line slides in, the social icons spin into place, the fields of
   the form rise one after the other. Everything hangs on the .is-in that main.js already sets (and removes when the block goes
   back under the screen: the entrance plays again).
   ========================================================================== */
.atelier { position: relative; z-index: 1; background: #0c0b0a; overflow: clip; }   /* ONE block for the two sections: one backdrop, one band of light (asked on 05/10/2026 — there was one per section) */
.atelier > .values { background: none; border-bottom: 0; padding-bottom: 0; }   /* no line, no gap between the two: one block */
/* the backdrop: a PHOTO of a cutting table seen from above — black cloth, paper pattern pieces, shears, a ruler (chosen by the founder
   on 05/10/2026 ; Pexels n° 6461103, free licence, kept whole in outils/source/). Dimmed and half drained of its colour, so that
   the kraft paper does not turn the block brown and the text stays the brightest thing on it ; its edges melt into the block. */
.atelier::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/atelier.webp?v=20261005a") 50% 40% / cover no-repeat; opacity: .24; filter: grayscale(.78) brightness(.8) contrast(1.08);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent); }
/* THE LIGHT (05/10/2026, second version). The band of light that swept across the block read as a gadget: it is gone. In its place,
   two slow movements, both plain transforms (nothing is repainted):
   - the photo drifts and closes in, barely, over half a minute, then comes back — a camera held over the cutting table ;
   - the workshop lamp: a wide, soft pool of warm light that sways from one side of the table to the other and breathes. */
.atelier::before { inset: -4%; transform-origin: 62% 42%; animation: atelier-derive 32s ease-in-out infinite alternate; will-change: transform; }
.atelier::after { content: ""; position: absolute; top: -30%; left: -10%; width: 80%; height: 130%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .15), rgba(255, 214, 140, .05) 55%, transparent);
  animation: atelier-lampe 19s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes atelier-derive { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.6%, -1.1%); } }
@keyframes atelier-lampe { from { transform: translate(-8%, 0) scale(1); opacity: .65; } 50% { opacity: 1; } to { transform: translate(46%, 6%) scale(1.12); opacity: .75; } }
@keyframes atelier-monte { from { opacity: 0; transform: translateY(24px); } }

/* the blocks only fade: their items do the moving */
.atelier .value[data-reveal], .atelier .contact__text[data-reveal], .atelier .contact__form[data-reveal] { transform: none; }

/* --- the three values --- */
.atelier .value svg { opacity: 0; transform: translateY(18px) scale(.4) rotate(-30deg); transition: transform .9s var(--spring), opacity .45s ease; transition-delay: calc(var(--d, 0) * 140ms + .1s); }
.atelier .value h3 { clip-path: inset(0 100% 0 0); transform: translateX(-12px); transition: clip-path .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 140ms + .3s); }
.atelier .value p { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 140ms + .5s); }
.atelier .value::after { content: ""; display: block; width: 56px; height: 2px; margin: 14px auto 0; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 10px); transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 140ms + .65s); }
.atelier .value.is-in svg { opacity: 1; transform: none; }
.atelier .value.is-in h3 { clip-path: inset(0 0 0 0); transform: none; }
.atelier .value.is-in p { opacity: 1; transform: none; }
.atelier .value.is-in::after { transform: none; }

/* --- contact: the text, line by line --- */
.atelier .contact__text > * { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .9s var(--ease), clip-path .9s var(--ease); }
.atelier .contact__text .title { clip-path: inset(0 0 100% 0); transform: translateY(26px); }
.atelier .contact__text.is-in > * { opacity: 1; transform: none; }
.atelier .contact__text.is-in .title { clip-path: inset(-10% 0 -10% 0); }
.atelier .contact__text > :nth-child(1) { transition-delay: .05s; }
.atelier .contact__text > :nth-child(2) { transition-delay: .16s; }
.atelier .contact__text > :nth-child(3) { transition-delay: .3s; }
.atelier .contact__text > :nth-child(4) { transition-delay: .42s; }
.atelier .contact__text > :nth-child(n + 5) { transition-delay: .5s; }
.atelier .socials li { opacity: 0; transform: translateX(-22px); transition: opacity .6s ease, transform .8s var(--ease); }
.atelier .socials svg { transform: scale(.3) rotate(-90deg); transition: transform .9s var(--spring); }
.atelier .contact__text.is-in .socials li { opacity: 1; transform: none; }
.atelier .contact__text.is-in .socials svg { transform: none; }
.atelier .socials li:nth-child(1), .atelier .socials li:nth-child(1) svg { transition-delay: .6s; }
.atelier .socials li:nth-child(2), .atelier .socials li:nth-child(2) svg { transition-delay: .72s; }
.atelier .socials li:nth-child(n + 3), .atelier .socials li:nth-child(n + 3) svg { transition-delay: .84s; }

/* --- contact: the fields of the form, one after the other (an animation, not a transition: the button keeps its own) --- */
.atelier .contact__form.is-in .field, .atelier .contact__form.is-in .btn { animation: atelier-monte .8s var(--ease) backwards; }
.atelier .contact__form.is-in .field:nth-of-type(2) { animation-delay: .2s; }
.atelier .contact__form.is-in .field:nth-of-type(3) { animation-delay: .32s; }
.atelier .contact__form.is-in .field:nth-of-type(4) { animation-delay: .44s; }
.atelier .contact__form.is-in .btn { animation-delay: .58s; }

/* less motion: everything is in place at once, the band of light is off */
@media (prefers-reduced-motion: reduce) { .atelier::after { display: none; } .atelier::before { animation: none; } .atelier *, .atelier *::after { transition-delay: 0s !important; animation-delay: 0s !important; } }
.reduce-motion .atelier::after { display: none; }
.reduce-motion .atelier::before { animation: none; }
.reduce-motion .atelier *, .reduce-motion .atelier *::after { transition-delay: 0s !important; animation-delay: 0s !important; }

/* ==========================================================================
   ITEM BY ITEM (05/10/2026) — in EVERY section, a block no longer comes in as one piece: once it is .is-in, each of its items
   plays its own entrance, staggered. Written as ANIMATIONS filled « backwards » (hidden only while they wait their turn), with
   the individual properties translate / scale / rotate: nothing here touches the transform or the transition an item already
   has (tilting cards, magnetic buttons, the pin's own placement), and when the block loses .is-in (back under the screen) the
   entrance simply plays again. With « less motion », none of this applies.
   ========================================================================== */
@keyframes it-monte { from { opacity: 0; translate: 0 24px; } }
@keyframes it-gauche { from { opacity: 0; translate: -28px 0; } }
@keyframes it-essuie { from { clip-path: inset(0 0 100% 0); translate: 0 26px; } to { clip-path: inset(-15% -5% -15% -5%); } }
@keyframes it-essuie-g { from { clip-path: inset(0 100% 0 0); translate: -12px 0; } to { clip-path: inset(-15% -5% -15% -5%); } }
@keyframes it-ressort { from { opacity: 0; scale: .4; rotate: -30deg; translate: 0 18px; } }
@keyframes it-epingle { from { opacity: 0; translate: 0 -46px; scale: 1.7; } }
@keyframes it-zoom { from { opacity: 0; scale: 1.09; } }
@media (prefers-reduced-motion: no-preference) {
  /* section headings: the label slides in, the title is wiped in from below, the lead rises */
  html:not(.reduce-motion) .head.is-in > .label { animation: it-gauche .7s var(--ease) .05s backwards; }
  html:not(.reduce-motion) .head.is-in > .title { animation: it-essuie .95s var(--ease) .16s backwards; }
  html:not(.reduce-motion) .head.is-in > .lead { animation: it-monte .8s var(--ease) .38s backwards; }
  /* the three steps: number, icon, title, text */
  html:not(.reduce-motion) .step.is-in .step__num { animation: it-gauche .7s var(--ease) calc(var(--d, 0) * 90ms + .18s) backwards; }
  html:not(.reduce-motion) .step.is-in .step__ico { animation: it-ressort .9s var(--spring) calc(var(--d, 0) * 90ms + .3s) backwards; }
  html:not(.reduce-motion) .step.is-in h3 { animation: it-essuie-g .8s var(--ease) calc(var(--d, 0) * 90ms + .42s) backwards; }
  html:not(.reduce-motion) .step.is-in p { animation: it-monte .8s var(--ease) calc(var(--d, 0) * 90ms + .55s) backwards; }
  /* the five styles: the sheet's drawing settles, its lines rise, then the pin is pushed in */
  html:not(.reduce-motion) .tpl.is-in .tpl__img { animation: it-zoom 1s var(--ease) calc(var(--d, 0) * 90ms + .1s) backwards; }
  html:not(.reduce-motion) .tpl.is-in .tpl__body > h3 { animation: it-essuie-g .8s var(--ease) calc(var(--d, 0) * 90ms + .3s) backwards; }
  html:not(.reduce-motion) .tpl.is-in .tpl__body > p { animation: it-monte .8s var(--ease) calc(var(--d, 0) * 90ms + .42s) backwards; }
  html:not(.reduce-motion) .tpl.is-in .tpl__actions { animation: it-monte .8s var(--ease) calc(var(--d, 0) * 90ms + .54s) backwards; }
  html:not(.reduce-motion) .tpl.is-in .tpl__pin { animation: it-epingle .55s var(--spring) calc(var(--d, 0) * 90ms + .7s) backwards; }
  /* pen and paper: the text line by line, the drawing settles, its caption last */
  html:not(.reduce-motion) .paper__text.is-in > * { animation: it-gauche .8s var(--ease) backwards; }
  html:not(.reduce-motion) .paper__text.is-in > .title { animation-name: it-essuie; animation-duration: .95s; }
  html:not(.reduce-motion) .paper__text.is-in > :nth-child(1) { animation-delay: .05s; }
  html:not(.reduce-motion) .paper__text.is-in > :nth-child(2) { animation-delay: .16s; }
  html:not(.reduce-motion) .paper__text.is-in > :nth-child(3) { animation-delay: .32s; }
  html:not(.reduce-motion) .paper__text.is-in > :nth-child(4) { animation-delay: .44s; }
  html:not(.reduce-motion) .paper__text.is-in > :nth-child(n + 5) { animation-delay: .56s; }
  html:not(.reduce-motion) .paper__sheet.is-in img { animation: it-zoom 1.1s var(--ease) .2s backwards; }
  html:not(.reduce-motion) .paper__sheet.is-in figcaption { animation: it-monte .8s var(--ease) .6s backwards; }
  /* the order form: its parts one after the other, each legend wiped in, the fields of each grid in turn */
  html:not(.reduce-motion) .order.is-in > .order__design { animation: it-monte .8s var(--ease) .15s backwards; }
  html:not(.reduce-motion) .order.is-in > .order__group { animation: it-monte .8s var(--ease) .28s backwards; }
  html:not(.reduce-motion) .order.is-in > .order__group ~ .order__group { animation-delay: .42s; }
  html:not(.reduce-motion) .order.is-in > .btn { animation: it-monte .8s var(--ease) .56s backwards; }
  html:not(.reduce-motion) .order.is-in legend { animation: it-essuie-g .8s var(--ease) .4s backwards; }
  html:not(.reduce-motion) .order.is-in .order__grid > * { animation: it-monte .7s var(--ease) backwards; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(1) { animation-delay: .36s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(2) { animation-delay: .42s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(3) { animation-delay: .48s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(4) { animation-delay: .54s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(5) { animation-delay: .6s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(6) { animation-delay: .66s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(7) { animation-delay: .72s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(8) { animation-delay: .78s; }
  html:not(.reduce-motion) .order.is-in .order__grid > :nth-child(n + 9) { animation-delay: .84s; }
}