/* Studio Loom — premium dark. Near-black, burnished copper, warm cream. One committed dark world. */
:root {
  --noir: #0c0b0a; --nuit: #141210; --nuit-2: #1c1915; --ligne: rgba(242, 235, 224, 0.12);
  --creme: #f2ebe0; --gris: #a49c8f; --cuivre: #e2895a; --cuivre-2: #c76a3b;
  --max: 1200px; --g: clamp(1.2rem, 4.5vw, 3rem);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noir); color: var(--creme); font: 400 1.05rem/1.7 "Manrope", system-ui, sans-serif; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 4px; }
::selection { background: var(--cuivre); color: var(--noir); }
h1, h2, h3 { font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 500; letter-spacing: -0.015em; line-height: 1.02; margin: 0; text-wrap: balance; }
em { font-style: italic; color: var(--cuivre); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--g); }
.label { display: inline-flex; align-items: center; gap: 12px; font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
.label::before { content: ""; width: 28px; height: 1px; background: var(--cuivre); }
.muted { color: var(--gris); }
section { padding-block: clamp(5rem, 11vw, 9rem); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px; border-radius: 999px; font: 600 0.95rem/1 "Manrope", sans-serif; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.btn::after { content: "→"; transition: transform 200ms ease; }
.btn:hover::after { transform: translateX(4px); }
.btn--main { background: var(--cuivre); color: #160b05; }
.btn--main:hover { background: #ef9a6c; }
.btn--line { border-color: rgba(242, 235, 224, 0.35); color: var(--creme); background: transparent; }
.btn--line:hover { border-color: var(--creme); }
.btn--sm { padding: 10px 16px; font-size: 0.85rem; }
.btn--sm::after { content: none; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 300ms ease, border-color 300ms ease; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(12, 11, 10, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--ligne); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: "Bodoni Moda", serif; font-size: 1.35rem; letter-spacing: -0.01em; }
.brand svg { width: 34px; height: 34px; }
.links { display: flex; align-items: center; gap: 30px; }
.links a { text-decoration: none; font-size: 0.88rem; color: var(--gris); transition: color 160ms ease; }
.links a:hover, .links a[aria-current="page"] { color: var(--creme); }
.links a[aria-current="page"]:not(.btn) { box-shadow: 0 1px 0 var(--cuivre); }
.links .btn { color: var(--creme); padding: 11px 18px; font-size: 0.86rem; }
.links .btn--line[aria-current="page"] { border-color: var(--cuivre); }
.menu { display: none; }
@media (max-width: 1080px) { .links { gap: 20px; } }
@media (max-width: 899px) {
  .menu { all: unset; display: inline-flex; cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(242, 235, 224, 0.35); font: 600 0.88rem "Manrope", sans-serif; }
  .menu:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 3px; }
  .links { display: none; position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px var(--g) 26px; background: var(--noir); border-bottom: 1px solid var(--ligne); }
  .nav.open { background: var(--noir); }
  .nav.open .links { display: flex; }
  .links a { padding: 14px 0; font-family: "Bodoni Moda", serif; font-size: 1.7rem; color: var(--creme); border-bottom: 1px solid var(--ligne); }
  .links a[aria-current="page"]:not(.btn) { box-shadow: none; color: var(--cuivre); }
  .links .btn { margin-top: 18px; justify-content: center; font-family: "Manrope", sans-serif; font-size: 1rem; }
}

/* hero ad: a client's question, then the site page that answers it — four short scenes on a loop */
.hero { position: relative; padding: 0; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: radial-gradient(ellipse 55% 60% at 74% 55%, rgba(226, 137, 90, 0.13), transparent 70%), radial-gradient(ellipse 90% 70% at 20% 0%, #1a1613, var(--noir) 70%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--ligne) 1px, transparent 1px), linear-gradient(90deg, var(--ligne) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 60% 60%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 60%, #000 10%, transparent 75%); opacity: 0.3; pointer-events: none; }
.hero__in { position: relative; z-index: 2; width: 100%; padding: 104px 0 clamp(2rem, 5vh, 4rem); }
.hero .wrap.hero__grid { max-width: 1440px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 5.4vw, 6rem); line-height: 0.95; max-width: 11ch; margin: 22px 0 26px; }
.hero p { margin: 0 0 34px; max-width: 44ch; font-size: 1.12rem; color: #d9d1c4; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pause { all: unset; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--ligne); padding-bottom: 2px; }
.pause:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 4px; }

.ad { margin: 0; display: grid; gap: 14px; min-width: 0; }
.ad__stage { position: relative; height: 560px; }
.sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; }
.sc.on { opacity: 1; visibility: visible; transition: opacity 500ms ease; }

/* the question */
.ask { position: absolute; left: 0; top: 8px; z-index: 3; max-width: min(78%, 400px); padding: 16px 22px 18px; border-radius: 22px 22px 22px 6px; background: #f2ebe0; color: #1b1714; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7); transform: translateY(14px) scale(0.96); transform-origin: 0 100%; opacity: 0; transition: transform 450ms cubic-bezier(.2, .8, .2, 1), opacity 350ms ease; }
.ask__who { display: block; font: 500 0.66rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #9a5a35; margin-bottom: 4px; }
.hero .ask p { margin: 0; max-width: none; font: 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.2 "Bodoni Moda", serif; color: #1b1714; opacity: 0; transition: opacity 300ms ease; }
.dots { position: absolute; left: 22px; bottom: 20px; display: flex; gap: 5px; opacity: 1; transition: opacity 200ms ease; }
.dots b { width: 7px; height: 7px; border-radius: 50%; background: #9a5a35; animation: dot 900ms infinite ease-in-out; }
.dots b:nth-child(2) { animation-delay: 150ms; } .dots b:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.sc.asked .ask { opacity: 1; transform: none; }
.sc.typed .ask p { opacity: 1; }
.sc.typed .dots { opacity: 0; }

/* the device that answers */
.dv { position: absolute; left: 50%; bottom: 74px; z-index: 2; opacity: 0; transform: translate(-40%, 30px); transition: transform 650ms cubic-bezier(.2, .8, .2, 1), opacity 450ms ease, box-shadow 600ms ease; }
.dv--ph { width: 240px; height: 480px; border-radius: 38px; padding: 12px; background: #0d0c0b; box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.dv--lap { width: 540px; }
.dv--lap .sx { height: 330px; border-radius: 12px 12px 0 0; border: 10px solid #0d0c0b; border-bottom-width: 14px; box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.1); }
.dv--lap .base { height: 18px; margin: 0 -34px; border-radius: 0 0 16px 16px; background: linear-gradient(#3a332c, #1a1613); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); }
.dv--ph .sx { height: 100%; border-radius: 28px; padding: 30px 18px 18px; }
.sc.shown .dv { opacity: 1; transform: translate(-50%, 0); }
.sc.answered .dv--ph, .sc.answered .dv--lap .sx { box-shadow: 0 0 0 1px rgba(226, 137, 90, 0.45), 0 0 60px -10px rgba(226, 137, 90, 0.45), 0 40px 80px -30px rgba(0, 0, 0, 0.9); }

/* phone scenes: the question sits on the left, the phone to the right, so nothing covers the screen */
.sc:has(.dv--ph) .ask { top: 120px; max-width: min(46%, 330px); }
.sc:has(.dv--ph) .dv { left: 70%; }

/* the answer caption */
.hero .answer { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; max-width: none; text-align: center; font-size: 1rem; color: var(--creme); opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms ease; }
.sc.answered .answer { opacity: 1; transform: none; }

/* highlight on the element that answers */
.hit, .hit2 { position: relative; transition: box-shadow 400ms ease, transform 400ms ease, background 400ms ease, color 400ms ease; }
.sc.answered .hit { box-shadow: 0 0 0 3px #e2895a, 0 0 22px rgba(226, 137, 90, 0.75); transform: scale(1.06); }
.sc.answered .hit2 { box-shadow: 0 0 0 2px rgba(226, 137, 90, 0.7); }

/* screens, drawn at their real size */
.sx { overflow: hidden; font: 600 13px/1.35 "Manrope", sans-serif; position: relative; }
.sx h4 { margin: 4px 0 12px; font: 500 28px/1.05 "Bodoni Moda", serif; }
.sx small { display: block; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.notch { position: absolute; top: 10px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #0d0c0b; }
.go { margin-top: 18px; padding: 13px; border-radius: 10px; text-align: center; font-size: 13px; }
.bar { display: flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.22; }
.bar span { margin-left: 10px; }

.x-res { background: #fbfaf7; color: #1d2b2a; }
.x-res .slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.x-res .slots span { padding: 11px 0; text-align: center; border-radius: 9px; border: 1px solid #cfdcda; }
.x-res .slots .x { opacity: 0.3; text-decoration: line-through; }
.x-res .slots .hit { background: #2f6b66; border-color: #2f6b66; color: #fff; }
.x-res .go { background: #2f6b66; color: #fff; }

.x-hrs { background: #eceae6; color: #1f2124; }
.x-hrs .in2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; padding: 18px 22px; }
.x-hrs .open { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: #24693f; background: #e3efe6; max-width: none; }
.x-hrs .open i { width: 8px; height: 8px; border-radius: 50%; background: #2f9a5a; }
.x-hrs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12px; }
.x-hrs li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: 6px; }
.x-hrs .map { position: relative; height: 230px; border-radius: 12px; background: #d9d6cf; overflow: hidden; }
.x-hrs .map i { position: absolute; background: #fff; }
.x-hrs .r1 { left: -10%; right: -10%; top: 44%; height: 12px; transform: rotate(-12deg); }
.x-hrs .r2 { top: -10%; bottom: -10%; left: 55%; width: 12px; transform: rotate(8deg); }
.x-hrs .map b { position: absolute; left: 50%; top: 30%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d2492a; }

.x-sou { background: #13233a; color: #eef2f7; }
.x-sou .steps { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; }
.x-sou .steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.35); }
.x-sou .steps .on { background: #f2c14e; color: #13233a; border-color: #f2c14e; }
.x-sou .steps i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.3); }
.x-sou .f { display: grid; gap: 3px; margin-bottom: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); font-size: 10px; color: rgba(238, 242, 247, 0.65); }
.x-sou .f b { font-size: 13px; color: #eef2f7; }
.x-sou .go { background: #f2c14e; color: #13233a; }

.x-menu { background: #1d1612; color: #efe2cf; }
.x-menu .bar { border-bottom-color: rgba(239, 226, 207, 0.12); }
.x-menu .in3 { padding: 18px 26px; }
.x-menu h4 { font-style: italic; color: #e9b36a; }
.x-menu .tags { display: flex; gap: 8px; margin-bottom: 14px; }
.x-menu .tags span { padding: 5px 12px; border-radius: 99px; border: 1px solid rgba(239, 226, 207, 0.25); font-size: 12px; }
.x-menu .tags .hit { background: #e9b36a; color: #1d1612; border-color: #e9b36a; }
.x-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.x-menu li { display: flex; align-items: baseline; gap: 8px; transition: opacity 400ms ease; }
.x-menu li em { flex: 1; border-bottom: 1px dotted rgba(239, 226, 207, 0.35); }
.x-menu li b { font-size: 11px; color: #e9b36a; }
.sc.answered .x-menu li:not(.v) { opacity: 0.25; }

/* controls */
.ad__bar { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ad__trade { min-width: 11ch; text-align: right; font: 500 0.78rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cuivre); }
.ad__dots { display: flex; gap: 8px; }
.ad__dots button { all: unset; cursor: pointer; width: 26px; height: 4px; border-radius: 4px; background: rgba(242, 235, 224, 0.2); overflow: hidden; position: relative; }
.ad__dots button[aria-current="true"] { background: rgba(242, 235, 224, 0.35); }
.ad__dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; background: var(--cuivre); transform-origin: 0 50%; animation: fill var(--dur, 6s) linear forwards; }
.ad__dots.paused button::after { animation-play-state: paused; }
.ad__dots button:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 4px; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero .ad__note { margin: 0; max-width: none; text-align: center; font-size: 0.8rem; color: var(--gris); }

@media (max-width: 1100px) { .dv--lap { width: 470px; } .dv--lap .sx { height: 290px; } }
@media (max-width: 899px) {
  .hero { align-items: start; }
  .hero__in { padding-top: 100px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.8rem, 12vw, 4.4rem); }
  .ad__stage { height: 470px; }
  .ask { max-width: 88%; padding: 12px 16px 14px; }
  .dv { bottom: 84px; }
  .sc:has(.dv--ph) .ask { top: 70px; max-width: 48%; }
  .sc:has(.dv--ph) .dv { left: 72%; }
  .dv--ph { width: 190px; height: 380px; border-radius: 32px; padding: 10px; }
  .dv--ph .sx { padding: 26px 14px 14px; font-size: 11px; }
  .dv--ph .sx h4 { font-size: 22px; }
  .dv--lap { width: min(300px, 76vw); }
  .dv--lap .sx { height: 190px; font-size: 10px; border-width: 7px; border-bottom-width: 10px; }
  .dv--lap .sx h4 { font-size: 20px; margin-bottom: 8px; }
  .dv--lap .base { margin: 0 -18px; height: 12px; }
  .x-hrs .in2 { padding: 12px 14px; gap: 12px; } .x-hrs .map { height: 120px; } .x-hrs ul { font-size: 10px; gap: 5px; } .x-hrs .open { font-size: 10px; }
  .x-menu .in3 { padding: 12px 16px; } .x-menu ul { gap: 6px; } .x-menu .tags span { font-size: 10px; padding: 3px 9px; }
  .x-sou .f { padding: 6px 10px; margin-bottom: 7px; } .x-res .slots span { padding: 8px 0; } .go { margin-top: 12px; padding: 10px; }
  .hero .answer { font-size: 0.92rem; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc, .ask, .dv, .answer, .hit, .hit2, .ask p, .dots { transition: none !important; }
  .dots b { animation: none; }
}

/* manifesto */
.manifesto p { font-family: "Bodoni Moda", serif; font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.2; margin: 26px 0 0; max-width: 28ch; }
.manifesto p span { color: var(--gris); }

/* shared section bits */
.sec-h { font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin: 20px 0 0; max-width: 18ch; }
.sec-p { color: var(--gris); max-width: 54ch; margin: 18px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* home: where to go next */
.index { padding-top: 0; }
.doors { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; border-top: 1px solid var(--ligne); }
.doors a { display: grid; grid-template-columns: clamp(2.6rem, 5vw, 4rem) minmax(0, 1.3fr) minmax(0, 1fr) 3rem; align-items: baseline; gap: 0 clamp(14px, 3vw, 36px); padding: clamp(24px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--ligne); text-decoration: none; transition: padding-left 300ms ease, background-color 300ms ease; }
.doors__n { font: 500 0.82rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; color: var(--cuivre); }
.doors__t { font-family: "Bodoni Moda", serif; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; transition: color 200ms ease; }
.doors__d { color: var(--gris); }
.doors__go { justify-self: end; color: var(--cuivre); font-style: normal; transition: transform 250ms ease; }
.doors a:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(226, 137, 90, 0.09), transparent 70%); }
.doors a:hover .doors__t { color: var(--cuivre); }
.doors a:hover .doors__go { transform: translateX(6px); }
.doors a:focus-visible { outline-offset: -2px; }

/* trades ribbon */
.ribbon { overflow: hidden; border-block: 1px solid var(--ligne); padding-block: 26px; }
.ribbon__track { display: flex; gap: 44px; width: max-content; animation: drift 46s linear infinite; }
.ribbon span { font-family: "Bodoni Moda", serif; font-size: clamp(1.6rem, 3vw, 2.4rem); white-space: nowrap; color: var(--gris); }
.ribbon span:nth-of-type(odd) { color: var(--creme); font-style: italic; }
.ribbon i { align-self: center; flex: none; width: 10px; height: 10px; border: 1px solid var(--cuivre); border-radius: 50%; }
@keyframes drift { to { transform: translateX(-50%); } }

/* big call to action */
.cta h2 { font-size: clamp(2.8rem, 7vw, 6rem); max-width: 14ch; margin: 22px 0 30px; }
.cta p { color: var(--gris); max-width: 48ch; margin: 0 0 30px; }

/* inner page headers: same bones, each page its own dressing */
.page-top { padding: clamp(8.5rem, 18vh, 11rem) 0 clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--ligne); position: relative; overflow: hidden; }
.page-top .wrap { position: relative; z-index: 1; }
.page-top h1 { font-size: clamp(2.8rem, 6.6vw, 5.6rem); max-width: 16ch; margin: 22px 0 22px; }
.page-top p { margin: 0; max-width: 56ch; font-size: 1.12rem; color: var(--gris); }
.page-top--grid::after { content: ""; position: absolute; right: -4%; top: 0; bottom: 0; width: 56%; opacity: 0.1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(226, 137, 90, 0.9) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(242, 235, 224, 0.5) 0 1px, transparent 1px 22px);
  -webkit-mask: radial-gradient(ellipse 70% 80% at 60% 50%, #000, transparent); mask: radial-gradient(ellipse 70% 80% at 60% 50%, #000, transparent); }
.page-top--glow { background: radial-gradient(ellipse 55% 110% at 100% 0, rgba(226, 137, 90, 0.17), transparent 70%); }
.page-top--duo { background: radial-gradient(ellipse 50% 100% at 88% 40%, rgba(226, 137, 90, 0.11), transparent 70%); }
.page-top--plain { background: radial-gradient(ellipse 45% 100% at 85% 40%, rgba(226, 137, 90, 0.08), transparent 70%); }
.q-top { background: radial-gradient(ellipse 50% 100% at 88% 40%, rgba(226, 137, 90, 0.1), transparent 70%); }
.page-top--plain h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 20ch; }

/* ───── Ce qu'on fait : anatomie d'un site ───── */
.anat-sec { overflow-x: clip; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); }
.anat-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px clamp(28px, 6vw, 80px); align-items: end; }
.anat-head .sec-p { margin: 0; }
.anat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(2.2rem, 4.5vw, 3.8rem); }
.anat__stage { position: relative; margin: 0; container-type: inline-size; aspect-ratio: 1.2 / 1; }
.art { position: absolute; inset: 0; --ink: #1a1612; --soft: rgba(26, 22, 18, 0.14); font-family: "Manrope", sans-serif; }
.art i, .art b, .art s { font-style: normal; text-decoration: none; }
.art .reg { transition: outline-color 200ms ease, box-shadow 200ms ease; outline: 2px solid transparent; outline-offset: 0.5cqw; }
.anat[data-on="1"] .r1, .anat[data-on="2"] .r2, .anat[data-on="3"] .r3, .anat[data-on="4"] .r4, .anat[data-on="5"] .r5 { outline-color: var(--cuivre); }

.win { position: absolute; left: 0; top: 2cqw; width: 78cqw; height: 70cqw; background: var(--creme); color: var(--ink); border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(242, 235, 224, 0.2); }
.win__bar { display: flex; align-items: center; gap: 0.8cqw; height: 5.4cqw; padding: 0 2cqw; background: #e3dacb; }
.win__bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: rgba(26, 22, 18, 0.28); }
.win__bar span { margin-left: 2cqw; padding: 0.7cqw 3cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.55); font: 500 1.25cqw "IBM Plex Mono", monospace; color: rgba(26, 22, 18, 0.7); }
.win__hd { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.8cqw 3cqw; border-bottom: 1px solid var(--soft); }
.win__logo { display: flex; align-items: center; gap: 1.2cqw; }
.win__logo b { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; background: #c4673a; color: #fff; font: 500 2.2cqw "Bodoni Moda", serif; }
.win__logo span { font: 500 2.1cqw "Bodoni Moda", serif; white-space: nowrap; }
.win__nav { display: flex; gap: 2cqw; font-size: 1.35cqw; color: rgba(26, 22, 18, 0.65); }
.win__id { display: flex; align-items: center; gap: 0.7cqw; }
.win__id strong { margin-right: 0.8cqw; font: italic 500 2.6cqw "Bodoni Moda", serif; color: #c4673a; }
.win__id i { width: 2cqw; height: 2cqw; border-radius: 50%; border: 1px solid rgba(26, 22, 18, 0.25); background: var(--ink); }
.win__id i:nth-of-type(2) { background: #c4673a; }
.win__id i:nth-of-type(3) { background: #d9cdb9; }
.win__hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; padding: 3cqw; }
.win__txt small, .win__tool small { display: block; font: 500 1.2cqw "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26, 22, 18, 0.55); }
.win__title { margin: 1cqw 0 1.6cqw; font: 500 4.1cqw/1.04 "Bodoni Moda", serif; letter-spacing: -0.01em; }
.win__lines { display: grid; gap: 0.9cqw; margin: 0 0 2cqw; }
.win__lines i { height: 0.8cqw; border-radius: 1cqw; background: rgba(26, 22, 18, 0.2); }
.win__lines i:nth-child(1) { width: 92%; } .win__lines i:nth-child(2) { width: 78%; } .win__lines i:nth-child(3) { width: 60%; }
.win__btn { display: inline-block; padding: 1.1cqw 2.2cqw; border-radius: 99px; background: var(--ink); color: var(--creme); font-weight: 600; font-size: 1.45cqw; }
.win__ph { position: relative; min-height: 17cqw; border-radius: 1.2cqw; background: repeating-linear-gradient(135deg, #d9cdb9 0 1.2cqw, #e6dccb 1.2cqw 2.4cqw); display: grid; place-items: end start; padding: 1.4cqw; }
.win__ph span { padding: 0.5cqw 1.2cqw; border-radius: 99px; background: rgba(26, 22, 18, 0.78); color: var(--creme); font: 500 1.15cqw "IBM Plex Mono", monospace; }
.win__tool { display: flex; justify-content: space-between; gap: 2cqw; margin: 0 3cqw; padding: 2cqw; border: 1px solid rgba(26, 22, 18, 0.2); border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.4); }
.win__slots { display: flex; gap: 1cqw; margin-top: 1cqw; }
.win__slots span { padding: 0.8cqw 1.6cqw; border-radius: 0.8cqw; border: 1px solid rgba(26, 22, 18, 0.28); font-weight: 600; font-size: 1.5cqw; }
.win__slots .on { background: #c4673a; border-color: #c4673a; color: #fff; }
.win__slots .x { opacity: 0.35; text-decoration: line-through; }
.win__hrs p { margin: 1cqw 0 0; display: flex; align-items: center; gap: 0.8cqw; font-weight: 600; font-size: 1.5cqw; color: var(--ink); max-width: none; }
.win__hrs p i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #c4673a; }

.phn { position: absolute; right: 0; top: 24cqw; width: 25cqw; height: 58cqw; padding: 5cqw 2cqw 2cqw; border-radius: 4cqw; background: var(--creme); color: var(--ink); border: 0.9cqw solid #0d0c0b; box-shadow: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(242, 235, 224, 0.25); }
.phn__notch { position: absolute; top: 1.2cqw; left: 50%; width: 7cqw; height: 1.4cqw; margin-left: -3.5cqw; border-radius: 99px; background: #0d0c0b; }
.phn__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; }
.phn__top b { width: 3cqw; height: 3cqw; border-radius: 50%; background: #c4673a; }
.phn__top s { width: 3cqw; height: 1.6cqw; border-top: 0.35cqw solid var(--ink); border-bottom: 0.35cqw solid var(--ink); box-sizing: border-box; position: relative; }
.phn__title { margin: 0 0 1.4cqw; font: 500 2.7cqw/1.08 "Bodoni Moda", serif; }
.phn__lines { display: grid; gap: 0.8cqw; margin-bottom: 2.4cqw; }
.phn__lines i { height: 0.7cqw; border-radius: 1cqw; background: rgba(26, 22, 18, 0.2); }
.phn__lines i:last-child { width: 65%; }
.phn__b { display: block; margin-bottom: 1.2cqw; padding: 1.8cqw 0; border-radius: 99px; text-align: center; background: #c4673a; color: #fff; font-weight: 700; font-size: 1.9cqw; }
.phn__b--o { background: transparent; color: var(--ink); border: 1px solid rgba(26, 22, 18, 0.45); }

.snip { position: absolute; left: 4cqw; top: 67cqw; width: 54cqw; padding: 1.8cqw 2.2cqw; border-radius: 1.4cqw; background: #1c1915; border: 1px solid rgba(242, 235, 224, 0.22); box-shadow: 0 2.4cqw 5cqw -1.5cqw rgba(0, 0, 0, 0.9); }
.snip small { display: block; font: 500 1.15cqw "IBM Plex Mono", monospace; color: var(--gris); }
.snip b { display: block; margin: 0.7cqw 0 0.5cqw; font: 600 2cqw/1.25 "Manrope", sans-serif; color: var(--cuivre); }
.snip p { margin: 0; font-size: 1.5cqw; line-height: 1.4; color: #cfc7ba; max-width: none; }

.hot { position: absolute; width: max(24px, 3.8cqw); height: max(24px, 3.8cqw); margin: calc(max(24px, 3.8cqw) / -2) 0 0 calc(max(24px, 3.8cqw) / -2); border-radius: 50%; display: grid; place-items: center; background: var(--cuivre); color: #160b05; border: 2px solid var(--noir); font: 700 max(12px, 1.8cqw) "Manrope", sans-serif; z-index: 2; cursor: pointer; transition: transform 200ms ease, background-color 200ms ease; }
.hot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--cuivre); animation: ping 2.6s ease-out infinite; }
.hot.on { background: var(--creme); transform: scale(1.18); }
@keyframes ping { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.hot--1 { left: 57%; top: 11%; } .hot--2 { left: 41%; top: 19%; } .hot--3 { left: 50%; top: 62%; } .hot--4 { left: 98%; top: 38%; } .hot--5 { left: 58%; top: 80%; }

.leg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.leg li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 14px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.leg__n { grid-row: 1 / span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cuivre); font: 500 0.8rem "IBM Plex Mono", monospace; color: var(--cuivre); transition: background-color 200ms ease, color 200ms ease; }
.leg li.on .leg__n { background: var(--cuivre); color: var(--noir); }
.leg__t { all: unset; box-sizing: border-box; cursor: pointer; font-family: "Bodoni Moda", serif; font-size: 1.35rem; line-height: 1.15; padding: 4px 0; }
.leg__t:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 4px; }
.leg p { grid-column: 2; margin: 4px 0 0; color: var(--gris); font-size: 0.95rem; line-height: 1.6; }

/* monthly care: a month strip */
.month { background: var(--nuit); border-block: 1px solid var(--ligne); padding-block: clamp(4rem, 9vw, 7rem); }
.month__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px clamp(28px, 6vw, 80px); align-items: end; }
.month__head .sec-p { margin: 0; }
.strip { position: relative; height: 60px; margin-top: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(242, 235, 224, 0.4);
  background: repeating-linear-gradient(90deg, rgba(242, 235, 224, 0.3) 0 1px, transparent 1px 3.3333%) left bottom / 100% 14px no-repeat, repeating-linear-gradient(90deg, var(--cuivre) 0 2px, transparent 2px 23.3333%) left bottom / 100% 28px no-repeat; }
.strip span { position: absolute; top: 0; font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.strip span:first-child { left: 0; } .strip span:last-child { right: 0; }
.month__list { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.month__list li { position: relative; }
.tile { height: 100%; background: var(--noir); border: 1px solid var(--ligne); border-radius: 14px; overflow: hidden; }
.tile__top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--cuivre); color: #160b05; font: 500 0.68rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.tile__top i { width: 10px; height: 10px; border-radius: 50%; background: var(--noir); opacity: 0.85; }
.tile__body { padding: 22px 20px 26px; }
.tile svg { width: 38px; height: 38px; display: block; fill: none; stroke: var(--cuivre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.tile h3 { font-size: 1.5rem; margin-bottom: 10px; }
.tile p { margin: 0; color: var(--gris); font-size: 0.95rem; line-height: 1.6; }
.month__note { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 62ch; color: var(--gris); font-size: 0.97rem; }

/* who it's for: what each trade's customers ask */
.who-sec { padding-block: clamp(4rem, 9vw, 7rem); }
.qbs { list-style: none; margin: clamp(2.4rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(18px, 2.4vw, 32px); }
.qb:nth-child(3n + 2) { margin-top: 30px; }
.qb:nth-child(3n) { margin-top: 12px; }
.qb__q { margin: 0; padding: 22px 24px; background: var(--nuit-2); border: 1px solid var(--ligne); border-radius: 22px 22px 22px 4px; font: italic 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.2 "Bodoni Moda", serif; color: var(--creme); }
.qb__t { display: flex; align-items: center; gap: 10px; margin: 12px 0 0 6px; font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.qb__t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cuivre); }
.qbs__foot { margin: clamp(2.2rem, 4vw, 3rem) 0 0; color: var(--gris); }

/* ───── Comment ça se passe : timeline ───── */
.tl-sec { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem); }
.tl { --nw: clamp(5.5rem, 15vw, 11rem); --lx: calc(var(--nw) + 1rem); list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: var(--lx); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ligne); }
.tl::after { content: ""; position: absolute; left: var(--lx); top: 0; width: 2px; height: var(--fh, 100%); margin-left: -1px; background: linear-gradient(var(--cuivre), #ffc49a); box-shadow: 0 0 14px rgba(226, 137, 90, 0.6); }
.tl__i { --pt: clamp(2.2rem, 5vw, 4rem); position: relative; display: grid; grid-template-columns: var(--nw) minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 2rem; align-items: start; padding-block: var(--pt); }
.tl__n { font: 500 clamp(4.2rem, 11vw, 8.5rem)/0.8 "Bodoni Moda", serif; color: rgba(226, 137, 90, 0.08); -webkit-text-stroke: 1px var(--cuivre); transition: color 500ms ease, -webkit-text-stroke-color 500ms ease; }
.tl__dot { position: absolute; left: var(--lx); top: calc(var(--pt) + 1rem); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cuivre); border: 3px solid var(--noir); box-shadow: 0 0 0 1px var(--cuivre); transition: background-color 400ms ease, box-shadow 400ms ease; }
.tl__b h3 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 14px; }
.tl__b p { margin: 0; max-width: 46ch; color: var(--gris); font-size: 1.05rem; }
.tl.live .tl__i:not(.on) .tl__n { color: transparent; -webkit-text-stroke-color: rgba(242, 235, 224, 0.25); }
.tl.live .tl__i:not(.on) .tl__dot { background: var(--noir); box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.3); }
.tl.live { --fh: 0px; }
.tl__me { margin-top: 6px; padding: 18px 22px; border: 1px solid var(--ligne); border-radius: 14px; background: rgba(242, 235, 224, 0.03); display: grid; gap: 12px; font-size: 0.93rem; }
.tl__me p { margin: 0; display: grid; gap: 2px; color: #d9d1c4; }
.tl__me small { font: 500 0.66rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cuivre); }
.tl__tag { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--ligne); font: 500 0.7rem "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cuivre); }

.call-sec { background: var(--nuit); border-block: 1px solid var(--ligne); padding-block: clamp(4rem, 9vw, 7rem); }
.call-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.call-txt .sec-h { max-width: 12ch; }
.call-chips { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.call-chips li { display: flex; align-items: center; gap: 12px; color: #d9d1c4; }
.call-chips li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cuivre); background: radial-gradient(circle, var(--cuivre) 0 3px, transparent 4px); }
.call { margin: 0; background: #171411; border: 1px solid rgba(242, 235, 224, 0.2); border-radius: 20px; overflow: hidden; box-shadow: 0 50px 90px -50px #000, 0 0 70px -30px rgba(226, 137, 90, 0.4); }
.call__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--ligne); font: 500 0.7rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.call__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(242, 235, 224, 0.2); }
.call__bar b { margin-left: auto; font-weight: 500; color: var(--cuivre); display: inline-flex; align-items: center; gap: 8px; }
.call__bar b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cuivre); }
.call__body { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; padding: 14px; }
.call__main { padding: clamp(18px, 2.4vw, 28px); border-radius: 12px; background: #0e0c0a; border: 1px solid var(--ligne); }
.call__main > small { display: block; margin-bottom: 18px; font: 500 0.68rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: a; }
.agenda li { counter-increment: a; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 12px; }
.agenda li::before { content: counter(a); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--cuivre); color: #160b05; font: 700 0.85rem "Manrope", sans-serif; }
.agenda h3 { font-size: 1.4rem; margin: 3px 0 6px; }
.agenda p { margin: 0; color: var(--gris); font-size: 0.95rem; line-height: 1.6; }
.call__side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.vt { position: relative; min-height: 120px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #2a2420, #14110e); border: 1px solid var(--ligne); }
.vt svg { width: 52px; height: 52px; }
.vt__ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--cuivre); font: 500 1.2rem "Bodoni Moda", serif; color: var(--creme); box-shadow: 0 0 0 6px rgba(226, 137, 90, 0.12); }
.vt > span { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 99px; background: rgba(12, 11, 10, 0.75); font: 500 0.62rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--creme); }
.call__prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 14px 0; }
.call__prog i { height: 4px; border-radius: 4px; background: rgba(242, 235, 224, 0.18); }
.call__prog i:first-child { background: var(--cuivre); }
.call__time { display: flex; justify-content: space-between; padding: 8px 14px 0; font: 500 0.64rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.call__ctl { display: flex; justify-content: center; gap: 12px; padding: 14px; }
.call__ctl span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 235, 224, 0.1); }
.call__ctl span:last-child { width: 58px; border-radius: 99px; background: var(--cuivre-2); }
.call__ctl svg { width: 18px; height: 18px; fill: none; stroke: var(--creme); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ───── À propos ───── */
.team { padding-block: clamp(3.5rem, 8vw, 6rem); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 3vw, 34px); align-items: stretch; margin-top: clamp(2rem, 4.5vw, 3.5rem); }
.who { background: var(--nuit); border: 1px solid var(--ligne); border-radius: 22px; padding: clamp(26px, 3.4vw, 44px); }
.who__mark { width: 112px; height: 112px; margin-bottom: 28px; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(226, 137, 90, 0.26), transparent 70%), #100e0c; border: 1px solid rgba(226, 137, 90, 0.5); }
.who__mark svg { width: 64px; height: 64px; }
.who__role { font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cuivre); }
.who h3 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin: 12px 0 14px; }
.who p { margin: 0 0 22px; color: var(--gris); }
.who ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who li { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--ligne); font-size: 0.88rem; color: #d9d1c4; }
.duo__plus { align-self: center; font: 400 3rem/1 "Bodoni Moda", serif; color: var(--cuivre); }

.vows { background: var(--nuit); border-block: 1px solid var(--ligne); padding-block: clamp(4rem, 9vw, 7rem); }
.vows__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.vows__h { position: sticky; top: 110px; }
.vows__h .sec-h { max-width: 11ch; }
.vows__l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.vows__l li { display: grid; grid-template-columns: clamp(4.4rem, 9vw, 8rem) minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(26px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--ligne); }
.vows__n { font: 500 clamp(4rem, 9vw, 7.5rem)/0.8 "Bodoni Moda", serif; color: transparent; -webkit-text-stroke: 1px var(--cuivre); }
.vows__l h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 2px 0 10px; }
.vows__l p { margin: 0; color: var(--gris); max-width: 46ch; }

.never { padding-block: clamp(4rem, 9vw, 7rem); }
.never__l { list-style: none; margin: clamp(2rem, 4.5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.never__l li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 16px; align-items: start; padding: 24px 26px; border: 1px solid var(--ligne); border-radius: 16px; }
.never__l li::before { content: ""; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--cuivre);
  background: linear-gradient(45deg, transparent calc(50% - 1px), var(--cuivre) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--cuivre) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); background-size: 50% 50%; background-position: center; background-repeat: no-repeat; }
.never__l b { display: block; font: 500 1.4rem/1.2 "Bodoni Moda", serif; margin-bottom: 6px; }
.never__l span { color: var(--gris); font-size: 0.97rem; }

/* ───── Questions ───── */
.q-top { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.q-search { display: none; position: relative; margin-top: 34px; max-width: 620px; }
.js .q-search { display: block; }
.q-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--gris); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.q-search input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--creme); background: rgba(242, 235, 224, 0.05); border: 1px solid rgba(242, 235, 224, 0.3); border-radius: 99px; padding: 16px 22px 16px 54px; }
.q-search input::placeholder { color: #8f887c; }
.q-search input:focus { outline: none; border-color: var(--cuivre); background: rgba(226, 137, 90, 0.06); }
.q-body { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 9vw, 7rem); }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.js .q-grid { grid-template-columns: 250px minmax(0, 1fr); }
.q-side { display: none; position: sticky; top: 100px; }
.js .q-side { display: block; }
.q-side > small { display: block; margin-bottom: 14px; font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.q-chips { display: flex; flex-direction: column; gap: 6px; }
.q-chip { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ligne); font-size: 0.97rem; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.q-chip em { font: 500 0.72rem "IBM Plex Mono", monospace; font-style: normal; color: var(--gris); }
.q-chip:hover { border-color: var(--cuivre); }
.q-chip[aria-pressed="true"] { background: var(--creme); color: var(--noir); border-color: var(--creme); }
.q-chip[aria-pressed="true"] em { color: #5a5247; }
.q-chip:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 3px; }
.q-count { margin: 18px 0 0; font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.qg { padding: 0; }
.qg + .qg { margin-top: clamp(3rem, 6vw, 5rem); }
.qg h2 { display: flex; align-items: baseline; gap: 16px; font-size: clamp(2rem, 3.6vw, 3rem); }
.qg h2 small { font: 500 0.78rem "IBM Plex Mono", monospace; letter-spacing: 0.12em; color: var(--cuivre); }
.qa { margin-top: 22px; border-top: 1px solid var(--ligne); }
.qa details { border-bottom: 1px solid var(--ligne); padding: 24px 0; }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-family: "Bodoni Moda", serif; font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.2; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font-family: "Manrope", sans-serif; color: var(--cuivre); font-size: 1.5rem; transition: transform 200ms ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--cuivre); }
.qa details p { margin: 14px 0 0; color: var(--gris); max-width: 62ch; }
.q-empty { padding: 32px; border: 1px dashed rgba(242, 235, 224, 0.3); border-radius: 16px; color: var(--gris); }
.q-empty a { color: var(--creme); }

/* ───── Être rappelé ───── */
.rq { padding: clamp(8.5rem, 18vh, 11rem) 0 clamp(4rem, 9vw, 7rem); background: radial-gradient(ellipse 55% 60% at 12% 18%, rgba(226, 137, 90, 0.13), transparent 70%); }
.rq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "intro form" "side form"; grid-template-rows: auto 1fr; gap: 0 clamp(2rem, 6vw, 6rem); align-items: start; }
.rq__intro { grid-area: intro; }
.rq__intro h1 { font-size: clamp(2.8rem, 5.2vw, 4.8rem); max-width: 12ch; margin: 22px 0; }
.rq__intro p { margin: 0; color: var(--gris); font-size: 1.1rem; max-width: 40ch; }
.rq__side { grid-area: side; margin-top: clamp(2rem, 4vw, 3rem); }
.rq__form { grid-area: form; }
.rq__steps { list-style: none; margin: 0; padding: 0; counter-reset: r; display: grid; gap: 0; }
.rq__steps li { counter-increment: r; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 22px; }
.rq__steps li:last-child { padding-bottom: 0; }
.rq__steps li::before { content: counter(r); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--cuivre); font: 500 0.8rem "IBM Plex Mono", monospace; color: var(--cuivre); background: var(--noir); position: relative; z-index: 1; }
.rq__steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 34px; bottom: 0; width: 1px; background: linear-gradient(var(--cuivre), var(--ligne)); }
.rq__mail { margin: 26px 0 0; font-size: 0.95rem; color: var(--gris); }
.rq__mail a { color: var(--creme); }

form.cb { display: grid; gap: 22px; padding: clamp(24px, 4vw, 44px); background: var(--creme); color: #1a1612; border-radius: 22px; box-shadow: 0 50px 100px -50px rgba(226, 137, 90, 0.45); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fld { display: grid; gap: 8px; min-width: 0; }
.fld label, .fld legend { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #564e44; padding: 0; margin-bottom: 4px; }
.fld .opt { text-transform: none; letter-spacing: 0; }
.fld input, .fld select, .fld textarea { font: inherit; color: #1a1612; background: transparent; border: 0; border-bottom: 1px solid rgba(26, 22, 18, 0.4); border-radius: 0; padding: 10px 0; width: 100%; }
.fld select option { background: var(--creme); color: #1a1612; }
.fld textarea { border: 1px solid rgba(26, 22, 18, 0.3); border-radius: 12px; padding: 12px 14px; }
.fld input::placeholder, .fld textarea::placeholder { color: #756d61; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: #a24f25; box-shadow: 0 1px 0 #a24f25; }
.fld.bad input, .fld.bad select { border-color: #a3261b; }
fieldset.fld { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; font-family: "Manrope", sans-serif; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(26, 22, 18, 0.35); font-size: 0.92rem; text-transform: none; letter-spacing: 0; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.chips input:checked + span { background: #1a1612; color: var(--creme); border-color: #1a1612; }
.chips input:focus-visible + span { outline: 2px solid #a24f25; outline-offset: 3px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 0.88rem; color: #3f392f; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: #a24f25; }
.consent a { color: #1a1612; }
.err { color: #a3261b; margin: 0; min-height: 1.4em; font-weight: 600; }
.hp { position: absolute; left: -9999px; }
form.cb .btn--main { background: #1a1612; color: var(--creme); }
form.cb .btn--main:hover { background: #33291f; }
form.cb :focus-visible { outline-color: #a24f25; }
.done { padding: clamp(28px, 4vw, 44px); background: var(--creme); color: #1a1612; border-radius: 22px; }
.done .label { color: #564e44; }
.done h3 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 18px 0 12px; }
.done .muted { color: #3f392f; }

/* ───── Confidentialité ───── */
.legal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem); }
html:has(.legal) { scroll-padding-top: 100px; }
.toc { position: sticky; top: 100px; }
.toc small { display: block; margin-bottom: 14px; font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--ligne); counter-reset: t; }
.toc a { display: block; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--gris); font-size: 0.92rem; line-height: 1.4; transition: color 160ms ease, border-color 160ms ease; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--creme); border-left-color: var(--cuivre); }
.legal__body { max-width: 720px; }
.legal__body section { padding: 0; scroll-margin-top: 100px; }
.legal__body section + section { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--ligne); }
.legal__body h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 18px; }
.legal__body h2 small { font: 500 0.78rem "IBM Plex Mono", monospace; letter-spacing: 0.12em; color: var(--cuivre); }
.legal__body p { margin: 0; color: #d3cbbe; font-size: 1.03rem; line-height: 1.8; }
.legal__body a { color: var(--creme); }

/* ───── visuels des en-têtes : dessinés en CSS/SVG, tailles en cqw pour s'adapter à la largeur ───── */
.vis { position: relative; container-type: inline-size; width: 100%; margin: 0; }
.vis i, .vis b, .vis u, .vis s, .vis code { font-style: normal; text-decoration: none; }
.js .vis:not(.on), .js .vis:not(.on) *, .js .vis:not(.on) *::before, .js .vis:not(.on) *::after { animation-play-state: paused !important; }
.page-top .wrap.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.pt-grid h1 { font-size: clamp(2.6rem, 4.9vw, 4.7rem); max-width: 13ch; }
.pt-vis { justify-self: end; max-width: 600px; }
.page-top--plain .pt-vis { max-width: 400px; }
.page-top--plain.page-top h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
@media (max-width: 899px) {
  .page-top .wrap.pt-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .pt-vis { justify-self: center; max-width: 440px; }
  .page-top--plain .pt-vis { max-width: 300px; justify-self: start; }
}

/* Ce qu'on fait : un ordinateur et un téléphone « Votre commerce » */
.sv { aspect-ratio: 100 / 82; font-family: "Manrope", sans-serif; }
.sv__lap { position: absolute; left: 0; top: 8cqw; width: 80cqw; }
.sv__scr { height: 50cqw; overflow: hidden; background: #13233a; color: #eef2f7; border: 1.4cqw solid #0d0c0b; border-bottom-width: 2cqw; border-radius: 2cqw 2cqw 0 0; box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.16), 0 0 7cqw -2cqw rgba(226, 137, 90, 0.35); }
.sv__base { height: 2.4cqw; margin: 0 -4cqw; border-radius: 0 0 2.4cqw 2.4cqw; background: linear-gradient(#3a332c, #1a1613); box-shadow: 0 4cqw 7cqw -2cqw rgba(0, 0, 0, 0.9); }
.sv__bar { display: flex; align-items: center; gap: 0.8cqw; height: 4.2cqw; padding: 0 2.2cqw; background: rgba(255, 255, 255, 0.07); }
.sv__bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.sv__bar span { margin-left: 1.6cqw; padding: 0.4cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.1); font: 500 1.3cqw "IBM Plex Mono", monospace; color: rgba(238, 242, 247, 0.75); }
.sv__nav { display: flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 3cqw; }
.sv__nav b { width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; background: #e2895a; color: #160b05; font: 600 1.7cqw "Bodoni Moda", serif; }
.sv__nav span { margin-right: auto; font: 500 1.9cqw "Bodoni Moda", serif; }
.sv__nav u { width: 4.6cqw; height: 0.6cqw; border-radius: 1cqw; background: rgba(238, 242, 247, 0.35); }
.sv__hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; padding: 1.2cqw 3cqw 0; }
.sv__t small, .sv__slots small, .sv__cards small { display: block; font: 500 1.1cqw "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238, 242, 247, 0.6); }
.sv__t strong { display: block; margin: 0.8cqw 0 1.4cqw; font: 500 3.6cqw/1.05 "Bodoni Moda", serif; letter-spacing: -0.01em; }
.sv__t > i { display: block; height: 0.7cqw; margin-bottom: 0.8cqw; border-radius: 1cqw; background: rgba(238, 242, 247, 0.28); }
.sv__t > i:nth-of-type(2) { width: 68%; }
.sv__btn { display: inline-block; margin-top: 1cqw; padding: 0.9cqw 2cqw; border-radius: 99px; background: #e2895a; color: #160b05; font-weight: 700; font-size: 1.35cqw; }
.sv__slots { align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; padding: 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.08); }
.sv__slots small { grid-column: 1 / -1; }
.sv__slots span { padding: 1cqw 0; text-align: center; border-radius: 0.8cqw; border: 1px solid rgba(238, 242, 247, 0.3); font-size: 1.5cqw; font-weight: 600; }
.sv__slots .on { background: #e2895a; border-color: #e2895a; color: #160b05; }
.sv__slots .x { opacity: 0.35; text-decoration: line-through; }
.sv__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; padding: 1.8cqw 3cqw 0; }
.sv__cards > div { padding: 1.2cqw 1.5cqw; border-radius: 1.1cqw; background: rgba(255, 255, 255, 0.08); }
.sv__cards b { display: flex; align-items: center; gap: 0.7cqw; margin-top: 0.4cqw; font-size: 1.5cqw; font-weight: 600; }
.sv__cards b i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #5ec283; }
.sv__ph { position: absolute; right: 0; top: 21cqw; z-index: 2; width: 25cqw; height: 50cqw; padding: 5cqw 2cqw 2cqw; border: 0.9cqw solid #0d0c0b; border-radius: 4cqw; background: var(--creme); color: #1a1612; box-shadow: 0 3cqw 7cqw -2cqw rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(242, 235, 224, 0.25); }
.sv__nt { position: absolute; top: 1.2cqw; left: 50%; width: 7cqw; height: 1.4cqw; margin-left: -3.5cqw; border-radius: 99px; background: #0d0c0b; }
.sv__pt { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; }
.sv__pt b { width: 3cqw; height: 3cqw; border-radius: 50%; background: #2f6b66; }
.sv__pt s { width: 3cqw; height: 1.6cqw; border-top: 0.35cqw solid #1a1612; border-bottom: 0.35cqw solid #1a1612; }
.sv__ptx { margin-bottom: 1.4cqw; font: 500 2.6cqw/1.08 "Bodoni Moda", serif; }
.sv__pl { display: grid; gap: 0.8cqw; margin-bottom: 2.4cqw; }
.sv__pl i { height: 0.7cqw; border-radius: 1cqw; background: rgba(26, 22, 18, 0.2); }
.sv__pl i:last-child { width: 65%; }
.sv__pb { display: block; margin-bottom: 1.2cqw; padding: 1.7cqw 0; border-radius: 99px; text-align: center; background: #2f6b66; color: #fff; font-weight: 700; font-size: 1.8cqw; }
.sv__pb--o { background: transparent; color: #1a1612; border: 1px solid rgba(26, 22, 18, 0.45); }
.sv__tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 1cqw; padding: max(5px, 1.1cqw) max(10px, 2cqw); border-radius: 99px; background: var(--creme); color: #1b1714; font: 600 max(11px, 2.2cqw) / 1 "Manrope", sans-serif; white-space: nowrap; box-shadow: 0 1.6cqw 3.6cqw -1.2cqw rgba(0, 0, 0, 0.85); }
.sv__tag::before { content: ""; width: max(7px, 1.1cqw); height: max(7px, 1.1cqw); border-radius: 50%; background: var(--cuivre-2); }
.sv__tag--1 { left: 43cqw; top: 1cqw; }
.sv__tag--2 { left: 2cqw; top: 62cqw; }
.sv__tag--3 { left: 31cqw; top: 70cqw; }
.sv__tag--4 { right: 0; top: 74cqw; }
@media (prefers-reduced-motion: no-preference) {
  .sv__tag { animation: svbob 5.5s ease-in-out infinite alternate, svtag 8s ease-in-out infinite; }
  .sv__tag--1 { animation-delay: 0s, 0s; } .sv__tag--2 { animation-delay: -1.4s, 2s; } .sv__tag--3 { animation-delay: -2.8s, 4s; } .sv__tag--4 { animation-delay: -4.2s, 6s; }
  .sv__slots, .sv__c1, .sv__c2, .sv__ph { animation: svhit 8s ease-in-out infinite; }
  .sv__slots { animation-delay: 0s; } .sv__c1 { animation-delay: 2s; } .sv__c2 { animation-delay: 4s; } .sv__ph { animation-delay: 6s; }
}
@keyframes svbob { from { translate: 0 0; } to { translate: 0 -1cqw; } }
@keyframes svtag { 0%, 22%, 100% { scale: 1; } 6%, 18% { scale: 1.08; } }
@keyframes svhit { 0%, 24%, 100% { box-shadow: 0 0 0 0 rgba(226, 137, 90, 0); } 6%, 20% { box-shadow: 0 0 0 0.45cqw #e2895a, 0 0 3cqw rgba(226, 137, 90, 0.7); } }

/* Comment ça se passe : quatre étapes reliées par un trait cuivré */
.dm { aspect-ratio: 480 / 420; }
.dm svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dm text { font-family: "Manrope", sans-serif; }
.dm-base { stroke: rgba(242, 235, 224, 0.16); stroke-width: 3; }
.dm-flow { stroke: #e2895a; stroke-width: 2.6; stroke-dasharray: 3 9; }
.dm-card { fill: #171411; stroke: #e2895a; stroke-width: 1.4; }
.dm-num { fill: #160b05; font-weight: 700; font-size: 14px; }
.dm-tt { fill: #f2ebe0; font-family: "Bodoni Moda", serif !important; font-size: 19px; }
.dm-bt { fill: #160b05; font-weight: 700; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .dm-flow { animation: dmflow 1.4s linear infinite; }
  .dm-card { animation: dmlit 10s ease-in-out infinite; }
  .dm-n2 .dm-card { animation-delay: 2.5s; } .dm-n3 .dm-card { animation-delay: 5s; } .dm-n4 .dm-card { animation-delay: 7.5s; }
  .dm-live { animation: dmlive 1.6s ease-in-out infinite; }
  .dm-wv { animation: dmwave 2.4s ease-in-out infinite; } .dm-wv2 { animation-delay: 0.4s; }
}
@keyframes dmflow { to { stroke-dashoffset: -12; } }
@keyframes dmlit { 0%, 100% { stroke: rgba(242, 235, 224, 0.28); fill: #171411; } 6%, 26% { stroke: #e2895a; fill: #241912; } 34% { stroke: rgba(242, 235, 224, 0.28); fill: #171411; } }
@keyframes dmlive { 50% { opacity: 0.25; } }
@keyframes dmwave { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.8; } }

/* À propos : celle qui parle + celui qui construit, reliés */
.ap { aspect-ratio: 100 / 88; }
.ap__link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
.ap__say { position: absolute; left: 0; top: 0; width: 64cqw; padding: 3.2cqw 3.6cqw 3.4cqw; border-radius: 4cqw 4cqw 4cqw 0.8cqw; background: var(--creme); color: #1b1714; box-shadow: 0 5cqw 8cqw -3cqw rgba(0, 0, 0, 0.8); }
.ap__say::after { content: ""; position: absolute; left: 2cqw; bottom: -2.4cqw; border: 1.4cqw solid transparent; border-top: 2.4cqw solid var(--creme); border-right-width: 2cqw; border-left-width: 0; }
.ap__say small { display: block; margin-bottom: 1cqw; font: 500 max(9px, 1.5cqw) "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #9a5a35; }
.ap__q { font: 500 max(15px, 3.5cqw) / 1.2 "Bodoni Moda", serif; }
.ap__ty { display: flex; gap: 0.8cqw; margin-top: 1.6cqw; }
.ap__ty b { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #9a5a35; }
.ap__win { position: absolute; right: 0; bottom: 0; z-index: 2; width: 70cqw; height: 54cqw; overflow: hidden; border-radius: 2.4cqw; background: #14110e; border: 1px solid rgba(242, 235, 224, 0.28); box-shadow: 0 5cqw 9cqw -3cqw #000, 0 0 8cqw -3cqw rgba(226, 137, 90, 0.35); }
.ap__bar { display: flex; align-items: center; gap: 0.8cqw; height: 5.2cqw; padding: 0 2.4cqw; border-bottom: 1px solid var(--ligne); }
.ap__bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(242, 235, 224, 0.25); }
.ap__bar span { margin-left: 1.4cqw; font: 500 max(9px, 1.5cqw) "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.ap__bar code { margin-left: auto; font: 500 max(10px, 1.9cqw) "IBM Plex Mono", monospace; color: var(--cuivre); }
.ap__bd { position: relative; height: calc(100% - 5.2cqw); display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 1.4cqw; padding: 2.4cqw; }
.ap__bd u { display: block; border-radius: 1cqw; background: rgba(242, 235, 224, 0.14); border: 1px solid rgba(242, 235, 224, 0.12); }
.ap__bd .u1 { grid-area: 1 / 1 / 2 / 7; background: rgba(242, 235, 224, 0.22); }
.ap__bd .u2 { grid-area: 2 / 1 / 6 / 2; border-style: dashed; background: transparent; }
.ap__bd .u3 { grid-area: 2 / 2 / 4 / 5; background: #e2895a; border-color: #e2895a; }
.ap__bd .u4 { grid-area: 2 / 5 / 4 / 7; }
.ap__bd .u5 { grid-area: 4 / 2 / 6 / 4; }
.ap__bd .u6 { grid-area: 4 / 4 / 6 / 7; background: transparent; border-style: dashed; border-color: rgba(226, 137, 90, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .ap__bd u { animation: apb 9s ease-in-out infinite; }
  .ap__bd .u2 { animation-delay: 0.5s; } .ap__bd .u3 { animation-delay: 1s; } .ap__bd .u4 { animation-delay: 1.5s; } .ap__bd .u5 { animation-delay: 2s; } .ap__bd .u6 { animation-delay: 2.5s; }
  .ap__ty b { animation: dot 900ms infinite ease-in-out; } .ap__ty b:nth-child(2) { animation-delay: 150ms; } .ap__ty b:nth-child(3) { animation-delay: 300ms; }
}
@keyframes apb { 0% { opacity: 0.1; transform: scale(0.94); } 12%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0.1; transform: scale(0.94); } }

/* Questions : une pile de bulles, une réponse */
.qv { display: grid; gap: 2.4cqw; padding-block: 1cqw; }
.qv__b { max-width: 88cqw; padding: max(11px, 2.6cqw) max(15px, 3.4cqw); border-radius: 3.4cqw 3.4cqw 3.4cqw 0.8cqw; background: var(--creme); color: #1b1714; font: 500 max(14px, 3.5cqw) / 1.2 "Bodoni Moda", serif; box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, 0.8); }
.qv__b--1 { margin-left: 5cqw; opacity: 0.72; }
.qv__b--2 { box-shadow: 0 0 0 0.5cqw rgba(226, 137, 90, 0.85), 0 3cqw 6cqw -3cqw rgba(0, 0, 0, 0.8); }
.qv__b--3 { margin-left: 8cqw; opacity: 0.72; }
.qv__rw { position: relative; justify-self: end; max-width: 78cqw; }
.qv__r { padding: max(11px, 2.6cqw) max(15px, 3.4cqw); border-radius: 3.4cqw 3.4cqw 0.8cqw 3.4cqw; background: var(--cuivre); color: #1b0f08; font: 600 max(13px, 2.9cqw) / 1.35 "Manrope", sans-serif; box-shadow: 0 3cqw 7cqw -3cqw rgba(226, 137, 90, 0.6); }
.qv__who { display: block; margin-bottom: 0.8cqw; font: 500 max(9px, 1.5cqw) "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #5b2a10; }
.qv__ty { position: absolute; right: 0; top: 0; display: none; gap: 0.9cqw; padding: max(9px, 2.2cqw) max(14px, 3cqw); border-radius: 3.4cqw 3.4cqw 0.8cqw 3.4cqw; background: var(--cuivre); }
.qv__ty b { width: 1.3cqw; height: 1.3cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: #5b2a10; }
@media (prefers-reduced-motion: no-preference) {
  .qv__r { animation: qvin 10s ease-in-out infinite; }
  .qv__ty { display: flex; animation: qvty 10s ease-in-out infinite; }
  .qv__ty b { animation: dot 900ms infinite ease-in-out; } .qv__ty b:nth-child(2) { animation-delay: 150ms; } .qv__ty b:nth-child(3) { animation-delay: 300ms; }
}
@keyframes qvin { 0%, 14% { opacity: 0; transform: translateY(1.5cqw) scale(0.97); } 22%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(1.5cqw) scale(0.97); } }
@keyframes qvty { 0% { opacity: 0; } 3%, 12% { opacity: 1; } 16%, 100% { opacity: 0; } }

/* Être rappelé : un appel entrant */
.rq__vis { max-width: 250px; margin-top: clamp(2rem, 4vw, 3rem); }
.cl { font-family: "Manrope", sans-serif; }
.cl__ph { position: relative; padding: 9cqw 4cqw 4cqw; border-radius: 10cqw; background: #0d0c0b; box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.16), 0 6cqw 12cqw -5cqw rgba(0, 0, 0, 0.9), 0 0 14cqw -4cqw rgba(226, 137, 90, 0.35); }
.cl__nt { position: absolute; top: 3.4cqw; left: 50%; width: 24cqw; height: 5cqw; margin-left: -12cqw; border-radius: 99px; background: #000; }
.cl__scr { padding: 8cqw 6cqw 7cqw; border-radius: 6.5cqw; background: linear-gradient(165deg, #2c2520, #14110e); display: grid; gap: 7cqw; }
.cl__top { display: grid; justify-items: center; gap: 5cqw; text-align: center; }
.cl__ic { position: relative; width: 17cqw; height: 17cqw; border-radius: 50%; display: grid; place-items: center; background: var(--cuivre); }
.cl__ic::after { content: ""; position: absolute; inset: -3cqw; border-radius: 50%; border: 1px solid var(--cuivre); opacity: 0.5; }
.cl__ic svg { width: 8cqw; height: 8cqw; fill: #160b05; }
.cl__tx small { display: block; font: 500 max(10px, 2.9cqw) "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.cl__tx b { display: block; margin: 1.8cqw 0 1cqw; font: 500 6.4cqw/1.1 "Bodoni Moda", serif; color: var(--creme); }
.cl__tx span { font-size: max(12px, 3.5cqw); color: var(--cuivre); }
.cl__when { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.cl__when span { padding: 2.2cqw 1cqw; border-radius: 99px; text-align: center; border: 1px solid rgba(242, 235, 224, 0.25); font-size: max(11px, 3.1cqw); color: #d9d1c4; }
.cl__when span:nth-child(2) { background: var(--creme); border-color: var(--creme); color: #1b1714; font-weight: 600; }
.cl__bt { display: flex; justify-content: center; gap: 16cqw; }
.cl__bt i { width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(242, 235, 224, 0.12); }
.cl__bt .cl__yes { background: var(--cuivre); }
.cl__bt svg { width: 6cqw; height: 6cqw; fill: var(--creme); }
.cl__bt .cl__yes svg { fill: #160b05; }
.cl__bt .cl__no svg { transform: rotate(135deg); }
@media (prefers-reduced-motion: no-preference) {
  .cl__ic::after { animation: clring 2.2s ease-out infinite; }
  .cl__ic { animation: clshake 2.2s ease-in-out infinite; }
  .cl__when span { animation: clpick 8s ease-in-out infinite; }
  .cl__when span:nth-child(1) { animation-delay: 6s; } .cl__when span:nth-child(2) { animation-delay: 0s; background: transparent; border-color: rgba(242, 235, 224, 0.25); color: #d9d1c4; font-weight: 400; }
  .cl__when span:nth-child(3) { animation-delay: 2s; } .cl__when span:nth-child(4) { animation-delay: 4s; }
}
@keyframes clring { from { transform: scale(0.85); opacity: 0.7; } to { transform: scale(1.5); opacity: 0; } }
@keyframes clshake { 0%, 60%, 100% { transform: none; } 66% { transform: rotate(-9deg); } 72% { transform: rotate(8deg); } 78% { transform: rotate(-6deg); } 84% { transform: rotate(4deg); } 90% { transform: none; } }
@keyframes clpick { 0%, 22% { background: var(--creme); border-color: var(--creme); color: #1b1714; font-weight: 600; } 25%, 100% { background: transparent; border-color: rgba(242, 235, 224, 0.25); color: #d9d1c4; font-weight: 400; } }
@media (max-width: 899px) {
  .rq__vis { max-width: 100%; margin-top: 1.6rem; }
  .cl__ph { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .cl__nt, .cl__bt { display: none; }
  .cl__scr { padding: 5cqw; border-radius: 4cqw; border: 1px solid rgba(242, 235, 224, 0.18); gap: 4cqw; }
  .cl__top { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: 4cqw; align-items: center; }
  .cl__ic { width: 14cqw; height: 14cqw; }
  .cl__ic svg { width: 6.4cqw; height: 6.4cqw; }
  .cl__ic::after { inset: -1cqw; }
  .cl__tx b { font-size: max(19px, 5.4cqw); }
  .cl__when { grid-template-columns: repeat(4, auto); justify-content: start; gap: 1.6cqw; }
  .cl__when span { padding: 1.8cqw 3cqw; font-size: max(11px, 2.9cqw); }
}

/* Confidentialité : un document et un bouclier */
.cf { aspect-ratio: 360 / 280; }
.cf svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6)); }
@media (prefers-reduced-motion: no-preference) { .cf-sh { animation: cfbob 6s ease-in-out infinite alternate; } }
@keyframes cfbob { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* À propos : feuille « par écrit » sous les promesses */
.vw { max-width: 250px; margin-top: clamp(2rem, 4vw, 3rem); }
.vw__sheet { position: relative; padding: 7cqw 8cqw 8cqw; border-radius: 3cqw; background: var(--creme); color: #1a1612; transform: rotate(-2.5deg); box-shadow: 0 7cqw 12cqw -5cqw #000, 0 0 0 1px rgba(242, 235, 224, 0.3); }
.vw__st { position: absolute; top: -3.2cqw; right: 6cqw; padding: 1.6cqw 4cqw; border-radius: 99px; background: var(--cuivre); color: #160b05; font: 700 max(10px, 4cqw) "Manrope", sans-serif; letter-spacing: 0.02em; transform: rotate(4deg); }
.vw__sheet b { display: block; margin-bottom: 4cqw; font: 500 8.5cqw/1 "Bodoni Moda", serif; }
.vw__bar { display: block; width: 46%; height: 5cqw; margin-bottom: 5cqw; border-radius: 1.4cqw; background: repeating-linear-gradient(135deg, #d9cdb9 0 2cqw, #e6dccb 2cqw 4cqw); border: 1px solid rgba(26, 22, 18, 0.2); }
.vw__sheet i { display: block; height: 1.8cqw; margin-bottom: 2.8cqw; border-radius: 2cqw; background: rgba(26, 22, 18, 0.2); }
.vw__sheet i:nth-of-type(2) { width: 82%; } .vw__sheet i:nth-of-type(3) { width: 60%; }
.vw__sheet svg { display: block; width: 52%; margin-top: 4cqw; }
.vw__ln { display: block; width: 60%; height: 1px; background: rgba(26, 22, 18, 0.45); }
@media (max-width: 899px) { .vw { display: none; } }

/* ───── Accueil : avant / après ───── */
.ba { padding-top: clamp(2rem, 5vw, 4rem); }
.ba__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.6rem 2rem; }
.ba .sec-h { max-width: 20ch; }
.ba__tog { display: none; padding: 5px; border: 1px solid var(--ligne); border-radius: 999px; background: rgba(242, 235, 224, 0.04); }
.js .ba__tog { display: inline-flex; }
.ba__tog button { appearance: none; border: 0; cursor: pointer; padding: 12px 20px; border-radius: 999px; background: transparent; color: var(--gris); font: 600 0.9rem/1 "Manrope", sans-serif; transition: background-color 220ms ease, color 220ms ease; }
.ba__tog button:hover { color: var(--creme); }
.ba__tog button[aria-pressed="true"] { background: var(--cuivre); color: #160b05; }
.ba__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3.2rem); }
.ba__p { margin: 0; display: grid; gap: 16px; align-content: start; min-width: 0; transition: opacity 600ms ease, filter 600ms ease, transform 600ms ease; }
.ba__p figcaption { color: var(--gris); max-width: 40ch; }
.ba__p figcaption b { display: block; margin-bottom: 4px; font: 500 0.74rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cuivre); }
.ba__stage { position: relative; min-height: 520px; display: grid; place-items: center; padding: 2.4rem 1rem; overflow: hidden; border: 1px solid var(--ligne); border-radius: 26px; background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(226, 137, 90, 0.12), transparent 70%), var(--nuit); }
.ba__p--b .ba__stage { background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(242, 235, 224, 0.06), transparent 70%), var(--nuit); }
.ba__mid { position: absolute; left: 50%; top: 260px; z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; background: var(--noir); border: 1px solid var(--cuivre); }
.ba__mid i { font-style: normal; color: var(--cuivre); }
/* ce qu'on voit en priorité selon la vue (seulement quand l'interrupteur est actif) */
.ba.live[data-s="before"] .ba__p--a, .ba.live[data-s="after"] .ba__p--b { opacity: 0.38; filter: saturate(0.55); transform: scale(0.985); }

/* le téléphone d'aujourd'hui */
.bp { position: relative; width: min(256px, 100%); padding: 10px; border-radius: 36px; background: #0d0c0b; box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.18), 0 40px 70px -30px #000; }
.bp__nt { position: absolute; z-index: 2; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 99px; background: #000; }
.bp__scr { display: grid; gap: 9px; padding: 46px 10px 16px; border-radius: 28px; background: linear-gradient(165deg, #2c2520, #14110e); min-height: 400px; align-content: start; }
.bp__top { display: flex; align-items: center; gap: 10px; padding: 0 6px 8px; }
.bp__top svg { width: 18px; height: 18px; fill: var(--creme); stroke: var(--creme); stroke-width: 1.8; opacity: 0.8; }
.bp__top u { width: 56px; height: 6px; border-radius: 3px; background: rgba(242, 235, 224, 0.3); }
.bp__n { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 15px; background: rgba(242, 235, 224, 0.95); color: #1a1612; box-shadow: 0 10px 20px -14px #000; transition: opacity 500ms ease, transform 500ms ease; }
.bp__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #c4673a; }
.bp__ic svg { width: 17px; height: 17px; fill: var(--creme); }
.bp__n small { display: block; font: 500 0.6rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.05em; text-transform: uppercase; color: #6a6054; }
.bp__n b { display: block; font: 600 0.84rem/1.25 "Manrope", sans-serif; }
.bp__more { display: grid; gap: 7px; padding: 8px 18px 0; }
.bp__more i { height: 6px; border-radius: 3px; background: rgba(242, 235, 224, 0.16); }
.bp__more i:last-child { width: 60%; }
.bp__bell { position: absolute; z-index: 3; top: -16px; right: -14px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--cuivre); box-shadow: 0 8px 20px -6px rgba(226, 137, 90, 0.7); }
.bp__bell svg { width: 21px; height: 21px; fill: #160b05; }
.bp__bell i { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--cuivre); opacity: 0.5; }

/* le site, avec ses réponses */
.bw { width: min(480px, 100%); border-radius: 14px; overflow: hidden; background: #f2ebe0; color: #1a1612; box-shadow: 0 40px 70px -34px #000, 0 0 60px -26px rgba(226, 137, 90, 0.55); }
.bw__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #d9cdb9; }
.bw__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(26, 22, 18, 0.28); }
.bw__bar span { margin-left: 10px; flex: 1; max-width: 190px; padding: 3px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.7); font: 500 0.68rem "Manrope", sans-serif; text-align: center; }
.bw__nav { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(26, 22, 18, 0.1); }
.bw__nav b { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #1a1612; color: var(--creme); font: 500 0.78rem "Bodoni Moda", serif; }
.bw__nav span { font: 600 0.9rem "Bodoni Moda", serif; }
.bw__nav u { width: 28px; height: 5px; border-radius: 3px; background: rgba(26, 22, 18, 0.22); }
.bw__nav u:first-of-type { margin-left: auto; }
.bw__bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 12px; padding: 28px 16px 18px; }
.bw__c { position: relative; padding: 24px 13px 13px; border-radius: 12px; background: #fff9f0; border: 1px solid rgba(26, 22, 18, 0.1); display: grid; gap: 7px; align-content: start; }
.bw__c--r { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.bw__c--r small { grid-column: 1; }
.bw__c small { font: 500 0.6rem "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #6a6054; }
.bw__q { position: absolute; top: -12px; left: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; border-radius: 99px; background: #1a1612; color: var(--creme); font: 600 0.7rem/1.2 "Manrope", sans-serif; white-space: nowrap; }
.bw__q .ck { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--cuivre); transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1); }
.bw__q .ck::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #160b05; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.bw__c p { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 0.86rem/1.2 "Manrope", sans-serif; }
.bw__c p i { width: 9px; height: 9px; border-radius: 50%; background: #c4673a; box-shadow: 0 0 0 4px rgba(196, 103, 58, 0.18); }
.bw__c s { display: block; height: 5px; border-radius: 3px; background: rgba(26, 22, 18, 0.14); }
.bw__c s:last-child { width: 62%; }
.bw__c--p div { display: flex; align-items: center; gap: 8px; }
.bw__c--p u { flex: 1; height: 5px; border-radius: 3px; background: rgba(26, 22, 18, 0.3); }
.bw__c--p em { width: 26px; height: 9px; border-radius: 5px; background: #c4673a; opacity: 0.85; }
.bw__pl { display: flex; gap: 6px; justify-content: center; }
.bw__pl span { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(26, 22, 18, 0.28); font: 600 0.74rem "Manrope", sans-serif; }
.bw__pl span.on { background: #1a1612; color: var(--creme); border-color: #1a1612; }
.bw__go { padding: 9px 16px; border-radius: 99px; background: #c4673a; color: #fff; font: 700 0.76rem "Manrope", sans-serif; }
.ba.live[data-s="before"] .bw__q .ck { transform: scale(0); }
.ba.live[data-s="after"] .bw__c--h .ck { transition-delay: 300ms; }
.ba.live[data-s="after"] .bw__c--p .ck { transition-delay: 700ms; }
.ba.live[data-s="after"] .bw__c--r .ck { transition-delay: 1100ms; }

@media (prefers-reduced-motion: no-preference) {
  .ba__tog button { transition: background-color 220ms ease, color 220ms ease; }
  .ba:not(.live) .bp__bell, .ba.live[data-s="before"] .bp__bell { animation: bpshake 2.4s ease-in-out infinite; }
  .ba:not(.live) .bp__bell i, .ba.live[data-s="before"] .bp__bell i { animation: bpring 2.4s ease-out infinite; }
  .ba:not(.live) .bp__bell i + i, .ba.live[data-s="before"] .bp__bell i + i { animation-delay: 1.2s; }
  .ba.live[data-s="before"] .bp__n { animation: bpin 700ms cubic-bezier(.2, .8, .2, 1) both; }
  .ba.live[data-s="before"] .bp__n--2 { animation-delay: 500ms; }
  .ba.live[data-s="before"] .bp__n--3 { animation-delay: 1000ms; }
  .ba.live[data-s="after"] .bp__n { opacity: 0.45; transform: scale(0.96); }
  .ba.live[data-s="after"] .bw__c { animation: bwup 600ms cubic-bezier(.2, .8, .2, 1) both; }
  .ba.live[data-s="after"] .bw__c--p { animation-delay: 400ms; }
  .ba.live[data-s="after"] .bw__c--r { animation-delay: 800ms; }
}
@keyframes bpin { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bwup { from { opacity: 0.25; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bpshake { 0%, 52%, 100% { transform: none; } 58% { transform: rotate(-14deg); } 64% { transform: rotate(12deg); } 70% { transform: rotate(-9deg); } 76% { transform: rotate(6deg); } 82% { transform: none; } }
@keyframes bpring { from { transform: scale(0.9); opacity: 0.6; } to { transform: scale(2); opacity: 0; } }

@media (max-width: 899px) {
  .ba__grid { grid-template-columns: minmax(0, 1fr); }
  .ba__mid { display: none; }
  .js .ba[data-s="before"] .ba__p--a, .js .ba[data-s="after"] .ba__p--b { display: none; }
  .ba.live[data-s="before"] .ba__p--a, .ba.live[data-s="after"] .ba__p--b { opacity: 1; filter: none; transform: none; }
  .ba__stage { min-height: 480px; padding: 2.2rem 0.8rem; }
  .ba__tog { width: 100%; }
  .js .ba__tog { display: flex; }
  .ba__tog button { flex: 1; padding-inline: 10px; }
}
@media (max-width: 420px) {
  .bw__q { font-size: 0.64rem; padding-left: 9px; }
  .bw__bd { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; gap: 26px 9px; }
  .bw__c { padding-inline: 10px; }
  .bw__c--r { grid-template-columns: 1fr; justify-items: start; }
  .bw__pl { justify-content: flex-start; }
}

/* ───── Accueil : le parcours en quatre scènes ───── */
.pc { background: var(--nuit); border-block: 1px solid var(--ligne); }
.pc__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.4rem 3rem; align-items: end; }
.pc .sec-h { max-width: 16ch; }
.pc__head .sec-p { margin: 0; }
.pc__track { --rail: 14px; list-style: none; margin: clamp(2.4rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; position: relative; }
.pc__track::before, .pc__track::after { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; border-radius: 2px; }
.pc__track::before { background: var(--ligne); }
.pc__track::after { background: linear-gradient(90deg, var(--cuivre), #ffc49a); box-shadow: 0 0 12px rgba(226, 137, 90, 0.6); transform-origin: left; }
.js .pc__track::after { transform: scaleX(0); transition: transform 2.6s cubic-bezier(.4, 0, .2, 1) 200ms; }
.js .pc.on .pc__track::after { transform: scaleX(1); }
.pc__s { position: relative; padding-top: 34px; }
.pc__s::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 4px var(--nuit), 0 0 0 5px var(--cuivre); }
.js .pc__s::before { background: var(--nuit); box-shadow: 0 0 0 4px var(--nuit), 0 0 0 5px rgba(242, 235, 224, 0.3); transition: background-color 400ms ease, box-shadow 400ms ease; }
.js .pc.on .pc__s::before { background: var(--cuivre); box-shadow: 0 0 0 4px var(--nuit), 0 0 0 5px var(--cuivre); }
.js .pc.on .pc__s:nth-child(1)::before { transition-delay: 200ms; } .js .pc.on .pc__s:nth-child(2)::before { transition-delay: 1000ms; } .js .pc.on .pc__s:nth-child(3)::before { transition-delay: 1800ms; } .js .pc.on .pc__s:nth-child(4)::before { transition-delay: 2600ms; }
.pc__c { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--ligne); border-radius: 20px; overflow: hidden; background: #0e0c0a; transition: border-color 300ms ease, transform 300ms ease; }
.pc__c:hover { border-color: rgba(226, 137, 90, 0.5); transform: translateY(-4px); }
.pcs { display: block; width: 100%; height: auto; background: radial-gradient(ellipse 70% 70% at 50% 50%, #2a2018, #16120f); border-bottom: 1px solid var(--ligne); }
.pc__t { padding: 18px 20px 22px; }
.pc__n { display: block; margin-bottom: 8px; font: 500 0.68rem "IBM Plex Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cuivre); }
.pc__t h3 { font-size: 1.55rem; line-height: 1.08; margin-bottom: 10px; }
.pc__t p { margin: 0; color: var(--gris); font-size: 0.95rem; line-height: 1.6; }
.pc__more { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; }
.pc__more a { display: inline-flex; gap: 12px; align-items: center; color: var(--creme); text-decoration: none; border-bottom: 1px solid var(--cuivre); padding-bottom: 4px; }
.pc__more i { font-style: normal; color: var(--cuivre); transition: transform 220ms ease; }
.pc__more a:hover i { transform: translateX(5px); }
.pc-live { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .pc-w { opacity: 0.25; animation: pcwave 2.2s ease-in-out infinite; }
  .pc-w2 { animation-delay: 0.35s; }
  .pc-b { animation: pcbub 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .pc-b2 { animation-delay: 1.4s; }
  .pc-cur { animation: pccur 4.5s ease-in-out infinite; }
  .pc-live { animation: pcdot 1.8s ease-in-out infinite; }
  .js .pc-tk { stroke-dasharray: 14; stroke-dashoffset: 14; }
  .js .pc.on .pc-tk { animation: pctk 600ms ease forwards; }
  .js .pc.on .pc-tk1 { animation-delay: 1.5s; } .js .pc.on .pc-tk2 { animation-delay: 2s; } .js .pc.on .pc-tk3 { animation-delay: 2.5s; }
  .js .pc-st { transform-box: fill-box; transform-origin: center; opacity: 0; }
  .js .pc.on .pc-st { animation: pcst 600ms cubic-bezier(.3, 1.6, .5, 1) 3s forwards; }
  .js .pc-bd { transform-box: fill-box; transform-origin: right center; opacity: 0; }
  .js .pc.on .pc-bd { animation: pcst 600ms cubic-bezier(.3, 1.6, .5, 1) 3.2s forwards; }
}
@keyframes pcwave { 0%, 100% { opacity: 0.2; } 45% { opacity: 0.95; } }
@keyframes pcbub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pccur { 0%, 100% { transform: translate(108px, 62px); } 45% { transform: translate(60px, 72px); } 60% { transform: translate(58px, 71px); } }
@keyframes pcdot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes pctk { to { stroke-dashoffset: 0; } }
@keyframes pcst { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
  .pc__track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .pc__track::before, .pc__track::after { display: none; }
  .pc__s { padding-top: 0; }
  .pc__s::before { display: none; }
}
@media (max-width: 899px) {
  .pc__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pc__track { grid-template-columns: minmax(0, 1fr); padding-left: 34px; row-gap: 1.2rem; }
  .pc__track::before, .pc__track::after { display: block; left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pc__track::after { background: linear-gradient(var(--cuivre), #ffc49a); transform-origin: top; }
  .js .pc__track::after { transform: scaleY(0); transition-duration: 3s; }
  .js .pc.on .pc__track::after { transform: scaleY(1); }
  .pc__s::before { display: block; left: -34px; top: 22px; }
  .js .pc.on .pc__s:nth-child(1)::before { transition-delay: 100ms; } .js .pc.on .pc__s:nth-child(2)::before { transition-delay: 900ms; } .js .pc.on .pc__s:nth-child(3)::before { transition-delay: 1700ms; } .js .pc.on .pc__s:nth-child(4)::before { transition-delay: 2500ms; }
  .pc__t h3 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .pc__track::after, .js .pc__s::before, .pc__c, .ba__p, .bw__q .ck, .ba__tog button { transition: none !important; }
}

/* ───── Accueil : bandeau final ───── */
.fin { padding-block: clamp(3rem, 7vw, 6rem); }
.fin__box { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5.5vw, 5rem); border: 1px solid rgba(226, 137, 90, 0.32); border-radius: clamp(24px, 3vw, 40px); overflow: hidden; background: radial-gradient(ellipse 55% 85% at 86% 50%, rgba(226, 137, 90, 0.2), transparent 70%), radial-gradient(ellipse 60% 70% at 0% 0%, rgba(242, 235, 224, 0.05), transparent 70%), var(--nuit); }
.fin h2 { font-size: clamp(3rem, 7vw, 6.2rem); line-height: 0.98; max-width: 9ch; margin: 22px 0 26px; }
.fin__sub { margin: 0 0 34px; max-width: 34ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d9d1c4; line-height: 1.55; }
.btn--xl { padding: 21px 34px; font-size: 1.05rem; }
.fin__mail { margin: 26px 0 0; font-size: 0.93rem; color: var(--gris); }
.fin__mail a { color: var(--creme); }
.fin__vis { position: relative; display: grid; place-items: center; min-height: 440px; }
.lk__rg { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(226, 137, 90, 0.35); transform: translate(-50%, -50%); }
.lk__rg1 { width: 300px; height: 300px; } .lk__rg2 { width: 430px; height: 430px; border-color: rgba(226, 137, 90, 0.2); } .lk__rg3 { width: 570px; height: 570px; border-color: rgba(226, 137, 90, 0.1); }
.lk { position: relative; z-index: 1; width: 272px; padding: 10px; border-radius: 36px; background: #0d0c0b; transform: rotate(4deg); box-shadow: 0 0 0 1px rgba(242, 235, 224, 0.18), 0 50px 80px -30px #000, 0 0 90px -20px rgba(226, 137, 90, 0.45); }
.lk__nt { position: absolute; z-index: 2; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 99px; background: #000; }
.lk__scr { display: grid; gap: 10px; align-content: start; min-height: 410px; padding: 50px 10px 14px; border-radius: 28px; background: linear-gradient(165deg, #3a2c22, #14110e 70%); }
.lk__top { display: grid; justify-items: center; gap: 8px; padding-bottom: 14px; }
.lk__top svg { width: 18px; height: 18px; fill: var(--creme); stroke: var(--creme); stroke-width: 1.8; opacity: 0.8; }
.lk__top u:nth-of-type(1) { width: 84px; height: 16px; border-radius: 8px; background: rgba(242, 235, 224, 0.28); }
.lk__top u:nth-of-type(2) { width: 56px; height: 6px; border-radius: 3px; background: rgba(242, 235, 224, 0.18); }
.lk__n { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 12px; border-radius: 16px; background: rgba(242, 235, 224, 0.96); color: #1a1612; box-shadow: 0 14px 26px -14px #000; }
.lk__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #0c0b0a; }
.lk__ic svg { width: 24px; height: 24px; }
.lk__ic--g { background: #c4673a; }
.lk__n small { display: block; font: 500 0.6rem/1.2 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #6a6054; }
.lk__n b { display: block; font: 700 0.84rem/1.25 "Manrope", sans-serif; }
.lk__n span:not(.lk__ic) { display: block; margin-top: 2px; font-size: 0.72rem; line-height: 1.3; color: #564e44; }
.lk__n--2 { margin-inline: 8px; opacity: 0.55; transform: scale(0.97); }
.lk__bt { display: flex; justify-content: space-between; padding: 36px 10px 0; }
.lk__bt i { width: 36px; height: 36px; border-radius: 50%; background: rgba(242, 235, 224, 0.14); }
.lk__hb { width: 90px; height: 4px; margin: 18px auto 0; border-radius: 2px; background: rgba(242, 235, 224, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .lk__rg { animation: lkrg 6s ease-out infinite; }
  .lk__rg2 { animation-delay: 2s; } .lk__rg3 { animation-delay: 4s; }
  .fin__box.in .lk__n:not(.lk__n--2) { animation: lkdrop 900ms cubic-bezier(.2, .8, .2, 1) 500ms both; }
  .lk { animation: lkfloat 7s ease-in-out infinite alternate; }
}
@keyframes lkrg { 0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; } }
@keyframes lkdrop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes lkfloat { from { transform: rotate(4deg) translateY(0); } to { transform: rotate(4deg) translateY(-8px); } }
@media (max-width: 899px) {
  .fin__box { grid-template-columns: minmax(0, 1fr); }
  .fin h2 { max-width: 11ch; }
  .fin__vis { min-height: 0; padding-block: 1.4rem 0.4rem; }
  .lk__rg1 { width: 280px; height: 280px; } .lk__rg2 { width: 380px; height: 380px; } .lk__rg3 { display: none; }
}
@media (max-width: 460px) {
  .btn--xl { width: 100%; justify-content: space-between; }
}

/* footer */
footer { border-top: 1px solid var(--ligne); padding: clamp(3.5rem, 8vw, 6rem) 0 34px; overflow: hidden; }
.ft__big { font-family: "Bodoni Moda", serif; font-size: clamp(3.4rem, 13vw, 11rem); line-height: 0.85; letter-spacing: -0.03em; margin: 0 0 40px; color: transparent; -webkit-text-stroke: 1px rgba(242, 235, 224, 0.35); white-space: nowrap; }
.ft__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 0.88rem; color: var(--gris); }
.ft__row nav { display: flex; flex-wrap: wrap; gap: 22px; }
.ft__row a { text-decoration: none; }
.ft__row a:hover { color: var(--creme); }
.linkish { all: unset; cursor: pointer; }
.linkish:hover { color: var(--creme); }
.linkish:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 3px; }

/* consent bar */
.consent-bar { position: fixed; z-index: 60; left: 18px; bottom: 18px; max-width: 400px; display: grid; gap: 12px; padding: 16px 18px; background: rgba(20, 18, 16, 0.96); border: 1px solid var(--ligne); border-radius: 16px; font-size: 0.86rem; box-shadow: 0 24px 50px -24px #000; }
.consent-bar p { margin: 0; color: var(--gris); }
.consent-bar p a { color: var(--creme); }
.consent-bar div { display: flex; justify-content: flex-end; gap: 8px; }

/* reveal: content rests visible without JS */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .month__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .qbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb:nth-child(n) { margin-top: 0; }
  .qb:nth-child(even) { margin-top: 26px; }
  .call__body { grid-template-columns: minmax(0, 1fr); }
  .call__side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}
@media (max-width: 899px) {
  .doors a { grid-template-columns: 2.4rem minmax(0, 1fr) 2rem; }
  .doors__d { grid-column: 2 / 3; margin-top: 8px; }
  .doors__go { grid-row: 1; grid-column: 3; }
  .anat-head, .month__head, .anat, .call-grid, .vows__grid, .legal { grid-template-columns: minmax(0, 1fr); }
  .js .q-grid { grid-template-columns: minmax(0, 1fr); }
  .vows__h, .q-side, .toc { position: static; }
  .q-chips { flex-direction: row; flex-wrap: wrap; }
  .q-chip { border-radius: 99px; padding: 10px 16px; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__plus { justify-self: center; font-size: 2.4rem; }
  .never__l { grid-template-columns: minmax(0, 1fr); }
  .win__nav { display: none; }
  .rq__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "side"; }
  .rq__intro h1 { max-width: 12ch; }
  .rq__intro { margin-bottom: 2rem; }
  .toc ol { border-left: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .toc a { border: 1px solid var(--ligne); border-radius: 99px; padding: 8px 14px; margin-left: 0; font-size: 0.86rem; }
  .toc a:hover, .toc a[aria-current="true"] { border-color: var(--cuivre); }
  .tl { --nw: 0px; --lx: 0.6rem; }
  .tl__i { grid-template-columns: minmax(0, 1fr); padding-left: calc(var(--lx) + 1.7rem); }
  .tl__dot { top: calc(var(--pt) + 1.7rem); }
  .tl__n { margin-bottom: 14px; }
  .tl__me { margin-top: 18px; }
  .consent-bar { left: 10px; right: 10px; max-width: none; }
}
@media (max-width: 640px) {
  .month__list, .qbs { grid-template-columns: minmax(0, 1fr); }
  .qb:nth-child(n) { margin-top: 0; }
  .two { grid-template-columns: 1fr; }
  .call__side { grid-template-columns: 1fr 1fr; }
  .vt { min-height: 100px; }
  .win__hero { grid-template-columns: 1fr; }
  .win__ph { display: none; }
  .win__id strong { display: none; }
  .vows__l li { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 12px; }
  .who__mark { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn::after, .nav, .doors a, .doors__go, .tile, .hot, .tl__n, .tl__dot { transition: none; }
  .hot::after { animation: none; }
}
@media (prefers-reduced-motion: no-preference) { html:has(.legal) { scroll-behavior: smooth; } }
.team__adv { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.qbs__tip { max-width: 62ch; margin-top: 1.2rem; padding: 14px 18px; border-left: 2px solid var(--cuivre); font-size: 0.97rem; }