/* ═══════════════════════════════════════════════════════════════════════
   STUDIO SAVORA — Design System 2026 · "IMMERSIVE LIME"
   Avoine #F7F2DF · encre olive #2F2D0B · LIME #D7FF3F · dark #14140C
   Anton (display) · Inter (corps) · Space Grotesk (méta)
   Aéré, cinématique, vidéo-first.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces claires */
  --cream:   #F7F2DF;
  --cream-2: #E8DCBC;
  --paper:   #E3D6AD;

  /* Sombres — NEUTRES (comme le vrai site : #1B1B1B / #0E0E0E, pas d'olive) */
  --dark:    #0F0F0E;
  --dark-2:  #1A1A18;
  --dark-3:  #2A2A26;

  /* Encre — neutre avec une pointe de chaleur, pas olive */
  --ink:     #1A1A17;
  --ink-2:   #4A4945;
  --mute:    #4F4D42;
  --mute-d:  #4F4D42;   /* muted sur fond sombre */

  /* Accent signature */
  --lime:      #D7FF3F;
  --lime-2:    #DFFE65;
  --lime-deep: #A9D400;
  --teal:      #00B67A;
  --gold:      #E6C76F;

  /* Surfaces ajoutées — rythme chromatique (réparation tokens manquants) */
  --ivory:     #F2EAD0;            /* crème + claire, pour différencier des sections */
  --anchor:    #1A1A17;            /* olive-charbon d'ancrage (chaud, PAS noir pur) */
  --anchor-2:  #232017;            /* variante ancrage plus chaude */
  --on-anchor: #F7F2DF;            /* texte crème sur ancrage */
  --coral:     var(--lime);        /* baseline footer → lime éclatant */
  --olive:     var(--lime-deep);   /* états divers (ex: bouton succès) */

  /* Lignes */
  --line:        color-mix(in oklab, var(--ink) 24%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 38%, transparent);
  --line-d:      color-mix(in oklab, var(--ink) 18%, transparent);

  /* Typo */
  --display: "Anton", "Arial Narrow", sans-serif;
  --serif:   "Instrument Serif", ui-serif, Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Échelle */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --d-xxl:   clamp(2.5rem, 1.5rem + 4.4vw, 6.25rem);
  --d-xl:    clamp(2.1rem, 1.45rem + 3vw, 4.5rem);
  --d-lg:    clamp(2.05rem, 1.3rem + 2.4vw, 3.2rem);

  /* Espace — généreux mais rythmé */
  --edge:    clamp(20px, 4.5vw, 88px);
  --section: clamp(44px, 5vw, 84px);
  --gap:     clamp(16px, 2vw, 32px);

  /* Rayons */
  --r-sm: 10px; --r-md: 18px; --r-lg: 30px; --r-pill: 999px;

  /* Ombres */
  --sh-md: 0 10px 30px rgba(20,20,12,.12), 0 30px 80px rgba(20,20,12,.10);
  --sh-lg: 0 30px 80px rgba(20,20,12,.22), 0 60px 140px rgba(20,20,12,.16);

  /* Motion */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-cine:cubic-bezier(.16,.84,.44,1);
  --t-micro: .15s; --t: .45s; --t-med: .7s; --t-slow: 1.1s;

  --z-nav: 400; --z-overlay: 300; --z-cursor: 9998; --z-loader: 9999;

  --bg: var(--cream); --fg: var(--ink); --bg-soft: var(--paper); --accent: var(--lime);
}

/* Thèmes */
[data-theme="cream"] { --bg: var(--cream); --fg: var(--ink); --bg-soft: var(--paper); }
[data-theme="paper"] { --bg: var(--paper); --fg: var(--ink); --bg-soft: var(--cream-2); }
/* Studio Savora : PAS de noir → tout en clair (crème/ivory/paper), texte olive, lime en accent */
[data-theme="dark"]  { --bg: var(--ivory); --fg: var(--ink); --bg-soft: var(--paper); }
[data-theme="dark-2"]{ --bg: var(--paper); --fg: var(--ink); --bg-soft: var(--cream-2); }
[data-theme="lime"]  { --bg: var(--lime); --fg: var(--ink); --bg-soft: var(--lime-2); }
[data-theme="ivory"]    { --bg: var(--ivory);  --fg: var(--ink); --bg-soft: var(--cream); }
[data-theme="ink"]      { --bg: var(--cream);  --fg: var(--ink); --bg-soft: var(--paper); }
[data-theme="ink-deep"] { --bg: var(--paper);  --fg: var(--ink); --bg-soft: var(--cream-2); }
[data-theme="burgundy"] { --bg: var(--ivory);  --fg: var(--ink); --bg-soft: var(--paper); }
[data-theme="tomato"]   { --bg: var(--lime);   --fg: var(--ink); --bg-soft: var(--lime-2); }
/* Ancrage olive-charbon — rythme premium (manifeste + footer), texte clair + lime */
[data-theme="anchor"] { --bg: var(--anchor); --fg: var(--on-anchor); --bg-soft: var(--anchor-2);
  --ink: var(--on-anchor); --mute: color-mix(in oklab, var(--on-anchor) 60%, transparent);
  --mute-d: color-mix(in oklab, var(--on-anchor) 58%, transparent); --cream: var(--on-anchor); --ink-2: color-mix(in oklab, var(--on-anchor) 80%, transparent);
  --line: color-mix(in oklab, var(--on-anchor) 16%, transparent);
  --line-strong: color-mix(in oklab, var(--on-anchor) 34%, transparent);
  --line-d: color-mix(in oklab, var(--on-anchor) 14%, transparent); }

/* Chaque section/élément themé peint SON propre fond → aucun flash global au scroll */
[data-theme] { background-color: var(--bg); color: var(--fg); }

/* Reset */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--sans); font-size: var(--step-0); line-height: 1.6;
  color: var(--ink); background: var(--cream); letter-spacing: -.008em; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }

/* Grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Typo */
.display { font-family: var(--display); font-weight: 400; line-height: .9; letter-spacing: .004em; text-transform: uppercase; }
.serif   { font-family: var(--serif); font-style: italic; letter-spacing: -.01em; }
.mono    { font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: var(--step--1); font-weight: 500; }
.d-xxl { font-size: var(--d-xxl); } .d-xl { font-size: var(--d-xl); } .d-lg { font-size: var(--d-lg); }
h1,h2,h3 { font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
p { max-width: 60ch; }
.lead { font-size: var(--step-1); line-height: 1.45; color: color-mix(in oklab, var(--fg) 80%, var(--bg)); max-width: 46ch; }

/* Surlignage lime — fonctionne grâce au gros Anton */
.hl, .tomato { color: var(--lime); }
[data-theme="cream"] .hl, [data-theme="cream"] .tomato,
[data-theme="paper"] .hl, [data-theme="paper"] .tomato,
[data-theme="lime"] .hl, [data-theme="lime"] .tomato { color: var(--lime-deep); }
.ink-hl { color: var(--ink); }

/* Layout */
.wrap { width: min(100% - var(--edge) * 2, 1560px); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: .7em; font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: var(--step--1); font-weight: 500; color: var(--mute); }
.eyebrow::before { content: ""; width: 26px; height: 7px; border-radius: 50%; background: var(--lime); }
[data-theme="dark"] .eyebrow, [data-theme="ink"] .eyebrow, [data-theme="ink-deep"] .eyebrow,
[data-theme="dark-2"] .eyebrow, [data-theme="burgundy"] .eyebrow { color: var(--mute-d); }

/* Boutons */
.btn {
  --pad: 1.05em 1.9em; position: relative; display: inline-flex; align-items: center; gap: .7em; padding: var(--pad);
  border-radius: var(--r-pill); font-family: var(--mono); font-size: var(--step--1); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; transition: transform var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--lime); color: var(--ink); }
.btn--primary:hover { background: var(--lime-2); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(169,212,0,.35); }
.btn--ink { background: var(--ink); color: var(--cream); }
[data-theme="dark"] .btn--ink, [data-theme="ink"] .btn--ink, [data-theme="ink-deep"] .btn--ink { background: var(--lime); color: var(--ink); }
.btn--ink:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--fg); }
[data-theme="dark"] .btn--ghost, [data-theme="ink"] .btn--ghost, [data-theme="ink-deep"] .btn--ghost { border-color: var(--line-d); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-3px); }
.btn--lg { --pad: 1.25em 2.3em; font-size: var(--step-0); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding: clamp(14px,1.8vw,22px) var(--edge); color: var(--ink); transition: transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease), padding .35s var(--ease); }
.nav--light { color: var(--cream); }
.nav.is-solid { padding-block: clamp(10px,1.3vw,16px); background: color-mix(in oklab, var(--cream) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav.is-solid.nav--light { background: color-mix(in oklab, var(--dark) 72%, transparent); border-bottom: 1px solid var(--line-d); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__brand { font-family: var(--display); text-transform: uppercase; font-size: clamp(19px,2vw,26px); letter-spacing: .04em; display: flex; align-items: baseline; gap: .3em; }
.nav__brand em { font-family: var(--serif); font-style: italic; text-transform: none; font-size: .82em; }
.nav__links { display: flex; gap: clamp(20px,2.4vw,44px); align-items: center; }
.nav__links a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--lime); transition: width var(--t) var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__cta { padding: .7em 1.35em; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; transition: transform var(--t) var(--ease); }
.nav.is-solid .nav__cta:hover, .nav__cta:hover { transform: translateY(-2px); }
.nav__burger { display: none; flex-direction: column; gap: 6px; width: 30px; height: 30px; justify-content: center; align-items: center; position: relative; }
.nav__burger span { width: 26px; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* quand le menu est ouvert : nav en clair (lisible sur fond dark) */
body:has(.menu.is-open) .nav { color: var(--cream); background: transparent; border: none; }

/* Menu */
.menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--cream); color: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: .05em; padding: var(--edge); clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease-cine); pointer-events: none; }
.menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.menu a:not(.btn) { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem,11vw,6rem); line-height: 1.04; color: var(--ink); transition: color var(--t), padding-left var(--t); }
.menu a:not(.btn):hover { color: var(--lime-deep); padding-left: .12em; }
.menu__cta { align-self: flex-start; margin-top: 1.8rem; }
.menu__foot { margin-top: 2.4rem; display: flex; gap: 2rem; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* Curseur */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.cursor__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); transition: width .3s var(--ease), height .3s var(--ease); }
.cursor.is-hover .cursor__dot { width: 62px; height: 62px; }
.cursor__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.4); color: var(--ink); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s, transform .3s var(--ease); white-space: nowrap; }
.cursor.is-hover .cursor__label { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cursor { display: none !important; } /* curseur custom retire (point parasite desktop+mobile) */

/* Loader */
.loader { position: fixed; inset: 0; z-index: var(--z-loader); background: var(--cream); color: var(--ink); display: grid; place-items: center; overflow: hidden; }
.loader__inner { text-align: center; }
.loader__word { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem,10vw,8rem); line-height: 1; overflow: hidden; }
.loader__word span { display: inline-block; transform: translateY(110%); }
.loader__sub { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute-d); margin-top: 1.4em; opacity: 0; }
.loader__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--lime); }
.loader__count { position: absolute; right: var(--edge); bottom: clamp(20px,4vw,48px); font-family: var(--display); font-size: clamp(3rem,12vw,9rem); line-height: 1; color: color-mix(in oklab, var(--ink) 14%, transparent); }
.loader.is-done { clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-cine); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{transition-delay:.08s}.reveal[data-delay="2"]{transition-delay:.16s}.reveal[data-delay="3"]{transition-delay:.24s}.reveal[data-delay="4"]{transition-delay:.32s}.reveal[data-delay="5"]{transition-delay:.40s}
.clip-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-cine); }
.clip-reveal.is-in { clip-path: inset(0 0 0 0); }
.lines .line { display: block; overflow: hidden; padding-bottom: .04em; }
.lines .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease-cine); }
.lines.is-in .line > span { transform: none; }
.lines.is-in .line:nth-child(2) > span { transition-delay: .08s; }
.lines.is-in .line:nth-child(3) > span { transition-delay: .16s; }
.lines.is-in .line:nth-child(4) > span { transition-delay: .24s; }
.rule { height: 1px; background: var(--line); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease-cine); }
.rule.is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { *{animation:none!important;transition-duration:.01ms!important} .reveal,.clip-reveal,.lines .line>span,.loader__word span{opacity:1!important;transform:none!important;clip-path:none!important} }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; display: flex; }
.marquee__track { display: inline-flex; align-items: center; gap: clamp(28px,4vw,72px); padding-right: clamp(28px,4vw,72px); animation: marq 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem,8vw,7rem); line-height: 1; }
.marquee__track .dot { color: var(--lime); }
@keyframes marq { to { transform: translateX(-50%); } }

/* Sections head */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-bottom: clamp(48px,6vw,96px); flex-wrap: wrap; }
.sec-head h2 { margin-top: .35em; }
.muted { color: var(--mute); } .tac { text-align: center; } .full { grid-column: 1/-1; }

/* Footer */
.footer { background: var(--bg); color: var(--fg); padding: clamp(70px,9vw,140px) var(--edge) clamp(28px,3vw,44px); }
.footer a { color: color-mix(in oklab, var(--cream) 76%, transparent); transition: color var(--t); }
.footer a:hover { color: var(--lime); }
.footer__big { font-family: var(--display); text-transform: uppercase; font-size: clamp(3rem,15vw,13rem); line-height: .84; color: var(--cream); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; padding-bottom: clamp(40px,5vw,72px); border-bottom: 1px solid var(--line-d); }
.footer__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); padding-block: clamp(36px,4vw,60px); }
.footer__cols > div { display: flex; flex-direction: column; gap: .7rem; }
.footer__cols .mono { margin-bottom: .5rem; color: var(--mute-d); }
.footer__bottom { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; padding-top: clamp(24px,3vw,40px); border-top: 1px solid var(--line-d); }

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME IMMERSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO (deux colonnes : message + vidéos 9:16) ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: clamp(96px,13vh,150px); padding-bottom: clamp(56px,8vh,96px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,80px); align-items: center; }
.hero__title { font-size: var(--d-xxl); margin: .35em 0 .55em; }
.hero__title em { font-style: italic; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(24px,3vw,36px); }
.hero__trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(24px,3vw,40px); font-size: var(--step--1); color: var(--mute); }
.hero__trust strong { color: var(--ink); }
.hero__stars { color: var(--teal); letter-spacing: 2px; }
.hero__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.hero__media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,22px); }
.hero__media .vframe { width: 100%; }
.hero__media .vframe:nth-child(2) { transform: translateY(10%); }
.hero__scroll { position: absolute; left: var(--edge); bottom: clamp(20px,3vh,36px); display: inline-flex; align-items: center; gap: 8px; color: var(--mute); }
.hero__scroll span { animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (max-width: 860px) {
  .hero { min-height: auto; padding-top: clamp(110px,16vh,150px); }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(28px,6vw,44px); }
  .hero__media { max-width: 420px; }
  .hero__scroll { display: none; }
}

/* ── SHOWREEL — portfolio vidéo 9:16 (PIÈCE MAÎTRESSE) ── */
.showreel { padding-block: clamp(90px,11vw,200px); overflow: hidden; }
.showreel__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; padding-inline: var(--edge); margin-bottom: clamp(40px,5vw,80px); }
.showreel__head h2 { font-size: var(--d-lg); margin-top: .3em; }
.vstrip { display: flex; gap: clamp(14px,1.6vw,26px); width: max-content; padding-inline: var(--edge); animation: vscroll 48s linear infinite; }
.vstrip:hover { animation-play-state: paused; }
.vstrip--rev { animation-direction: reverse; animation-duration: 56s; margin-top: clamp(14px,1.6vw,26px); }
@keyframes vscroll { to { transform: translateX(-50%); } }
.vframe { position: relative; flex: none; width: clamp(208px,21vw,340px); aspect-ratio: 9/16; border-radius: var(--r-md); overflow: hidden; background: var(--dark-2); box-shadow: var(--sh-md); isolation: isolate; cursor: pointer; }
.vframe video, .vframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vframe img { animation: kenburns 14s ease-in-out infinite alternate; }
.vframe:hover img { animation-play-state: paused; }
@keyframes kenburns { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.12) translateY(-2%); } }
.vframe::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,10,6,.78) 0%, rgba(10,10,6,.05) 46%); }
.vframe__tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-weight: 600; }
.vframe__live { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: #fff; }
.vframe__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.vframe__meta { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; color: #fff; }
.vframe__h { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.vframe__stat { font-family: var(--display); font-size: clamp(1.4rem,2.4vw,2rem); line-height: 1; margin-top: 4px; }
.vframe__stat span { color: var(--lime); }
.vframe__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 58px; height: 58px; transform: translate(-50%,-50%) scale(.7); border-radius: 50%; background: var(--lime); display: grid; place-items: center; opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.vframe:hover .vframe__play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.vframe__play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 2px; }

/* ── STAT LINE (minimal) ── */
.statline { display: flex; flex-wrap: wrap; gap: clamp(32px,6vw,110px); justify-content: space-between; }
.statline__i { display: flex; flex-direction: column; gap: .3rem; }
.statline__n { font-family: var(--display); font-size: clamp(2.6rem,7vw,6.5rem); line-height: .85; }
.statline__n .hl { color: var(--lime); }
.statline__l { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
[data-theme="dark"] .statline__l, [data-theme="ink"] .statline__l { color: var(--mute-d); }

/* ── SERVICES en liste (aéré, hover) ── */
.svc-list { border-top: 1px solid var(--line); }
[data-theme="dark"] .svc-list, [data-theme="ink"] .svc-list { border-color: var(--line-d); }
.svc-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px,4vw,72px); padding: clamp(26px,3.4vw,52px) 0; border-bottom: 1px solid var(--line); transition: padding-left var(--t) var(--ease), color var(--t); position: relative; }
[data-theme="dark"] .svc-line, [data-theme="ink"] .svc-line { border-color: var(--line-d); }
.svc-line:hover { padding-left: clamp(8px,1.4vw,28px); }
.svc-line__no { font-family: var(--mono); font-size: var(--step--1); color: var(--mute); letter-spacing: .1em; }
.svc-line__t { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.8rem,5vw,4rem); line-height: .95; transition: color var(--t); }
.svc-line:hover .svc-line__t { color: var(--lime-deep); }
[data-theme="dark"] .svc-line:hover .svc-line__t, [data-theme="ink"] .svc-line:hover .svc-line__t { color: var(--lime); }
.svc-line__d { font-size: var(--step-0); color: color-mix(in oklab,var(--fg) 70%, var(--bg)); max-width: 40ch; justify-self: end; text-align: right; }
.svc-line__ar { width: 30px; height: 30px; opacity: .35; transition: opacity var(--t), transform var(--t) var(--ease); }
.svc-line:hover .svc-line__ar { opacity: 1; transform: translate(4px,-4px); color: var(--lime-deep); }

/* ── MÉTHODE ── */
.method { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--line); }
[data-theme="dark"] .method, [data-theme="ink"] .method { border-color: var(--line-d); }
.method__step { padding: clamp(28px,3vw,48px) clamp(18px,2vw,36px) 0 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: .7rem; min-height: 240px; }
[data-theme="dark"] .method__step, [data-theme="ink"] .method__step { border-color: var(--line-d); }
.method__step:last-child { border-right: none; }
.method__no { font-family: var(--display); font-size: clamp(2.4rem,5vw,4.4rem); color: var(--lime-deep); line-height: 1; }
[data-theme="dark"] .method__no, [data-theme="ink"] .method__no { color: var(--lime); }
.method__title { font-size: var(--step-2); }
.method__step p { color: color-mix(in oklab,var(--fg) 74%, var(--bg)); }
.method__step .mono { margin-top: auto; padding-bottom: .5rem; color: var(--mute); }

/* ── LOGOS social proof ── */
.logos { display: flex; align-items: center; gap: clamp(28px,4vw,72px); }
.logos span { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.2rem,2.4vw,2rem); color: color-mix(in oklab,var(--fg) 50%, var(--bg)); white-space: nowrap; transition: color var(--t); }
.logos span:hover { color: var(--fg); }

/* ── CTA final ── */
.cta-final { padding-block: clamp(120px,15vw,240px); }
.cta-final__title { font-size: var(--d-xl); }

/* ── ÉQUIPE ── */
.team-grid { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; }
.team-grid::-webkit-scrollbar { display: none; }
.team-grid .member { flex: none; width: clamp(190px,22vw,260px); scroll-snap-align: start; }
.member__ph { aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.member__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.03); transition: filter .6s var(--ease), transform 1.2s var(--ease-cine); }
.member:hover .member__ph img { filter: none; transform: scale(1.05); }
.member figcaption { display: flex; flex-direction: column; gap: .2rem; margin-top: .9rem; }
.member figcaption .mono { color: var(--mute); }

/* ── AVATARS créateurs ── */
.creators__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,110px); align-items: center; }
.creators__cloud { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.5vw,22px); }
.avatar { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--dark-2); border: 2px solid var(--line-d); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--more { display: grid; place-items: center; font-family: var(--display); font-size: clamp(1.4rem,3vw,2.4rem); color: var(--ink); background: var(--lime); border: none; }
.creators__cloud .avatar:nth-child(2){transform:translateY(-16%)} .creators__cloud .avatar:nth-child(5){transform:translateY(-16%)}

/* ── TÉMOIGNAGES ── */
.tms-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--gap); }
.tm { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px,2.6vw,40px); display: flex; flex-direction: column; gap: 1.2rem; transition: transform var(--t) var(--ease); }
[data-theme="dark"] .tm, [data-theme="ink"] .tm { border-color: var(--line-d); }
.tm:hover { transform: translateY(-6px); }
.tm__stars { color: var(--teal); letter-spacing: 2px; }
.tm blockquote { font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.4; flex: 1; }
.tm figcaption { display: flex; flex-direction: column; gap: .3rem; }
.tm figcaption .mono { color: var(--mute); }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,5vw,90px); align-items: start; }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1.4em 0; text-align: left; font-size: var(--step-1); font-weight: 600; }
.acc__head i { position: relative; width: 16px; height: 16px; flex: none; }
.acc__head i::before, .acc__head i::after { content: ""; position: absolute; background: var(--lime-deep); transition: transform .4s var(--ease); }
.acc__head i::before { left: 0; top: 7px; width: 16px; height: 2px; }
.acc__head i::after { left: 7px; top: 0; width: 2px; height: 16px; }
.acc__item.is-open i::after { transform: scaleY(0); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.acc__body p { padding-bottom: 1.4em; color: var(--mute); max-width: 60ch; }

/* ═══════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   ═══════════════════════════════════════════════════════════════════════ */
.page-hero { min-height: 66vh; display: flex; align-items: flex-end; padding-top: clamp(150px,18vh,240px); }
.page-hero__title { font-size: var(--d-xl); margin: .3em 0 .5em; }

.svc-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px,5vw,90px); align-items: start; }
.svc-row__head { position: sticky; top: 120px; }
.svc-row__no { font-family: var(--display); font-size: clamp(2rem,4vw,3.4rem); color: var(--lime-deep); display: block; margin-bottom: .3em; }
[data-theme="dark"] .svc-row__no, [data-theme="ink"] .svc-row__no { color: var(--lime); }
.svc-row__head h2 { font-size: var(--d-lg); }
.ticks { list-style: none; margin: 2rem 0; display: grid; gap: 1rem; }
.ticks li { position: relative; padding-left: 2rem; font-size: var(--step-1); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-left: 2px solid var(--lime-deep); border-bottom: 2px solid var(--lime-deep); transform: rotate(-45deg); }
[data-theme="dark"] .ticks li::before, [data-theme="ink"] .ticks li::before { border-color: var(--lime); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.chips span { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; padding: .5em 1em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
[data-theme="dark"] .chips span, [data-theme="ink"] .chips span { border-color: var(--line-d); }

.proof-row { display: flex; gap: clamp(28px,5vw,80px); margin-top: clamp(32px,4vw,56px); flex-wrap: wrap; }
.proof-row > div { display: flex; flex-direction: column; gap: .4rem; }
.proof-row__n { font-family: var(--display); font-size: clamp(2rem,4vw,3.6rem); }
.proof-row__l { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab,var(--fg) 60%, transparent); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(36px,4vw,64px); }
.filter { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; padding: .7em 1.3em; border: 1px solid var(--line-d); border-radius: var(--r-pill); color: color-mix(in oklab,var(--fg) 78%, transparent); transition: all var(--t) var(--ease); }
.filter:hover { border-color: var(--fg); }
.filter.is-active { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.works-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,1.6vw,24px); }

.case { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,4vw,72px); align-items: center; padding-block: clamp(44px,5vw,80px); border-top: 1px solid var(--line); }
.case--rev .case__media { order: 2; }
.case__media { aspect-ratio: 4/5; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); }
.case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-cine); }
.case:hover .case__media img { transform: scale(1.05); }
.case__body { display: flex; flex-direction: column; gap: 1rem; }
.case__title { font-family: var(--display); text-transform: uppercase; font-size: var(--d-lg); }
.case__kpis { display: flex; gap: clamp(24px,4vw,64px); margin-top: 1rem; flex-wrap: wrap; }
.case__kpis > div { display: flex; flex-direction: column; gap: .3rem; }
.case__kpi { font-family: var(--display); font-size: clamp(2rem,4vw,3.4rem); color: var(--lime-deep); }
.case__kpis .mono { color: var(--mute); }

.roles { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--gap); }
.role { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px,2.4vw,36px); display: flex; flex-direction: column; gap: .8rem; min-height: 240px; transition: transform var(--t) var(--ease); }
.role:hover { transform: translateY(-6px); }
.role__no { font-family: var(--mono); color: var(--mute); }
.role__t { font-family: var(--display); text-transform: uppercase; font-size: var(--step-2); }
.role p { color: color-mix(in oklab,var(--fg) 74%, var(--bg)); }

.perks { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(28px,3vw,56px) clamp(40px,5vw,90px); margin-bottom: clamp(48px,6vw,90px); }
.perk { display: flex; flex-direction: column; gap: .6rem; border-top: 1px solid var(--line-d); padding-top: 1.4rem; }
.perk__no { font-family: var(--display); font-size: clamp(1.8rem,3vw,2.6rem); color: var(--lime); }
.perk h3 { font-size: var(--step-1); }
.perk p { color: color-mix(in oklab,var(--fg) 72%, transparent); }
.join { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; padding: clamp(28px,3vw,52px); border-radius: var(--r-lg); background: color-mix(in oklab,var(--cream) 8%, transparent); border: 1px solid var(--line-d); }
.join__t { font-family: var(--display); text-transform: uppercase; font-size: var(--step-2); }

.contact { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(150px,16vh,210px); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,110px); align-items: start; }
.contact__title { font-size: var(--d-xl); margin: .3em 0 .5em; }
.contact__info { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.contact__line { display: flex; flex-direction: column; gap: .25rem; font-size: var(--step-1); transition: color var(--t); }
.contact__line .mono { color: var(--mute-d); }
a.contact__line:hover { color: var(--lime); }
.contact__socials { display: flex; gap: 1.4rem; margin-top: 2rem; flex-wrap: wrap; }
.contact__socials a { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.contact__socials a:hover { color: var(--lime); }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: color-mix(in oklab,var(--cream) 6%, transparent); border: 1px solid var(--line-d); border-radius: var(--r-lg); padding: clamp(24px,3vw,48px); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1/-1; }
.field label { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--mute-d); }
.field input, .field select, .field textarea { font-family: var(--sans); font-size: var(--step-0); color: var(--fg); background: color-mix(in oklab,var(--cream) 8%, transparent); border: 1px solid var(--line-d); border-radius: var(--r-sm); padding: .85em 1em; transition: border-color var(--t), background-color var(--t); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab,var(--fg) 40%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--lime); background: color-mix(in oklab,var(--cream) 12%, transparent); }
.field textarea { resize: vertical; }
.contact__form .btn { justify-content: center; }
.form__note { grid-column: 1/-1; text-align: center; color: var(--mute-d); letter-spacing: .12em; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .works-grid { grid-template-columns: repeat(2,1fr); }
  .roles { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(3,1fr); }
  .method { grid-template-columns: repeat(2,1fr); }
  .method__step:nth-child(2) { border-right: none; }
  .method__step:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }
}
@media (max-width: 860px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-row__head { position: static; }
  .svc-line { grid-template-columns: auto 1fr; }
  .svc-line__d { display: none; }
  .case, .case--rev .case__media { grid-template-columns: 1fr; order: 0; }
  .case__media { order: -1; }
  .perks { grid-template-columns: 1fr; }
  .creators__grid, .faq-grid, .contact__grid, .contact__form { grid-template-columns: 1fr; }
  .tms-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--edge) * -1); padding-inline: var(--edge); }
  .tms-grid::-webkit-scrollbar { display: none; }
  .tms-grid .tm { flex: none; width: 84%; scroll-snap-align: center; }
  .statline { gap: 32px; }
}
@media (max-width: 560px) {
  .works-grid, .roles, .team-grid { grid-template-columns: repeat(2,1fr); }
}

/* ── Alias tailles (compat pages) ── */
.h-lg { font-size: var(--d-lg); } .h-xl { font-size: var(--d-xl); } .h-xxl { font-size: var(--d-xxl); }
.card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); }

/* ── REEL (grille portfolio Réalisations) ── */
.reel { position: relative; aspect-ratio: 9/16; border-radius: var(--r-md); overflow: hidden; background: var(--dark-2); box-shadow: var(--sh-md); isolation: isolate; cursor: pointer; }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-cine); }
.reel:hover img { transform: scale(1.07); }
.reel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,10,6,.8) 0%, rgba(10,10,6,.04) 46%); }
.reel__tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-weight: 600; }
.reel__live { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: #fff; }
.reel__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse 1.4s infinite; }
.reel__meta { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.reel__handle { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.reel__stats { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; opacity: .92; text-align: right; }
.reel__play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 56px; height: 56px; transform: translate(-50%,-50%) scale(.7); border-radius: 50%; background: var(--lime); display: grid; place-items: center; opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.reel:hover .reel__play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.reel__play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE 2026 — short content studio (brief client)
   ═══════════════════════════════════════════════════════════════════════ */

/* Boutons supplémentaires */
.btn--lime-ring { background: transparent; color: var(--lime); border: 1.5px solid var(--lime); }
.btn--lime-ring:hover { background: var(--lime); color: var(--ink); transform: translateY(-3px); }
.btn--ghost-light { border: 1px solid color-mix(in oklab, var(--cream) 38%, transparent); color: var(--cream); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); transform: translateY(-3px); }
.btn--ink-outline { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ink-outline:hover { background: var(--ink); color: var(--lime); transform: translateY(-3px); }
.btn, .nav__cta { min-height: 48px; }

/* Header : menu centré */
.nav__links { position: absolute; left: 50%; transform: translateX(-50%); }

/* ── 1 · HERO full-screen vidéo ── */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 0; }
.hero__bg { position: absolute; inset: 0; z-index: 0; background: var(--cream); animation: heroBgIn 1.4s var(--ease-cine) both; }
@keyframes heroBgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* mur de créas qui défilent (les "sliders") — visibles sur le hero crème */
.hero__wall { display: none !important; } /* mur de visuels-texte retiré — vraies vidéos = .reelstrip sous le hero */
.hero__colwall { display: flex; flex-direction: column; gap: 14px; animation: wallUp 60s linear infinite; }
.hero__colwall--down { animation: wallDown 60s linear infinite; }
.hero__colwall img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 34px rgba(47,45,11,.12); }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 700px) { .hero__wall { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero__colwall { animation: none; } }
/* voile crème : créas visibles sur les côtés, titre net au centre */
.hero__overlay { position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(130% 75% at 50% 15%, rgba(215,255,63,.16), transparent 55%),
    radial-gradient(60% 108% at 50% 50%, var(--cream) 36%, color-mix(in oklab, var(--cream) 82%, transparent) 54%, color-mix(in oklab, var(--cream) 10%, transparent) 100%); }
.hero__inner { position: relative; z-index: 2; width: min(100% - var(--edge)*2, 1560px); margin-inline: auto; padding-block: clamp(120px,16vh,180px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__pre { font-family: var(--mono); letter-spacing: .26em; text-transform: uppercase; font-size: var(--step--1); color: var(--lime); margin-bottom: 1.6em; opacity: 1; animation: fadeUp .9s var(--ease) .25s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__title { font-size: clamp(2.3rem, 1.1rem + 5.6vw, 6.5rem); line-height: .98; max-width: 18ch; margin-inline: auto; }
.hero__sub { font-size: var(--step-1); max-width: 46ch; margin: 1.2em auto 0; color: color-mix(in oklab, var(--ink) 82%, var(--bg)); }
.hero__phrase { font-family: var(--serif); font-style: italic; font-size: var(--step-1); margin: .7em auto 0; color: color-mix(in oklab, var(--ink) 72%, var(--bg)); }
.hero__actions { display: flex; gap: 12px; flex-wrap: nowrap; justify-content: center; margin-top: 2.1em; }
.hero__actions .btn { white-space: nowrap; justify-content: center; text-align: center; }
@media (max-width: 540px) {
  .hero__actions { gap: 8px; width: 100%; }
  .hero__actions .btn { flex: 1 1 0; min-width: 0; padding: 1.05em .7em; font-size: 10px; letter-spacing: .03em; }
}
.hero__badge { display: inline-flex; align-items: center; gap: .6em; align-self: center; padding: .55em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--lime-deep); background: var(--lime-2); color: var(--ink); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.6em; animation: fadeUp .9s var(--ease) .2s both; }
.hero__badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-deep); }
.hero__rating { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1.5em; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.hero__rating strong { color: var(--ink); }
.hero__stars { color: var(--teal); letter-spacing: 2px; font-size: 1.05em; }
.hero__micro { margin-top: 1.1em; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.hero__stats { display: flex; justify-content: center; gap: clamp(20px,6vw,80px); flex-wrap: nowrap; margin-top: 2.4em; }
.hstat { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.hstat__n { font-size: clamp(2.1rem,5vw,4rem); color: var(--ink); line-height: .88; white-space: nowrap; }
.hstat__l { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 540px) {
  .hero__stats { gap: 10px; }
  .hstat { flex: 1 1 0; min-width: 0; }
  .hstat__n { font-size: clamp(1.35rem,7vw,2rem); }
  .hstat__l { font-size: 8.5px; letter-spacing: .04em; }
}

/* Ticker */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; padding: 13px 0; border-top: 1px solid var(--line); background: color-mix(in oklab, var(--cream) 72%, transparent); backdrop-filter: blur(8px); }
.ticker__track { display: flex; align-items: center; gap: 24px; width: max-content; animation: marq 30s linear infinite; }
.ticker__track span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: var(--step--1); color: var(--ink); }
.ticker__track b { color: var(--lime-deep); }

/* ── 2 · MANIFESTE ── */
.manifesto__title { font-size: clamp(1.9rem, 1.1rem + 3.6vw, 4.2rem); line-height: 1.02; }
.manifesto__text { max-width: 56ch; margin-top: 1.6em; font-size: var(--step-1); color: var(--ink-2); }
.manifesto__words { display: flex; flex-wrap: wrap; gap: clamp(18px,3vw,64px); margin-top: clamp(56px,8vw,120px); }
.bigword { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.6rem, 1.2rem + 7vw, 9rem); line-height: .86; color: var(--ink); }
.bigword:nth-child(2) { color: var(--lime-deep); }

/* ── 3 · WORK (rangée qui défile en continu — marquee) ── */
.work { position: relative; overflow: hidden; }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); width: min(100% - var(--edge)*2, 1560px); margin: 0 auto clamp(36px,4vw,60px); flex-wrap: wrap; }
.work__head h2 { font-size: var(--d-lg); margin-top: .3em; }
.work__head .eyebrow { color: var(--mute-d); }
.work__headr { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; max-width: 40ch; }
.work__sub { color: color-mix(in oklab, var(--ink) 84%, var(--bg)); font-size: var(--step-0); }
/* le rail : déborde plein écran, masques latéraux, défile en continu */
.work__rail { width: 100vw; margin-left: calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.work__track { display: flex; gap: clamp(16px,1.6vw,26px); width: max-content; padding-inline: clamp(16px,1.6vw,26px); animation: marq 55s linear infinite; }
.work__rail:hover .work__track { animation-play-state: paused; }
/* carte format 9:16 — mini-affiche (badge résultat + hook sur la vidéo + barre) */
.card9 { flex: none; width: clamp(258px, 25vw, 350px); filter: saturate(.86) brightness(.93); transition: filter .4s var(--ease), transform .4s var(--ease); }
.card9:hover { filter: none; transform: translateY(-4px); }
.card9__media { position: relative; aspect-ratio: 9/16; border-radius: var(--r-md); overflow: hidden; background: var(--dark-2); box-shadow: var(--sh-md); cursor: pointer; transition: box-shadow .4s var(--ease); }
.card9:hover .card9__media { box-shadow: 0 0 0 2px var(--lime), 0 24px 60px rgba(0,0,0,.5); }
.card9__media video { width: 100%; height: 100%; object-fit: cover; }
/* 1 · badge format (haut-gauche) */
.card9__type { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-weight: 600; }
/* 2 · badge résultat (haut-droite) — le chiffre choc */
.card9__res { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 9px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--dark) 62%, transparent); backdrop-filter: blur(6px); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 82%, transparent); }
.card9__res b { font-family: var(--display); font-size: 15px; color: var(--lime); letter-spacing: .01em; }
/* 4 · hook posé sur la vidéo */
.card9__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 14px 14px; background: linear-gradient(to top, rgba(10,10,6,.9), rgba(10,10,6,.5) 55%, transparent); }
.card9__hook { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.16; color: var(--cream); }
/* play */
.card9__play { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%,-50%) scale(.7); width: 54px; height: 54px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.card9__media:hover .card9__play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.card9__play svg { width: 18px; height: 18px; fill: var(--ink); margin-left: 2px; }
/* 5 · barre de progression (signal "ça joue") */
.card9__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 2px; background: color-mix(in oklab, var(--cream) 18%, transparent); }
.card9__bar span { display: block; height: 100%; width: 0; background: var(--lime); animation: cardbar 6s linear infinite; }
@keyframes cardbar { 0% { width: 0; } 92% { width: 100%; } 100% { width: 100%; } }
/* footer : client · objectif */
.card9__foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 4px 0; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .05em; text-transform: uppercase; color: var(--mute-d); }
.card9__foot span { color: color-mix(in oklab, var(--cream) 50%, transparent); }
@media (prefers-reduced-motion: reduce) { .work__track, .card9__bar span { animation: none; } .work__rail { overflow-x: auto; scrollbar-width: none; } .work__rail::-webkit-scrollbar { display: none; } }

/* ── 4 · SERVICES (lignes desktop / accordéon mobile) ── */
.svcs__head { margin-bottom: clamp(44px,5vw,80px); }
.svcs__head h2 { font-size: var(--d-lg); }
.svcs__list { border-top: 1px solid var(--line); }
.svcs__list .acc__head { display: flex; align-items: center; gap: clamp(16px,3vw,44px); padding: clamp(20px,2.6vw,40px) 0; }
.svcs__no { color: var(--lime-deep); flex: none; }
.svcs__t { font-size: clamp(1.5rem, 1rem + 3vw, 3.4rem); line-height: 1; flex: 1; transition: color var(--t), transform var(--t) var(--ease); }
.svcs__list .acc__head:hover .svcs__t { color: var(--lime-deep); transform: translateX(8px); }
.svcs__list .acc__body p { padding: 0 0 clamp(20px,2.6vw,36px) clamp(40px,7vw,92px); font-size: var(--step-1); color: var(--ink-2); max-width: 64ch; }
.svcs__cta { margin-top: clamp(44px,5vw,72px); }
/* Services : vrai accordéon cliquable AUSSI sur desktop (un seul ouvert à la fois) */
@media (min-width: 1025px) {
  .svcs__list .acc__head { cursor: pointer; }
}

/* ── 5 · CTA FINAL ── */
.final { padding-block: clamp(110px,14vw,210px); }
.final__title { font-size: var(--d-xl); line-height: 1.02; }
.final__text { max-width: 46ch; margin: 1.4em auto 2.4em; font-size: var(--step-1); color: color-mix(in oklab, var(--ink) 86%, transparent); }
.final__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: nowrap; }
.final__actions .btn { white-space: nowrap; }
@media (max-width: 540px) {
  .final__actions { gap: 8px; }
  .final__actions .btn { flex: 1 1 0; min-width: 0; padding: 1.05em .7em; font-size: 10px; letter-spacing: .03em; }
}

/* ── FOOTER ── */
.foot { padding: clamp(54px,7vw,100px) var(--edge); }
.foot__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px,2.5vw,36px) clamp(24px,4vw,64px); align-items: start; }
.foot__brand { font-size: clamp(2rem,5vw,4.2rem); grid-column: 1; }
.foot__tag { grid-column: 1; color: var(--mute-d); line-height: 1.7; }
.foot__tag .mono { color: var(--mute-d); }
.foot__links { display: flex; gap: 1.3rem; flex-wrap: wrap; grid-column: 2; grid-row: 1; }
.foot__links a { color: color-mix(in oklab, var(--ink) 75%, var(--bg)); transition: color var(--t); }
.foot__links a:hover { color: var(--lime); }
.foot__legal { grid-column: 1 / -1; display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: clamp(24px,3vw,44px); padding-top: clamp(20px,2vw,30px); border-top: 1px solid var(--line-d); }
.foot__legal a, .foot__legal .mono { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); }
.foot__legal a:hover { color: var(--lime); }

/* Menu mobile CTA */
.menu__cta { margin-top: 1.6rem; align-self: flex-start; }

/* ═══ RESPONSIVE homepage ═══ */
@media (max-width: 1024px) {
  /* portfolio devient un slider swipe natif */
  .work__head { flex-direction: column; align-items: flex-start; }
  .work__track { animation-duration: 38s; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .hero__title { font-size: clamp(2rem, 1.1rem + 6vw, 3.4rem); }
  .hero__inner { padding-bottom: 130px; }
  .hero__proof { font-size: 11px; gap: 8px; }
  .menu a:not(.btn) { font-size: clamp(2.2rem,10vw,3.6rem); }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__links { grid-column: 1; grid-row: auto; }
}

/* ── Bande LOGOS marques ── */
.brands { padding-block: clamp(28px,3.5vw,52px); border-bottom: 1px solid var(--line); }
.brands__label { display: block; text-align: center; color: var(--mute); margin-bottom: clamp(18px,2vw,30px); }
.brands__marq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.brands__track { animation: marq 34s linear infinite; gap: clamp(40px,6vw,90px); }
.brands__marq:hover .brands__track { animation-play-state: paused; }
.brand-logo { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.4rem,2.6vw,2.2rem); letter-spacing: .01em; color: color-mix(in oklab, var(--ink) 42%, var(--cream)); white-space: nowrap; transition: color var(--t); }
.brand-logo:hover { color: var(--ink); }

/* ── Intervieweurs ── */
.interv { margin-top: clamp(56px,7vw,110px); padding-top: clamp(40px,4vw,64px); border-top: 1px solid var(--line-d); }
.interv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); flex-wrap: wrap; margin-bottom: clamp(28px,3vw,44px); }
.interv__head h3 { font-size: var(--d-lg); }
.interv__sub { color: var(--mute); }
.interv__sub .mono { color: var(--lime-deep); }
.interv__row { display: flex; flex-wrap: wrap; gap: clamp(12px,1.4vw,20px); }
.interv__av { width: clamp(64px,8vw,104px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); border: 1px solid var(--line-d); font-family: var(--mono); font-size: var(--step-0); letter-spacing: .06em; color: var(--mute-d); transition: transform var(--t) var(--ease), border-color var(--t), color var(--t); }
.interv__av::after { content: attr(data-i); }
.interv__av:hover { transform: translateY(-4px); border-color: var(--lime); color: var(--lime); }
.interv__av--more { background: var(--lime); color: var(--ink); border: none; font-family: var(--display); font-size: clamp(1.4rem,2.4vw,2rem); }
.interv__av--more::after { content: ""; }

/* ── 3b · CASE STUDIES (short + résultat chiffré) ── */
.cases__head { margin-bottom: clamp(44px,5vw,80px); }
.cases__head h2 { font-size: var(--d-lg); }
.cases__grid { display: flex; flex-direction: column; gap: clamp(24px,3vw,44px); }
.case2 { display: grid; grid-template-columns: clamp(170px,24vw,280px) 1fr; gap: clamp(24px,4vw,64px); align-items: center; padding: clamp(20px,2.5vw,40px); border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line-d); transition: transform var(--t) var(--ease); }
.case2:hover { transform: translateY(-4px); }
.case2--rev { grid-template-columns: 1fr clamp(170px,24vw,280px); }
.case2--rev .case2__media { order: 2; }
.case2__media { position: relative; aspect-ratio: 9/16; border-radius: var(--r-md); overflow: hidden; background: var(--dark-3); box-shadow: var(--sh-md); }
.case2__media video { width: 100%; height: 100%; object-fit: cover; }
.case2__media .card9__type { top: 10px; left: 10px; }
.case2__body { display: flex; flex-direction: column; gap: .25rem; }
.case2__metric { font-size: clamp(3rem,9vw,6.5rem); color: var(--lime-deep); line-height: .82; }
.case2__metric i { font-style: normal; font-size: .5em; vertical-align: .15em; }
.case2__lbl { color: var(--mute-d); margin-top: .3rem; }
.case2__ctx { color: color-mix(in oklab, var(--ink) 82%, var(--bg)); font-size: var(--step-1); line-height: 1.45; margin-top: 1.1rem; max-width: 50ch; }
.case2__ctx strong { color: var(--ink); }
.case2__plat { color: var(--mute-d); margin-top: 1.1rem; }
@media (max-width: 720px) {
  .case2 { grid-template-columns: 1fr; gap: 20px; }
  .case2--rev .case2__media { order: 0; }
  .case2__media { max-width: 240px; }
}

/* ── Pill de contact flottante (conversion permanente) ── */
.cpill { position: fixed; right: clamp(16px,2.5vw,32px); bottom: clamp(16px,2.5vw,32px); z-index: 150; display: inline-flex; align-items: center; gap: .55em; padding: .95em 1.45em; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 12px 32px rgba(0,0,0,.28); transition: transform .45s var(--ease), opacity .45s; }
.cpill svg { width: 1.05em; height: 1.05em; transition: transform var(--t) var(--ease); }
.cpill:hover { transform: translateY(-3px); }
.cpill:hover svg { transform: translateX(3px); }
.cpill.is-hidden { transform: translateY(160%); opacity: 0; pointer-events: none; }
@media (max-width: 540px) { .cpill { padding: .8em 1.1em; font-size: 10px; right: 12px; bottom: 12px; } }
@media (hover: none) { .cpill { font-size: 10px; } }

/* ── Pills de format (au-dessus du portfolio) ── */
.work__filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 auto clamp(26px,3vw,44px); }
.wpill { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; padding: .65em 1.2em; border-radius: var(--r-pill); border: 1px solid var(--line-d); color: color-mix(in oklab, var(--ink) 75%, var(--bg)); transition: all var(--t) var(--ease); }
.wpill:hover { border-color: var(--ink); }
.wpill.is-active { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.card9 { transition: filter .4s var(--ease), transform .4s var(--ease), opacity .4s var(--ease); }
.card9.is-dim { opacity: .26; filter: grayscale(.7) brightness(.8); }

/* ── Mini-process (Services) ── */
.process { margin-top: clamp(48px,6vw,88px); padding-top: clamp(32px,4vw,52px); border-top: 1px solid var(--line); }
.process__label { color: var(--mute); margin-bottom: clamp(20px,2.5vw,32px); }
.process__row { display: flex; flex-wrap: wrap; gap: clamp(12px,1.4vw,20px); }
.process__step { flex: 1 1 130px; display: flex; flex-direction: column; gap: .5rem; padding: clamp(16px,1.8vw,26px); border-radius: var(--r-md); background: var(--bg-soft); border: 1px solid var(--line); transition: transform var(--t) var(--ease); }
.process__step:hover { transform: translateY(-4px); }
.process__no { font-family: var(--display); font-size: clamp(1.7rem,3vw,2.6rem); color: var(--lime-deep); line-height: 1; }
.process__t { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: var(--step-0); }

/* ── CTA final : offre + réassurance ── */
.final__offer { display: inline-block; font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; padding: .55em 1.15em; border-radius: var(--r-pill); background: var(--ink); color: var(--lime); margin-bottom: 1.5em; }
.final__reassure { margin-top: 1.8em; font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--ink) 68%, transparent); }

/* ── Garantie 72h (process) ── */
.process__guar { display: block; width: fit-content; margin: clamp(24px,3vw,36px) auto 0; padding: .8em 1.4em; border-radius: var(--r-pill); border: 1px dashed var(--lime-deep); background: color-mix(in oklab,var(--lime) 10%, transparent); font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); text-align: center; line-height: 1.5; }
.process__guar b { color: var(--lime-deep); white-space: nowrap; }

/* ── 4c · AVIS ── */
.avis__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-bottom: clamp(40px,5vw,72px); flex-wrap: wrap; }
.avis__head h2 { margin-top: .3em; }
.avis__score { display: flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.avis__score strong { color: var(--ink); }
.avis__score .hero__stars { color: var(--teal); }

/* ===== REEL STRIP · vraies vidéos (Shorts) en slider format téléphone ===== */
.reelstrip { padding: clamp(26px,4vw,52px) 0 clamp(40px,6vw,84px); overflow: hidden; }
.reelstrip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(16px,2.4vw,30px); flex-wrap: wrap; }
.reelstrip__label { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.reelstrip__star { color: var(--lime-deep); }
.reelstrip__hint { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.reelstrip__marq { width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.reelstrip__track { display: flex; gap: clamp(14px,1.5vw,22px); width: max-content; padding-inline: var(--edge); animation: reelMarq 46s linear infinite; }
.reelstrip__marq:hover .reelstrip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){ .reelstrip__track { animation: none; overflow-x: auto; } }
@keyframes reelMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reelcard { flex: none; width: clamp(176px,14.5vw,228px); aspect-ratio: 9/16; border: 0; padding: 0; cursor: pointer; position: relative; border-radius: 24px; background: var(--cream-2) center/cover no-repeat; box-shadow: 0 18px 48px rgba(47,45,11,.20), inset 0 0 0 5px rgba(247,242,223,.92), inset 0 0 0 6px rgba(47,45,11,.14); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t); }
.reelcard:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(47,45,11,.28), inset 0 0 0 5px rgba(247,242,223,.92), inset 0 0 0 6px rgba(47,45,11,.14); }
.reelcard::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,18,6,.05) 0%, transparent 35%, rgba(20,18,6,.42) 100%); pointer-events:none; }
.reelcard__play { position: absolute; inset: 0; margin: auto; width: clamp(48px,4vw,60px); height: clamp(48px,4vw,60px); display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); font-size: 17px; padding-left: 3px; z-index: 2; box-shadow: 0 10px 26px rgba(20,18,6,.30); transition: transform var(--t) var(--ease); }
.reelcard:hover .reelcard__play { transform: scale(1.1); }
.reelcard__if { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; border-radius: 22px; }
.reelcard[data-playing]::after, .reelcard[data-playing] .reelcard__play { display:none; }
@media (max-width:560px){ .reelcard { width: 60vw; } .reelstrip__track { animation-duration: 60s; } }

/* iframe injectée au clic sur les cartes Portfolio / Case studies */
.card9__media, .case2__media { cursor: pointer; }
.card9__media .cardvid__if, .case2__media .cardvid__if { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6; }
.card9__media[data-playing] .card9__play, .card9__media[data-playing] .card9__cap, .card9__media[data-playing] .card9__type, .card9__media[data-playing] .card9__res, .card9__media[data-playing] .card9__bar { opacity:0 !important; pointer-events:none; }
.case2__media[data-playing] .card9__type { opacity:0; }

/* ════════ CORRECTIFS AUDIT (responsive + contraste) ════════ */
/* P0 · petits mobiles : grilles internes en 1 colonne */
@media (max-width: 540px){
  .method { grid-template-columns: 1fr !important; }
  .method__step { border-right: none !important; border-bottom: 1px solid var(--line); padding: 26px 0 !important; min-height: 0 !important; }
  .method__step:last-child { border-bottom: none; }
}
@media (max-width: 440px){
  .works-grid, .roles, .team-grid { grid-template-columns: 1fr !important; }
}
/* cibles tactiles ≥44px sur écrans tactiles */
@media (hover: none){
  .filter, .wpill, .chips span, .contact__socials a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* marquees : fallback si réduction des animations (sinon contenu tronqué figé) */
@media (prefers-reduced-motion: reduce){
  .ticker__track, .brands__track, .marquee__track, .reelstrip__track { animation: none !important; }
  .ticker, .brands__marq, .marquee, .reelstrip__marq { overflow-x: auto; }
}
/* contraste : surfaces "carte" qui étaient pensées pour fond sombre */
.join { background: var(--cream-2); border: 1px solid var(--line); }
.contact__form { background: var(--cream-2); border: 1px solid var(--line); }
.field input, .field select, .field textarea { background: var(--cream); border-color: var(--line); }

/* Réalisations : lecture au clic des reels/cas (vrais Shorts) */
.case__media { position: relative; cursor: pointer; }
.reel .cardvid__if, .case__media .cardvid__if { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6; border-radius: inherit; }
.reel[data-playing] .reel__play, .reel[data-playing] .reel__meta, .reel[data-playing] .reel__tag, .reel[data-playing] .reel__live { opacity:0 !important; pointer-events:none; }

/* polish : badge hero qui ne déborde plus, micro-texte équilibré */
.hero__micro { text-wrap: balance; }
.hero__badge { text-align: center; }
@media (max-width: 560px){
  .hero__badge { font-size: .64rem; letter-spacing: .05em; padding: .5em .8em; gap: .4em; line-height: 1.35; }
}

/* ════════ HERO 2.0 — fond mural blanc + 2 sliders vidéo verticaux ════════ */
[data-theme="snow"] { --bg: #ECE8DE; --fg: var(--ink); --bg-soft: #F4F1E9; }
.hero { min-height: 100svh; padding: clamp(96px,12vh,134px) 0 clamp(68px,8vh,92px) !important; align-items: center;
  background-color: #EDEBE4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.052' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.013' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.32'/%3E%3C/svg%3E"),
    radial-gradient(130% 95% at 30% -10%, rgba(255,255,255,.6), transparent 60%);
  background-size: 240px 240px, 620px 620px, cover, cover;
  background-blend-mode: multiply, soft-light, soft-light, screen; }
.hero__grid { position: relative; z-index: 2; width: min(100% - var(--edge)*2, 1500px); margin-inline: auto; display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px,4vw,68px); align-items: center; }
.hero__inner { position: static; z-index: 2; width: auto; margin: 0; padding: 0; text-align: left; align-items: flex-start; }
.hero__badge, .hero__rating { align-self: flex-start; }
.hero__title { font-size: clamp(1.8rem, .9rem + 2.5vw, 3.05rem); line-height: 1.02; letter-spacing: -.015em; max-width: none; margin-inline: 0; }
.hero__sub { text-align: left; margin: 1.2em 0 0; max-width: 40ch; }
.hero__actions { justify-content: flex-start; }
.hero__stats { justify-content: flex-start; }
/* deux sliders verticaux */
.hero__media { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.3vw,18px); height: min(600px, calc(100svh - 232px)); align-self: center;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.hero__slider { overflow: hidden; }
.hero__col2 { display: flex; flex-direction: column; gap: clamp(12px,1.3vw,18px); will-change: transform; }
.hero__col2--up { animation: heroSlideUp 36s linear infinite; }
.hero__col2--down { animation: heroSlideDown 30s linear infinite; }
@keyframes heroSlideUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes heroSlideDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero__media:hover .hero__col2 { animation-play-state: paused; }
.hero__media .reelcard { width: 100%; border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); box-shadow: 0 18px 44px rgba(20,18,6,.22); }
@media (prefers-reduced-motion: reduce){ .hero__col2 { animation: none !important; } }
/* responsive : empilé, sliders dessous */
@media (max-width: 920px){
  .hero__grid { grid-template-columns: 1fr; gap: clamp(26px,6vw,44px); }
  .hero__inner { text-align: center; align-items: center; }
  .hero__badge, .hero__rating { align-self: center; }
  .hero__title { max-width: none; margin-inline: auto; }
  .hero__sub { text-align: center; margin-inline: auto; }
  .hero__actions, .hero__stats { justify-content: center; }
  .hero__media { height: 360px; max-width: 440px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px){ .hero__title { font-size: clamp(1.45rem, 5.2vw, 2rem); } }
@media (max-width: 460px){ .hero__media { height: 320px; } }

/* lime visible sur fond blanc du hero : bords nets */
.hero .btn--primary { border: 1.5px solid var(--lime-deep); }
.hero .hero__badge { border-width: 1.5px; box-shadow: 0 2px 0 color-mix(in oklab, var(--lime-deep) 35%, transparent); }

/* ════ hero : lime lisible (contour) + rythme typo équilibré ════ */
.hero__title .hl { -webkit-text-stroke: 2.5px var(--ink); text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.hero__title { font-size: clamp(1.75rem, .85rem + 2.35vw, 2.85rem); }
.hero__rating { margin-bottom: 1em; }
.hero__sub { font-size: clamp(1.08rem, .92rem + .6vw, 1.4rem); margin-top: 1.05em; line-height: 1.5; color: color-mix(in oklab, var(--ink) 86%, var(--bg)); }
.hero__actions { margin-top: 1.7em; }
.hero__micro { margin-top: 1em; }
.hero__stats { margin-top: 1.9em; }
.hero__badge { margin-bottom: 1.4em; }

/* logo de marque (image) dans le header */
.nav__logo { display: block; height: clamp(20px, 1.5vw + 12px, 28px); width: auto; }
.nav__brand { line-height: 0; }

/* ════ HEADER premium : aligné au contenu, verre fin, espacement net ════ */
.nav { padding-block: clamp(15px, 1.7vw, 23px);
  padding-inline: max(var(--edge), calc((100% - 1500px) / 2));
  background: color-mix(in oklab, #F1ECE0 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); }
.nav.is-solid { padding-block: clamp(11px, 1.3vw, 16px);
  background: color-mix(in oklab, #F1ECE0 84%, transparent);
  border-bottom-color: color-mix(in oklab, var(--ink) 14%, transparent); }
.nav__cta { box-shadow: 0 6px 18px color-mix(in oklab, var(--lime-deep) 30%, transparent); }
/* espacement du haut du hero : gap net sous le header */
.hero { padding-top: clamp(120px, 14.5vh, 162px) !important; }
@media (max-width: 920px){ .hero { padding-top: clamp(104px, 15vh, 130px) !important; } }

/* ════════ HEADER « de fou » : nav en flux + 2 boutons (rejoindre + rdv) ════════ */
.nav__links { position: static; left: auto; transform: none; margin-inline: auto; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__btn { display: inline-flex; align-items: center; gap: .55em; padding: .78em 1.3em; border-radius: var(--r-pill); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; white-space: nowrap; line-height: 1; transition: transform var(--t) var(--ease), background-color var(--t), color var(--t), box-shadow var(--t), border-color var(--t); }
.nav__btn--ghost { border: 1.5px solid color-mix(in oklab, var(--ink) 72%, transparent); color: var(--ink); background: transparent; }
.nav__btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.nav__btn--cal { background: var(--lime); color: var(--ink); border: 1.5px solid var(--lime-deep); box-shadow: 0 6px 18px color-mix(in oklab, var(--lime-deep) 32%, transparent); }
.nav__btn--cal:hover { background: var(--lime-2); transform: translateY(-2px); box-shadow: 0 11px 28px color-mix(in oklab, var(--lime-deep) 45%, transparent); }
.nav__pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.nav__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); animation: navPulse 1.9s var(--ease) infinite; }
@keyframes navPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .nav__pulse::after { animation: none; } }
/* mobile : header → burger, boutons dans le menu */
@media (max-width: 1000px){ .nav__links, .nav__actions { display: none; } .nav__burger { display: flex; } }
.menu__actions { display: flex; flex-direction: column; gap: 12px; width: min(360px, 82%); margin-top: 6px; }
.menu__actions .btn { width: 100%; }

/* ════════════════ PASSE BANGER ════════════════ */
/* a11y : focus visible global (régression corrigée) */
:focus-visible { outline: 2.5px solid var(--lime-deep); outline-offset: 3px; border-radius: 4px; }

/* texture-mur diffusée aux sections sombres (signature du hero partout) */
[data-theme="anchor"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='gn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gn)' opacity='0.05'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='cn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.012' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cn)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: 220px 220px, cover;
  background-blend-mode: overlay, soft-light;
}

/* nav adaptatif : barre sombre + logo blanc sur sections sombres */
.nav--light { color: var(--on-anchor); }
.nav--light .nav__logo { filter: invert(1) brightness(1.08); }
.nav--light .nav__links a { color: var(--on-anchor); }
.nav--light .nav__btn--ghost { border-color: color-mix(in oklab, #fff 65%, transparent); color: #fff; }
.nav--light .nav__btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.nav.is-solid.nav--light { background: color-mix(in oklab, var(--anchor) 80%, transparent); border-bottom-color: color-mix(in oklab, #fff 12%, transparent); }
.nav--light .nav__burger span { background: #fff; }

/* PORTFOLIO : cadres "téléphone" comme le hero + désalignement vivant */
.card9__media { border-radius: 22px !important; box-shadow: 0 18px 48px rgba(47,45,11,.22), inset 0 0 0 5px rgba(247,242,223,.92), inset 0 0 0 6px rgba(47,45,11,.14) !important; }
.work__track .card9:nth-child(even) { transform: translateY(clamp(16px,3vw,44px)); }
/* .card9__bar ne ment plus : la barre ne "joue" qu'au survol */
.card9__bar span { animation-play-state: paused; }
.card9:hover .card9__bar span { animation-play-state: running; }

/* RÉSULTATS : section sombre + chiffres GÉANTS éditoriaux (le money moment) */
.cases .case2 { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.cases .cases__grid { gap: clamp(32px,3.5vw,56px); }
.case2__metric { font-size: clamp(4.2rem, 15vw, 12rem) !important; color: var(--lime) !important; line-height: .8; letter-spacing: -.02em; }
.case2__metric i { font-size: .42em; }
.case2 { grid-template-columns: clamp(190px,26vw,320px) 1fr; align-items: center; }
.case2--rev { grid-template-columns: 1fr clamp(190px,26vw,320px); }
.case2__lbl { font-size: var(--step-0); }
.case2__ctx { color: color-mix(in oklab, var(--on-anchor) 82%, transparent) !important; }
.case2__ctx strong { color: var(--lime) !important; }
.case2__media { box-shadow: 0 18px 48px rgba(0,0,0,.4), inset 0 0 0 5px rgba(247,242,223,.9), inset 0 0 0 6px rgba(47,45,11,.14); }

/* BRANDS : bande sombre "festival", filets colonnes, plus de faux logos */
.brands { padding-block: clamp(16px,1.8vw,28px); }
.brands .wrap { display: flex; flex-direction: column; gap: clamp(14px,1.6vw,22px); }
.brands__marq { display: flex; align-items: center; }
.brands__label { color: var(--mute); }
.brand-logo { font-family: var(--mono) !important; font-size: clamp(.95rem,1.3vw,1.4rem) !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 62%, transparent) !important; padding-inline: clamp(28px,4vw,68px); border-left: 1px solid var(--line); }

/* FOOTER : vrai final — nom géant pleine largeur */
.foot__brand { font-size: clamp(3rem, 16vw, 13rem) !important; line-height: .82 !important; letter-spacing: -.02em; grid-column: 1 / -1; margin-bottom: .1em; }
.foot__brand em { font-size: .42em; }
.foot__links a { position: relative; }
.foot__links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background: var(--lime); transition: width var(--t) var(--ease); }
.foot__links a:hover::after { width:100%; }

/* fix mobile : résultats empilés + chiffre qui tient à l'écran */
@media (max-width: 760px){
  .cases .case2, .cases .case2--rev { grid-template-columns: 1fr !important; gap: clamp(18px,4vw,28px); }
  .cases .case2__media, .cases .case2--rev .case2__media { order: -1 !important; max-width: 320px; }
  .case2__metric { font-size: clamp(3.4rem, 19vw, 6.5rem) !important; }
  .case2__ctx { max-width: 100%; }
}

/* CTA final : climax resserré (plus de vide) + titre géant + texture lime */
.final { padding-block: clamp(56px, 6vw, 96px) !important; position: relative; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.013' numOctaves='3' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)' opacity='0.10'/%3E%3C/svg%3E");
  background-size: cover; background-blend-mode: soft-light; }
.final .wrap { position: relative; z-index: 1; }
.final__offer { display: inline-flex; margin-bottom: clamp(20px, 2.4vw, 32px); }
.final__title { font-size: clamp(2.5rem, 7.5vw, 6rem) !important; line-height: .96; letter-spacing: -.02em; margin: 0 auto; max-width: 16ch; }
.final__text { margin: clamp(18px,2vw,28px) auto clamp(26px,3vw,40px) !important; }
/* sécurité anti-vide : si le reveal du titre ne se déclenche pas, il reste lisible */
.no-js-reveal .clip-reveal, .clip-reveal { clip-path: inset(0 100% 0 0); }

/* ═══════════ MANIFESTE — rebuild propre (.mf) ═══════════ */
.mf { padding: clamp(60px,7vw,108px) var(--edge); }
.mf__inner { width: min(100%, 1180px); margin-inline: auto; }
.mf__eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--lime); margin: 0 0 clamp(18px,2vw,28px); }
.mf__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.mf__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.1rem, 1rem + 4.4vw, 4.8rem); line-height: .98; letter-spacing: -.01em; color: var(--on-anchor); max-width: 20ch; margin: 0; }
.mf__title em { font-style: normal; color: var(--lime); }
.mf__lead { margin: clamp(20px,2.4vw,32px) 0 clamp(40px,5vw,68px); max-width: 50ch; font-size: clamp(1.08rem, .95rem + .6vw, 1.45rem); line-height: 1.5; color: color-mix(in oklab, var(--on-anchor) 80%, transparent); }
.mf__lead strong { color: var(--lime); font-weight: 600; }
.mf__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--on-anchor) 16%, transparent); }
.mf__step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px,3vw,52px); padding: clamp(20px,2.6vw,36px) 0; border-bottom: 1px solid color-mix(in oklab, var(--on-anchor) 16%, transparent); transition: padding-left .45s var(--ease); }
.mf__step:hover { padding-left: clamp(8px,1.2vw,20px); }
.mf__num { font-family: var(--mono); font-size: var(--step--1); color: var(--lime); letter-spacing: .12em; }
.mf__word { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 1rem + 3vw, 3.8rem); line-height: 1; color: var(--on-anchor); transition: color .35s var(--ease); }
.mf__step:hover .mf__word { color: var(--lime); }
.mf__sub { font-size: var(--step-0); color: color-mix(in oklab, var(--on-anchor) 58%, transparent); text-align: right; max-width: 26ch; justify-self: end; }
@media (max-width: 680px){
  .mf__step { grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; }
  .mf__sub { grid-column: 1 / -1; text-align: left; justify-self: start; max-width: none; margin-top: 4px; }
}

/* Résultats : média plus compact (moins de vide à côté du chiffre) */
.cases .case2__media { aspect-ratio: 4/5; max-width: 360px; }
.cases .case2 { align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════
   PASSE CRAFT v20 — détail "studio" façon Bulldozer
   Vrai monospace partout + structure + hover-craft sur les sections éditoriales
   ═══════════════════════════════════════════════════════════════════════ */

/* Space Mono est plus large que Space Grotesk → on resserre le tracking des
   labels denses pour éviter tout débordement nav/boutons */
.btn, .nav__btn, .nav__links a { letter-spacing: .04em; }
.mono, .eyebrow, .reelstrip__label, .reelstrip__hint, .brand-logo { letter-spacing: .14em; }
.nav__links a { font-size: 11.5px; }
.nav__btn { font-size: 11px; padding-inline: 1.15em; }

/* 1 · EYEBROW signature — crochet technique [ ] + filet, lisible sur clair & sombre */
.eyebrow { gap: .55em; }
.eyebrow::after { content: ""; flex: 1; }

/* 2 · MANIFESTE — steps structurés : barre lime qui pousse + fond au survol */
.mf__step { position: relative; border-radius: 14px;
  margin-inline: calc(-1 * clamp(12px,1.6vw,24px)); padding-inline: clamp(12px,1.6vw,24px);
  transition: background-color .45s var(--ease), padding-left .45s var(--ease); }
.mf__step::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: var(--lime); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease); }
.mf__step:hover { background: color-mix(in oklab, var(--lime) 8%, transparent); }
.mf__step:hover::before { transform: scaleY(1); }
.mf__num { padding: .35em .6em; border: 1px solid color-mix(in oklab, var(--lime) 50%, transparent);
  border-radius: 8px; line-height: 1; }

/* 3 · SERVICES — vraie substance : tags livrables (mono) sous chaque service */
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0 clamp(22px,2.8vw,38px) clamp(40px,7vw,92px); }
.svc-tags span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: .55em .95em; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: color-mix(in oklab, var(--ink) 68%, var(--bg)); background: color-mix(in oklab, var(--cream) 40%, transparent);
  transition: border-color var(--t) var(--ease), color var(--t), background-color var(--t), transform var(--t) var(--ease); }
.svc-tags span:hover { border-color: var(--lime-deep); color: var(--ink);
  background: color-mix(in oklab, var(--lime) 18%, transparent); transform: translateY(-2px); }
.svcs__list .acc__head { transition: background-color .4s var(--ease); }
/* sur desktop, l'item ouvert porte un liseré lime à gauche → hiérarchie claire */
@media (min-width: 1025px){
  .svcs__list .acc__item { position: relative; padding-left: clamp(14px,1.5vw,26px); }
  .svcs__list .acc__item::before { content: ""; position: absolute; left: 0; top: clamp(20px,2.6vw,40px); bottom: clamp(20px,2.6vw,36px);
    width: 2px; background: var(--line); transition: background-color .4s var(--ease); }
  .svcs__list .acc__item:hover::before { background: var(--lime-deep); }
}

/* 4 · AVIS — guillemet éditorial + lift premium + accent au survol */
.tm { position: relative; overflow: hidden; transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.tm::before { content: "\201C"; position: absolute; top: -.12em; right: .12em; z-index: 0;
  font-family: var(--serif); font-style: italic; font-size: 8rem; line-height: 1;
  color: color-mix(in oklab, var(--ink) 8%, transparent); pointer-events: none; }
.tm > * { position: relative; z-index: 1; }
.tm:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--lime-deep) 55%, var(--line));
  box-shadow: 0 18px 50px rgba(20,20,12,.10); }
.tm__stars { letter-spacing: 3px; }

/* 5 · ÉQUIPE — légende façon fiche + révélation du rôle */
.member figcaption strong { font-size: var(--step-1); letter-spacing: -.01em; }
.member figcaption .mono { font-size: 10.5px; letter-spacing: .12em; color: var(--mute); }
.member__ph { position: relative; }
.member__ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent); pointer-events: none; }

/* 6 · CASES — métriques avec petit label technique au-dessus (rythme éditorial) */
.case2__lbl { letter-spacing: .14em; }
.case2__plat { letter-spacing: .14em; }

/* 7 · CARTES PORTFOLIO — meta plus net en vrai mono */
.card9__foot, .card9__type, .card9__res { letter-spacing: .08em; }

/* 8 · Reveal media — léger zoom-in à l'entrée (robuste : visible même sans is-in) */
.reveal-zoom { overflow: hidden; }
.reveal-zoom > img, .reveal-zoom > video { transform: scale(1.06); transition: transform 1.4s var(--ease-cine); }
.reveal-zoom.is-in > img, .reveal-zoom.is-in > video { transform: none; }

/* ═══════════ PIPELINE v21 — process repensé en timeline connectée ═══════════ */
.process__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: clamp(34px,4vw,56px);
  padding-bottom: clamp(16px,1.8vw,24px); border-bottom: 1px solid var(--line); }
.process__label { color: var(--ink); letter-spacing: .14em; }
.process__count { color: var(--mute); letter-spacing: .12em; }

.process__pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px,1.8vw,30px); }
.pstep { display: flex; flex-direction: column; align-items: flex-start; }
/* numéro éditorial, hauteur FIXE → la ligne tombe toujours pile sur les points */
.pstep__no { font-family: var(--display); font-size: clamp(1.9rem,3.2vw,3rem); line-height: 1;
  height: clamp(34px,3.4vw,52px); display: flex; align-items: flex-end; color: var(--lime-deep); }
/* rail : le point + le segment de ligne vers l'étape suivante */
.pstep__rail { position: relative; align-self: stretch; display: flex; align-items: center;
  height: clamp(20px,2vw,28px); margin: clamp(10px,1.1vw,16px) 0 clamp(14px,1.5vw,22px); }
.pstep__rail::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  left: 7px; right: calc(-1 * clamp(12px,1.8vw,30px) - 7px); height: 2px;
  background: color-mix(in oklab, var(--lime-deep) 38%, var(--line)); }
.pstep:last-child .pstep__rail::before { display: none; }
.pstep__dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%;
  background: var(--lime-deep); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in oklab, var(--lime-deep) 45%, var(--line));
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pstep:hover .pstep__dot { transform: scale(1.35);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--lime-deep), 0 0 16px color-mix(in oklab, var(--lime-deep) 60%, transparent); }
.pstep__t { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  font-size: var(--step-0); margin-bottom: .35rem; transition: color .35s var(--ease); }
.pstep:hover .pstep__t { color: var(--lime-deep); }
.pstep__d { font-size: var(--step--1); color: var(--mute); line-height: 1.45; max-width: 20ch; }

@media (max-width: 760px){
  .process__pipe { grid-template-columns: 1fr; gap: 0; }
  .pstep { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px;
    padding: clamp(14px,3vw,20px) 0; border-bottom: 1px solid var(--line); }
  .pstep:last-child { border-bottom: none; }
  .pstep__no { height: auto; grid-row: 1 / span 2; align-self: center; font-size: clamp(2rem,9vw,2.8rem); }
  .pstep__rail { display: none; }
  .pstep__t { margin: 0; }
  .pstep__d { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PASS UNIFORME v22 — normalisations globales + rebuilds (brands, interv)
   Tout réutilise les composants du design system. Zéro nouvelle grammaire.
   ═══════════════════════════════════════════════════════════════════════ */

/* GLOBAL #1 — eyebrow : espacement IDENTIQUE vers le titre partout (sauf en-tête flex) */
.eyebrow { margin-bottom: clamp(14px, 1.5vw, 22px); }
.process__top .eyebrow { margin-bottom: 0; }

/* ── BRANDS rebuild : section plateformes (cartes unifiées modèle carte §4c) ── */
.brands.section { padding-block: var(--section); border-bottom: none; }
.brands .wrap { display: block; }                 /* annule le flex-column hérité (l.982) */
.brands__title { max-width: 20ch; margin-bottom: clamp(34px, 4vw, 60px); }
.plats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.plat { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: clamp(20px, 2vw, 30px); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-soft); transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.plat:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--lime-deep) 55%, var(--line)); box-shadow: var(--sh-md); }
.plat .mf__num { color: var(--lime-deep); border-color: color-mix(in oklab, var(--lime-deep) 50%, transparent); }
.plat__n { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); line-height: .95; margin-top: .15rem; }
.plat__f { color: var(--mute); letter-spacing: .1em; }
.plat__d { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.brands__also { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(30px, 3.4vw, 50px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--line); }
.brands__also-l { flex: none; color: var(--mute); letter-spacing: .12em; }
.brands__also .brands__marq { flex: 1; min-width: 0; }
.brands__also .brand-logo:first-child { border-left: none; }
@media (max-width: 900px){ .plats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .plats { grid-template-columns: 1fr; }
  .brands__also { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* ── INTERVIEWEURS rebuild : réseau terrain (stats Anton + chips, plus de placeholders) ── */
.interv__head.process__top { margin-bottom: clamp(18px, 2.2vw, 28px); }
.interv__sub { max-width: 56ch; font-size: var(--step-1); color: var(--ink-2);
  margin-bottom: clamp(34px, 4vw, 56px); }
.interv__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 48px);
  margin-bottom: clamp(28px, 3vw, 44px); }
.istat { display: flex; flex-direction: column; gap: .4rem; }
.istat__n { font-family: var(--display); font-size: clamp(2.6rem, 1.4rem + 4vw, 4.4rem);
  line-height: .85; color: var(--lime-deep); }
.istat__n i { font-style: normal; font-size: .5em; vertical-align: .14em; }
.istat__l { color: var(--ink); letter-spacing: .12em; }
.istat__d { font-size: var(--step--1); color: var(--mute); max-width: 30ch; line-height: 1.45; }
.interv__tags { margin-bottom: clamp(16px, 2vw, 24px); }
.interv__note { color: var(--mute); letter-spacing: .1em; }
@media (max-width: 760px){ .interv__stats { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 32px); } }

/* ── SERVICES : l'eyebrow nouvellement ajouté hérite du standard, juste l'espace ── */
.svcs__head .eyebrow { margin-bottom: clamp(16px, 1.8vw, 24px); }

/* ── FOOTER : o serif lime + motion + liens lisibles ── */
.foot__brand em { font-family: var(--serif); font-style: italic; color: var(--lime); font-size: .92em; }
.foot__links-l { color: var(--mute-d); letter-spacing: .14em; margin-bottom: .55rem; width: 100%; }
.foot__links a { color: color-mix(in oklab, var(--cream) 74%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   ALIGNEMENT DA v24 — tout calé sur le HERO validé
   Lime VIF #D7FF3F (pas l'olive lime-deep), chiffres en ENCRE, cartes nettes
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Accent de titre sur fond clair = lime VIF + contour encre (identique hero), fini l'olive */
[data-theme="cream"] .display .hl, [data-theme="paper"] .display .hl,
[data-theme="ivory"] .display .hl, [data-theme="snow"] .display .hl {
  color: var(--lime);
  -webkit-text-stroke: 2px var(--ink); text-stroke: 2px var(--ink); paint-order: stroke fill;
}

/* 2 · Gros chiffres sur fond clair = ENCRE (comme les stats du hero), pas de vert olive */
.istat__n { color: var(--ink); }
.istat__n i { color: var(--ink); }

/* 3 · Numéros encadrés sur fond clair = aplat lime VIF + encre (comme le badge hero) */
.plat .mf__num { background: var(--lime); color: var(--ink);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent); }

/* 4 · Cartes : surface claire NETTE (fini le beige boueux paper-sur-crème) */
.plat, [data-theme="cream"] .tm {
  background: color-mix(in oklab, #fff 62%, var(--cream));
  border-color: color-mix(in oklab, var(--ink) 14%, transparent); }
.plat:hover, [data-theme="cream"] .tm:hover {
  border-color: color-mix(in oklab, var(--ink) 30%, transparent);
  box-shadow: 0 14px 40px rgba(20,20,12,.08); }

/* 5 · Numéros d'index de service (01-04) + pipeline sur fond clair = encre, accent lime en fill seulement */
.svcs__no { color: var(--ink); }
.pstep__no { color: var(--ink); }

/* ═══════════ AVIS v28 — DA propre (crème + cartes blanches) + citations ≤ 2 lignes ═══════════ */
.avis .tm blockquote {
  font-size: clamp(1.02rem, .92rem + .5vw, 1.3rem); line-height: 1.38; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.avis .tm { gap: 1rem; }
@media (max-width: 560px){ .avis .tm blockquote { font-size: 1rem; line-height: 1.34; } }

/* ═══════════ TITRES v29 — jamais plus de 2 lignes ═══════════ */
/* Manifeste : « Le contenu ne manque pas. » tient sur 1 ligne → 2 lignes au total */
.mf__title { max-width: none; font-size: clamp(1.6rem, .75rem + 3vw, 3.8rem); }
/* équilibrage des titres de section (répartition propre des lignes) */
h2.display, h3.display, .display.d-lg { text-wrap: balance; }
/* CTA final : 2 lignes (le <br> fait la coupe, plus de débordement) */
.final__title { max-width: none !important; font-size: clamp(2.2rem, 6.2vw, 5.2rem) !important; }

/* CTA final v31 — police calée pour 2 lignes même avec les mots larges (MARQUE/MIEUX) */
.final__title { font-size: clamp(1.9rem, 4.6vw, 4.1rem) !important; line-height: .98; }

/* ═══════════════════════════════════════════════════════════════════════
   VRAI FOOTER v32 — pitch+CTA + 4 colonnes (nav/services/studio/réseaux) + légal
   ═══════════════════════════════════════════════════════════════════════ */
.foot { padding: clamp(56px,7vw,104px) 0 clamp(26px,3vw,38px); }
.foot > .wrap { display: block; }
.foot__main { display: grid; grid-template-columns: 1.15fr 2fr; gap: clamp(36px,5vw,90px);
  padding-bottom: clamp(40px,5vw,72px); }
.foot__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.foot__pitch { font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.4rem,1rem+1.5vw,2.25rem); line-height: 1.02; letter-spacing: .002em; max-width: 16ch; }
.foot__cta { margin-top: .2rem; }
.foot__mail { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in oklab,var(--cream) 80%,transparent);
  border-bottom: 1px solid color-mix(in oklab,var(--cream) 30%,transparent); padding-bottom: 3px;
  transition: color var(--t), border-color var(--t); }
.foot__mail:hover { color: var(--lime); border-color: var(--lime); }
.foot__nav { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,2.4vw,38px); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.foot__h { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em;
  color: var(--mute-d); margin-bottom: .35rem; }
.foot__col a { color: color-mix(in oklab,var(--cream) 72%,transparent); font-size: var(--step-0);
  transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.foot__col a:hover { color: var(--lime); transform: translateX(4px); }
.foot__hire { color: var(--lime) !important; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; }
.foot__hire::after { content: "→"; transition: transform var(--t) var(--ease); }
.foot__hire:hover { transform: none; }
.foot__hire:hover::after { transform: translateX(3px); }
.foot__brand { display: block; width: 100%; font-size: clamp(2.6rem,15vw,12rem) !important; line-height: .82 !important;
  letter-spacing: -.02em; margin: clamp(8px,1.4vw,22px) 0 0 !important; color: var(--cream); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--gap); flex-wrap: wrap;
  margin-top: clamp(34px,4vw,58px); padding-top: clamp(20px,2.4vw,32px); border-top: 1px solid var(--line-d); }
.foot__copy { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-d); }
.foot__legal-links { display: flex; gap: clamp(14px,2vw,28px); flex-wrap: wrap; }
.foot__legal-links a { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mute-d); transition: color var(--t); }
.foot__legal-links a:hover { color: var(--lime); }
@media (max-width: 900px){
  .foot__main { grid-template-columns: 1fr; gap: clamp(30px,6vw,46px); }
  .foot__nav { grid-template-columns: repeat(2,1fr); gap: 28px 20px; }
}
@media (max-width: 480px){
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ═══════════ FOOTER v33 — épuré : logo medium + tagline + CTA lien (plus de wordmark géant ni bouton lime) ═══════════ */
.foot__logo { height: clamp(28px,3.4vw,44px); width: auto; filter: invert(1) brightness(1.08); margin-bottom: .2rem; }
.foot__tagline { color: color-mix(in oklab,var(--cream) 68%,transparent); font-size: var(--step-0); line-height: 1.5; max-width: 34ch; }
.foot__cta-link { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1); font-weight: 600;
  color: var(--lime); display: inline-flex; align-items: center; gap: .55em; width: fit-content;
  border-bottom: 1.5px solid color-mix(in oklab,var(--lime) 50%,transparent); padding-bottom: 4px; margin-top: .35rem;
  transition: color var(--t), border-color var(--t); }
.foot__cta-link span { transition: transform var(--t) var(--ease); }
.foot__cta-link:hover { border-color: var(--lime); }
.foot__cta-link:hover span { transform: translateX(4px); }
.foot__bottom { margin-top: 0; }

/* ═══════════ RÉSULTATS v35 — carrousel compact auto-défilant (1 écran au lieu de 3) ═══════════ */
.cases__carousel { position: relative; }
.cases__viewport { overflow: hidden; }
.cases__stage { display: flex; will-change: transform; transition: transform .7s var(--ease-cine); }
.cases__stage .case2 { flex: 0 0 100%; min-width: 0; }
.cases__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: clamp(22px,3vw,40px); padding-top: clamp(18px,2vw,26px);
  border-top: 1px solid var(--line); }
.cases__dots { display: flex; gap: 12px; }
.cases__dot { width: 34px; height: 5px; border-radius: 999px; padding: 0; cursor: pointer;
  background: color-mix(in oklab, var(--on-anchor) 22%, transparent);
  transition: background var(--t) var(--ease), width var(--t) var(--ease); }
.cases__dot:hover { background: color-mix(in oklab, var(--on-anchor) 40%, transparent); }
.cases__dot.is-active { background: var(--lime); width: 54px; }
.cases__count { color: var(--mute-d); letter-spacing: .14em; }
@media (prefers-reduced-motion: reduce){ .cases__stage { transition: none; } }

/* ═══════════ HERO v37 — VRAI mur en plâtre (taches enduit + truelle + grain + lumière) ═══════════ */
.hero {
  background-color: #E7E2D6 !important;
  background-image:
    radial-gradient(135% 105% at 16% -6%, rgba(255,255,255,.58), rgba(255,255,255,0) 46%),
    radial-gradient(125% 125% at 104% 108%, rgba(26,22,12,.13), rgba(26,22,12,0) 44%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.11'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.05' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.20'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.014' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.55'/%3E%3C/svg%3E") !important;
  background-size: cover, cover, 200px 200px, 560px 560px, cover !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-blend-mode: screen, multiply, multiply, soft-light, soft-light !important;
}

/* ═══════════ HERO STATS v38 — libellés toujours sur 1 ligne (« vidéos produites ») ═══════════ */
.hstat__l { white-space: nowrap; letter-spacing: .06em; }
.hero__stats { gap: clamp(18px, 4vw, 60px); }
@media (max-width: 860px){
  .hstat__l { font-size: clamp(8px, 1.6vw, 11px); letter-spacing: .03em; }
  .hero__stats { gap: clamp(12px, 3vw, 30px); }
}

/* ═══════════ PIPELINE v39 — étape active qui progresse 01→05 (vivant) ═══════════ */
.pstep { transition: opacity .45s var(--ease); }
.pstep:not(.is-active) { opacity: .68; }
.pstep__no { transition: color .45s var(--ease); }
.pstep__t { transition: color .45s var(--ease); }
.pstep__dot { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pstep.is-active .pstep__no { color: var(--lime-deep); }
.pstep.is-active .pstep__t { color: var(--lime-deep); }
.pstep.is-active .pstep__dot { transform: scale(1.5);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--lime-deep), 0 0 16px color-mix(in oklab, var(--lime-deep) 65%, transparent); }
@media (prefers-reduced-motion: reduce){ .pstep:not(.is-active){ opacity: 1; } }

/* ═══════════ HERO v40 — VRAI mur en RELIEF (feDiffuseLighting = bosses de plâtre éclairées) ═══════════ */
.hero {
  background-color: #E5E0D3 !important;
  background-image:
    radial-gradient(140% 110% at 14% -8%, rgba(255,255,255,.5), rgba(255,255,255,0) 46%),
    radial-gradient(130% 130% at 106% 112%, rgba(22,18,10,.17), rgba(22,18,10,0) 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gr)' opacity='0.07'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='pl' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015 0.021' numOctaves='4' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.2' diffuseConstant='1' result='l'%3E%3CfeDistantLight azimuth='235' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pl)' opacity='0.7'/%3E%3C/svg%3E") !important;
  background-size: cover, cover, 180px 180px, 700px 700px !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
  background-position: center !important;
  background-blend-mode: screen, multiply, multiply, overlay !important;
}

/* Portfolio : titres des cartes plus rognés (cartes décalées + overflow) */
.work.section { padding-bottom: clamp(74px, 9vw, 132px); }
.work__rail { overflow: visible; }
.card9__foot { white-space: nowrap; }

/* ═══════════ PIPELINE v41 — nouvelle FORME : cartes numérotées (au lieu de la liste) ═══════════ */
.process__pipe { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.2vw, 18px); }
.pstep { display: flex !important; flex-direction: column; align-items: flex-start; gap: .4rem;
  padding: clamp(18px,1.5vw,26px); border: 1px solid var(--line); border-radius: var(--r-md);
  background: color-mix(in oklab, #fff 58%, var(--cream));
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease), opacity .45s var(--ease); }
.pstep__rail { display: none !important; }
.pstep__no { height: auto !important; margin: 0 !important; line-height: 1;
  font-size: clamp(1.7rem, 1rem + 1.5vw, 2.5rem) !important; color: var(--lime-deep); }
.pstep__t { font-size: var(--step-0); margin: .15rem 0 0; }
.pstep__d { font-size: var(--step--1); max-width: none; color: var(--mute); line-height: 1.4; }
.pstep:not(.is-active) { opacity: .92; }
.pstep.is-active { transform: translateY(-5px); border-color: var(--lime-deep);
  background: color-mix(in oklab, var(--lime) 13%, #fff); box-shadow: 0 12px 34px rgba(20,20,12,.10); }
.pstep.is-active .pstep__no, .pstep.is-active .pstep__t { color: var(--lime-deep); }
@media (max-width: 1024px){ .process__pipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px){ .process__pipe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .process__pipe { grid-template-columns: 1fr; } }

/* ═══════════ PIPELINE v42 — "lecteur de process" : chiffre géant + nav + barre ═══════════ */
.pipe { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px,5vw,80px); align-items: center; }
.pipe__stage { display: flex; align-items: center; gap: clamp(16px,2.5vw,44px); min-height: clamp(180px,22vw,300px); }
.pipe__bignum { font-size: clamp(5rem, 15vw, 14rem); line-height: .78; flex: none;
  color: var(--lime); -webkit-text-stroke: 3px var(--ink); text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pipe__stagebody { display: flex; flex-direction: column; gap: .5rem; }
.pipe__steptag { color: var(--mute); letter-spacing: .14em; }
.pipe__bigtitle { font-size: clamp(2rem, 1rem + 3vw, 4rem); line-height: .95; }
.pipe__bigdesc { font-size: var(--step-1); color: var(--ink-2); max-width: 30ch; }
.pipe__stage.is-swap .pipe__bignum, .pipe__stage.is-swap .pipe__stagebody { animation: pipeSwap .5s var(--ease); }
@keyframes pipeSwap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pipe__nav { display: flex; flex-direction: column; }
.pipe__navitem { display: flex; align-items: center; gap: clamp(14px,1.5vw,24px); width: 100%; text-align: left;
  padding: clamp(13px,1.4vw,20px) clamp(6px,1vw,14px); border-bottom: 1px solid var(--line); cursor: pointer; background: none;
  transition: padding-left .4s var(--ease), opacity .4s var(--ease), background .4s var(--ease); }
.pipe__navitem:first-child { border-top: 1px solid var(--line); }
.pipe__navno { color: var(--mute); transition: color .4s; flex: none; }
.pipe__navt { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.1rem,1.6vw,1.6rem); line-height: 1; transition: color .4s; }
.pipe__navitem:not(.is-active) { opacity: .5; }
.pipe__navitem:hover { opacity: .85; padding-left: clamp(14px,1.6vw,26px); }
.pipe__navitem.is-active { opacity: 1; padding-left: clamp(14px,1.6vw,26px); }
.pipe__navitem.is-active .pipe__navno, .pipe__navitem.is-active .pipe__navt { color: var(--lime-deep); }
.pipe__bar { height: 3px; background: var(--line); margin-top: clamp(14px,1.6vw,22px); border-radius: 3px; overflow: hidden; }
.pipe__bar span { display: block; height: 100%; width: 20%; background: var(--lime-deep); border-radius: 3px; transition: width .5s var(--ease); }
@media (max-width: 860px){ .pipe { grid-template-columns: 1fr; gap: clamp(22px,5vw,38px); } .pipe__stage { min-height: 0; } }
@media (prefers-reduced-motion: reduce){ .pipe__stage.is-swap .pipe__bignum, .pipe__stage.is-swap .pipe__stagebody { animation: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE DE BLOG — gabarit prose lisible (conforme DA)
   ═══════════════════════════════════════════════════════════════════════ */
.article-hero { padding: clamp(118px,15vh,160px) var(--edge) clamp(28px,3vw,44px); }
.article-hero__wrap { width: min(100%, 820px); margin-inline: auto; }
.article-bc { display: flex; gap: .6em; align-items: center; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1); color: var(--mute); margin-bottom: 1.4em; }
.article-bc a { color: var(--mute); transition: color var(--t); }
.article-bc a:hover { color: var(--lime-deep); }
.article-cat { display: inline-block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; padding: .45em .85em; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); margin-bottom: 1.1em; }
.article-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 1rem+3.4vw, 3.6rem); line-height: 1; letter-spacing: -.012em; text-wrap: balance; max-width: 22ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin-top: 1.2em; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1); color: var(--mute); }
.article-cover { width: min(100%, 1040px); margin: clamp(28px,3.5vw,52px) auto 0; aspect-ratio: 16/8; border-radius: var(--r-lg); background: center/cover no-repeat; box-shadow: var(--sh-md); }
.article-prose { width: min(100%, 720px); margin-inline: auto; padding-block: clamp(36px,4vw,64px); }
.article-prose > p { font-size: var(--step-1); line-height: 1.72; color: var(--ink-2); margin: 0 0 1.25em; }
.article-prose > p:first-child { font-size: clamp(1.2rem,1rem+.7vw,1.5rem); color: var(--ink); }
.article-prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem,1rem+1.8vw,2.3rem); line-height: 1; letter-spacing: -.01em; margin: 1.8em 0 .55em; text-wrap: balance; }
.article-prose h2 .hl { color: var(--lime-deep); }
.article-prose h3 { font-size: var(--step-2); margin: 1.4em 0 .4em; }
.article-prose ul, .article-prose ol { margin: 0 0 1.25em; padding-left: 1.3em; display: grid; gap: .5em; }
.article-prose li { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
.article-prose strong { color: var(--ink); }
.article-prose a { color: var(--lime-deep); text-decoration: underline; text-underline-offset: 3px; }
.article-callout { border: 1px solid color-mix(in oklab, var(--lime-deep) 40%, var(--line)); background: color-mix(in oklab, var(--lime) 10%, #fff); border-radius: var(--r-md); padding: clamp(18px,2vw,28px); margin: 1.6em 0; }
.article-callout p { margin: 0; font-size: var(--step-1); line-height: 1.55; color: var(--ink); }
.article-callout .article-callout__l { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1); color: var(--lime-deep); margin-bottom: .4em; }
.article-faq { width: min(100%, 720px); margin: 0 auto; }
.article-faq h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem,1rem+1.8vw,2.3rem); margin-bottom: .8em; }
.article-share { width: min(100%,720px); margin: clamp(28px,3vw,44px) auto 0; padding-top: clamp(20px,2vw,28px); border-top: 1px solid var(--line); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.article-share span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--1); color: var(--mute); }
.article-share a { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color var(--t); }
.article-share a:hover { color: var(--lime-deep); }