/* OBLIQUE STUDIO — site RAYGLASS / No. 001
   Couleurs reprises de Look Developer (src/Panel.mm). Classes simples et plates : faciles à recréer dans Webflow ou Framer. */
:root {
  --carbon: #111111;
  --ink: #0a0a0a;
  --paper: #f0efea;
  --silver: #a8a8a5;
  --optical: #82918b;
  --rule: #2c2c2b;
  --rule-paper: #d6d4cc;
  --sel: #1d1d1c;
  --display: "Inter Tight", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --navh: 64px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--navh); }
body { margin: 0; background: var(--carbon); color: var(--paper); font-family: var(--display); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.dim { color: var(--silver); }
.picto { fill: currentColor; display: block; }
:focus-visible { outline: 1px solid var(--paper); outline-offset: 3px; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; font: 500 13px var(--display); letter-spacing: .05em; border: 1px solid var(--paper); transition: background .2s, color .2s; white-space: nowrap; }
.btn-solid { background: var(--paper); color: var(--carbon); }
.btn-solid:hover { background: transparent; color: var(--paper); }
.btn-line { color: var(--paper); }
.btn-line:hover { background: var(--paper); color: var(--carbon); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 11px; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--navh); display: flex; align-items: center; gap: 32px; padding: 0 var(--gut); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(17,17,17,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--rule); }
.nav-brand { display: flex; align-items: center; gap: 14px; color: var(--paper); margin-right: auto; }
.nav-brand .picto { height: 13px; width: auto; }
.nav-brand .wordmark { height: 14px; width: auto; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font: 500 12px var(--display); letter-spacing: .05em; color: var(--silver); transition: color .2s; }
.nav-links a:hover, .nav-links a.on { color: var(--paper); }
.nav-burger { display: none; width: 36px; height: 36px; position: relative; }
.nav-burger span { position: absolute; left: 8px; right: 8px; height: 1px; background: var(--paper); transition: transform .25s; }
.nav-burger span:first-child { top: 14px; } .nav-burger span:last-child { top: 21px; }
.nav.open .nav-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav.open .nav-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--ink); display: flex; flex-direction: column; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.04); }
.hero-media img.on { opacity: 1; animation: drift 7s linear forwards; }
.hero-media img.orig { transition: opacity .15s; animation: none; transform: none; z-index: 2; }
.hero.holding .hero-media img.orig { opacity: 1; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.1); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 45%, rgba(10,10,10,.82) 100%); z-index: 3; }
.hero-top, .hero-body, .hero-foot { position: relative; z-index: 4; padding: 0 var(--gut); }
.hero-top { display: flex; justify-content: space-between; padding-top: calc(var(--navh) + 18px); color: var(--silver); }
.hero-body { margin-top: auto; padding-bottom: 40px; }
.eyebrow { color: var(--optical); margin: 0 0 18px; }
.hero-title { margin: 0; font-weight: 500; font-size: clamp(64px, 14.5vw, 232px); line-height: .82; letter-spacing: -.045em; }
.hero-no { display: inline-block; margin-left: .18em; font-size: .26em; font-weight: 300; letter-spacing: -.01em; vertical-align: top; margin-top: .2em; color: var(--silver); }
.hero-lede { max-width: 30ch; margin: 28px 0 0; font-size: clamp(19px, 2vw, 26px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-foot { display: grid; grid-template-columns: minmax(0,1fr) 220px auto; align-items: center; gap: 24px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(240,239,234,.14); margin: 0 var(--gut); padding-left: 0; padding-right: 0; }
.hero-now { display: flex; gap: 18px; min-width: 0; white-space: nowrap; overflow: hidden; }
.hero-count { color: var(--silver); }
.hero-cat { color: var(--optical); }
.hero-bar { height: 1px; background: rgba(240,239,234,.18); position: relative; }
.hero-bar i { position: absolute; left: 0; top: -.5px; height: 2px; width: 0; background: var(--paper); }
.hero-hold { color: var(--silver); font: inherit; letter-spacing: inherit; border: 1px solid rgba(240,239,234,.3); padding: 8px 12px; user-select: none; -webkit-user-select: none; touch-action: none; }
.hero-hold:hover, .hero.holding .hero-hold { color: var(--paper); border-color: var(--paper); }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--silver); padding: 16px 0; }
.ticker-run { display: flex; gap: 28px; width: max-content; animation: tick 48s linear infinite; }
.ticker-run span:nth-child(even) { color: var(--optical); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 11vw, 160px) 0; position: relative; }
.sec-paper { background: var(--paper); color: var(--carbon); }
.sec-paper .dim, .sec-paper .body { color: #5d5d5a; }
.sec-line { border-top: 1px solid var(--rule); }
.grid-2 { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr); gap: 32px clamp(24px, 4vw, 64px); }
.sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head:not(.grid-2) { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.6fr); gap: 32px clamp(24px, 4vw, 64px); align-items: baseline; }
.sec-label { margin: 0; color: var(--optical); align-self: start; padding-top: .7em; }
.sec-label span { color: inherit; opacity: .6; margin-right: 10px; }
.sec-paper .sec-label { color: #6d7a74; }
.h2 { margin: 0; font-weight: 400; font-size: clamp(34px, 4.6vw, 68px); line-height: 1; letter-spacing: -.035em; }
.lede { max-width: 58ch; margin: 22px 0 0; font-size: 18px; line-height: 1.55; color: var(--silver); font-weight: 300; }
.statement { margin: 0; font-size: clamp(26px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.028em; font-weight: 400; }
.body { max-width: 56ch; font-size: 18px; line-height: 1.55; margin: 28px 0 0; font-weight: 300; }
.fine { color: #6b6b69; margin: 18px 0 0; font-size: 10px; }
.note-line { margin: 48px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-paper); }
.link { display: inline-block; margin-top: 36px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 12px; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin-top: 56px; }
.fact { border-top: 1px solid var(--carbon); padding-top: 14px; }
.fact b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.01em; margin-bottom: 6px; }
.fact span { font-size: 14px; line-height: 1.45; color: #5d5d5a; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; }
.tags li { border: 1px solid var(--rule); padding: 7px 10px; color: var(--silver); font-size: 10px; }

/* ---------- avant / après ---------- */
.cmp { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; --x: 50%; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; display: flex; justify-content: center; }
.cmp-handle::before { content: ""; width: 1px; height: 100%; background: var(--paper); }
.cmp-handle span { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--paper); }
.cmp-handle span::before, .cmp-handle span::after { content: ""; position: absolute; top: 15px; border: 5px solid transparent; }
.cmp-handle span::before { left: 7px; border-right-color: var(--carbon); }
.cmp-handle span::after { right: 7px; border-left-color: var(--carbon); }
.cmp-tag { position: absolute; top: 14px; padding: 6px 9px; background: rgba(17,17,17,.75); font-size: 10px; pointer-events: none; }
.cmp-tag-l { left: 14px; } .cmp-tag-r { right: 14px; }
.cmp-bar, .looks-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); border: 1px solid var(--rule); padding: 9px 12px; transition: color .2s, border-color .2s, background .2s; }
.chip:hover { color: var(--paper); border-color: #555; }
.chip[aria-pressed="true"] { color: var(--carbon); background: var(--paper); border-color: var(--paper); }
.scene-pick { display: flex; gap: 8px; align-items: center; }
.scene-pick::before { content: "SCENE"; font: 400 10px var(--mono); letter-spacing: .14em; color: #6b6b69; margin-right: 6px; }
.scene-pick button { width: 64px; height: 36px; background-size: cover; background-position: center; opacity: .5; outline: 1px solid transparent; outline-offset: 2px; transition: opacity .2s; }
.scene-pick button:hover { opacity: .85; }
.scene-pick button[aria-pressed="true"] { opacity: 1; outline-color: var(--paper); }

/* ---------- Look Developer ---------- */
/* fond de toute la section : DaVinci Resolve (la vraie capture), flou doux, fondu en haut et en bas sans arête nette.
   Pendant l'entrée il est presque net ; au clic sur « Open Look Developer » il se floute un peu plus. */
.sec-dev { background: transparent; isolation: isolate; overflow: hidden; }     /* même fond que la page : pas d'arête en haut ni en bas */
.dev-bg { position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); }
/* la capture entière, à la largeur de l'écran (pas de zoom) : on voit le viewer, la timeline et l'Inspector de RAYGLASS 001 à droite ;
   elle est posée derrière la fenêtre et se fond en haut et en bas */
.dev-bg::before { content: ""; position: absolute; left: -2%; right: -2%; top: 58%; aspect-ratio: 2000 / 1102; transform: translateY(-50%);
  background: url("img/resolve-ui.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  filter: blur(10px) brightness(.62) saturate(.95); transition: filter 1.2s ease; }
.dev-bg::after { content: ""; position: absolute; inset: 0;        /* le texte du haut reste lisible, les bords s'assombrissent doucement */
  background: linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,.15) 38%, rgba(10,10,10,.15) 70%, rgba(10,10,10,.5) 100%),
              radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%); }
.sec-dev:has(.dev-frame.intro:not(.opening)) .dev-bg::before { filter: blur(3px) brightness(.66) saturate(1); }
/* Look Developer posé sur DaVinci Resolve flou, plein cadre : la fenêtre flotte au-dessus de l'interface */
.dev-frame { position: relative; padding: 72px var(--gut); isolation: isolate; }

.dev-frame iframe { display: block; width: 100%; max-width: var(--maxw); height: 820px; margin: 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: var(--carbon);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4); }
/* entrée : l'Inspector de RAYGLASS 001 reconstruit en vectoriel, en verre givré sur Resolve flou ; il se perd vers le bas dans un flou progressif (la fenêtre continue).
   Le curseur clique « Open Look Developer » ; Resolve flou apparaît derrière pendant que la fenêtre grandit depuis le bouton (site.js) */
.dev-intro { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 26px; background: rgba(0,0,0,0); transition: opacity .6s ease; overflow: hidden; }
.dev-crumb { position: relative; margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; color: #e9e8e3; padding: 6px 12px; border-radius: 999px;
  background: rgba(17,17,17,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .5s ease; }
.dev-crumb i { font-style: normal; color: #8d8d8a; margin: 0 .4em; }
.dev-frame.opening .dev-crumb { opacity: 0; }
.dev-insp { --u: clamp(13px, 1.05vw, 17px); position: relative; font: 400 var(--u)/1 "Inter Tight", system-ui, sans-serif; color: #c9c9c6; width: calc(var(--u) * 28);
  flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--u) * .9) calc(var(--u) * 1.1) 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(48,48,52,.46), rgba(28,28,31,.38)); border: 1px solid rgba(255,255,255,.16); border-bottom: 0;
  -webkit-backdrop-filter: blur(26px) saturate(1.45); backdrop-filter: blur(26px) saturate(1.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 90px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, rgba(0,0,0,.55) 84%, transparent 99%); mask-image: linear-gradient(to bottom, #000 68%, rgba(0,0,0,.55) 84%, transparent 99%);
  transition: opacity .6s ease, filter .6s ease, transform .6s ease; }
/* flou progressif vers le bas : trois bandes de plus en plus floues, chacune fondue dans la suivante */
.di-blur { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; }
.di-blur i { position: absolute; inset: 0; }
.di-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); }
.di-blur i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 60%); mask-image: linear-gradient(to bottom, transparent 25%, #000 60%); }
.di-blur i:nth-child(3) { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 90%); mask-image: linear-gradient(to bottom, transparent 55%, #000 90%); }
.di-head { display: flex; align-items: center; gap: .7em; padding-bottom: .9em; margin-bottom: .5em; border-bottom: 1px solid rgba(255,255,255,.08); }
.di-tog { width: 2.1em; height: 1.1em; border-radius: 1em; background: rgba(8,8,10,.5); position: relative; }
.di-tog::after { content: ""; position: absolute; right: .2em; top: .2em; width: .7em; height: .7em; border-radius: 50%; background: #e5534b; }
.di-name { color: #e5534b; font-weight: 600; letter-spacing: .02em; }
.di-icons { margin-left: auto; display: flex; gap: .8em; color: #8d8d8a; }
.di-icons svg { width: .9em; height: 1.1em; }
.di-row { display: grid; grid-template-columns: 10.4em 1fr auto; align-items: center; gap: .7em; min-height: 2.15em; }
.di-l { text-align: right; color: #b4b4b1; white-space: nowrap; }
.di-sel { grid-column: 2 / 4; height: 1.65em; display: flex; align-items: center; padding: 0 .7em; border-radius: .25em; background: rgba(8,8,10,.42); border: 1px solid rgba(255,255,255,.09); color: #e2e2df; position: relative; white-space: nowrap; }
.di-sel::after { content: ""; position: absolute; right: .75em; top: .45em; width: .42em; height: .42em; border-right: 1.5px solid #9a9a97; border-bottom: 1.5px solid #9a9a97; transform: rotate(45deg); }
.di-sl { height: .2em; background: rgba(0,0,0,.45); border-radius: 1em; position: relative; margin: 0 .4em; }
.di-sl i { position: absolute; top: 50%; width: .8em; height: .8em; margin: -.4em 0 0 -.4em; border-radius: 50%; background: #9c9c99; }
.di-num { width: 5.2em; height: 1.65em; display: flex; align-items: center; justify-content: flex-end; padding-right: .6em; border-radius: .25em; background: rgba(8,8,10,.42); border: 1px solid rgba(255,255,255,.09); color: #e2e2df; }
.di-xy { grid-column: 2 / 4; display: flex; align-items: center; gap: .6em; color: #b4b4b1; }
.di-xy b { font-weight: 400; } .di-xy .di-num { width: 4.6em; } .di-xy b + .di-num + b { margin-left: auto; }
.di-ck { grid-column: 2 / 4; display: flex; align-items: center; gap: .6em; color: #c9c9c6; }
.di-chk { width: 1.15em; height: 1.15em; display: grid; place-items: center; border-radius: .2em; background: rgba(8,8,10,.42); border: 1px solid rgba(255,255,255,.14); font-size: .85em; color: #f0efea; }
.dev-vbtn { grid-column: 2 / 4; justify-self: start; height: 1.85em; padding: 0 1.1em; display: flex; align-items: center; border-radius: 1em; color: #a9a9a6;
  border: 1px solid rgba(255,255,255,.22); transition: background .18s, border-color .18s, color .18s, transform .12s; }
.di-sec { margin-top: .45em; padding: .85em 0 .45em; border-top: 1px solid rgba(255,255,255,.08); color: #c9c9c6; letter-spacing: .02em; }
.di-sec::before { content: "⌄"; display: inline-block; width: 1.3em; color: #8d8d8a; }
.di-sec.shut::before { content: "›"; }
.dev-cursor { position: absolute; left: 0; top: 0; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); will-change: transform; z-index: 2; }
.dev-frame.intro .dev-intro { opacity: 1; pointer-events: auto; cursor: pointer; }
.dev-frame.intro iframe { opacity: 0; transform: scale(.035); pointer-events: none; }
.dev-frame.hover .dev-vbtn { color: #f0efea; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); }
.dev-frame.press .dev-vbtn { background: rgba(255,255,255,.18); transform: scale(.97); }
.dev-frame.opening .dev-insp { opacity: 0; filter: blur(10px); transform: scale(.98); }
.dev-frame.opening iframe { opacity: 1; transform: none; transition: transform .85s cubic-bezier(.2,.85,.25,1), opacity .4s ease; }
.dev-frame.intro iframe, .dev-frame.opening iframe { position: relative; z-index: 1; }
.dev-replay { position: absolute; right: calc(var(--gut) + 4px); top: 24px; z-index: 3; font-size: 10px; letter-spacing: .14em; color: var(--silver);
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(17,17,17,.55); backdrop-filter: blur(6px); }
.dev-replay:hover { color: var(--paper); border-color: rgba(255,255,255,.4); }
/* après l'ouverture : le curseur montre les flèches de look, puis une bulle « à toi » au-dessus de la fenêtre */
.dev-frame > .dev-cursor { z-index: 4; }
.dev-tip { position: absolute; z-index: 4; transform: translate(-50%, 8px); opacity: 0; pointer-events: auto; cursor: default;
  display: flex; gap: .6em; align-items: center; max-width: 660px; padding: 12px 16px; border-radius: 12px;
  font: 400 14.5px/1.4 "Inter Tight", system-ui, sans-serif; color: #d9d9d6;
  background: rgba(30,30,33,.7); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); transition: opacity .45s ease, transform .45s ease; }
.dev-tip b { color: #f0efea; font-weight: 600; white-space: nowrap; }
.dev-tip kbd { font: 400 12px var(--mono); color: #f0efea; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; padding: 0 6px; }
.dev-tip::before { content: ""; position: absolute; left: var(--ax, 50%); top: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  background: rgba(30,30,33,.85); border-left: 1px solid rgba(255,255,255,.18); border-top: 1px solid rgba(255,255,255,.18); }
.dev-tip.show { opacity: 1; transform: translate(-50%, 0); }
.dev-ring { position: absolute; z-index: 3; pointer-events: none; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255,214,102,.9); opacity: 0; }
.dev-ring.pulse { animation: devring 1.4s ease-out 3; }
@keyframes devring { 0% { opacity: .95; box-shadow: 0 0 0 2px rgba(255,214,102,.9), 0 0 0 0 rgba(255,214,102,.45); } 100% { opacity: 0; box-shadow: 0 0 0 2px rgba(255,214,102,0), 0 0 0 14px rgba(255,214,102,0); } }
@media (max-width: 900px) { .dev-intro, .dev-replay, .dev-tip, .dev-ring { display: none; } }
@media (prefers-reduced-motion: reduce) { .dev-intro, .dev-replay { display: none; } }


/* ---------- looks ---------- */
.tabs { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.tabs button { font: inherit; letter-spacing: inherit; color: var(--silver); padding: 8px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.tabs button:hover { color: var(--paper); }
.tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--paper); }
.tabs sup { font-size: 9px; color: var(--optical); margin-left: 4px; }
.looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 14px; margin-top: 32px; }
.look { text-align: left; display: block; width: 100%; }
.look-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sel); }
.look-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.look:hover .look-img img { transform: scale(1.05); }
.look-img::after { content: "OPEN IN LOOK DEVELOPER →"; position: absolute; left: 10px; bottom: 10px; font: 400 10px var(--mono); letter-spacing: .12em; padding: 5px 8px; background: rgba(17,17,17,.8); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.look:hover .look-img::after, .look:focus-visible .look-img::after { opacity: 1; transform: none; }
.look-meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--rule); margin-top: 10px; }
.look-name { font-size: 15px; letter-spacing: -.005em; }
.look-cat { font: 400 10px var(--mono); letter-spacing: .1em; color: var(--optical); padding-top: 3px; white-space: nowrap; }
.look.in { animation: rise .5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- features ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.card { padding: 28px 28px 36px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-height: 240px; transition: background .25s; }
.card:hover { background: var(--sel); }
.card-n { color: var(--optical); display: block; margin-bottom: 48px; }
.card h3 { margin: 0 0 12px; font-weight: 500; font-size: 21px; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--silver); font-size: 15px; line-height: 1.55; font-weight: 300; }

/* ---------- specs ---------- */
.specs { margin: 0; border-top: 1px solid var(--rule); }
.specs div { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.specs dt { font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--optical); padding-top: 4px; }
.specs dd { margin: 0; font-size: 18px; font-weight: 300; }

/* ---------- achat ---------- */
.sec-buy { padding-top: 0; }
.buy { display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid var(--rule); }
.buy-l { padding: clamp(28px, 4vw, 56px); border-right: 1px solid var(--rule); }
.buy-r { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; background: var(--sel); }
.buy-r .notify { margin-top: auto; padding-top: 24px; }     /* le prix et le bouton ensemble en haut, la liste d'attente Windows en bas */
.buy-title { margin: 28px 0 0; font-weight: 500; font-size: clamp(48px, 7vw, 104px); line-height: .85; letter-spacing: -.045em; }
.buy-title span { display: block; font-weight: 300; font-size: .34em; letter-spacing: -.01em; color: var(--silver); margin-top: 14px; }
.buy-list { list-style: none; padding: 0; margin: 40px 0 0; }
.buy-list li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 300; }
.buy-list li::before { content: "—"; color: var(--optical); margin-right: 12px; }
.price { display: flex; flex-direction: column; gap: 8px; }
.price-v { font-size: clamp(56px, 6vw, 88px); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.price-c { color: var(--optical); }
.notify label { display: block; color: var(--silver); margin-bottom: 12px; }
.notify-row { display: flex; }
.notify input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; font: 400 15px var(--display); background: var(--carbon); color: var(--paper); border: 1px solid var(--rule); border-right: 0; outline: none; }
.notify input:focus { border-color: var(--paper); }
.notify-ok { color: var(--optical); margin: 14px 0 0; }

/* ---------- studio ---------- */
.picto-xl { width: 88px; height: auto; color: var(--carbon); margin-bottom: 40px; }
.studio-claim { margin: 0; font-weight: 500; font-size: clamp(48px, 8vw, 128px); line-height: .9; letter-spacing: -.045em; }
.studio-sub { margin: 18px 0 56px; color: #6d7a74; }

/* ---------- pied ---------- */
.foot { border-top: 1px solid var(--rule); padding: 56px 0 32px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.foot-mark { width: min(560px, 70vw); height: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--silver); }
.foot-links a:hover { color: var(--paper); }
.foot-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--rule); color: #6b6b69; font-size: 10px; line-height: 1.6; }

/* ---------- apparitions ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.seen { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-links { gap: 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .nav-links { position: fixed; top: var(--navh); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--carbon); border-bottom: 1px solid var(--rule); padding: 8px var(--gut) 20px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
  .nav.open { background: var(--carbon); border-bottom-color: var(--rule); }
  .nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav-burger { display: block; }
  .nav { gap: 12px; }
  .grid-2, .sec-head:not(.grid-2) { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .sec-label { padding-top: 0; }
  .buy { grid-template-columns: minmax(0,1fr); }
  .buy-l { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hero-foot { grid-template-columns: minmax(0,1fr) auto; }
  .hero-bar { display: none; }
  .dev-frame { padding: 40px 0; }
  .dev-bg::before { filter: blur(12px) brightness(.5); }
  .dev-frame iframe { border-left: 0; border-right: 0; border-radius: 0; }
}
@media (max-width: 600px) {
  .hide-sm { display: none; }
  .nav .btn-sm { display: none; }
  .cards, .facts { grid-template-columns: minmax(0,1fr); }
  .card { min-height: 0; }
  .card-n { margin-bottom: 20px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-now .hero-cat { display: none; }
  .specs div { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .notify-row { flex-direction: column; gap: 10px; }
  .notify input { border-right: 1px solid var(--rule); }
  .looks-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 10px; }
  .look-name { font-size: 13px; }
  .look-cat { display: none; }
  .scene-pick::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-run, .hero-media img.on { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Charte de la maquette : titres capitales, étiquettes sans-serif, médias arrondis
   ========================================================= */
.lab { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.lab.dim, .lab .dim { color: var(--silver); }
.sec-paper .lab.dim, .sec-paper .lab .dim { color: #6b6a66; }
.hero-title { font-weight: 600; text-transform: uppercase; font-size: clamp(56px, 12vw, 200px); line-height: .86; letter-spacing: -.045em; }
.h2 { font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 4vw, 60px); line-height: .98; letter-spacing: -.03em; }
.h-big { margin: 0; font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 6.2vw, 96px); line-height: .95; letter-spacing: -.035em; }
.h-mid { margin: 36px 0 0; font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 48px); line-height: 1; letter-spacing: -.025em; }
.h-idea { margin-bottom: 36px; }
.sec-label { font-size: 13px; }
.sec-tight { padding: clamp(28px, 3vw, 40px) 0 clamp(64px, 8vw, 112px); }
.row-lab { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0 clamp(28px, 4vw, 56px); }
.sec-tight .h-big { margin-bottom: clamp(24px, 3vw, 36px); }

/* hero : ligne du bas, loupe */
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: 36px; }
.hero-lede { max-width: none; margin: 0; font-size: 14px; line-height: 1.6; }
.hero-cta { margin-top: 0; }
.hero-lens { position: absolute; z-index: 2; left: 0; top: 0; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s, width .3s, height .3s, margin .3s;
  box-shadow: 0 0 0 1px rgba(240,239,234,.55), 0 30px 80px rgba(0,0,0,.5); background-repeat: no-repeat; will-change: transform; }
.hero-lens span { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 9px; padding: 4px 7px; background: rgba(17,17,17,.75); white-space: nowrap; }
.hero.lens-on .hero-lens { opacity: 1; }
.hero-now { gap: 14px; }

/* instrument */
.inst-media { position: relative; display: block; aspect-ratio: 16 / 8.8; border-radius: 22px; overflow: hidden; background: var(--carbon); }
.inst-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.inst-media:hover img { transform: scale(1.03); }
.pill { position: absolute; left: 16px; bottom: 16px; padding: 9px 14px; border-radius: 12px; background: rgba(60,60,58,.72); color: var(--paper); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12px; }
.inst-sub { margin: 18px 0 0; font-weight: 400; font-size: 15px; }
.arrow-link { display: block; margin-top: 36px; padding-top: 28px; border-top: 1px solid #8f8e8a; font-size: 15px; }
.arrow-link span { display: inline-block; transition: transform .25s; margin-left: 4px; }
.arrow-link:hover span { transform: translate(3px, -3px); }

/* recherche */
#research { background: var(--carbon); }
.lede-wide { max-width: 60ch; margin-top: 0; font-size: 19px; }
.research { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }
.research article { padding: 22px 28px 8px 0; }
.research article + article { padding-left: 28px; border-left: 1px solid var(--rule); }
.research h3 { margin: 28px 0 10px; font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.research p { margin: 0; color: var(--silver); font-size: 15px; line-height: 1.55; font-weight: 300; }

/* schéma du modèle */
.model { margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule-paper); }
.model svg { width: 100%; height: auto; display: block; overflow: visible; }
.model figcaption { margin-top: 18px; font-size: 11px; color: #6b6a66; line-height: 1.6; }
.m-axis line { stroke: #bdbbb3; stroke-dasharray: 3 6; }
.m-pupil line { stroke: var(--carbon); stroke-width: 2; }
.m-glass { fill: rgba(130,145,139,.22); stroke: var(--carbon); stroke-width: 1.2; }
.m-ray polyline, .m-ray line { fill: none; stroke: var(--carbon); stroke-width: 1.1; }
.m-ghost line { stroke: #9d9b94; stroke-dasharray: 5 5; }
.m-plane { stroke: var(--carbon); stroke-width: 1.5; }
.m-dot { fill: var(--carbon); }
.m-txt text { font: 500 12px var(--display); letter-spacing: .05em; fill: var(--carbon); }
.m-txt .m-sub { font-size: 10px; fill: #6b6a66; letter-spacing: .06em; }
.m-ray polyline { stroke-dasharray: 900; stroke-dashoffset: 900; }
.model.seen .m-ray polyline { animation: ray 1.8s cubic-bezier(.3,.6,.2,1) forwards; }
.model.seen .m-ray polyline:nth-child(2) { animation-delay: .15s; }
.model.seen .m-ray polyline:nth-child(3) { animation-delay: .3s; }
@keyframes ray { to { stroke-dashoffset: 0; } }

/* interludes */
.interlude { padding: clamp(96px, 14vw, 200px) 0; border-top: 1px solid var(--rule); }
.quote { margin: 0; max-width: 22ch; font-size: clamp(32px, 4.8vw, 72px); line-height: 1.05; letter-spacing: -.035em; font-weight: 400; }
.quote .dim { display: block; margin-top: .35em; max-width: 30ch; font-size: .48em; line-height: 1.25; letter-spacing: -.015em; font-weight: 300; }

/* principes */
.principles { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.principles li { border-top: 1px solid var(--carbon); padding: 18px 0 30px; }
.principles .lab { color: #6d7a74; font-size: 11px; }
.principles b { display: block; margin: 16px 0 8px; font-weight: 600; font-size: 21px; letter-spacing: -.015em; }
.principles p { margin: 0; color: #5d5d5a; font-size: 15px; line-height: 1.55; font-weight: 300; }

@media (max-width: 900px) {
  .research { grid-template-columns: minmax(0,1fr); }
  .research article, .research article + article { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .research h3 { margin-top: 12px; }
  .principles { grid-template-columns: minmax(0,1fr); }
  .hero-lens { display: none; }
  .inst-media { border-radius: 14px; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .m-txt .m-sub { display: none; }
  .row-lab { font-size: 11px; }
}

/* pied : mot OBLIQUE et monogrammes */
.foot-big { padding-bottom: 28px; }
.foot-word { margin: 0; font-weight: 400; font-size: clamp(72px, 19vw, 300px); line-height: .82; letter-spacing: -.05em; }
.foot-sig { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: var(--silver); }
.marks { display: flex; justify-content: space-between; align-items: baseline; padding: 40px 0; margin-bottom: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-weight: 600; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -.02em; }
.foot-top { align-items: center; }
.foot-mark { width: auto; height: 16px; }

/* manifeste du studio */
#manifesto { padding-top: clamp(40px, 5vw, 72px); }
.mani { background: #141414; border: 1px solid #222; border-radius: 22px; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) 28px; }
.mani-name { margin: 0; font-weight: 400; font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: -.03em; }
.mani-sub { margin: 22px 0 0; padding-bottom: 40px; border-bottom: 1px solid #555; }
.mani-claim { margin: 44px 0 0; font-weight: 400; font-size: clamp(36px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.03em; text-transform: uppercase; }
.mani-body { margin: 28px 0 0; max-width: 62ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: #cfcec9; font-weight: 300; padding-bottom: 40px; border-bottom: 1px solid #555; }
.mani-pillars { display: flex; justify-content: space-between; gap: 16px; padding-top: 26px; }
.body-first { margin-top: 0; }
.studio-sub { margin-bottom: 40px; }
@media (max-width: 600px) { .mani-pillars { flex-direction: column; gap: 10px; } }
@media (max-width: 600px) { .hero-now span:nth-child(2) { display: none; } .hero-media img { object-position: 50% 50%; } }

/* =========================================================
   V2 — logo ™, hero vidéo, whips, verre givré, formes 3D
   ========================================================= */
.nav-brand .lockup { height: 17px; width: auto; display: block; }
.tm { font-size: .32em; vertical-align: top; position: relative; top: .25em; margin-left: .08em; font-weight: 400; letter-spacing: 0; }
.studio-lockup { width: min(420px, 80%); height: auto; margin-bottom: 44px; }
.foot-mark { height: 18px; width: auto; }
.key { display: inline-block; font: 500 13px var(--mono); border: 1px solid #4a4a48; border-radius: 4px; padding: 0 6px; color: var(--paper); }

/* vidéos et whips */
.whip-track { position: absolute; inset: 0; overflow: hidden; }
.whip-pane { position: absolute; inset: 0; will-change: transform; }
.whip-pane video, .hero-before video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* hero */
.hero-media { background: var(--ink); }
.hero-before { position: absolute; inset: 0; z-index: 2; clip-path: circle(0px at 50% 50%); }
.hero.holding .hero-before { clip-path: none !important; }
.hero.whipping .hero-before, .hero.whipping .hero-ring { visibility: hidden; }
.hero-ring { position: absolute; z-index: 3; left: 0; top: 0; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s;
  box-shadow: inset 0 0 0 1px rgba(240,239,234,.7), inset 0 0 40px rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.25); will-change: transform; }
.hero-ring span { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 10px; padding: 5px 9px; border-radius: 99px; white-space: nowrap;
  background: rgba(17,17,17,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero.lens-on .hero-ring { opacity: 1; }
.hero.lens-on { cursor: none; }
.hero-shade { background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 50%, rgba(10,10,10,.78) 100%); }
.hero-body { padding-bottom: 44px; padding-right: calc(var(--gut) + 360px); }

/* verre givré « liquid glass » */
.glass-ui { position: relative; color: var(--paper); border-radius: 18px; isolation: isolate;
  background: linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.05); backdrop-filter: blur(24px) saturate(170%) brightness(1.05);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 1px 0 0 rgba(255,255,255,.12), inset 0 -10px 24px rgba(255,255,255,.03), 0 24px 70px rgba(0,0,0,.38); }
.glass-ui::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 18% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), radial-gradient(80% 50% at 100% 110%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%); }
.gu-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.gu-title { display: flex; align-items: center; gap: 8px; font: 500 12px var(--display); letter-spacing: .02em; }
.gu-picto { height: 8.5px; width: auto; fill: currentColor; }
.gu-sub { font: 400 10px var(--mono); letter-spacing: .12em; color: rgba(240,239,234,.62); text-transform: uppercase; }
.gu-look { padding: 12px 16px 8px; }
.gu-lab { font-size: 12px; color: rgba(240,239,234,.7); }
.gu-pick { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.gu-name { font: 500 13px var(--mono); letter-spacing: .04em; }
.gu-arr { width: 34px; height: 30px; border-radius: 9px; font-size: 20px; line-height: 1; color: var(--paper); background: rgba(255,255,255,.08); transition: background .2s, transform .15s; }
.gu-arr:hover { background: rgba(255,255,255,.2); }
.gu-arr:active { transform: scale(.94); }
.gu-arr.flash { animation: guflash .6s ease; }
@keyframes guflash { 0% { background: rgba(240,239,234,.95); color: var(--carbon); } 100% { background: rgba(255,255,255,.08); color: var(--paper); } }
.gu-fam { display: block; margin-top: 8px; font: 400 10px var(--mono); letter-spacing: .12em; color: var(--optical); filter: brightness(1.3); }
.gu-sliders { padding: 4px 16px 10px; }
.gu-row { display: grid; grid-template-columns: 1fr auto; row-gap: 7px; padding: 8px 0 6px; }
.gu-val { font: 400 11px var(--mono); letter-spacing: .04em; }
.gu-track { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); }
.gu-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--paper); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.gu-track b { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.4); transition: left .7s cubic-bezier(.2,.7,.2,1); }
.gu-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 14px; border-top: 1px solid rgba(255,255,255,.12); font: 400 10px var(--mono); letter-spacing: .12em; color: rgba(240,239,234,.62); }
.gu-hold { font: inherit; letter-spacing: inherit; color: var(--paper); padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.1); user-select: none; -webkit-user-select: none; touch-action: none; }
.hero.holding .gu-hold { background: var(--paper); color: var(--carbon); }
.hero-ui { position: absolute; z-index: 5; right: var(--gut); bottom: 36px; width: 330px; }

/* 01 / instruments */
.inst-media { cursor: default; }
.inst-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inst-ui { position: absolute; top: 22px; right: 22px; width: 300px; }
.inst-shape { position: absolute; right: 22px; bottom: 22px; width: 200px; padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inst-shape img { width: 140px; height: 140px; object-fit: contain; }

/* recherche : vues 3D */
.r-art { width: 150px; height: 150px; object-fit: contain; margin: 0 0 18px -10px; display: block; }

/* formes */
.shapes { display: grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
.shapes figure { margin: 0; text-align: center; }
.shapes img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.shapes figure:hover img { transform: scale(1.08) rotate(-2deg); }
.shapes figcaption { font-size: 10px; color: var(--silver); margin-top: 6px; }
.shapes-note { margin: 0 0 48px; }

/* avant / après en vidéo */
.cmp { --x: 50%; }
.cmp .whip-pane video { pointer-events: none; }
.cmp[data-mode="whip"] { cursor: pointer; }
.cmp[data-mode="whip"] .cmp-handle { display: none; }
.cmp[data-mode="whip"] .cmp-tag-l { opacity: 0; transition: opacity .2s; }
.cmp[data-mode="whip"].is-before .cmp-tag-l { opacity: 1; }
.cmp[data-mode="whip"].is-before .cmp-tag-r { opacity: 0; }
.cmp-tag { z-index: 4; border-radius: 8px; transition: opacity .2s; }
.cmp-handle { z-index: 4; }
.cmp-split { display: none; }
.modes { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 10px; }
.modes button { font: inherit; letter-spacing: inherit; font-size: 11px; color: var(--silver); padding: 8px 14px; border-radius: 7px; }
.modes button[aria-pressed="true"] { background: var(--paper); color: var(--carbon); }

/* looks */
/* familles de verre (écrites par web/tools/site_families.py) : nom, compte, et toutes les formes de la famille */
.families { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0 0 44px; padding: 1px 0 0 1px; counter-reset: fam; }
.fam { padding: 18px 18px 20px; counter-increment: fam; border: 1px solid var(--rule); margin: -1px 0 0 -1px; }     /* filets partagés, sans case vide grise au bout */
.fam b { display: block; font-weight: 500; font-size: 15px; letter-spacing: .02em; color: var(--paper); }
.fam b::before { content: "0" counter(fam); display: block; margin-bottom: 14px; font: 400 10px var(--mono); letter-spacing: .12em; color: var(--optical); }
.fam-n { display: block; margin: 6px 0 12px; font-size: 10px; letter-spacing: .12em; color: var(--optical); }
.fam p { margin: 0; color: var(--silver); font-size: 13px; line-height: 1.55; }
.looks-note { margin: 0; }
.looks-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 16px; }
.look-img { border-radius: 14px; }
/* la vue 3D du verre du look, comme dans Look Developer : grande et lisible sur l'image claire comme sur la sombre */
.look-glass { position: absolute; right: 10px; bottom: 10px; display: block; padding: 6px; border-radius: 14px;
  background: rgba(12,12,12,.66) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.look-glass img { position: static; display: block; width: 96px; height: 96px; object-fit: contain; transform: none !important; }
.look-glass .gu-sub { display: none; }
.look-img::after { display: none; }
.look-name { font-size: 17px; }
.scene-pick button { position: relative; border-radius: 6px; width: 72px; }
.scene-pick button span { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 500 9px var(--mono); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.scene-pick::before { content: none; }

/* achat */
.price-c { color: var(--optical); }
.price-v { font-size: clamp(56px, 6vw, 92px); }
.price-v small { font-size: .26em; letter-spacing: .08em; color: var(--silver); font-weight: 400; vertical-align: middle; }
.price-n { font-size: 11px; line-height: 1.6; }
.btn-buy { width: 100%; height: 56px; font-size: 14px; }
.notify .btn-line { border-color: var(--rule); }

@media (max-width: 1100px) {
  .shapes { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .inst-ui { width: 260px; }
}
@media (max-width: 900px) {
  .hero-body { padding-right: var(--gut); padding-bottom: 20px; }
  .hero-ui { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--gut) 20px; }
  .hero-ui .gu-sliders, .hero-ui .gu-head { display: none; }
  .hero-ring { display: none; }
  .looks-grid { grid-template-columns: minmax(0,1fr); }
  .inst-ui { display: none; }
  .inst-shape { width: 150px; right: 12px; bottom: 12px; }
  .inst-shape img { width: 96px; height: 96px; }
  .inst-shape .gu-sub { display: none; }
  .r-art { width: 110px; height: 110px; }
}
@media (max-width: 600px) {
  .shapes { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .pill { font-size: 10px; }
  .inst-shape { display: none; }
  .looks-grid { grid-template-columns: minmax(0,1fr); }
  .look-cat { display: inline; }
}
.inst-shape img { width: 160px; height: 160px; filter: brightness(1.7) contrast(1.1); }
.nc { text-transform: none; }
/* SPLIT : la vidéo « before », découpée par le rideau, doit être au-dessus de « after » */
.cmp[data-mode="split"] .cmp-before { z-index: 2; }
.cmp[data-mode="split"] .cmp-after { z-index: 1; }
.cmp[data-mode="split"] { cursor: ew-resize; touch-action: pan-y; }

/* =========================================================
   Texture et mouvement des sections papier
   ========================================================= */
/* grain : bruit SVG, multiplié sur le papier */
.sec-paper { position: relative; isolation: isolate; overflow: clip; }
.sec-paper::before { content: ""; position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .07  0 0 0 0 .07  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.sec-paper::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), radial-gradient(140% 120% at 50% 120%, rgba(17,17,17,.035), rgba(17,17,17,0) 60%); }

/* formes de verre qui tournent (planches rendues par build/glassart, blanc → noir sur le papier) */
.spin { display: block; width: 100%; aspect-ratio: 1; filter: invert(1); }
.idea-side { position: relative; }
.spin-fig { position: sticky; top: calc(var(--navh) + 40px); margin: 40px 0 0; max-width: 300px; }
.spin-fig figcaption { margin-top: 10px; font-size: 10px; color: #6b6a66; }
.spin-bg { position: absolute; z-index: -1; width: min(640px, 52vw); right: -18vw; top: 8%; opacity: .1; pointer-events: none; }

/* verre cannelé qui balaie le titre */
.flute-wrap { position: relative; }
.flute { position: absolute; top: -18px; bottom: 18px; left: 0; width: 300px; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .6s; }
.sec-idea.flute-on .flute { opacity: 1; }
.flute-s { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--paper); }
.flute-s > .h-big { position: absolute; left: 0; top: 18px; margin: 0; transform-origin: 0 0; white-space: normal; filter: blur(.25px); }
.flute-s::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 64%, rgba(17,17,17,.10) 92%, rgba(17,17,17,.18) 100%); }
.flute::before, .flute::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(17,17,17,.18); z-index: 2; }
.flute::before { top: 0; } .flute::after { bottom: 0; }

/* phrase qui s'allume au défilement */
.statement .w { transition: opacity .25s, color .25s; opacity: .18; }
.statement .w.on { opacity: 1; }
.statement .dim .w.on { opacity: 1; color: #5d5d5a; }

/* faits : le filet se trace */
.fact { border-top: 0; position: relative; padding-top: 15px; }
.fact::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--carbon); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.facts.seen .fact::before { transform: scaleX(1); }
.facts.seen .fact:nth-child(2)::before { transition-delay: .12s; } .facts.seen .fact:nth-child(3)::before { transition-delay: .24s; } .facts.seen .fact:nth-child(4)::before { transition-delay: .36s; }

@media (max-width: 900px) {
  .spin-fig { position: relative; top: 0; max-width: 220px; margin: 18px 0 0; }
  .spin-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-paper::before { animation: none; }
  .statement .w { opacity: 1; }
  .flute { display: none; }
}
.buy-icon { width: 192px; height: auto; border-radius: 8px; margin-top: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* =========================================================
   Boutons « boutique » et barre d'achat flottante
   ========================================================= */
.btn { border-radius: 10px; font: 600 14px var(--display); letter-spacing: .01em; height: 48px; padding: 0 20px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 8px; }
.btn-big { height: 56px; padding: 0 26px; font-size: 15px; }
.btn:active { transform: scale(.98); }
.btn-buy { height: 58px; font-size: 16px; }
.notify input { border-radius: 10px 0 0 10px; }
.notify .btn { border-radius: 0 10px 10px 0; }
.buybar { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px;
  background: rgba(24,24,23,.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.buybar.show { transform: none; }
.buybar img { width: 64px; height: 36px; border-radius: 5px; object-fit: cover; }
.buybar-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.buybar-t b { font-size: 13px; font-weight: 600; }
.buybar-t span { font-size: 12px; color: var(--silver); }
.buybar .btn { padding: 0 22px; }
.foot { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }    /* mobile : la barre d'achat, pleine largeur, ne cache pas le © */
@media (min-width: 1000px) { .buybar { left: auto; right: 24px; bottom: 24px; width: 380px; } .foot { padding-bottom: 32px; } }   /* ordinateur : la barre est dans le coin, pas besoin de place */
@media (max-width: 600px) {
  .nav .btn-sm { display: inline-flex; }
  .hero-cta .btn { flex: 1 1 100%; }
  .notify-row { flex-direction: row; gap: 0; }
  .notify input { border-right: 0; }
}

/* =========================================================
   Look Developer : de Resolve à la démo, au défilement
   ========================================================= */
.dev-scroll { position: relative; height: 260vh; }
.dev-stage { position: sticky; top: var(--navh); height: calc(100vh - var(--navh)); display: grid; place-items: center; overflow: hidden; }
.dev-box { position: relative; width: min(calc(100vw - 2 * var(--gut)), 1320px, calc((100vh - var(--navh) - 48px) * 1.7)); aspect-ratio: 1.7; }
.dv-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: #1e1e20; box-shadow: 0 0 0 1px var(--rule); }
.dv-scene { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 16 / 9; height: 100%; translate: -50% 0; transform-origin: 50% 47%; will-change: transform; }
.dv-resolve { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: filter; }
.dv-win { position: absolute; left: 21%; top: 16.7%; width: 58%; aspect-ratio: 1.7; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.5); }
.dv-win img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-lights { position: absolute; left: 1.1%; top: 1.6%; display: flex; gap: .7%; width: 100%; }
.dv-lights b { width: 1.05%; aspect-ratio: 1; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.dv-lights b + b { background: #28c840; }
.dv-cap { position: absolute; left: 50%; translate: -50% 0; margin: 0; padding: 8px 14px; border-radius: 99px; white-space: nowrap; font-size: 12px; pointer-events: none;
  background: rgba(17,17,17,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); }
.dv-cap span { color: var(--paper); font-weight: 600; }
.dv-cap-a { bottom: 4.5%; color: var(--silver); }
.dv-cap-b { bottom: 4.5%; opacity: 0; }
.dev-box #rg-ld { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid var(--rule); border-radius: 14px; background: var(--carbon); opacity: 0; pointer-events: none; }
.dev-box.live #rg-ld { pointer-events: auto; }

/* téléphone et tablette : pas d'écran fixé ; l'image zoome en passant, la démo suit en dessous */
@media (max-width: 899px) {
  .dev-scroll { height: auto; padding: 0 var(--gut); }
  .dev-stage { position: static; height: auto; display: block; overflow: visible; }
  .dev-box { width: 100%; aspect-ratio: auto; }
  .dv-frame { position: relative; inset: auto; aspect-ratio: 1.7; }
  .dv-cap { font-size: 10px; padding: 6px 10px; }
  .dv-cap-a span + * { display: none; }
  .dev-box #rg-ld { position: static; opacity: 1; pointer-events: auto; height: 900px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-scroll { height: auto; }
  .dev-stage { position: static; height: auto; display: block; }
  .dv-frame { position: relative; aspect-ratio: 1.7; }
  .dev-box { aspect-ratio: auto; }
  .dev-box #rg-ld { position: static; opacity: 1; pointer-events: auto; height: 820px; margin-top: 16px; }
}
.principles li:nth-child(5) { grid-column: 1 / -1; }   /* P—05 : la position du studio, sur toute la largeur */

/* © sous le logo et les liens, sans ligne ni bloc à part */
.foot-copy { margin: 18px 0 0; color: #6b6b69; font-size: 10px; line-height: 1.6; }

/* logo OBLIQUE STUDIO plus grand : barre du haut et pied de page (plus petit sur téléphone, pour laisser la place au bouton et au menu) */
.nav-brand .lockup { height: 23px; }
.foot-mark { height: 30px; }
@media (max-width: 600px) { .nav-brand .lockup { height: 18px; } .foot-mark { height: 24px; } }

/* pied de page : pas d'espace avant sa première ligne (celle de O. · OBL/ · OS—01) */
.foot { padding-top: 0; border-top: 0; }
/* liens légaux : leur propre ligne, sous le logo et le ©, à gauche */
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0 !important; }
.foot-legal a { color: var(--silver); font-size: 12px; text-decoration: none; }
.foot-legal a:hover { color: var(--paper); }
/* liens légaux plus petits, tout près du bas de la page (la barre d'achat s'efface au pied de page, pas besoin de marge pour elle) */
.foot-legal { margin: 10px 0 0 !important; gap: 4px 16px; }
.foot-legal a { font-size: 10px; }
.foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
/* encore plus près du bas */
.foot { padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important; }
.foot-legal a { line-height: 1.2; }
/* logo du pied de page remonté : moins d'espace sous la ligne O. · OBL/ · OS—01 */
.marks { margin-bottom: 18px; }
/* plus d'air entre le logo et son tagline (© … BEYOND THE IMAGE.) d'un côté, et les liens légaux de l'autre */
.foot-legal { margin-top: 64px !important; }
/* liens légaux un peu remontés : plus d'espace entre eux et le bas de la page */
.foot { padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important; }

/* formes de verre : une seule section (familles + exemples + le banc optique) */
#looks .shapes { grid-template-columns: repeat(8, minmax(0,1fr)); margin: 8px 0 48px; }
.looks-more { margin: 28px 0 0; }
.bench-note { margin: 96px 0 18px; }
.anchor-alias { position: absolute; }
@media (max-width: 1100px) { #looks .shapes { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 600px) { #looks .shapes { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* banc des formes : sobre, filets seulement ; le choix de la forme comme celui du look dans Look Developer */
.bench { position: relative; margin-top: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bench-sel { position: relative; display: grid; grid-template-columns: auto minmax(0, 420px) 1fr; align-items: center; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.bench-k { margin: 0; font-size: 10px; letter-spacing: .12em; color: var(--silver); }
.bench-k b { color: var(--paper); font-weight: 500; }
.bench-pick { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: 8px; height: 44px; }
.bench-arr { width: 44px; height: 100%; font: 400 20px var(--mono); color: var(--silver); transition: color .15s, background .15s; }
.bench-arr:hover { color: var(--paper); background: var(--sel); }
.bench-nm { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule);
  font-weight: 500; font-size: 18px; letter-spacing: -.01em; color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-nm::after { content: " ▾"; font-size: 11px; color: var(--silver); }
.bench-nm:hover span { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--optical); }
.bench-where { justify-self: end; font-size: 10px; letter-spacing: .12em; color: var(--silver); }
.bench-where span:first-child { color: var(--optical); filter: brightness(1.4); }
.bench-menu { position: absolute; z-index: 20; top: calc(100% - 10px); left: 0; width: min(372px, 100%); max-height: 420px; overflow-y: auto; overscroll-behavior: contain;
  background: #1d1d1c; border: 1px solid #5a5a58; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #787876 transparent; }
.bench-menu .cat { padding: 12px 12px 4px; font: 500 10px var(--mono); letter-spacing: 1px; color: var(--optical); }
.bench-menu .it { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; height: 28px; padding: 0 12px; font: 400 12px var(--mono); letter-spacing: .2px; color: var(--silver); }
.bench-menu .it img { width: 18px; height: 18px; object-fit: contain; }
.bench-menu .it[aria-selected="true"] { background: #343433; color: var(--paper); }
.bench-menu .it:hover, .bench-menu .it.kb { background: var(--paper); color: var(--carbon); }
.bench-body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: start; padding: 24px 0 26px; }
.bench-mesh, .bench-shot { margin: 0; }
.bench-mesh canvas { display: block; width: 100%; aspect-ratio: 1; }
.bench-shot img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.bench-mesh figcaption, .bench-shot figcaption { margin-top: 8px; font-size: 9px; line-height: 1.4; letter-spacing: .1em; color: var(--silver); }
.bench-ctl .bench-k { margin-bottom: 4px; }
.bench-sliders { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 22px; margin-bottom: 18px; }
.bench-row { padding: 7px 0 4px; row-gap: 6px; }
.bench-row .gu-lab { font-size: 12px; }
.bench-row .gu-val { font-size: 10.5px; }
.bench-row .gu-track { background: var(--rule); }
.bench-row .gu-track i, .bench-row .gu-track b { transition-duration: .9s; }
.bench-row .gu-track b { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: none; }
.bench-shared { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 2px 0 18px; }
.bench-chip { display: inline-flex; gap: 6px; padding: 3px 0; font-size: 9.5px; letter-spacing: .08em; color: var(--silver); }
.bench-chip b { color: var(--paper); font-weight: 500; }
@media (max-width: 1180px) { .bench-body { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } .bench-ctl { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .bench-sel { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .bench-where { justify-self: start; }
  .bench-menu { top: 100%; }
  .bench-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .bench-sliders { grid-template-columns: minmax(0,1fr); }
}

/* la liste de ce qu'on achète, dans la boîte du prix, au-dessus du bouton */
.buy-r .buy-list { margin: 0; }
.buy-r .buy-list li:last-child { border-bottom: 1px solid var(--rule); }

/* un peu plus d'air entre les verres 3D et le banc des formes */
#looks .looks-bar { margin-top: 112px; }
#looks { padding-bottom: calc(clamp(80px, 11vw, 160px) - 48px); }     /* le banc descend de 48 px, la section garde sa hauteur */

/* Look Developer : la phrase d'accroche sous le titre, plus claire que le texte qui suit */
.dev-new { color: var(--paper); margin-bottom: 10px; }

/* la loupe « WITHOUT GLASS » du haut : seulement sur grand écran avec une souris */
@media (max-width: 1199px), (hover: none) { .hero-ring { display: none; } }

/* la carte du studio : compacte, proportions d'une carte de visite, un objet posé (relief, ombre, grain) */
.mani-card { position: relative; max-width: 760px; margin: 0 auto; aspect-ratio: 1.75; display: flex; flex-direction: column;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px) clamp(18px, 2.4vw, 28px); border-radius: 18px; border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #1d1d1c 0%, #161615 55%, #121212 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.4), 0 30px 70px -20px rgba(0,0,0,.75);
  transform: rotate(-1.2deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mani-card:hover { transform: rotate(0deg) translateY(-3px); }
.mani-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.mani-logo { display: block; height: clamp(18px, 2.2vw, 26px); width: auto; }
.mani-card .mani-sub { margin: 0; padding: 0; border: 0; text-align: right; font-size: 9px; line-height: 1.5; letter-spacing: .14em; color: var(--silver); }
.mani-card .mani-claim { margin: auto 0 0; font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.04; letter-spacing: -.03em; text-transform: none; }
.mani-card .mani-body { margin: 12px 0 0; max-width: 46ch; font-size: clamp(13px, 1vw, 14px); line-height: 1.5; padding: 0; border: 0; }
.mani-card .mani-pillars { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 9px; letter-spacing: .14em; color: var(--silver); }
@media (max-width: 600px) {
  .mani-card { aspect-ratio: auto; transform: none; }
  .mani-card:hover { transform: none; }
  .mani-card .mani-claim { margin-top: 40px; }
  .mani-card .mani-pillars { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
}

/* la carte du studio posée sur le fond clair : ombre plus douce, comme sur du papier */
#manifesto .mani-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.25), 0 24px 50px -18px rgba(0,0,0,.45); }
#manifesto .mani-card { color: var(--paper); }
#manifesto .mani-card .mani-body { color: #cfcec9; }
#manifesto .mani-card .mani-sub, #manifesto .mani-card .mani-pillars { color: var(--silver); }

/* retour au fond sombre : la carte en verre givré, une forme de verre derrière pour que le givre se voie */
.mani-stage { position: relative; max-width: 760px; margin: 0 auto; isolation: isolate; }
.mani-behind { position: absolute; z-index: -1; width: 46%; right: -9%; top: -16%; opacity: .9; transform: rotate(-12deg); pointer-events: none; }
#manifesto .mani-card.glass-ui { background: linear-gradient(145deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.045) 42%, rgba(255,255,255,.02) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 1px 0 0 rgba(255,255,255,.08), 0 30px 70px -20px rgba(0,0,0,.75); }
@media (max-width: 600px) { .mani-behind { width: 60%; right: -12%; top: -8%; } }
#manifesto { overflow-x: clip; }
@media (max-width: 600px) { .mani-behind { right: 0; } }

/* ---------- carte du studio en verre cannelé (#manifesto) ---------- */
#manifesto { overflow: hidden; }
.flute-stage { position: relative; height: clamp(460px, 44vw, 600px); display: grid; place-items: center; perspective: 1400px; }
/* le nom du studio, géant, qui défile ; une copie est vue à travers chaque cannelure */
.fs-row { position: absolute; left: 0; display: flex; white-space: nowrap; will-change: transform; }
.fs-row img { display: block; flex: none; height: 100%; width: auto; padding-right: .5em; }
.fs-row.r1 { top: 21%; height: clamp(90px, 11vw, 170px); animation: fsDrift 46s linear infinite; }
.fs-row.r2 { top: 86%; height: clamp(16px, 1.5vw, 22px); gap: 3em; animation: fsDrift 30s linear infinite reverse; }
.fs-row.r2 span { font: 500 clamp(16px, 1.5vw, 22px)/1 var(--mono); letter-spacing: .2em; color: var(--paper); padding-right: 3em; }
@keyframes fsDrift { to { transform: translateX(-50%); } }
.fs-layer { position: absolute; left: 0; top: 0; width: var(--sw, 100vw); height: var(--sh, 600px); transform: translate(var(--px, 0px), var(--py, 0px)); }
.fs-bg { position: absolute; inset: 0; opacity: .16; }
.fs-bg .fs-layer { transform: translate(calc(var(--px, 0px) * .4), calc(var(--py, 0px) * .4)); }
/* la carte : proportions d'une carte de visite, inclinée vers la souris */
.fs-card { position: relative; z-index: 2; width: min(720px, 100%); aspect-ratio: 1.75; border-radius: 18px; overflow: hidden; isolation: isolate;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1);
  background: rgba(20,20,19,.35); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.4); }
.flute-stage.live .fs-card { transition: transform .12s linear; }
/* le verre : des bandes verticales, chacune montre ce qui est derrière, grossi autour de son centre */
.fs-refr { position: absolute; inset: 0; z-index: -2; }
.fs-strip { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.fs-strip::after { content: ""; position: absolute; inset: 0; pointer-events: none;     /* le galbe de chaque cannelure : un bord sombre, un filet de lumière */
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(255,255,255,.07) 48%, rgba(0,0,0,0) 70%, rgba(0,0,0,.5) 100%); }
.fs-strip .fs-layer { left: var(--ox); top: var(--oy); transform-origin: var(--to) 50%;
  transform: translate(var(--px, 0px), var(--py, 0px)) scaleX(2.6); opacity: .55; filter: blur(.4px); }
.fs-strip.ca .fs-layer { filter: blur(.4px) drop-shadow(1.5px 0 0 rgba(255,60,60,.55)) drop-shadow(-1.5px 0 0 rgba(60,140,255,.55)); }
/* la lumière qui glisse sur le verre, sous le curseur */
.fs-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(420px 260px at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.16), rgba(255,255,255,0) 70%),
              linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 55%); }
.fs-in { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px) clamp(18px, 2.4vw, 26px);
  background: linear-gradient(180deg, rgba(14,14,13,.55) 0%, rgba(14,14,13,.12) 26%, rgba(14,14,13,.2) 50%, rgba(14,14,13,.78) 72%, rgba(14,14,13,.86) 100%); }
.fs-in .mani-sub { margin: 0; padding: 0; border: 0; text-align: right; font-size: 9px; line-height: 1.5; letter-spacing: .14em; color: rgba(240,239,234,.75); }
.fs-in .mani-claim { margin: auto 0 0; font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.04; letter-spacing: -.03em; text-transform: none; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.fs-in .mani-body { margin: 12px 0 0; max-width: 46ch; font-size: clamp(13px, 1vw, 14px); line-height: 1.5; padding: 0; border: 0; color: #dcdbd6; }
.fs-in .mani-pillars { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); font-size: 9px; letter-spacing: .14em; color: rgba(240,239,234,.75); }
.fs-cap { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 9px; letter-spacing: .14em; color: #6b6b69; white-space: nowrap; }
@media (max-width: 600px) {
  .flute-stage { height: auto; padding: 60px 0 40px; perspective: none; }
  .fs-card { aspect-ratio: auto; }
  .fs-in .mani-claim { margin-top: 48px; }
  .fs-in .mani-pillars { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .fs-cap { bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fs-row { animation: none; } .fs-card { transform: none !important; } }

/* carte cannelée, version calme : on lit d'abord le texte, le verre reste en arrière-plan */
.fs-bg { opacity: .07; }
.fs-row.r1 { animation-duration: 90s; }
.fs-row.r2 { animation-duration: 70s; }
.fs-strip .fs-layer { opacity: .28 !important; }
.fs-strip.ca .fs-layer { filter: blur(.4px); }
.fs-strip::after { background: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 25%, rgba(255,255,255,.04) 50%, rgba(0,0,0,0) 72%, rgba(0,0,0,.32) 100%); }
/* le nom vu à travers le verre seulement dans le haut de la carte ; il s'efface avant la phrase */
.fs-refr { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%); }
.fs-in { background: linear-gradient(180deg, rgba(14,14,13,.45) 0%, rgba(14,14,13,.2) 30%, rgba(14,14,13,.7) 55%, rgba(14,14,13,.82) 100%); }
.fs-sheen { opacity: .6; }
.fs-in .mani-claim { text-shadow: none; }

/* carte du studio sans effet : pas d'inclinaison, de grain, de relief ni de survol */
.mani-card.mani-plain { background: #161615; transform: none; transition: none; border: 1px solid #262625; box-shadow: none; }
.mani-card.mani-plain:hover { transform: none; }
#manifesto .mani-card.mani-plain { box-shadow: none; }

/* le studio à même la page : le logo, la phrase, le texte, les trois piliers ; compact, sans boîte */
.mani-open .mani-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.mani-open .mani-logo { display: block; height: clamp(20px, 2.2vw, 28px); width: auto; }
.mani-open .mani-sub { margin: 0; padding: 0; border: 0; text-align: right; font-size: 10px; line-height: 1.5; letter-spacing: .14em; color: var(--silver); }
.mani-open .mani-claim { margin: clamp(28px, 4vw, 48px) 0 0; font-weight: 400; font-size: clamp(30px, 4vw, 56px); line-height: 1.04; letter-spacing: -.03em; text-transform: none; max-width: 18ch; }
.mani-open .mani-body { margin: 16px 0 0; max-width: 52ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; padding: 0; border: 0; color: #cfcec9; font-weight: 300; }
.mani-open .mani-pillars { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 3.5vw, 44px); padding-top: 14px; border-top: 1px solid var(--rule); font-size: 10px; letter-spacing: .14em; color: var(--silver); }
@media (max-width: 600px) { .mani-open .mani-top { flex-direction: column; align-items: flex-start; } .mani-open .mani-sub { text-align: left; } .mani-open .mani-pillars { flex-wrap: wrap; } }

/* la nouveauté RAYGLASS 001, à droite de la phrase du studio : une image rendue, un panneau givré posé dessus */
.mani-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 80px); align-items: end; }
.mani-new { position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; isolation: isolate; color: var(--paper); text-decoration: none;
  opacity: 0; transform: translateY(70px); transition: opacity 1.6s cubic-bezier(.2,.7,.2,1), transform 2.2s cubic-bezier(.16,.8,.2,1); }
.mani-new.in { opacity: 1; transform: none; }
.mn-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.mani-new:hover .mn-shot { transform: scale(1.04); }
.mn-glass { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 14px; }
.mn-icon { width: 64px; height: auto; border-radius: 8px; flex: none; }
.mn-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mn-tag { font-size: 9px; letter-spacing: .14em; color: rgba(240,239,234,.72); }
.mn-txt b { font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.1; }
.mn-sub { font-size: 12px; color: rgba(240,239,234,.78); font-weight: 300; }
.mn-go { margin-left: auto; font-size: 20px; transition: transform .3s; }
.mani-new:hover .mn-go { transform: translateX(4px); }
@media (max-width: 900px) { .mani-mid { grid-template-columns: minmax(0,1fr); } .mani-new { margin-top: 8px; } }
@media (max-width: 600px) { .mn-icon { width: 48px; } .mn-txt b { font-size: 17px; } .mn-sub { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .mani-new { opacity: 1; transform: none; transition: none; } }
.mani-mid { margin-top: clamp(28px, 4vw, 48px); }
.mani-mid .mani-claim { margin-top: 0; }

/* la nouveauté : la fenêtre RAYGLASS 001 de l'Inspector, en verre givré, sur l'image rendue floutée */
.mani-new { aspect-ratio: 4/3; }
.mani-new .mn-shot { filter: blur(6px) brightness(.72) saturate(1.1); transform: scale(1.06); }
.mani-new:hover .mn-shot { transform: scale(1.1); }
.mn-badge { position: absolute; left: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 42%; z-index: 2; }
.mn-badge .mn-icon { width: 56px; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.mn-badge .mn-tag { font-size: 9px; letter-spacing: .14em; color: rgba(240,239,234,.8); }
.mn-badge b { font-weight: 500; font-size: 22px; letter-spacing: -.01em; line-height: 1.1; }
.mn-badge .mn-sub { font-size: 12px; color: rgba(240,239,234,.8); font-weight: 300; }
.mn-badge .mn-go { margin-top: 10px; font-size: 12px; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); transition: background .25s, color .25s; }
.mani-new:hover .mn-badge .mn-go { background: var(--paper); color: var(--carbon); }
.mn-insp { --u: clamp(9px, .72vw, 11.5px); position: absolute; right: 18px; top: 18px; bottom: 0; flex: none; display: block; }
.mn-insp > span { display: grid; }
.mn-insp .di-head { display: flex; }
.mn-insp .di-sec { display: block; }
.mn-insp .dev-vbtn { color: #e9e8e3; border-color: rgba(255,255,255,.45); }
@media (max-width: 600px) { .mani-new { aspect-ratio: 3/4; } .mn-badge { max-width: none; right: 22px; } .mn-insp { left: 18px; right: 18px; width: auto; bottom: 46%; } }

/* la nouveauté sans image rendue derrière : un fond sombre et une lueur douce pour que le verre givré se lise */
.mani-new { background: radial-gradient(60% 70% at 78% 30%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%), linear-gradient(160deg, #1b1b1a 0%, #121212 100%);
  border: 1px solid var(--rule); }

/* le texte du studio en haut de sa colonne, et pas de filet sous le logo */
.mani-open .mani-top { border-bottom: 0; padding-bottom: 0; }
.mani-mid { align-items: start; }

/* la nouveauté sans boîte : la fenêtre de l'Inspector et le titre posés à même la section */
.mani-new { aspect-ratio: auto; background: none; border: 0; border-radius: 0; overflow: visible; display: flex; align-items: flex-end; gap: clamp(20px, 2.4vw, 36px); }
.mn-badge { position: static; max-width: none; flex: none; padding-bottom: 6px; }
.mn-insp { position: relative; right: auto; top: auto; bottom: auto; flex: 1; min-width: 0; height: clamp(300px, 26vw, 400px); --u: clamp(10px, .8vw, 12.5px); width: auto; }
@media (max-width: 600px) {
  .mani-new { flex-direction: column-reverse; align-items: stretch; aspect-ratio: auto; }
  .mn-badge { right: auto; }
  .mn-insp { left: auto; right: auto; bottom: auto; height: 300px; }
}
.mani-l { padding-top: clamp(20px, 3vw, 44px); }     /* la phrase du studio un peu plus bas sous le logo */


/* la fenêtre Look Developer de la page, plus petite */
.dev-frame iframe { max-width: min(var(--maxw), 1160px); height: 700px; }

/* ---------- échelle générale plus petite : on voit plus d'information à la fois (titres environ 30 % plus petits, moins d'espace entre les sections) */
.sec { padding: clamp(56px, 6.5vw, 104px) 0; }
.interlude { padding: clamp(64px, 8vw, 128px) 0; }
.hero-title { font-size: clamp(48px, 9vw, 144px); }
.hero-lede { font-size: clamp(16px, 1.4vw, 20px); }
.h2 { font-size: clamp(26px, 2.8vw, 42px); }
.h-big { font-size: clamp(34px, 4.4vw, 68px); }
.h-mid { font-size: clamp(22px, 2.4vw, 34px); }
.statement { font-size: clamp(20px, 2.2vw, 32px); }
.quote { font-size: clamp(26px, 3.2vw, 46px); }
.buy-title { font-size: clamp(40px, 4.8vw, 72px); }
.price-v { font-size: clamp(46px, 4.4vw, 66px); }
.studio-claim { font-size: clamp(40px, 5.4vw, 84px); }
.foot-word { font-size: clamp(56px, 12vw, 190px); }
.mani-open .mani-claim { font-size: clamp(26px, 2.8vw, 40px); }
.mani-open .mani-body { font-size: clamp(15px, 1.1vw, 17px); }
.lede, .body { font-size: 16px; }
.lede-wide { font-size: 17px; }
.research h3 { font-size: 19px; }
.cmp-title { margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- téléphone : plus compact, rien qui se chevauche */
@media (max-width: 900px) {
  .flute { display: none; }                                  /* la lentille qui glisse sur le titre de l'idée : décalée sur petit écran */
}
@media (max-width: 899px) {
  .sec { padding: 52px 0; }
  /* recherche : la forme 3D à gauche, le texte à droite, au lieu d'une grande image au-dessus */
  .research article, .research article + article { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; border-left: 0; }
  .research article + article { border-top: 1px solid var(--rule); }
  .research .r-art { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; }
  .research h3 { margin: 4px 0 6px; }
  .research article p { margin: 0; }
  /* la nouveauté RAYGLASS 001 : une fenêtre d'Inspector plus courte */
  .mn-insp { height: 220px !important; }
  /* achat : l'icône RG plus petite */
  .buy-icon { width: 112px; margin-top: 18px; }
  /* la ligne d'aide clavier de la démo ne sert à rien sur un téléphone */
  #developer .fine { display: none; }
  /* pied de page : les liens légaux restent au-dessus de la barre d'achat collée en bas */
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* téléphone : le haut de page allégé. Le titre, une ligne, le bouton Buy et le panneau du plugin */
@media (max-width: 600px) {
  .hero-lede .dim { display: none; }
  .hero-cta { display: none !important; }          /* pas de boutons ici : Buy reste dans la barre du haut ; on garde le panneau du plugin */
  /* le titre descend : moins d'espace entre le titre, la ligne, Buy et le panneau */
  .hero-row { margin-top: 0; gap: 0 !important; }
  .hero-lede { margin: 14px 0 0; }
  .hero-cta { margin-top: 16px !important; }
  .hero-body { padding-bottom: 12px !important; }
  .hero-ui { margin-bottom: 14px !important; }
}

/* téléphone : le logo et la mention du studio, juste après le haut de page, font doublon avec celui-ci */
@media (max-width: 600px) { .mani-open .mani-top { display: none; } .mani-mid { margin-top: 0; } .mani-l { padding-top: 0; } }
@media (max-width: 600px) { .mani-open .mani-pillars { display: none; } }     /* téléphone : pas de OPTICS · IMAGE SCIENCE · EXPERIMENTATION */
@media (max-width: 600px) { #idea .facts, #idea .model, #idea .note-line { display: none !important; } }     /* téléphone : « Rethink the optical surface » s’arrête après le texte */
@media (max-width: 600px) { #research { display: none; } }     /* téléphone : pas de section 02 / RESEARCH */
@media (max-width: 600px) { a[href="#research"], a[href="./#research"] { display: none !important; } }     /* et ses liens dans le menu et le pied de page */

/* ---------- Look Developer sur téléphone (#ldm) : choisir un look, voir le rendu, tenir pour l'original. Caché sur ordinateur. */
.ldm[hidden] { display: none !important; }
.ldm { display: none; }
@media (max-width: 899px) {
  .ldm { display: block; margin-top: 8px; }
  #developer .dev-frame, #developer .fine { display: none !important; }
  .ldm-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .ldm-where { font-size: 10px; letter-spacing: .12em; color: var(--silver); }
  .ldm-where span:first-child { color: var(--optical); filter: brightness(1.4); }
  .ldm-pick { position: relative; }
  .ldm-pick .bench-menu { top: calc(100% + 4px); left: 0; width: 100%; max-height: 60vh; }
  .ldm-view { position: relative; margin-top: 12px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0b0b0b; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .ldm-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
  .ldm-orig { opacity: 0; transition: opacity .15s; }
  .ldm.holding .ldm-orig { opacity: 1; }
  .ldm-badge { position: absolute; left: 10px; top: 10px; font-size: 9px; letter-spacing: .12em; padding: 5px 8px; border-radius: 6px; background: rgba(12,12,12,.6); color: var(--paper); }
  .ldm-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
  .ldm-hold { height: 40px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 8px; font-size: 10px; letter-spacing: .12em; color: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; }
  .ldm.holding .ldm-hold { background: var(--paper); color: var(--carbon); }
  .ldm-sliders { margin-top: 14px; }
  .ldm-sliders .gu-row { padding: 7px 0 4px; row-gap: 6px; }
  .ldm-sliders .gu-track { background: var(--rule); }
  .ldm-sliders .gu-track i, .ldm-sliders .gu-track b { transition-duration: .7s; }
  .ldm-sliders .gu-track b { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: none; }
  .ldm-note { margin: 16px 0 0; font-size: 9px; line-height: 1.6; letter-spacing: .1em; color: #8a8a87; }
}
@media (max-width: 899px) { .ldm { scroll-margin-top: 84px; } }
@media (max-width: 899px) {
  #looks .looks-bar, #bench, #looks .looks-more { display: none !important; }     /* téléphone : pas de banc des formes */
  /* la forme 3D du verre sur le rendu, en bas à droite, comme dans Look Developer */
  .ldm-view .ldm-glass { position: absolute; right: 8px; bottom: 8px; width: 74px; height: 74px; padding: 5px; border-radius: 12px;
    background: rgba(12,12,12,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .15s; }
  .ldm-view .ldm-glass img { position: static; width: 100%; height: 100%; object-fit: contain; }
  .ldm.holding .ldm-glass { opacity: 0; }
}

/* ---------- téléphone : Look Developer posé sur DaVinci Resolve, qui flotte et suit le défilement */
.ldp { display: none; }
@media (max-width: 899px) {
  .ldp { display: block; margin: 4px auto 36px; }
  .ldp-stage { --p: 0; position: relative; aspect-ratio: 4/3.2; border-radius: 12px; overflow: hidden; background: #111; perspective: 900px; }
  .ldp-bg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; object-position: 30% 40%;
    filter: blur(3px) brightness(.55) saturate(1.1); transform: translateY(calc(var(--p) * -14px)) scale(1.04); will-change: transform; }
  .ldp-float { position: absolute; left: 7%; right: 7%; top: 14%; animation: ldpFloat 6s ease-in-out infinite; }
  .ldp-win { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 30px 60px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
    transform: translateY(calc(var(--p) * 26px)) rotateX(calc(var(--p) * 6deg)) rotateZ(-1.5deg); transform-origin: 50% 100%; will-change: transform; }
  @keyframes ldpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .ldp-cap { position: absolute; left: 12px; bottom: 10px; font-size: 9px; letter-spacing: .12em; color: rgba(240,239,234,.75); }
  .ldm-intro { margin: 0 0 18px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; color: var(--paper); }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .ldp-float { animation: none; } }
@media (max-width: 600px) { #instruments .arrow-link { display: none; } }     /* téléphone : pas de « Explore the instrument » */

/* téléphone : la fenêtre Look Developer presque plein écran, couchée en 3D sur Resolve ; elle se redresse en entrant (classe .in) */
@media (max-width: 899px) {
  .ldp { margin: 0 calc(-1 * var(--gut)) 32px; padding: 0; max-width: none; }
  .ldp-stage { aspect-ratio: auto; height: 84svh; min-height: 520px; border-radius: 0; perspective: 1100px; }
  .ldp-bg { object-position: 22% 40%; filter: blur(4px) brightness(.5) saturate(1.1); }
  .ldp-float { left: 50%; top: 50%; right: auto; width: 168%; animation: none; transform: translate(-50%, -50%); }
  .ldp-win { transform-origin: 50% 50%; border-radius: 10px;
    transform: translateX(calc(var(--p) * -18px)) rotateZ(-90deg) rotateX(calc(8deg + var(--p) * 10deg)) rotateY(calc(var(--p) * -6deg)) scale(.8);
    opacity: 0; transition: opacity 1s ease, transform 1.4s cubic-bezier(.16,.8,.2,1); }
  .ldp-stage:not(.in) .ldp-win { transform: translateX(60px) rotateZ(-90deg) rotateX(55deg) scale(.7); }
  .ldp-stage.in .ldp-win { opacity: 1; }
  .ldp-stage.in.settled .ldp-win { transition: opacity 1s ease, transform .2s linear; }
  .ldp-cap { left: var(--gut); bottom: 16px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .ldp-win { opacity: 1 !important; transition: none !important; } }
@media (max-width: 899px) { .ldp-bg { object-position: 88% 25%; filter: blur(1.5px) brightness(.55) saturate(1.05); } }     /* Resolve reconnaissable : l Inspector et la page Color */
@media (max-width: 899px) { .ldp-cap { left: 16px !important; } }
/* la fenêtre garde son sens (paysage) : en entier, aussi large que l'écran, légèrement inclinée en 3D */
@media (max-width: 899px) {
  .ldp-stage { height: 66svh; min-height: 420px; }
  .ldp-float { width: 104%; }
  .ldp-win { transform: translateY(calc(var(--p) * 30px)) rotateX(calc(10deg + var(--p) * 8deg)) rotateY(calc(-16deg + var(--p) * 4deg)) rotateZ(-2deg) scale(.92) !important; }
  .ldp-stage:not(.in) .ldp-win { transform: translateY(90px) rotateX(55deg) rotateY(-16deg) scale(.7) !important; }
  .ldp-stage.in.settled .ldp-win { transition: opacity 1s ease, transform .2s linear; }
}
@media (max-width: 899px) { .ldp { margin: 0 0 32px !important; padding: 0 !important; } }     /* la scène bord à bord, sans décalage */
/* l'entrée plus rapide, et la fenêtre finit à plat (plus d'inclinaison une fois posée) */
@media (max-width: 899px) {
  .ldp-win { transition: opacity .5s ease, transform .75s cubic-bezier(.2,.8,.2,1) !important;
    transform: translateY(calc(var(--p) * 16px)) scale(.94) !important; }
  .ldp-stage:not(.in) .ldp-win { transform: translateY(70px) rotateX(45deg) rotateY(-14deg) scale(.75) !important; }
  .ldp-stage.in.settled .ldp-win { transition: opacity .5s ease, transform .15s linear !important; }
}
@media (max-width: 600px) { .nav > .buy-link { display: none !important; } }     /* téléphone : pas de Buy dans la barre du haut (la barre d achat du bas le garde) */

/* Buy à la fin du menu hamburger, sur téléphone seulement */
.nav-links .nav-buy { display: none; }
@media (max-width: 600px) {
  .nav-links .nav-buy { display: flex; justify-content: center; margin-top: 16px; padding: 14px 0; border: 0; border-radius: 10px; font-size: 14px; letter-spacing: 0; color: var(--carbon); background: var(--paper); }
}

/* téléphone : pied de page compact. Pas de liens de sections ; les marques, le logo, le © et les liens légaux, serrés */
@media (max-width: 600px) {
  .foot-links { display: none !important; }
  .marks { padding: 18px 0; margin-bottom: 18px; font-size: 22px; }
  .foot-top { gap: 0; }
  .foot-mark { height: 16px !important; }
  .foot-copy { margin-top: 10px; font-size: 9px; }
  .foot-legal { margin-top: 14px !important; }
}
@media (max-width: 600px) { .foot { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; } }     /* la barre d achat s efface au pied de page : pas besoin de place pour elle */

/* la fenêtre montre quelques pages (LOOK, SHAPE, MATERIAL, COLOR FRINGE : vraies captures de Look Developer) puis revient à LOOK */
@media (max-width: 899px) {
  .ldp-win { position: relative; overflow: hidden; background: #111; }
  .ldp-pg { display: block; width: 100%; height: auto; }
  .ldp-pg + .ldp-pg { position: absolute; inset: 0; height: 100%; }
  .ldp-pg { opacity: 0; transition: opacity .35s ease; }
  .ldp-pg.on, .ldp-pg:first-child:not(.off) { opacity: 1; }
  .ldp-pg:first-child { opacity: 1; }
}

/* téléphone : « 75 looks » s'ouvre comme une nouvelle section */
@media (max-width: 899px) {
  .ldm-head { margin: 24px 0 28px; padding-top: 44px; border-top: 1px solid var(--rule); }
  .ldm-head .sec-label { margin-bottom: 14px; }
  .ldm-title { margin: 0; }
}

/* téléphone : 04 / STUDIO plus compact */
@media (max-width: 600px) {
  .studio-lockup { width: 200px; margin-bottom: 22px; }
  .studio-claim { font-size: 34px; }
  .studio-sub { margin: 10px 0 22px !important; font-size: 10px; }
  #studio .body { font-size: 15px; margin-top: 14px; }
  .principles { margin-top: 26px; }
  .principles li { padding: 12px 0 18px; }
  .principles b { margin: 8px 0 6px; font-size: 17px; }
  .principles p { font-size: 14px; line-height: 1.5; }
  .principles .lab { font-size: 10px; }
}
@media (max-width: 899px) { .ldm-sub { margin: 10px 0 0; font-size: 17px; font-weight: 300; color: var(--silver); } }

/* téléphone : 04 / STUDIO encore plus serré. Les quatre premiers principes en titres seuls, sur deux colonnes ;
   P—05 (à côté du vrai, sans remplacer le travail réel) garde son texte, sur toute la largeur */
@media (max-width: 600px) {
  #studio { padding-top: 44px; padding-bottom: 44px; }
  .principles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; margin-top: 20px; }
  .principles li { padding: 10px 0 12px; }
  .principles li:not(:nth-child(5)) p { display: none; }
  .principles li:nth-child(5) { grid-column: 1 / -1; }
  .principles b { font-size: 15px; margin: 6px 0 0; }
  .principles li:nth-child(5) b { margin-bottom: 6px; }
  #studio .body { font-size: 14px; }
}

/* tablette (601–899 px) : la version simple de Look Developer, centrée et pas trop large */
@media (min-width: 601px) and (max-width: 899px) {
  .ldm { max-width: 640px; margin-left: auto; margin-right: auto; }
  .ldp-stage { height: 60svh; }
  .ldp-float { width: 86% !important; }
}
.price-once { color: var(--paper); letter-spacing: .12em; }     /* paiement unique : visible, juste sous le prix */

/* formes de verre : l'import d'un modèle 3D, sous la rangée des verres */
.own-glass { margin: -24px 0 0; font-size: 11px; letter-spacing: .12em; color: var(--silver); line-height: 1.6; }
.own-glass b { color: var(--paper); font-weight: 500; }
@media (max-width: 600px) { .own-glass { margin-top: -8px; font-size: 10px; } }

/* essai gratuit de 7 jours, sous le bouton Buy */
.trial { display: flex; flex-direction: column; gap: 10px; margin-top: -12px; }
.btn-trial { width: 100%; height: 48px; font-size: 14px; border-color: var(--rule); }
.trial-n { margin: 0; font-size: 9.5px; line-height: 1.6; letter-spacing: .1em; color: var(--silver); }
.btn-trial { border: 1px solid rgba(240,239,234,.32) !important; color: var(--paper); }
.btn-trial:hover { border-color: var(--paper) !important; }