/* ═══════════════════════════════════════════════════════════════════════
   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-monospace, "SF Mono", monospace;

  /* É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(1.75rem, 1.3rem + 2.1vw, 2.9rem);

  /* Espace — généreux mais rythmé */
  --edge:    clamp(20px, 4.5vw, 88px);
  --section: clamp(72px, 9vw, 144px);
  --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: .45s; --t-med: .8s; --t-slow: 1.2s;

  --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(40px); transition: opacity var(--t-med) var(--ease), transform var(--t-med) 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; }
@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); }
@media (min-width: 1025px) {
  .svcs__list .acc__body { max-height: none !important; }
  .svcs__list .acc__head i { display: none; }
  .svcs__list .acc__head { cursor: default; }
}

/* ── 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: #ECE8DD;
  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.08'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='820'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.22'/%3E%3C/svg%3E"),
    radial-gradient(125% 90% at 30% -8%, rgba(255,255,255,.55), transparent 58%);
  background-size: 240px 240px, 820px 820px, cover;
  background-blend-mode: multiply, 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; } }