/* ORUS Studio — /studio. S'appuie sur /style.css (jetons, nav, boutons, formulaire, pied de page).
   Signature : le canevas d'artboards, et le contraste Geist 200 / 600 qui prolonge le logotype « ORUS Studio ».
   Les mockups sont en HTML/CSS, dimensionnés en unités de conteneur (cqw) : ils restent nets à toute taille. */

.studio {
  --paper: #ffffff;
  --canvas: #f2f3f4;
  --ink-0: #0e0e10;
  --sel: #3b82f6; /* couleur de sélection des outils de design : seul accent de la page */
  --wide: 1280px;
  --serif: "Didot", "Bodoni 72", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--paper);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cq { display: block; container-type: inline-size; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Typographie ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.disp { font-size: clamp(2.5rem, 6.6vw, 6rem); line-height: 0.96; letter-spacing: -0.055em; font-weight: 200; text-wrap: balance; }
.disp .ln { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.disp .ln > span { display: inline-block; }
.disp .ln--b { font-weight: 600; letter-spacing: -0.06em; }
.disp.reveal { opacity: 1; transform: none; }
.js .disp.reveal .ln > span { transform: translateY(108%); transition: transform 1100ms var(--out); }
.js .disp.reveal .ln--b > span { transition-delay: 90ms; }
.js .disp.reveal.is-in .ln > span { transform: none; }

/* Logotype : image officielle ORUS + « Studio » en Geist ExtraLight, même hauteur de capitale, même ligne de base. */
.lockup { --h: 16px; display: inline-flex; align-items: flex-end; gap: calc(var(--h) * 0.42); margin: 0; color: var(--ink); line-height: 1; }
.lockup img { width: auto; height: var(--h); }
.lockup__s { font-size: calc(var(--h) * 1.408); font-weight: 200; letter-spacing: -0.01em; line-height: 1; text-box: trim-both cap alphabetic; }
/* Sans text-box : ligne de base à 0,145 em du bas de la boîte (métriques Geist : ascendante 1,005, descendante 0,295). */
@supports not (text-box: trim-both cap alphabetic) { .lockup__s { margin-bottom: calc(var(--h) * -0.204); } }

/* ---------- Navigation ---------- */
.nav--studio .nav__card { max-width: 960px; }
.nav__brand { display: grid; align-items: center; }
.nav__brand > a { grid-area: 1 / 1; transition: opacity 400ms var(--ease), transform 500ms var(--out), visibility 0s linear 400ms; }
.nav__group { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.nav__group .ic { width: 15px; height: 15px; transition: transform 300ms var(--spring); }
.nav__group:hover { color: var(--ink); }
.nav__group:hover .ic { transform: translateX(-3px); }
.nav--studio .nav__logo { opacity: 0; visibility: hidden; transform: translateY(8px); }
.nav--studio .nav__logo img { width: auto; }
.nav--studio.is-past .nav__logo { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav--studio.is-past .nav__group { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.menu__end { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 480px) { .nav__cta-x { display: none; } .nav--studio .lockup { --h: 13px; } }

/* ---------- Hero ---------- */
.hero-s { position: relative; margin-top: -68px; padding: calc(68px + clamp(44px, 8vh, 96px)) var(--gutter) 24px; background: var(--canvas); overflow: clip; }
.hero-s::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 1px 1px, rgba(23, 23, 23, 0.11) 1px, transparent 1.4px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
.hero-s::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(180deg, transparent, var(--paper)); pointer-events: none; }
.hero-s__head { position: relative; z-index: 2; max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 40px; }
.hero-s__head > .lockup, .hero-s__eyebrow, .hero-s__title { grid-column: 1 / -1; }
.lockup--hero { --h: clamp(20px, 2.3vw, 30px); justify-self: start; }
.hero-s__eyebrow { margin-top: clamp(20px, 3vh, 30px); }
.hero-s__title { font-size: clamp(2.5rem, 10.2vw, 9.4rem); line-height: 0.92; margin: clamp(14px, 2.4vh, 26px) 0 clamp(22px, 4vh, 40px); }
.hero-s__lead { max-width: 44ch; color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; }
.hero-s__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Séquence d'entrée : identité, titre, texte, actions, puis les artboards. */
.hero-s__head > * { animation: rise 900ms var(--out) both; }
.lockup--hero { animation-delay: 80ms; }
.hero-s__eyebrow { animation-delay: 220ms; }
.hero-s__title { animation: none; }
.hero-s__title .ln > span { animation: lineUp 1200ms var(--out) both; animation-delay: 300ms; }
.hero-s__title .ln--b > span { animation-delay: 420ms; }
.hero-s__lead { animation-delay: 700ms; }
.hero-s__cta { animation-delay: 820ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes lineUp { from { transform: translateY(108%); } }

/* Canevas : chaque artboard a une position, une rotation et une profondeur (--z) qui pilote la parallaxe. */
.board { --px: 0; --py: 0; --sy: 0; position: relative; z-index: 1; max-width: var(--wide); margin: clamp(36px, 7vh, 72px) auto 0; aspect-ratio: 1280 / 640; }
.ab { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0;
  rotate: var(--r, 0deg);
  translate: calc(var(--px) * var(--z) * 26px) calc(var(--py) * var(--z) * 18px + var(--sy) * var(--z) * -90px);
  animation: abIn 1300ms var(--out) both; animation-delay: calc(900ms + var(--n) * 90ms);
}
@keyframes abIn { from { opacity: 0; transform: translateY(60px) scale(0.94); filter: blur(8px); } }
.ab__name { display: flex; gap: 8px; margin-bottom: 8px; font: 500 0.66rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; transition: color 200ms; }
.ab__name span { opacity: 0.6; }
.ab__body { position: relative; container-type: inline-size; }
.ab__body::after {
  content: ""; position: absolute; inset: -7px; border: 1.5px solid var(--sel); border-radius: 3px; opacity: 0; transition: opacity 200ms; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 7px 7px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 7px 7px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 7px 7px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 7px 7px no-repeat,
    linear-gradient(var(--sel), var(--sel)) 0 0 / 10px 10px no-repeat, linear-gradient(var(--sel), var(--sel)) 100% 0 / 10px 10px no-repeat,
    linear-gradient(var(--sel), var(--sel)) 0 100% / 10px 10px no-repeat, linear-gradient(var(--sel), var(--sel)) 100% 100% / 10px 10px no-repeat;
}
@media (hover: hover) {
  .ab:hover { z-index: 20 !important; }
  .ab:hover .ab__body::after { opacity: 1; }
  .ab:hover .ab__name { color: var(--sel); }
}
.ab--web    { --x: 3%;  --y: 10%; --w: 45%; --r: -1.5deg; --z: 0.45; --n: 0; z-index: 3; }
.ab--phone  { --x: 43%; --y: 0%;  --w: 13%; --r: 3deg;    --z: 0.95; --n: 1; z-index: 8; }
.ab--flyer  { --x: 62%; --y: 5%;  --w: 16.5%; --r: -4deg; --z: 0.55; --n: 2; z-index: 4; }
.ab--card   { --x: 17%; --y: 74%; --w: 21%; --r: 5deg;    --z: 1;    --n: 3; z-index: 9; }
.ab--post   { --x: 83%; --y: 27%; --w: 14%; --r: 5deg;    --z: 0.8;  --n: 4; z-index: 6; }
.ab--box    { --x: 59%; --y: 62%; --w: 11%; --r: 0deg;    --z: 0.7;  --n: 5; z-index: 7; }
.ab--motion { --x: 73%; --y: 66%; --w: 11.5%; --r: -5deg; --z: 0.65; --n: 6; z-index: 5; }
.board__note { position: relative; z-index: 2; max-width: var(--wide); margin: 18px auto 0; font: 500 0.68rem/1.4 var(--mono); color: var(--ink-3); text-align: right; }

/* ---------- Kit de mockups (couleurs locales --bg --fg --ac) ---------- */
.mk-browser { display: flex; flex-direction: column; width: 100%; aspect-ratio: 16 / 10; border-radius: 1.6cqw; overflow: hidden; background: var(--bg); box-shadow: 0 50px 80px -40px rgba(14, 14, 16, 0.45), 0 0 0 1px rgba(14, 14, 16, 0.08); }
.mk-browser__bar { flex: none; display: flex; align-items: center; gap: 0.9cqw; height: 5.4cqw; padding: 0 2cqw; background: #f3f3f4; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.mk-browser__bar i { width: 1.25cqw; height: 1.25cqw; border-radius: 50%; background: #d9d9dc; }
.mk-browser__bar em { margin: 0 auto; padding: 0.5cqw 3cqw; border-radius: 99px; background: #fff; font: 500 1.5cqw/1.4 var(--sans); font-style: normal; color: #77777c; white-space: nowrap; }
.mk-site { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 3cqw 4.5cqw; background: var(--bg); color: var(--fg); overflow: hidden; }
.mk-site__nav { align-self: stretch; display: flex; align-items: center; gap: 2.4cqw; font-size: 1.7cqw; }
.mk-site__nav b { margin-right: auto; font-weight: 600; letter-spacing: 0.24em; }
.mk-site__nav i { width: 5cqw; height: 0.45cqw; border-radius: 1cqw; background: currentColor; opacity: 0.35; }
.mk-site__h { position: relative; z-index: 1; margin-top: 5.5cqw; font-size: 7cqw; font-weight: 600; line-height: 0.95; letter-spacing: -0.055em; max-width: 58%; }
.mk-site__cta { position: relative; z-index: 1; margin-top: 3cqw; min-width: 15cqw; min-height: 4cqw; padding: 1.1cqw 2.3cqw; border-radius: 99px; background: var(--ac); color: var(--bg); font-size: 1.5cqw; font-weight: 600; }
.mk-site__media { position: absolute; right: 4.5cqw; bottom: 4cqw; width: 40%; aspect-ratio: 4 / 3.2; border-radius: 0.8cqw; background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 70%, var(--bg)), color-mix(in srgb, var(--fg) 25%, var(--bg))); overflow: hidden; }
.mk-site__media i { position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fg) 30%, transparent)); }
.mk-site--car .mk-site__h { margin-top: 4.5cqw; font-size: 6.4cqw; }
.mk-car { position: absolute; right: -3cqw; bottom: 3cqw; width: 70%; fill: #161d26; stroke: var(--ac); stroke-width: 0.8; stroke-opacity: 0.85; filter: drop-shadow(0 0 1.4cqw color-mix(in srgb, var(--ac) 45%, transparent)); }
.mk-site__glow { position: absolute; left: 20%; right: -10%; bottom: -6cqw; height: 16cqw; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ac) 40%, transparent), transparent 70%); }

.mk-phone { position: relative; display: block; width: 100%; aspect-ratio: 9 / 19; padding: 3.4cqw; border-radius: 15cqw; background: #111113; box-shadow: 0 50px 70px -36px rgba(14, 14, 16, 0.55), inset 0 0 0 0.8cqw #2a2a2e; }
.mk-phone::before { content: ""; position: absolute; z-index: 2; top: 6.6cqw; left: 50%; width: 28cqw; height: 7.5cqw; translate: -50% 0; border-radius: 99px; background: #000; }
.mk-phone__screen { display: flex; flex-direction: column; gap: 4cqw; height: 100%; padding: 22cqw 7cqw 8cqw; border-radius: 12cqw; overflow: hidden; background: var(--bg); color: var(--fg); }
.mk-ig__head { display: flex; align-items: center; gap: 4cqw; font-size: 6cqw; }
.mk-ig__head b { font-weight: 600; letter-spacing: -0.02em; }
.mk-ig__av { width: 15cqw; aspect-ratio: 1; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--fg) 0 30%, var(--bg) 31% 40%, var(--ac) 41%); }
.mk-ig__bio { font-size: 4.6cqw; opacity: 0.7; line-height: 1.35; }
.mk-ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 2cqw; }
.mk-ig__grid i { position: relative; aspect-ratio: 4 / 5; background: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
.mk-ig__grid i.is-ac { background: var(--ac); color: var(--bg); }
.mk-ig__grid i::after { content: var(--t); position: absolute; left: 2.4cqw; bottom: 2.4cqw; font: 600 3.4cqw/1 var(--sans); font-style: normal; letter-spacing: -0.02em; }

.mk-flyer { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 148 / 210; padding: 9cqw 8cqw; overflow: hidden; background: var(--bg); color: var(--fg); box-shadow: 0 40px 60px -34px rgba(14, 14, 16, 0.45); }
.mk-flyer::after { content: ""; position: absolute; right: -16cqw; top: 40%; width: 60cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ac); }
.mk-flyer b { position: relative; z-index: 1; font-size: 25cqw; font-weight: 700; line-height: 0.88; letter-spacing: -0.07em; }
.mk-flyer em { position: relative; z-index: 1; margin-top: auto; font-style: normal; font-weight: 600; font-size: 7.5cqw; letter-spacing: -0.03em; }
.mk-flyer small { position: relative; z-index: 1; margin-top: 2cqw; font: 500 4.6cqw/1.3 var(--mono); opacity: 0.75; }

.mk-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%; aspect-ratio: 85 / 55; padding: 7cqw; border-radius: 2.2cqw; background: var(--bg); color: var(--fg); box-shadow: 0 30px 50px -28px rgba(14, 14, 16, 0.5), 0 0 0 1px rgba(14, 14, 16, 0.05); }
.mk-card b { font-size: 6cqw; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.mk-card small { font: 500 3.6cqw/1.3 var(--mono); opacity: 0.7; }
.mk-card__mono { display: grid; place-items: center; width: 17cqw; aspect-ratio: 1; border-radius: 50%; border: 0.5cqw solid currentColor; font-size: 10cqw; font-weight: 200; line-height: 1; }
.mk-card--back { position: absolute; inset: 0; translate: 6cqw -7cqw; rotate: -7deg; background: var(--fg); }
.mk-card--front b { margin-top: auto; font-size: 5.4cqw; }

.mk-post { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3cqw; width: 100%; aspect-ratio: 4 / 5; padding: 8cqw; overflow: hidden; background: var(--bg); color: var(--fg); box-shadow: 0 34px 50px -30px rgba(14, 14, 16, 0.5); }
.mk-post b { font-size: 13cqw; font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; }
.mk-post em { font: 500 4.6cqw/1 var(--mono); font-style: normal; opacity: 0.6; }
.mk-post svg { position: absolute; top: 12cqw; left: 6cqw; width: 88cqw; fill: none; stroke: var(--ac); stroke-width: 2.2; stroke-linecap: round; }
.mk-sticker { position: absolute; display: grid; place-items: center; width: 19cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ac); color: #fff; font: 700 2.6cqw/1.05 var(--sans); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; rotate: -14deg; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6); }

/* Boîte 3D : face avant, côté droit, dessus. */
.ab--box .ab__body { perspective: 700px; }
.mk-box, .xb { position: relative; display: block; width: 62%; aspect-ratio: 70 / 95; margin: 20% auto 8%; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-34deg); transition: transform 900ms var(--out); }
.mk-box > span, .xb > span { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; backface-visibility: hidden; }
.mk-box__f, .xb__f { inset: 0; transform: translateZ(31cqw); }
.mk-box__s, .xb__s { top: 0; bottom: 0; left: calc(50% - 31cqw); width: 62cqw; transform: rotateY(90deg) translateZ(31cqw); }
.mk-box__t, .xb__t { left: 0; right: 0; top: -31cqw; height: 62cqw; transform: rotateX(90deg); }
.mk-box__f { background: var(--bg); color: var(--fg); }
.mk-box__f .mk-card__mono { width: 34cqw; font-size: 20cqw; border-width: 1cqw; }
.mk-box__f small { font: 500 6cqw/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.mk-box__s { background: color-mix(in srgb, var(--bg) 78%, #000); }
.mk-box__t { background: color-mix(in srgb, var(--bg) 80%, #fff); }
@media (hover: hover) { .ab--box:hover .mk-box { transform: rotateX(-18deg) rotateY(-52deg); } }

/* Motion : une onde qui se dessine, une timeline avec tête de lecture. */
.cv--motion { display: flex; flex-direction: column; justify-content: space-between; padding: 9cqw 8cqw; background: var(--bg); color: var(--fg); overflow: hidden; }
.ab--motion .cv--motion { position: relative; aspect-ratio: 1; box-shadow: 0 34px 50px -30px rgba(14, 14, 16, 0.55); }
.cv-motion__logo { display: flex; flex-direction: column; align-items: center; gap: 1cqw; margin: auto; }
.cv-motion__logo b { font-size: 13cqw; font-weight: 600; letter-spacing: -0.05em; line-height: 1; animation: breathe 3.2s var(--ease) infinite; }
@keyframes breathe { 0%, 100% { letter-spacing: -0.05em; } 50% { letter-spacing: 0.02em; } }
.mk-wave { width: 62cqw; overflow: visible; }
.mk-wave path { fill: none; stroke: var(--ac); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.2s var(--ease) infinite; }
@keyframes draw { 0% { stroke-dashoffset: 1; } 45%, 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.mk-tl { position: relative; display: block; height: 7cqw; border-radius: 1.4cqw; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.mk-tl i { position: absolute; left: calc(var(--k) * 100%); top: 50%; width: 2.6cqw; aspect-ratio: 1; background: var(--fg); transform: translate(-50%, -50%) rotate(45deg); }
.mk-tl em { position: absolute; top: -1.6cqw; bottom: -1.6cqw; left: 0; width: 0.6cqw; border-radius: 1cqw; background: var(--ac); animation: head 3.2s linear infinite; }
@keyframes head { to { left: 100%; } }

/* ---------- Promesse : le texte s'encre au défilement ---------- */
.stmt { max-width: var(--wide); margin: 0 auto; padding: clamp(80px, 16vh, 180px) var(--gutter); }
.stmt__txt { max-width: 25ch; font-size: clamp(1.75rem, 4.3vw, 3.9rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.045em; }
.stmt__txt .w { color: rgba(23, 23, 23, 0.13); transition: color 400ms var(--ease); }
.stmt__txt .w.is-on { color: var(--ink); }

/* ---------- Sections ---------- */
.sec { max-width: var(--wide); margin: 0 auto; padding: clamp(84px, 13vh, 150px) var(--gutter); }
.sec--ink, .sec--canvas { max-width: none; }
.sec--ink > *, .sec--canvas > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.sec--ink { background: var(--ink-0); color: #fff; }
.sec--canvas { background: var(--canvas); }
.sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: clamp(40px, 7vh, 80px); }
.sec__head--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; }
.sec__head--split > div { display: flex; flex-direction: column; gap: 20px; }
.sec__lead { max-width: 40ch; color: var(--ink-2); font-size: 1.02rem; }
.sec--ink .sec__lead { color: rgba(255, 255, 255, 0.62); }
.sec--ink .eyebrow { color: rgba(255, 255, 255, 0.5); }
.magnetic { transition: transform 260ms var(--spring), box-shadow 260ms var(--ease), background 200ms var(--ease), translate 600ms var(--out); }
.btn--paper { background: #fff; color: var(--ink); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6); }
.btn--paper:hover { background: #f1f1f1; }
.sec--ink .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.25); box-shadow: none; }

/* ---------- Services : index éditorial ---------- */
.svcs { border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); }
.svc.reveal { transform: none; }
.svc__h { margin: 0; font: inherit; letter-spacing: inherit; }
.svc__btn { box-sizing: border-box; display: grid; grid-template-columns: 72px 1fr auto 44px; align-items: center; gap: 20px; width: 100%; padding: clamp(18px, 3vh, 30px) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.svc__btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 4px; }
.svc__n { font: 500 0.78rem/1 var(--mono); color: var(--ink-3); }
.svc__t { font-size: clamp(1.9rem, 5.2vw, 4.4rem); font-weight: 200; line-height: 1; letter-spacing: -0.055em; transition: font-weight 600ms var(--out), letter-spacing 600ms var(--out), transform 600ms var(--out); }
.svc__l { font-size: 0.9rem; color: var(--ink-3); text-align: right; }
.svc__x { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: background 300ms, border-color 300ms, transform 500ms var(--spring); }
.svc__x::before, .svc__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: currentColor; transition: transform 400ms var(--out); }
.svc__x::after { transform: rotate(90deg); }
.svc.is-open .svc__t { font-weight: 600; letter-spacing: -0.06em; }
.svc.is-open .svc__x { background: var(--ink); border-color: var(--ink); color: #fff; }
.svc.is-open .svc__x::after { transform: rotate(0deg); }
@media (hover: hover) {
  .svc__btn:hover .svc__t { transform: translateX(10px); }
  .svc__btn:hover .svc__x { border-color: var(--ink); }
}
.svc__p { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 700ms var(--out); }
.js .svc:not(.is-open) .svc__p { grid-template-rows: 0fr; }
.svc__in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px 48px; }
.svc__txt { padding: 4px 0 44px 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.svc__line { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; }
.svc__items { align-self: stretch; columns: 2; column-gap: 28px; }
.svc__items li { break-inside: avoid; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-2); }
.svc__note { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); font-size: 0.86rem; color: var(--ink-2); }
.svc__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.svc__link .ic { width: 16px; height: 16px; }
.svc__vis { padding-bottom: 44px; }
.js .svc__in > * { opacity: 0; transform: translateY(18px); transition: opacity 500ms var(--ease), transform 800ms var(--out); }
.js .svc.is-open .svc__in > * { opacity: 1; transform: none; transition-delay: 160ms; }
.js .svc.is-open .svc__vis { transition-delay: 260ms; }

.vis { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; container-type: inline-size; background: var(--bg); color: var(--fg); }
.spec { position: absolute; left: 3cqw; bottom: 3cqw; z-index: 5; padding: 0.9cqw 1.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.88); color: var(--ink); font: 500 max(10px, 1.6cqw)/1 var(--mono); }

/* Construction de logo : cercles de construction, monogramme, palette, typographie. */
.cv-guides { position: absolute; left: 50%; top: 46%; width: 46cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ac) 80%, transparent); }
.cv-guides::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--ac) 80%, transparent); }
.cv-guides::after { content: ""; position: absolute; inset: -22%; background: linear-gradient(color-mix(in srgb, var(--ac) 70%, transparent), color-mix(in srgb, var(--ac) 70%, transparent)) center / 1px 100% no-repeat, linear-gradient(color-mix(in srgb, var(--ac) 70%, transparent), color-mix(in srgb, var(--ac) 70%, transparent)) center / 100% 1px no-repeat; }
.cv-mono { position: absolute; left: 50%; top: 46%; translate: -50% -52%; font-size: 30cqw; font-weight: 200; line-height: 1; color: var(--fg); transition: font-weight 900ms var(--out); }
.cv-word { position: absolute; left: 6cqw; bottom: 5.4cqw; font-size: 2.6cqw; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg); }
.cv-sw { position: absolute; right: 6cqw; bottom: 5cqw; display: flex; gap: 1.2cqw; }
.cv-sw i { width: 6cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.cv-sw em { display: none; }
.vis--brand .cv-guides, .vis--brand .cv-mono { left: 32%; top: 50%; }
.vis--brand .cv-guides { width: 44cqw; }
.vis--brand .cv-mono { font-size: 28cqw; }
.svc.is-open .vis--brand .cv-mono { font-weight: 400; }
.vis__side { position: absolute; right: 6cqw; top: 8cqw; bottom: 8cqw; width: 30cqw; display: flex; flex-direction: column; justify-content: space-between; }
.vis__side .cv-word { position: static; font-size: 2.4cqw; }
.vis__side .cv-sw { position: static; flex-direction: column; gap: 1.2cqw; }
.vis__side .cv-sw i { width: 100%; aspect-ratio: auto; height: 7.5cqw; border-radius: 1.2cqw; display: flex; align-items: flex-end; padding: 1.2cqw 1.6cqw; }
.vis__side .cv-sw em { display: block; font: 500 max(9px, 1.6cqw)/1 var(--mono); font-style: normal; color: #fff; mix-blend-mode: difference; }
.vis__type { font-size: 9cqw; font-weight: 200; line-height: 1; letter-spacing: -0.04em; display: flex; flex-direction: column; gap: 1.4cqw; }
.vis__type small { font: 500 max(9px, 1.5cqw)/1 var(--mono); letter-spacing: 0; opacity: 0.7; }

.vis--web { background: #d9d7d0; display: grid; place-items: center; perspective: 1200px; }
.vis--web .cq--browser { width: 84%; transform: rotateX(10deg) rotateY(-12deg) rotateZ(1deg); transition: transform 1200ms var(--out); }
.svc.is-open .vis--web .cq--browser { transform: rotateX(4deg) rotateY(-6deg); }
@media (hover: hover) { .vis--web:hover .cq--browser { transform: none; } }

.vis--social { background: var(--ac); display: grid; place-items: center; }
.vis__posts { display: grid; grid-template-columns: repeat(3, 21cqw); gap: 2cqw; rotate: -4deg; }
.js .vis__posts .cq--post { opacity: 0; transform: translateY(16px) scale(0.92); transition: opacity 500ms var(--ease), transform 700ms var(--spring); transition-delay: calc(var(--i) * 70ms + 300ms); }
.js .svc.is-open .vis__posts .cq--post { opacity: 1; transform: none; }
.vis__posts .cq--post:nth-child(even) .mk-post { background: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
.vis__posts .mk-post b { font-size: 15cqw; }

.vis--motion .cv-motion__logo, .vis--motion .mk-tl { position: absolute; }
.vis--motion .cv-motion__logo { left: 0; right: 0; top: 24%; }
.vis--motion .mk-tl { left: 8cqw; right: 8cqw; bottom: 12cqw; height: 4.4cqw; }
.vis--motion .mk-tl em { top: -1.4cqw; bottom: -1.4cqw; }
.vis--motion .mk-wave { width: 44cqw; }
.vis--motion .cv-motion__logo b { font-size: 9cqw; }

.vis--print { background: var(--fg); }
.vis--print .cq--flyer { position: absolute; left: 12cqw; top: 9cqw; width: 34cqw; rotate: -4deg; }
.vis--print .cq--card { position: absolute; left: 50cqw; top: 42cqw; width: 40cqw; rotate: 6deg; }
.vis--print .cq--card .mk-card { background: #fff; color: var(--fg); }
.vis--print .mk-sticker { left: 70cqw; top: 13cqw; }
.vis--print .cq--flyer, .vis--print .cq--card { transition: translate 900ms var(--out), rotate 900ms var(--out); }
@media (hover: hover) { .vis--print:hover .cq--flyer { translate: -1cqw -1cqw; rotate: -7deg; } .vis--print:hover .cq--card { translate: 1cqw 1cqw; rotate: 9deg; } }

.vis--launch { background: var(--canvas); display: grid; place-items: center; }
.kit { width: 74%; display: flex; flex-direction: column; gap: 1.6cqw; }
.kit li { display: grid; grid-template-columns: 5cqw 1fr auto; align-items: center; gap: 2.4cqw; padding: 2cqw 2.4cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 10px 24px -18px rgba(14, 14, 16, 0.4); font-size: 2.6cqw; }
.kit li::before { content: ""; width: 4.4cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: #fff; transition: background 400ms var(--ease), border-color 400ms; transition-delay: calc(var(--i) * 160ms + 400ms); }
.kit b { font-weight: 600; letter-spacing: -0.02em; }
.kit em { font: 500 max(9px, 2cqw)/1 var(--mono); font-style: normal; color: var(--ink-3); }
.svc.is-open .kit li::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 58% no-repeat; border-color: var(--ink); }

/* ---------- Portfolio ---------- */
#creations { padding-bottom: clamp(70px, 10vh, 110px); }
.pf__bar { position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; margin-bottom: clamp(28px, 4vh, 44px); padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); overflow-x: auto; scrollbar-width: none; }
.pf__bar.reveal { transform: none; }
.pf__bar::-webkit-scrollbar { display: none; }
.pf__f { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: flex-start; gap: 4px; height: 38px; padding: 0 16px; line-height: 38px; border: 0; border-radius: 99px; background: none; color: rgba(255, 255, 255, 0.65); font: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer; transition: color 300ms var(--ease); }
.pf__f sup { font: 500 0.62rem/1 var(--mono); margin-top: 11px; opacity: 0.6; }
.pf__f:hover { color: #fff; }
.pf__f[aria-pressed="true"] { color: var(--ink); }
.pf__f:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.pf__ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 99px; background: #fff; transition: transform 500ms var(--out), width 500ms var(--out); }
html:not(.js) .pf__f[aria-pressed="true"] { background: #fff; }

.pf__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 24px); }
.pj { grid-column: span var(--span, 6); display: flex; flex-direction: column; }
.pf__grid.vt .pj { view-transition-name: var(--vtn); }
.pj[hidden] { display: none; }
.pj__open { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pj__open:focus-visible { outline: 2px solid var(--sel); outline-offset: 6px; border-radius: 20px; }
.pj__media { position: relative; display: block; flex: 1 1 auto; min-height: 200px; aspect-ratio: var(--ar, 4 / 3); border-radius: 18px; overflow: hidden; container-type: inline-size; background: var(--bg); transform: translateZ(0); }
.js .pj__media { clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1200ms var(--out); }
.js .pj.is-in .pj__media { clip-path: inset(0 0 0 0 round 18px); }
.pj__media > img, .pj__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1000ms var(--out); }
.pj__media > video { opacity: 0; transition: opacity 400ms var(--ease); }
.pj.is-playing .pj__media > video { opacity: 1; }
.pj__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; }
.pj__t { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.025em; }
.pj__c { font: 500 0.72rem/1 var(--mono); color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.pj__badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: 99px; background: rgba(14, 14, 16, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 500 0.64rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.pf__note { margin-top: clamp(32px, 5vh, 48px); max-width: 70ch; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); }

/* Couvertures conceptuelles */
.cv { position: absolute; inset: 0; background: var(--bg); color: var(--fg); transition: transform 1000ms var(--out); }
@media (hover: hover) { .pj__open:hover .pj__media > img, .pj__open:hover .cv { transform: scale(1.035); } }
.cv--mark .cv-mono { font-weight: 200; }
@media (hover: hover) { .pj__open:hover .cv--mark .cv-mono { font-weight: 500; } }
.cv--browser { display: grid; place-items: center; background: color-mix(in srgb, var(--ac) 30%, var(--bg)); perspective: 1400px; }
.cv--browser .cq--browser { width: 80%; transform: rotateX(8deg) rotateY(-10deg) translateY(6%); transition: transform 1000ms var(--out); }
@media (hover: hover) { .pj__open:hover .cv--browser .cq--browser { transform: rotateX(0) rotateY(0) translateY(2%); } }
.cv--posts { background: var(--ac); }
.cv--posts .cq--post { position: absolute; top: 50%; left: calc(8% + var(--i) * 29%); width: 26%; translate: 0 -50%; rotate: calc((var(--i) - 1) * 6deg); transition: rotate 900ms var(--out), left 900ms var(--out); }
.cv--posts .cq--post:nth-child(2) { z-index: 2; }
.cv--posts .cq--post:nth-child(2) .mk-post { background: color-mix(in srgb, var(--fg) 14%, var(--bg)); }
@media (hover: hover) { .pj__open:hover .cv--posts .cq--post { left: calc(6% + var(--i) * 31%); rotate: calc((var(--i) - 1) * 9deg); } }
.cv--print { background: var(--fg); }
.cv--print .cq--flyer { position: absolute; left: 13%; top: 10%; width: 36%; rotate: -4deg; transition: rotate 900ms var(--out), translate 900ms var(--out); }
.cv--print .cq--card { position: absolute; left: 48%; top: 46%; width: 40%; rotate: 7deg; transition: rotate 900ms var(--out), translate 900ms var(--out); }
.cv--print .cq--card .mk-card { background: var(--ac); color: var(--fg); }
@media (hover: hover) { .pj__open:hover .cv--print .cq--flyer { rotate: -8deg; translate: -2% -2%; } .pj__open:hover .cv--print .cq--card { rotate: 11deg; translate: 2% 2%; } }

/* Curseur « Voir » sur les projets */
.pj-cursor { position: fixed; left: 0; top: 0; z-index: 40; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 0.8rem; font-weight: 600; pointer-events: none; scale: 0; transition: scale 400ms var(--spring); }
.pj-cursor.is-on { scale: 1; }

/* Fiche projet */
.pjd { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.pjd::backdrop { background: rgba(10, 10, 12, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pjd[open] { animation: pjdIn 600ms var(--out); }
.pjd[open]::backdrop { animation: fade 400ms var(--ease); }
@keyframes pjdIn { from { opacity: 0; transform: translateY(30px) scale(0.98); } }
@keyframes fade { from { opacity: 0; } }
.pjd__c { display: grid; grid-template-columns: 1.35fr 1fr; }
.pjd__media { position: relative; min-height: 460px; container-type: inline-size; background: var(--bg); }
.pjd__media > img { width: 100%; height: auto; }
.pjd__media > img + img { margin-top: 2px; }
.pjd__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(28px, 4vw, 48px); }
.pjd__k { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pjd__t { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.pjd__d { color: var(--ink-2); }
.pjd__s { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pjd__s li { padding: 6px 12px; border-radius: 99px; background: var(--bg-2); font-size: 0.82rem; }
.pjd__body .btn { margin-top: auto; }
.pjd__x { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); transition: transform 300ms var(--spring); }
.pjd__x:hover { transform: rotate(90deg); }

/* ---------- Studio Experience ---------- */
.xp {
  --a-bg: #ffffff; --a-fg: #161616; --a-ac: #9aa59c; --a-soft: #e6e8e4;
  --a-font: var(--display); --a-w: 300; --a-tt: lowercase; --a-ls: 0em; --a-st: normal; --a-rad: 3px;
}
.xp[data-dir="bold"] { --a-bg: #2233ff; --a-fg: #ffffff; --a-ac: #ffd23f; --a-soft: #dde0ff; --a-w: 800; --a-tt: uppercase; --a-ls: -0.045em; --a-rad: 999px; }
.xp[data-dir="elegant"] { --a-bg: #183028; --a-fg: #f1e9da; --a-ac: #c8a96a; --a-soft: #e7e1d3; --a-font: var(--serif); --a-w: 400; --a-tt: none; --a-ls: 0.01em; --a-st: italic; --a-rad: 0px; }
.xp.reveal { transform: none; }
.xp__controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.xp__tabs, .xp__dirs { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: #fff; border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.xp__tabs::-webkit-scrollbar { display: none; }
.xp__controls button { flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 99px; background: none; color: var(--ink-2); font: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer; transition: background 300ms var(--ease), color 300ms var(--ease); }
.xp__controls button:hover { color: var(--ink); background: var(--bg-2); }
.xp__controls button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.xp__controls button:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.xp__dirs button[data-dir="bold"] { font-weight: 800; }
.xp__dirs button[data-dir="elegant"] { font-family: var(--serif); font-style: italic; font-size: 0.95rem; }
.xp__stage { position: relative; aspect-ratio: 16 / 8.6; border-radius: 28px; overflow: hidden; container-type: inline-size; background: var(--a-soft); transition: background-color 700ms var(--ease); }
.xp.vt .xp__stage { view-transition-name: xp-stage; }
.xp.vt .xv *, .xp.vt .xp__stage { transition: none; }
.xp__caption { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; font: 500 0.7rem/1 var(--mono); color: var(--ink-3); }
.xp__caption b { font-weight: 600; color: var(--ink); }
.xp__caption span:last-child { margin-left: auto; }

.xv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(3cqw) scale(0.97); filter: blur(10px); transition: opacity 600ms var(--ease), transform 900ms var(--out), filter 600ms var(--ease), visibility 0s linear 600ms; }
.xv.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 120ms, 120ms, 120ms, 0s; }
.xv * { transition: background-color 700ms var(--ease), color 700ms var(--ease), border-color 700ms var(--ease), border-radius 700ms var(--ease), font-weight 700ms var(--ease), letter-spacing 700ms var(--ease); }

.alba { display: inline-flex; align-items: center; gap: 0.32em; color: var(--a-fg); font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); text-transform: var(--a-tt); letter-spacing: var(--a-ls); line-height: 1; white-space: nowrap; }
.alba__word { font-weight: inherit; }
.alba__mark { position: relative; display: inline-block; flex: none; width: 0.82em; height: 0.82em; border-radius: 50%; border: max(1px, 0.06em) solid var(--a-ac); }
.xp[data-dir="bold"] .alba__mark { height: 0.42em; border-radius: 0.82em 0.82em 0 0; background: var(--a-ac); align-self: flex-end; margin-bottom: 0.09em; }
.xp[data-dir="elegant"] .alba__mark::after { content: ""; position: absolute; left: -30%; right: -30%; top: 50%; height: max(1px, 0.04em); background: var(--a-ac); }

.xv--logo { background: var(--a-bg); place-content: center; gap: 2cqw; }
.alba--xl { font-size: 13cqw; }
.alba__sub { justify-self: center; font: 500 1.4cqw/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--a-fg); opacity: 0.6; }
.xv__guides { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--a-ac) 45%, transparent), color-mix(in srgb, var(--a-ac) 45%, transparent)) 0 50% / 100% 1px no-repeat, linear-gradient(color-mix(in srgb, var(--a-ac) 45%, transparent), color-mix(in srgb, var(--a-ac) 45%, transparent)) 50% 0 / 1px 100% no-repeat; opacity: 0.6; }
.xv__sw { position: absolute; left: 50%; bottom: 5cqw; translate: -50% 0; display: flex; gap: 1cqw; }
.xv__sw i { width: 4cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--a-fg) 25%, transparent); }
.xv__sw .s1 { background: var(--a-bg); } .xv__sw .s2 { background: var(--a-fg); } .xv__sw .s3 { background: var(--a-ac); }

.xv--web .cq--browser { width: 74%; }
.xs { display: flex; flex-direction: column; flex: 1; padding: 3cqw 5cqw 5cqw; background: var(--a-bg); color: var(--a-fg); overflow: hidden; position: relative; }
.xs__nav { display: flex; align-items: center; gap: 3cqw; font-size: 2.6cqw; }
.xs__nav .alba { margin-right: auto; }
.xs__nav > i { width: 6cqw; height: 0.5cqw; border-radius: 1cqw; background: var(--a-fg); opacity: 0.3; }
.xs__hero { margin-top: 7cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 3.4cqw; position: relative; z-index: 1; }
.xs__h { font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); letter-spacing: calc(var(--a-ls) - 0.02em); font-size: 8.4cqw; line-height: 0.98; }
.xp[data-dir="bold"] .xs__h { text-transform: uppercase; }
.xs__btn { padding: 1.4cqw 3cqw; border-radius: var(--a-rad); background: var(--a-ac); color: var(--a-bg); font-size: 1.8cqw; font-weight: 600; }
.xp[data-dir="minimal"] .xs__btn { background: var(--a-fg); }
.xs__tins { position: absolute; right: 6cqw; bottom: 0; display: flex; align-items: flex-end; gap: 2cqw; }
.xs__tins i { width: 11cqw; height: 22cqw; border-radius: 1.6cqw 1.6cqw 0 0; background: var(--a-ac); }
.xs__tins i:nth-child(2) { height: 28cqw; background: color-mix(in srgb, var(--a-fg) 85%, var(--a-bg)); }
.xs__tins i:nth-child(3) { height: 18cqw; background: color-mix(in srgb, var(--a-ac) 55%, var(--a-bg)); }

.xc { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 38cqw; aspect-ratio: 85 / 55; padding: 3cqw; border-radius: calc(min(var(--a-rad), 1.4cqw)); box-shadow: 0 3cqw 5cqw -3cqw rgba(14, 14, 16, 0.5); }
.xc--back { left: 14cqw; top: 14cqw; rotate: -6deg; background: var(--a-bg); font-size: 5.4cqw; }
.xc--front { left: 46cqw; top: 22cqw; rotate: 5deg; background: var(--a-fg); color: var(--a-bg); align-items: flex-start; justify-content: space-between; font-size: 2.4cqw; }
.xc--front b { font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); font-size: 2.6cqw; }
.xc--front small { font-size: 1.4cqw; opacity: 0.7; }
.xc--front .alba { color: var(--a-bg); }
.xc--front .alba__mark { border-color: var(--a-bg); }
.xp[data-dir="bold"] .xc--front .alba__mark { background: var(--a-bg); }

.xf { position: relative; display: flex; flex-direction: column; width: 30cqw; aspect-ratio: 148 / 210; padding: 3cqw; overflow: hidden; background: var(--a-bg); color: var(--a-fg); box-shadow: 0 3cqw 5cqw -3cqw rgba(14, 14, 16, 0.5); border-radius: calc(min(var(--a-rad), 0.6cqw)); font-size: 2.2cqw; }
.xf__k { font: 500 1.2cqw/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.xf__h { position: relative; z-index: 1; margin-top: 3cqw; font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); letter-spacing: calc(var(--a-ls) - 0.02em); font-size: 5.6cqw; line-height: 0.95; }
.xp[data-dir="bold"] .xf__h { text-transform: uppercase; font-size: 5cqw; }
.xf__sun { position: absolute; right: -7cqw; bottom: 9cqw; width: 26cqw; height: 26cqw; font-size: inherit; border-width: max(1px, 0.2cqw); }
.xp[data-dir="bold"] .xf__sun { height: 13cqw; bottom: 11cqw; }
.xf .alba { margin-top: auto; }

.xv--mobile .cq--phone { width: 21cqw; }
.mk-phone__screen.xm { background: var(--a-bg); color: var(--a-fg); }
.xm { align-items: center; text-align: center; gap: 5cqw; font-size: 6cqw; padding-top: 22cqw; }
.xm .alba { font-size: 9cqw; }
.xm__tin { width: 38cqw; height: 52cqw; margin-top: 4cqw; border-radius: 4cqw 4cqw 2cqw 2cqw; background: var(--a-ac); box-shadow: inset -6cqw 0 0 color-mix(in srgb, var(--a-fg) 12%, transparent); }
.xm__t { font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); font-size: 7.6cqw; line-height: 1.05; letter-spacing: var(--a-ls); }
.xm__d { font-size: 4.6cqw; opacity: 0.65; }
.xm__btn { margin-top: auto; align-self: stretch; padding: 4cqw; border-radius: var(--a-rad); background: var(--a-fg); color: var(--a-bg); font-size: 4.8cqw; font-weight: 600; }
.xp[data-dir="minimal"] .xm__btn { border-radius: 2cqw; }

.xv--pack { perspective: 1200px; }
.xb { width: 20cqw; margin: 0; transform: rotateX(-12deg) rotateY(-30deg); }
.xb__f { background: var(--a-bg); color: var(--a-fg); text-align: center; font-size: 1.4cqw; }
.xb__f .alba { font-size: 4.4cqw; }
.xb__f small { font-size: 1.2cqw; line-height: 1.4; opacity: 0.75; }
.xb > .xb__s { left: calc(50% - 10cqw); width: 20cqw; transform: rotateY(90deg) translateZ(10cqw); background: color-mix(in srgb, var(--a-bg) 82%, #000); color: var(--a-fg); }
.xb > .xb__f { transform: translateZ(10cqw); }
.xb > .xb__t { top: -10cqw; height: 20cqw; background: color-mix(in srgb, var(--a-bg) 86%, #fff); }
.xb__s small { rotate: -90deg; white-space: nowrap; font: 500 1.1cqw/1 var(--mono); letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.8; }
@media (hover: hover) { .xv--pack:hover .xb { transform: rotateX(-16deg) rotateY(-50deg); } }

.xi { display: flex; flex-direction: column; width: 30cqw; background: #fff; color: var(--ink); border-radius: 1.4cqw; overflow: hidden; box-shadow: 0 3cqw 5cqw -3cqw rgba(14, 14, 16, 0.5); }
.xi__head { display: flex; align-items: center; gap: 1cqw; padding: 1.4cqw; font-size: 1.3cqw; }
.xi__head .alba__mark { font-size: 2.4cqw; }
.xi__img { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 3cqw; background: var(--a-bg); color: var(--a-fg); }
.xi__q { font-family: var(--a-font); font-weight: var(--a-w); font-style: var(--a-st); letter-spacing: calc(var(--a-ls) - 0.02em); font-size: 4.6cqw; line-height: 1; }
.xp[data-dir="bold"] .xi__q { text-transform: uppercase; }
.xi__img .alba { font-size: 2.2cqw; }
.xi__bar { display: flex; gap: 1.2cqw; padding: 1.4cqw; }
.xi__bar i { width: 2cqw; height: 2cqw; border-radius: 50%; border: 1.5px solid currentColor; }

/* ---------- Packs ---------- */
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line); transition: transform 500ms var(--out), box-shadow 500ms var(--ease); }
@media (hover: hover) { .pack:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(14, 14, 16, 0.35); } }
.pack--featured { background: var(--ink-0); color: #fff; border-color: var(--ink-0); }
.pack__flag { position: absolute; top: 18px; right: 18px; padding: 6px 10px; border-radius: 99px; background: #fff; color: var(--ink); font: 500 0.62rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.pack__name { display: flex; flex-direction: column; gap: 10px; font-size: clamp(2rem, 2.6vw, 2.6rem); font-weight: 200; letter-spacing: -0.05em; line-height: 1; }
.pack__name small { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.pack--featured .pack__name small { color: rgba(255, 255, 255, 0.5); }
.pack__tag { margin-top: 16px; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.pack__aud { margin-top: 8px; font-size: 0.86rem; color: var(--ink-3); }
.pack--featured .pack__aud { color: rgba(255, 255, 255, 0.55); }
.price { display: flex; flex-direction: column; gap: 4px; margin: 22px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pack--featured .price, .plan .price { border-color: rgba(255, 255, 255, 0.12); }
.price strong { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; }
.price strong small { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.price span { font-size: 0.78rem; color: var(--ink-3); }
.price s { font-size: 0.85rem; color: var(--ink-3); }
.pack--featured .price span, .pack--featured .price s, .plan .price span { color: rgba(255, 255, 255, 0.5); }
.pack__delay { margin: -10px 0 18px; font-size: 0.82rem; color: var(--ink-3); }
.pack__lbl { margin-bottom: 4px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.pack--featured .pack__lbl { color: rgba(255, 255, 255, 0.45); }
.pack__items { margin-bottom: 26px; }
.pack__items li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; line-height: 1.4; }
.pack__items li::before { content: ""; flex: none; width: 10px; height: 1px; margin-top: 0.7em; background: currentColor; opacity: 0.5; }
.pack--featured .pack__items li { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.86); }
.pack .btn { margin-top: auto; }
.packs__note { margin-top: 24px; max-width: 80ch; font-size: 0.8rem; color: var(--ink-3); }

/* ---------- Abonnements ---------- */
.social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.social__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.social .disp { font-size: clamp(2.4rem, 4.8vw, 4.6rem); }
.social__name { font-size: 1.05rem; font-weight: 200; letter-spacing: -0.01em; }
.social__name b { font-weight: 600; }
.social__inc { display: flex; flex-wrap: wrap; gap: 6px; }
.social__inc li { padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); }
.social__intro .btn { margin-top: 6px; }
.cal { padding: clamp(18px, 2vw, 26px); border-radius: 26px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.cal.reveal { transform: none; }
.cal__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.cal__head b { font-weight: 600; letter-spacing: -0.02em; }
.cal__head span { font: 500 0.68rem/1 var(--mono); color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.12em; }
.cal__days, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__days { margin-bottom: 6px; font: 500 0.66rem/1 var(--mono); color: rgba(255, 255, 255, 0.4); text-align: center; }
.cal__grid { counter-reset: d; }
.cal__grid > i { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1 / 0.9; padding: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); counter-increment: d; }
.cal__grid > i::before { content: counter(d); position: absolute; top: 6px; left: 7px; font: 500 0.6rem/1 var(--mono); color: rgba(255, 255, 255, 0.35); }
.cal__grid em { display: block; padding: 4px 5px; border-radius: 6px; font: 600 0.6rem/1.1 var(--sans); font-style: normal; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js .cal__grid em { opacity: 0; transform: translateY(6px) scale(0.9); transition: opacity 400ms var(--ease), transform 600ms var(--spring); transition-delay: calc(var(--i) * 110ms + 300ms); }
.cal.is-in .cal__grid em { opacity: 1; transform: none; }
.t-post { background: #ffffff; } .t-car { background: #c7d2fe; } .t-story { background: #fbcfe8; } .t-reel { background: #fde68a; } .t-ad { background: #bbf7d0; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; background: none; }
.cal__legend span::before { content: ""; width: 8px; height: 8px; border-radius: 3px; }
.cal__legend .t-post::before { background: #fff; } .cal__legend .t-car::before { background: #c7d2fe; } .cal__legend .t-story::before { background: #fbcfe8; } .cal__legend .t-reel::before { background: #fde68a; } .cal__legend .t-ad::before { background: #bbf7d0; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(56px, 9vh, 96px); }
.plan { display: flex; flex-direction: column; padding: 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.025); transition: background 400ms var(--ease), border-color 400ms; }
@media (hover: hover) { .plan:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); } }
.plan__i { font: 500 0.7rem/1 var(--mono); color: rgba(255, 255, 255, 0.4); }
.plan__name { margin-top: 18px; font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 200; letter-spacing: -0.05em; }
.plan__line { margin-top: 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }
.plan__empty { margin-top: 18px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.45); }
.plan__specs { margin: 18px 0 0; }
.plan__specs div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.9rem; }
.plan__specs dt { color: rgba(255, 255, 255, 0.6); }
.plan__specs dd { margin: 0; font-weight: 600; }
.plan .price { margin-bottom: 0; margin-top: auto; padding-bottom: 0; border-bottom: 0; }
.plan__line + .plan__empty + .price, .plan__specs + .price { margin-top: 22px; }
.plan__commit { margin-top: 8px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); }

/* ---------- Méthode ---------- */
.process__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.process__head { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tl { --p: 0; position: relative; display: flex; flex-direction: column; gap: clamp(56px, 11vh, 120px); padding: 12px 0 12px 64px; }
.tl::before, .tl::after { content: ""; position: absolute; left: 14px; top: 26px; bottom: 26px; width: 1px; background: var(--line); }
.tl::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--p)); }
.tl__s { position: relative; display: flex; flex-direction: column; gap: 10px; transition: opacity 700ms var(--ease); }
.js .tl__s { opacity: 0.3; }
.tl__s::before { content: ""; position: absolute; left: -56px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(23, 23, 23, 0.2); transition: background 500ms var(--ease), border-color 500ms, box-shadow 500ms; }
.js .tl__s.is-on { opacity: 1; }
.tl__s.is-on::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 7px rgba(23, 23, 23, 0.07); }
.tl__n { font: 500 0.74rem/1 var(--mono); color: var(--ink-3); }
.tl__s h3 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 200; letter-spacing: -0.06em; line-height: 1; transition: font-weight 900ms var(--out); }
.tl__s.is-on h3 { font-weight: 600; }
.tl__s p { max-width: 34ch; color: var(--ink-2); font-size: 1.02rem; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact__intro { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.contact .disp { font-size: clamp(2.3rem, 5vw, 4.6rem); }
.contact__info { display: flex; flex-direction: column; gap: 10px; color: rgba(255, 255, 255, 0.75); }
.contact__info li { display: flex; align-items: center; gap: 10px; }
.contact__info .ic { width: 18px; height: 18px; }
.contact__info a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.sform { background: #fff; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.8); color: var(--ink); }
.sform.reveal.is-in { transform: none; }
.sform input:not([type="checkbox"]):not([type="radio"]), .sform textarea { background: var(--bg-2); border-color: transparent; }
.sform input:focus, .sform textarea:focus { background: #fff; }
.sform .form__chips span { background: var(--bg-2); border-color: transparent; }
.sform .form__chips input:checked + span { background: var(--ink); border-color: var(--ink); }
.opt { font-weight: 400; color: var(--ink-3); }
.form .consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.consent:has([aria-invalid="true"]) span { color: #dc2626; }
.form .hint { font-weight: 400; font-size: 0.74rem; color: var(--ink-3); }
.form fieldset[aria-invalid="true"] legend { color: #dc2626; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sform .btn[disabled] { opacity: 0.6; cursor: progress; }
.form__note.is-err { color: #b91c1c; font-weight: 600; }
.form__note a { text-decoration: underline; }
.form__fallback { display: inline-flex; margin-top: 8px; }
.sform-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: #fff; color: var(--ink); outline: none; animation: rise 800ms var(--out) both; }
.sform-ok[hidden], .sform[hidden] { display: none; }
.contact__grid > .sform-ok { grid-column: 2; grid-row: 1; }
.sform-ok__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; animation: pop 700ms var(--spring) 200ms both; }
.sform-ok__ic .ic { width: 26px; height: 26px; stroke-width: 2.4; }
@keyframes pop { from { transform: scale(0); } }
.sform-ok h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 600; letter-spacing: -0.05em; }
.sform-ok p { color: var(--ink-2); max-width: 46ch; }

/* ---------- Pied de page ---------- */
.studio .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.footer__brand .lockup { --h: 20px; }
.footer__brand .lockup img { width: auto; }

/* ---------- Transitions de vue (filtres, directions artistiques) ---------- */
::view-transition-group(*) { animation-duration: 600ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .disp .ln > span, .js .disp.reveal .ln > span { transform: none !important; }
  .ab, .hero-s__head > * { animation: none !important; opacity: 1; filter: none; }
  .ab { translate: none !important; }
  .js .pj__media { clip-path: none; }
  .js .svc__in > *, .vis__posts .cq--post, .cal__grid em, .xv.is-on { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mk-wave path { stroke-dashoffset: 0; }
  .js .tl__s { opacity: 1; }
  .stmt__txt .w { color: var(--ink); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .packs { grid-template-columns: repeat(2, 1fr); }
  .svc__in { grid-template-columns: 1fr; }
  .svc__txt { padding-left: 92px; padding-bottom: 8px; }
  .svc__vis { padding-left: 92px; }
  .social__grid { grid-template-columns: 1fr; }
  .cal { max-width: 640px; }
}
@media (max-width: 960px) {
  .nav--studio .nav__card { max-width: 860px; }
  .hero-s__head { grid-template-columns: 1fr; }
  .hero-s__cta { margin-top: 24px; }
  .process__grid, .contact__grid { grid-template-columns: 1fr; }
  .process__head, .contact__intro { position: static; }
  .contact__grid > .sform-ok { grid-column: auto; grid-row: auto; }
  .pjd__c { grid-template-columns: 1fr; }
  .pjd__media { min-height: 0; aspect-ratio: 4 / 3; }
  .studio .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero-s { margin-top: -62px; padding-top: calc(62px + 40px); }
  .hero-s__title { font-size: 12vw; }
  .hero-s__cta { flex-direction: column; align-self: stretch; }
  .hero-s__cta .btn { width: 100%; }
  .board { aspect-ratio: 1 / 1.15; margin-top: 44px; }
  .ab--web    { --x: 0%;  --y: 8%;  --w: 72%; --r: -2deg; }
  .ab--phone  { --x: 63%; --y: 0%;  --w: 33%; --r: 4deg; }
  .ab--flyer  { --x: 2%;  --y: 52%; --w: 34%; --r: -5deg; }
  .ab--post   { --x: 71%; --y: 57%; --w: 27%; --r: 5deg; }
  .ab--card   { --x: 24%; --y: 72%; --w: 46%; --r: 4deg; }
  .ab--box, .ab--motion { display: none; }
  .ab__name { font-size: 0.56rem; margin-bottom: 5px; gap: 5px; }
  .ab__name span, .ab--card .ab__name, .ab--post .ab__name { display: none; }
  .board__note { text-align: left; }
  .svc__btn { grid-template-columns: 34px 1fr 40px; gap: 12px; }
  .svc__l { display: none; }
  .svc__x { width: 40px; height: 40px; }
  .svc__txt, .svc__vis { padding-left: 0; }
  .svc__items { column-gap: 16px; }
  .svc__items li { font-size: 0.86rem; padding: 8px 0; }
  .pf__grid { grid-template-columns: 1fr; gap: 32px; }
  .pj { grid-column: auto; --ar: 1 / 1.05 !important; }
  .xp__controls { flex-direction: column; align-items: stretch; }
  .xp__dirs { align-self: flex-start; }
  .xp__stage { aspect-ratio: 4 / 5; border-radius: 22px; }
  .xp__caption span:last-child { margin-left: 0; }
  .packs { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .packs::-webkit-scrollbar { display: none; }
  .pack { scroll-snap-align: start; }
  .plans { grid-template-columns: 1fr; }
  .sform input:not([type="checkbox"]):not([type="radio"]), .sform textarea { font-size: 16px; } /* évite le zoom iOS au focus */
  .tl { padding-left: 48px; }
  .tl::before, .tl::after { left: 10px; }
  .tl__s::before { left: -44px; }
  .cal__grid em { font-size: 0; padding: 0; height: 6px; border-radius: 3px; }
  .studio .footer__top { grid-template-columns: 1fr 1fr; }
}

/* Expérience : composition repensée pour le format vertical (requête sur la scène). */
@container (max-width: 640px) {
  .alba--xl { font-size: 20cqw; }
  .alba__sub { font-size: 2.6cqw; }
  .xv__sw i { width: 7cqw; }
  .xv--web .cq--browser { width: 94%; }
  .xc { width: 66cqw; }
  .xc--back { left: 10cqw; top: 14cqw; font-size: 9cqw; }
  .xc--front { left: 22cqw; top: 54cqw; font-size: 4cqw; }
  .xc--front b { font-size: 4.4cqw; }
  .xc--front small { font-size: 2.6cqw; }
  .xf { width: 58cqw; padding: 5cqw; }
  .xf__k { font-size: 2.2cqw; }
  .xf__h { font-size: 10cqw; }
  .xp[data-dir="bold"] .xf__h { font-size: 9cqw; }
  .xf__sun { width: 46cqw; height: 46cqw; right: -12cqw; bottom: 14cqw; }
  .xp[data-dir="bold"] .xf__sun { height: 23cqw; bottom: 18cqw; }
  .xf .alba { font-size: 4.4cqw; }
  .xv--mobile .cq--phone { width: 46cqw; }
  .xb { width: 40cqw; }
  .xb__f .alba { font-size: 8cqw; }
  .xb__f small { font-size: 2.4cqw; }
  .xb > .xb__s { left: calc(50% - 20cqw); width: 40cqw; transform: rotateY(90deg) translateZ(20cqw); }
  .xb > .xb__f { transform: translateZ(20cqw); }
  .xb > .xb__t { top: -20cqw; height: 40cqw; }
  .xb__s small { font-size: 2.2cqw; }
  .xi { width: 66cqw; }
  .xi__head { font-size: 3cqw; padding: 3cqw; gap: 2cqw; }
  .xi__head .alba__mark { font-size: 5cqw; }
  .xi__img { padding: 6cqw; }
  .xi__q { font-size: 10cqw; }
  .xi__img .alba { font-size: 4.6cqw; }
  .xi__bar { padding: 3cqw; gap: 2.6cqw; }
  .xi__bar i { width: 4cqw; height: 4cqw; }
}