/* ==============================================================
   ANGLE V4 — STYLE
   ==============================================================
   TABLE DES MATIÈRES
   01. Variables / identité
   02. Base
   03. Navigation
   04. Composants communs
   05. Hero
   06. About
   07. Method
   08. Offer / pricing
   09. Format bridge
   10. Work / media
   11. Contact
   12. Animations
   13. Responsive

   Pour modifier les contenus : content.js
   Pour modifier seulement les couleurs principales : :root ci-dessous.
   ============================================================== */

/* 01. VARIABLES / IDENTITÉ -------------------------------------- */
:root {
  --bg: #09090b;
  --bg-soft: #121217;
  --paper: #e9e6df;
  --paper-deep: #d9d5ce;
  --ink: #101014;
  --text: #f2f0eb;
  --muted: #9f9aa5;
  --line: rgba(255,255,255,.15);
  --line-dark: rgba(16,16,20,.16);

  /* Palette volontairement resserrée :
     violet = identité / perspective
     orange = attention / action */
  --purple: #8b5cf6;
  --orange: #ff6a2a;

  --radius-lg: 28px;
  --radius-md: 20px;
  --pad: clamp(20px, 4vw, 64px);
  --display: "Space Grotesk", sans-serif;
  --body: "DM Sans", sans-serif;
}

/* 02. BASE ------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }

.section-dark { background: var(--bg); color: var(--text); }
.section-soft { background: var(--paper); color: var(--ink); }
.content-section { position: relative; padding: 112px var(--pad); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 500;
  background: rgba(255,255,255,.05);
}
.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--orange));
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: #fff; }
.cursor-ring {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .2s, height .2s, background .2s, border-color .2s;
}
.cursor-ring.active {
  width: 72px;
  height: 72px;
  background: rgba(139,92,246,.14);
  border-color: var(--purple);
}
.no-cursor .cursor-dot,
.no-cursor .cursor-ring { display: none; }

.site-status {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(9,9,11,.92);
  color: #fff;
  font-size: 11px;
  backdrop-filter: blur(14px);
  transition: .25s;
}
.site-status.show { opacity: 1; transform: translate(-50%, 0); }

/* 03. NAVIGATION ------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 32px));
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px 0 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(9,9,11,.67);
  backdrop-filter: blur(20px);
  box-shadow: 0 14px 50px rgba(0,0,0,.20);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-family: var(--display);
}
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
}
.brand-word { font-size: 13px; letter-spacing: .22em; }
.main-nav { display: flex; gap: clamp(16px,2.2vw,34px); font-size: 12px; }
.main-nav a { opacity: .55; transition: .2s; }
.main-nav a:hover,
.main-nav a.active { opacity: 1; }
.header-cta {
  justify-self: end;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--purple);
  font-size: 12px;
  font-weight: 600;
}

/* 04. COMPOSANTS COMMUNS ---------------------------------------- */
.section-index {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid currentColor;
  opacity: .66;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(52px, 7.2vw, 118px);
  line-height: .90;
  letter-spacing: -.06em;
  font-weight: 500;
}
.section-title span {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  opacity: .52;
}
.section-intro {
  max-width: 40ch;
  margin: 0;
  line-height: 1.65;
  opacity: .66;
}
.eyebrow {
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .65;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.button-primary { background: var(--orange); color: var(--ink); }
.button-primary:hover { background: #fff; }
.button-ghost { border: 1px solid var(--line); color: #fff; }
.button-ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }

/* 05. HERO ------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 124px var(--pad) 58px;
  overflow: hidden;
  isolation: isolate;
}
.hero-gridlines {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 86%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(139,92,246,.16), transparent 30%),
    radial-gradient(circle at 84% 46%, rgba(255,106,42,.10), transparent 30%);
}
.hero-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.orb-a {
  width: 520px;
  height: 520px;
  right: -190px;
  top: 90px;
  border: 1px solid rgba(139,92,246,.38);
  box-shadow: 0 0 140px rgba(139,92,246,.11) inset;
}
.orb-b {
  width: 220px;
  height: 220px;
  left: -80px;
  bottom: 12%;
  background: radial-gradient(circle, rgba(255,106,42,.24), transparent 70%);
  filter: blur(12px);
}
.hero-kicker {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #b9b5bf;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-main {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(50px, 7vw, 110px);
  align-items: end;
  margin-top: clamp(56px, 7vw, 100px);
}
.hero-title {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(62px, 9.5vw, 150px);
  line-height: .80;
  letter-spacing: -.07em;
  font-weight: 600;
  text-transform: uppercase;
}
.hero-line { display: block; }
.hero-line.outline {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(242,240,235,.64);
  margin-left: 7vw;
}
.hero-line.accent {
  margin-top: .2em;
  color: var(--orange);
  font-size: .64em;
  text-align: right;
}
.hero-intro {
  max-width: 43ch;
  margin: 42px 0 0;
  color: #aaa6b0;
  line-height: 1.65;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-visual-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  background: #121217;
  box-shadow: 0 34px 90px rgba(0,0,0,.30);
}
.hero-visual-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.hero-visual-card figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(9,9,11,.7);
  backdrop-filter: blur(12px);
  font-size: 9px;
  letter-spacing: .12em;
}

/* 06. ABOUT ------------------------------------------------------ */
.about-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px,9vw,150px);
  align-items: end;
  margin-top: 74px;
}
.big-copy {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.principles {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 64px;
  border-top: 1px solid var(--line-dark);
}
.principle {
  padding: 28px 28px 18px 0;
  border-right: 1px solid var(--line-dark);
}
.principle + .principle { padding-left: 28px; }
.principle:last-child { border-right: 0; }
.principle strong { font-size: 10px; opacity: .46; }
.principle h3 {
  margin: 36px 0 12px;
  font-family: var(--display);
  font-size: clamp(28px,3vw,46px);
}
.principle p { max-width: 31ch; margin: 0; line-height: 1.55; opacity: .64; }

/* 07. METHOD ----------------------------------------------------- */
.method-section { padding: 96px var(--pad); }
.method-shell {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(26px,3vw,42px);
  background:
    radial-gradient(circle at 74% 34%, rgba(139,92,246,.14), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  padding: clamp(28px,5vw,72px);
}
.method-heading {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.method-heading h2 {
  margin: 16px 0 20px;
  font-family: var(--display);
  font-size: clamp(48px, 6.6vw, 105px);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 500;
}
.method-heading p {
  max-width: 50ch;
  margin: 0;
  color: #aaa6b0;
  line-height: 1.65;
}
.method-visual {
  position: absolute;
  right: -80px;
  top: -100px;
  width: min(46vw, 560px);
  aspect-ratio: 1;
}
.method-ring {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  will-change: transform;
}
.ring-two {
  inset: 28%;
  border-style: dashed;
  border-color: rgba(255,106,42,.34);
}
.method-symbol {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--orange);
  font-family: var(--display);
  font-size: clamp(90px, 14vw, 190px);
  will-change: transform;
}
.method-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 90px;
  border-top: 1px solid var(--line);
}
.method-step {
  min-height: 230px;
  padding: 24px 28px 10px 0;
  border-right: 1px solid var(--line);
}
.method-step + .method-step { padding-left: 28px; }
.method-step:last-child { border-right: 0; }
.method-step > span { font-size: 10px; opacity: .45; }
.method-step h3 {
  margin: 40px 0 12px;
  font-family: var(--display);
  font-size: clamp(28px,3vw,46px);
}
.method-step p { max-width: 30ch; margin: 0; color: #aaa6b0; line-height: 1.55; }

/* 08. OFFER / PRICING ------------------------------------------- */
.offer-head,
.work-head {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 60px;
  align-items: end;
  margin: 72px 0 64px;
}
.offer-head > div { justify-self: end; max-width: 44ch; }
.offers-list {
  border-top: 1px solid var(--line);
}
.offer-card {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.offer-card summary {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) 34px;
  gap: 24px;
  align-items: center;
  min-height: 210px;
  padding: 28px 0;
  list-style: none;
  cursor: pointer;
}
.offer-card summary::-webkit-details-marker { display: none; }
.offer-summary-index,
.offer-name,
.detail-label {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.offer-summary-index { color: #77727f; align-self: start; padding-top: 4px; }
.offer-name { color: var(--orange); }
.offer-summary-main h3 {
  max-width: 20ch;
  margin: 12px 0 10px;
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
}
.offer-summary-main p {
  max-width: 48ch;
  margin: 0;
  color: #aaa6b0;
  line-height: 1.55;
}
.offer-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 20px;
  transition: transform .25s, background .25s, color .25s;
}
.offer-card[open] .offer-toggle {
  transform: rotate(45deg);
  background: var(--orange);
  color: var(--ink);
  border-color: var(--orange);
}
.offer-card summary:hover .offer-summary-main h3 { color: var(--orange); }
.offer-detail {
  display: grid;
  grid-template-columns: .65fr 1.15fr .8fr;
  gap: 50px;
  padding: 0 58px 44px 88px;
}
.offer-facts {
  display: grid;
  align-content: start;
  gap: 18px;
}
.offer-facts > div {
  display: grid;
  gap: 5px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.offer-facts span { color: #77727f; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.offer-facts strong { font-size: 12px; font-weight: 500; line-height: 1.45; }
.detail-label { color: #77727f; }
.offer-includes ul {
  display: grid;
  gap: 11px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.offer-includes li {
  position: relative;
  padding-left: 18px;
  color: #c7c3cb;
  line-height: 1.5;
  font-size: 13px;
}
.offer-includes li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.offer-deliverable p {
  margin: 16px 0 24px;
  color: #aaa6b0;
  line-height: 1.6;
  font-size: 13px;
}
.offer-cta {
  display: inline-flex;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.32);
  font-size: 12px;
}
.offer-combine {
  margin-top: 30px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--purple);
  font-family: var(--display);
  font-size: clamp(18px,2.2vw,30px);
  line-height: 1.15;
}

/* 09. FORMAT BRIDGE --------------------------------------------- */
.format-bridge {
  padding: 96px var(--pad) 110px;
  overflow: hidden;
}
.format-copy {
  width: min(1180px, 100%);
  margin: 0 auto;
}
.format-copy h2 {
  max-width: 16ch;
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 112px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 500;
}
.format-copy h2 span {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  opacity: .5;
}

/* 10. WORK / MEDIA ---------------------------------------------- */
.demo-disclaimer {
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .62;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 70px 20px;
}
.project-card { grid-column: span 6; min-width: 0; }
.project-card.wide { grid-column: span 12; }
.project-card.vertical { grid-column: span 5; }
.project-card.portrait { grid-column: 7 / span 6; padding-top: 120px; }

.project-image,
.video-shell {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg);
  background: #16161b;
}
.project-image.wide,
.video-shell.wide { aspect-ratio: 16 / 9; }
.project-image.portrait { aspect-ratio: 4 / 5; }
.video-shell.vertical { aspect-ratio: 9 / 16; max-height: 760px; }
.project-image img,
.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-poster {
  position: absolute;
  inset: 0;
  filter: saturate(.9) brightness(.78);
}
.video-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0 12%, rgba(9,9,11,.16) 44%, rgba(9,9,11,.50) 100%);
}
.video-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  transition: transform .25s, background .25s;
}
.video-play-button:hover {
  transform: translate(-50%, -50%) scale(1.07) rotate(-4deg);
  background: var(--orange);
}
.video-play-button span { margin-left: 4px; font-size: 24px; }
.youtube-fallback {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(9,9,11,.72);
  color: #fff;
  backdrop-filter: blur(12px);
  font-size: 9px;
  letter-spacing: .08em;
}
.youtube-player {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-shell.is-playing .video-play-button,
.video-shell.is-playing .youtube-fallback { display: none; }

.project-info { padding-top: 16px; }
.project-label {
  color: #77727f;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-info h3 {
  margin: 12px 0 9px;
  font-family: var(--display);
  font-size: clamp(28px,3.5vw,52px);
  line-height: 1;
  letter-spacing: -.04em;
}
.project-info p {
  max-width: 48ch;
  margin: 0;
  line-height: 1.58;
  opacity: .64;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.project-tags span {
  padding: 7px 9px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 9px;
}


/* ORIGINAL VERTICAL CASE STUDY ---------------------------------- */
.project-card.series {
  grid-column: span 12;
  padding: clamp(26px, 4vw, 56px);
  border-radius: var(--radius-lg);
  background: #101014;
  color: var(--text);
}

.vertical-case-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: 42px;
}

.vertical-client {
  margin-top: 14px;
  color: var(--orange);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.vertical-case-head h3 {
  max-width: 12ch;
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 92px);
  line-height: .91;
  letter-spacing: -.06em;
  font-weight: 500;
}

.vertical-case-copy > p {
  max-width: 46ch;
  margin: 0;
  color: #aaa6b0;
  line-height: 1.65;
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.case-meta span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #c9c5ce;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vertical-video-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.vertical-video-card { min-width: 0; }

.native-video-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  background: #050506;
  box-shadow: 0 24px 55px rgba(0,0,0,.20);
}

.native-work-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #050506;
}

.vertical-video-number {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(9,9,11,.64);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 9px;
  letter-spacing: .08em;
  pointer-events: none;
}

.vertical-video-caption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 3px 0;
}

.vertical-video-caption strong {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
}

.vertical-video-caption p {
  max-width: 24ch;
  margin: 5px 0 0;
  color: #77727f;
  font-size: 10px;
  line-height: 1.4;
}

.vertical-video-caption > span {
  flex: 0 0 auto;
  color: #77727f;
  font-size: 9px;
  letter-spacing: .08em;
}

.vertical-series-tags {
  margin-top: 28px;
}

.project-card.series .project-tags span {
  color: #c6c2ca;
  border-color: rgba(255,255,255,.14);
}

/* 11. CONTACT ---------------------------------------------------- */
.contact { padding-bottom: 34px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(50px,9vw,150px);
  padding: 100px 0 120px;
}
.contact-title {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(58px,8.2vw,132px);
  line-height: .87;
  letter-spacing: -.065em;
  font-weight: 500;
}
.contact-title span { color: var(--orange); }
.contact-copy {
  max-width: 39ch;
  margin-top: 36px;
  color: #aaa6b0;
  line-height: 1.62;
}
.contact-form { align-self: end; }
.contact-form label {
  display: grid;
  gap: 9px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.contact-form label > span {
  color: #8d8993;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  resize: vertical;
  font-family: var(--display);
  font-size: clamp(19px,2.2vw,31px);
}
.contact-form select { appearance: auto; }
.contact-form option { color: #111; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #55515d; }
.submit-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  padding: 20px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}
.submit-btn:hover { background: #fff; transform: translateY(-2px); }
.form-help { margin: 10px 0 0; color: #6f6a75; font-size: 10px; line-height: 1.5; }
.contact-statement {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 30px 0 24px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
}
.contact-statement span:first-child {
  font-size: clamp(70px,13vw,200px);
  line-height: .7;
  letter-spacing: .16em;
}
.contact-statement span:last-child {
  color: #8f8b96;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: #8f8b96;
  font-size: 10px;
}
.footer-links { display: flex; gap: 24px; }
.site-footer > a { justify-self: end; }
.site-footer a:hover { color: #fff; }

/* 12. ANIMATIONS ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.tilt-card { transform-style: preserve-3d; will-change: transform; }



/* 13. RESPONSIVE ------------------------------------------------- */
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .main-nav { display: none; }

  .hero-main,
  .about-intro,
  .offer-head,
  .work-head,
  .contact-grid { grid-template-columns: 1fr; }

  .hero-visual { max-width: 680px; margin-left: auto; }
  .hero-visual-card img { aspect-ratio: 16/11; }

  .about-media { grid-template-columns: 1fr; }
  
  .offer-head > div { justify-self: start; }

  .offer-card summary {
    grid-template-columns: 50px minmax(0,1fr) 160px 34px;
  }
  .offer-detail {
    grid-template-columns: 1fr 1fr;
    padding-left: 74px;
  }
  .offer-deliverable { grid-column: 2; }

  .project-card.vertical { grid-column: span 6; }
  .project-card.portrait { grid-column: 7 / span 6; padding-top: 60px; }
}

@media (max-width: 720px) {
  :root { --radius-lg: 20px; --radius-md: 16px; }

  .content-section { padding-top: 82px; padding-bottom: 82px; }
  .hero { padding-top: 112px; }
  .hero-kicker span:last-child { display: none; }
  .hero-main { margin-top: 46px; }
  .hero-title { font-size: clamp(55px,16vw,98px); }
  .hero-line.outline { margin-left: 0; }
  .hero-line.accent { text-align: left; }

  .section-index { grid-template-columns: 46px 1fr; }
  .section-index span:last-child { display: none; }

  .about-image img { height: 74vh; }
  .about-image figcaption { display: grid; }
  .principles,
  .method-steps { grid-template-columns: 1fr; }
  .principle,
  .method-step {
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
    padding: 26px 0;
  }
  .method-step { border-color: var(--line); }
  .principle + .principle,
  .method-step + .method-step { padding-left: 0; }
  .method-visual { opacity: .42; right: -180px; }

  .offer-card summary {
    grid-template-columns: 38px 1fr 32px;
    gap: 14px;
    min-height: 0;
    padding: 28px 0;
  }
  .offer-summary-price {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
  .offer-toggle { grid-column: 3; grid-row: 1; }
  .offer-detail {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 0 0 34px 52px;
  }
  .offer-deliverable { grid-column: auto; }


  .work-grid { grid-template-columns: 1fr; gap: 54px; }
  .project-card,
  .project-card.wide,
  .project-card.vertical,
  .project-card.portrait {
    grid-column: 1;
    padding-top: 0;
  }
  .video-shell.vertical { width: min(82vw, 430px); }

  .contact-statement { display: grid; gap: 18px; }
  .contact-statement span:first-child { font-size: 24vw; }
  .site-footer { grid-template-columns: 1fr; gap: 18px; }
  .site-footer > a { justify-self: start; }
  .footer-links { flex-wrap: wrap; }
}


@media (max-width: 980px) {
  .vertical-case-head { grid-template-columns: 1fr; }
  .vertical-video-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .project-card.series {
    padding: 24px 18px 26px;
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    border-radius: 0;
  }

  .vertical-case-head { padding: 0 2px; margin-bottom: 28px; }
  .vertical-case-head h3 { font-size: clamp(42px, 14vw, 72px); }

  .vertical-video-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 0 18px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .vertical-video-rail::-webkit-scrollbar { display: none; }
  .vertical-video-card {
    flex: 0 0 min(76vw, 330px);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* HEADER COMPACT AU SCROLL ---------------------------------------
   Après 90px de scroll, le header se fait plus discret.
   Sur ordinateur, hover / focus = retour à l'apparence normale.
   -------------------------------------------------------------- */
.site-header {
  transition:
    width .34s cubic-bezier(.2,.7,.2,1),
    height .34s cubic-bezier(.2,.7,.2,1),
    padding .34s cubic-bezier(.2,.7,.2,1),
    background .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    opacity .34s ease;
}

.site-header .brand-mark,
.site-header .brand-word,
.site-header .main-nav,
.site-header .header-cta {
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.2,.7,.2,1),
    background .28s ease,
    color .28s ease;
}

.site-header.is-scrolled:not(:hover):not(:focus-within) {
  width: min(860px, calc(100% - 48px));
  height: 46px;
  padding: 0 10px 0 13px;
  background: rgba(9,9,11,.38);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  opacity: .82;
}

.site-header.is-scrolled:not(:hover):not(:focus-within) .brand-mark {
  transform: scale(.82);
}

.site-header.is-scrolled:not(:hover):not(:focus-within) .brand-word {
  opacity: .72;
  transform: translateX(-2px) scale(.94);
}

.site-header.is-scrolled:not(:hover):not(:focus-within) .main-nav {
  opacity: .34;
  transform: scale(.96);
}

.site-header.is-scrolled:not(:hover):not(:focus-within) .header-cta {
  opacity: .58;
  transform: scale(.91);
  background: rgba(139,92,246,.58);
}

.site-header.is-scrolled:hover,
.site-header.is-scrolled:focus-within {
  width: min(1200px, calc(100% - 32px));
  height: 58px;
  padding: 0 14px 0 18px;
  background: rgba(9,9,11,.78);
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 14px 50px rgba(0,0,0,.20);
  opacity: 1;
}

.site-header.is-scrolled:hover .main-nav,
.site-header.is-scrolled:focus-within .main-nav,
.site-header.is-scrolled:hover .brand-word,
.site-header.is-scrolled:focus-within .brand-word,
.site-header.is-scrolled:hover .header-cta,
.site-header.is-scrolled:focus-within .header-cta,
.site-header.is-scrolled:hover .brand-mark,
.site-header.is-scrolled:focus-within .brand-mark {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .site-header.is-scrolled {
    width: calc(100% - 40px);
    height: 50px;
    padding: 0 10px 0 14px;
    background: rgba(9,9,11,.52);
    opacity: .92;
  }
  .site-header.is-scrolled .brand-word { opacity: .78; }
  .site-header.is-scrolled .header-cta {
    transform: scale(.93);
    opacity: .76;
  }
}


/* V4.5 — REAL WORK INTEGRATION ----------------------------------
   Les anciens visuels générés sont remplacés par des assets NOCO réels.
   ------------------------------------------------------------- */
.hero-visual-card img {
  object-fit: cover;
  filter: saturate(.93) contrast(1.02);
}

.about-image img {
  object-fit: cover;
}

/* Photography case study */
.project-card.photo-series,
.project-card.motion-series {
  grid-column: 1 / -1;
  padding-top: 18px;
}

.series-editorial-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: 38px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
}

.series-editorial-head h3 {
  max-width: 12ch;
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: clamp(42px, 5.6vw, 82px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 500;
}

.series-editorial-copy > p {
  max-width: 47ch;
  margin: 0;
  line-height: 1.62;
  opacity: .66;
}

.light-meta span {
  border-color: var(--line-dark);
  color: #514d56;
}

.photo-series-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.photo-series-item {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 20px;
  background: #d8d4ce;
}

.photo-series-item.wide { grid-column: span 7; aspect-ratio: 3 / 2; }
.photo-series-item.square { grid-column: span 5; aspect-ratio: 1; }
.photo-series-item.portrait { grid-column: span 4; aspect-ratio: 2 / 3; }

.photo-series-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}

.photo-series-item:hover img {
  transform: scale(1.025);
  filter: saturate(1.03) contrast(1.02);
}

.photo-series-item figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(9,9,11,.66);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.photo-series-item figcaption span { opacity: .58; }

/* Motion studies using local MP4 files */
.motion-study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 920px;
}

.motion-study-card { min-width: 0; }
.motion-study-shell {
  position: relative;
  overflow: hidden;
  width: min(100%, 390px);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: #070708;
}
.motion-study-card:nth-child(2) .motion-study-shell { margin-top: 72px; }
.motion-study-shell video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #050506;
}
.motion-study-index {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(9,9,11,.66);
  color: #fff;
  backdrop-filter: blur(10px);
  font-size: 9px;
  pointer-events: none;
}
.motion-study-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 390px);
  padding: 12px 2px 0;
}
.motion-study-caption strong { font-family: var(--display); font-size: 15px; font-weight: 500; }
.motion-study-caption span { opacity: .52; font-size: 9px; }

@media (max-width: 980px) {
  .series-editorial-head { grid-template-columns: 1fr; gap: 24px; }
  .photo-series-item.wide { grid-column: span 8; }
  .photo-series-item.square { grid-column: span 4; }
  .photo-series-item.portrait { grid-column: span 6; }
}

@media (max-width: 720px) {
  .photo-series-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .photo-series-grid::-webkit-scrollbar { display: none; }
  .photo-series-item,
  .photo-series-item.wide,
  .photo-series-item.square,
  .photo-series-item.portrait {
    flex: 0 0 min(78vw, 330px);
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
  }
  .motion-study-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .motion-study-grid::-webkit-scrollbar { display: none; }
  .motion-study-card { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }
  .motion-study-card:nth-child(2) .motion-study-shell { margin-top: 0; }
}


/* ==============================================================
   V4.6 — RESPONSIVE PASS
   Une vraie composition mobile, pas simplement le desktop empilé.
   ============================================================== */

.cta-label-mobile { display: none; }
.header-cta { gap: 5px; align-items: center; }

html, body { max-width: 100%; overflow-x: clip; }
.hero-main > *, .about-intro > *, .offer-head > *, .work-head > *,
.contact-grid > *, .vertical-case-head > *, .series-editorial-head > * { min-width: 0; }

@media (max-width: 720px) {
  :root {
    --pad: clamp(16px, 5vw, 22px);
    --radius-lg: 18px;
    --radius-md: 14px;
  }

  /* Header mobile : grand au départ, capsule compacte au scroll. */
  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    top: 10px;
    width: calc(100% - 20px);
    max-width: none;
    height: 50px;
    grid-template-columns: auto auto;
    justify-content: space-between;
    padding: 0 7px 0 10px;
    border-radius: 18px;
    transform: translateX(-50%);
  }

  .brand { gap: 8px; min-width: 0; }
  .brand-mark { width: 30px; height: 30px; font-size: 14px; }
  .brand-word { font-size: 11px; letter-spacing: .17em; }

  .cta-label-full { display: none; }
  .cta-label-mobile { display: inline; }
  .header-cta {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .site-header.is-scrolled,
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within {
    width: 172px;
    height: 44px;
    padding: 0 6px 0 7px;
    background: rgba(9,9,11,.62);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 30px rgba(0,0,0,.13);
    opacity: .94;
  }
  .site-header.is-scrolled .brand-word,
  .site-header.is-scrolled:hover .brand-word,
  .site-header.is-scrolled:focus-within .brand-word { display: none; }
  .site-header.is-scrolled .brand-mark { transform: scale(.92); }
  .site-header.is-scrolled .header-cta,
  .site-header.is-scrolled:hover .header-cta,
  .site-header.is-scrolled:focus-within .header-cta {
    min-height: 32px;
    padding-inline: 10px;
    opacity: .88;
    transform: none;
  }

  /* Rythme global plus serré. */
  .content-section { padding-top: 62px; padding-bottom: 62px; }
  .section-index { grid-template-columns: 38px 1fr; gap: 10px; padding-bottom: 10px; font-size: 9px; }
  .section-title { font-size: clamp(42px, 13vw, 64px); line-height: .93; }
  .section-intro { line-height: 1.52; }
  .eyebrow { font-size: 9px; letter-spacing: .15em; }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: 48px;
  }
  .hero-kicker { padding-top: 10px; font-size: 9px; }
  .hero-main { margin-top: 28px; gap: 30px; }
  .hero-title { margin-top: 12px; font-size: clamp(49px, 15vw, 76px); line-height: .83; }
  .hero-line.accent { margin-top: .16em; font-size: .60em; }
  .hero-intro { margin-top: 22px; line-height: 1.53; font-size: 14px; }
  .hero-actions { margin-top: 19px; gap: 8px; }
  .button { min-height: 43px; padding-inline: 15px; font-size: 11px; }
  .hero-visual { margin-top: 0; }
  .hero-visual-card { border-radius: 18px; }
  .hero-visual-card img { aspect-ratio: 4 / 5; max-height: 68vh; }

  /* About */
  .about-intro { margin-top: 34px; gap: 20px; }
  .big-copy { font-size: clamp(23px, 6.8vw, 31px); line-height: 1.10; }
  .about-media { margin-top: 38px; gap: 0; }
  .about-image img { height: auto; aspect-ratio: 4 / 5; }
  .about-image figcaption { gap: 5px; padding: 11px 12px; font-size: 8px; }
      .principles { margin-top: 46px; }
  .principle { padding-block: 21px; }
  .principle h3 { margin: 22px 0 8px; font-size: 30px; }
  .principle p { line-height: 1.48; }

  /* Method */
  .method-section { padding: 60px var(--pad); }
  .method-shell { padding: 24px 20px; border-radius: 22px; }
  .method-heading h2 { margin: 12px 0 15px; font-size: clamp(40px, 12vw, 58px); }
  .method-heading p { line-height: 1.52; }
  .method-visual { width: 250px; top: -45px; right: -120px; opacity: .30; }
  .method-steps { margin-top: 40px; }
  .method-step { min-height: 0; padding-block: 20px; }
  .method-step h3 { margin: 20px 0 8px; font-size: 30px; }
  .method-step p { line-height: 1.48; }

  /* Offer */
  .offer-head, .work-head { margin: 36px 0 32px; gap: 20px; }
  .pricing-note { margin-top: 11px; }
  .offer-card summary { padding: 22px 0; gap: 11px; }
  .offer-summary-main h3 { margin: 9px 0 8px; font-size: clamp(27px, 8vw, 38px); }
  .offer-summary-main p { line-height: 1.48; }
  .offer-summary-price strong { font-size: 27px; }
  .offer-detail { gap: 22px; padding: 0 0 28px 49px; }
  .offer-includes ul { gap: 8px; margin-top: 12px; }
  .offer-deliverable p { margin: 12px 0 18px; }
  .offer-combine { margin-top: 20px; padding: 18px; font-size: 20px; }

  /* Transition formats : bien plus courte sur mobile. */
  .format-bridge { padding: 60px var(--pad) 64px; }
  .format-copy h2 { margin-top: 12px; font-size: clamp(40px, 12vw, 58px); }


  /* Work */
  .demo-disclaimer { margin-bottom: 18px; padding: 11px 12px; border-radius: 14px; line-height: 1.45; }
  .work-grid { gap: 42px; }
  .project-card.series { padding-top: 22px; padding-bottom: 24px; }
  .vertical-case-head { margin-bottom: 23px; gap: 17px; }
  .vertical-client { margin-top: 10px; }
  .vertical-case-head h3 { margin-top: 10px; font-size: clamp(38px, 12vw, 56px); }
  .vertical-case-copy > p { line-height: 1.52; }
  .case-meta { margin-top: 15px; }
  .vertical-video-card.is-featured .vertical-video-caption { padding-top: 13px; }
  .vertical-video-card.is-featured .vertical-video-caption::before { margin-bottom: 9px; }
  .vertical-video-card.is-featured .vertical-video-caption strong { font-size: 30px; }
  .vertical-video-card.is-featured .vertical-video-caption p { margin-top: 10px; font-size: 11px; }
  .vertical-video-card.is-featured .vertical-video-caption > span { margin-top: 12px; }

  .series-editorial-head { margin-bottom: 24px; padding-top: 20px; gap: 16px; }
  .series-editorial-head h3 { margin-top: 10px; font-size: clamp(37px, 11vw, 54px); }
  .series-editorial-copy > p { line-height: 1.52; }
  .photo-series-item,
  .photo-series-item.wide,
  .photo-series-item.square,
  .photo-series-item.portrait { flex-basis: min(76vw, 310px); }
  .motion-study-card { flex-basis: min(74vw, 305px); }

  /* Contact */
  .contact-grid { padding: 58px 0 66px; gap: 32px; }
  .contact-title { margin-top: 12px; font-size: clamp(48px, 14vw, 72px); }
  .contact-copy { margin-top: 21px; line-height: 1.53; }
  .contact-form label { gap: 7px; padding: 14px 0; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select { font-size: 18px; }
  .submit-btn { margin-top: 20px; padding: 17px 20px; }
  .contact-statement { gap: 12px; padding: 23px 0 19px; }
  .contact-statement span:first-child { font-size: min(22vw, 86px); letter-spacing: .11em; }
  .site-footer { gap: 14px; padding-top: 19px; }
  .footer-links { gap: 16px; }
}

@media (max-width: 360px) {
  :root { --pad: 15px; }
  .site-header,
  .site-header:hover,
  .site-header:focus-within { width: calc(100% - 16px); }
  .site-header.is-scrolled,
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within { width: 164px; }
  .brand-word { font-size: 10px; }
  .header-cta { padding-inline: 9px; }
  .hero-title { font-size: 47px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .offer-detail { padding-left: 43px; }
}

/* V4.6.1 — mobile fixes found during 390/320 px QA ---------------- */
.section-soft .section-title span {
  -webkit-text-stroke: 1px rgba(16,16,20,.48);
}
.section-dark .section-title span {
  -webkit-text-stroke: 1px rgba(242,240,235,.48);
}

@media (max-width: 720px) {
  /* Beat the more-specific desktop :not(:hover) compact-header rule. */
  .site-header.is-scrolled:not(:hover):not(:focus-within),
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within {
    width: 172px;
    height: 44px;
    padding: 0 6px 0 7px;
    background: rgba(9,9,11,.62);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 30px rgba(0,0,0,.13);
    opacity: .94;
  }

  /* A 12-column desktop span was creating implicit zero-width columns. */
  .work-grid > .project-card,
  .work-grid > .project-card.wide,
  .work-grid > .project-card.vertical,
  .work-grid > .project-card.portrait,
  .work-grid > .project-card.series,
  .work-grid > .project-card.photo-series,
  .work-grid > .project-card.motion-series {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .project-card.series {
    width: calc(100% + (var(--pad) * 2));
  }

  /* With the outline line visible, keep About compact. */
  .about-intro { gap: 15px; }
  .about-intro .section-title { margin-bottom: 2px; }
}

@media (max-width: 360px) {
  .site-header.is-scrolled:not(:hover):not(:focus-within),
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within { width: 164px; }
}

/* ==============================================================
   V4.7 — IDENTITÉ OFFICIELLE ANGLE
   Les SVG fournis dans assets/brand/ sont les sources de marque.
   ============================================================= */

/* Header : logo complet au repos, pictogramme lorsque le header se compacte. */
.brand {
  height: 34px;
  min-width: 0;
  gap: 0;
}
.brand-logo {
  display: block;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform-origin: left center;
  transition: opacity .24s ease, transform .3s cubic-bezier(.2,.7,.2,1), width .3s cubic-bezier(.2,.7,.2,1);
}
.brand-logo-full {
  height: 27px;
  max-width: 156px;
}
.brand-logo-icon {
  display: none;
  width: 29px;
  height: 29px;
}

.site-header.is-scrolled:not(:hover):not(:focus-within) .brand-logo-full {
  display: none;
}
.site-header.is-scrolled:not(:hover):not(:focus-within) .brand-logo-icon {
  display: block;
  opacity: .82;
}
.site-header.is-scrolled:hover .brand-logo-full,
.site-header.is-scrolled:focus-within .brand-logo-full {
  display: block;
}
.site-header.is-scrolled:hover .brand-logo-icon,
.site-header.is-scrolled:focus-within .brand-logo-icon {
  display: none;
}

/* Le pictogramme officiel remplace l'ancien symbole ∠ dans la méthode. */
.method-symbol {
  display: grid;
  place-items: center;
  will-change: transform;
}
.method-symbol img {
  width: clamp(92px, 13vw, 180px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Note About : version noire du pictogramme sur fond orange. */
.note-number b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
}

/* Footer : la signature typographique précédente devient le vrai logo complet. */
.contact-statement {
  min-height: 170px;
}
.footer-brand-logo {
  display: block;
  width: clamp(245px, 39vw, 640px);
  height: auto;
  filter: brightness(0) invert(1);
}

@media (max-width: 720px) {
  .brand { height: 30px; }
  .brand-logo-full { height: 22px; max-width: 122px; }
  .brand-logo-icon { width: 28px; height: 28px; }

  .site-header.is-scrolled .brand-logo-full,
  .site-header.is-scrolled:hover .brand-logo-full,
  .site-header.is-scrolled:focus-within .brand-logo-full { display: none; }
  .site-header.is-scrolled .brand-logo-icon,
  .site-header.is-scrolled:hover .brand-logo-icon,
  .site-header.is-scrolled:focus-within .brand-logo-icon { display: block; }

  .method-symbol img { width: clamp(80px, 29vw, 122px); }
  .contact-statement { min-height: auto; gap: 22px; }
  .footer-brand-logo { width: min(76vw, 310px); }
}


/* ==============================================================
   V4.8 — AJUSTEMENTS : hero BTS + effet glass
   ============================================================== */
:root {
  --glass-white: rgba(255,255,255,.18);
  --glass-stroke: rgba(255,255,255,.20);
  --glass-fill: rgba(18,18,24,.36);
  --glass-fill-strong: rgba(10,10,14,.58);
}

/* Image hero : on ouvre un peu le cadre pour mieux accueillir
   la photo de making-of plus horizontale. */
.hero-visual-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.hero-visual-card img {
  aspect-ratio: 5 / 4;
  filter: grayscale(1) contrast(1.04);
}
.hero-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%, transparent 70%, rgba(0,0,0,.14));
}

/* Header : interprétation maison d’un rendu liquid-glass. */
.site-header {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07) 20%, rgba(18,18,24,.30) 21%, rgba(9,9,11,.34) 100%);
  border: 1px solid var(--glass-stroke);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 18px 42px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05);
}
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.site-header::before {
  inset: 1px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 26%, rgba(255,255,255,.015) 60%, rgba(255,255,255,.05));
  opacity: .95;
}
.site-header::after {
  left: 7%;
  right: 7%;
  top: -22%;
  height: 76%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 72%);
  filter: blur(12px);
  opacity: .72;
}
.site-header > * {
  position: relative;
  z-index: 1;
}
.site-header .main-nav a {
  text-shadow: 0 1px 10px rgba(0,0,0,.18);
}
.site-header .header-cta {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(139,92,246,.88), rgba(139,92,246,.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(139,92,246,.22);
}

.site-header.is-scrolled:not(:hover):not(:focus-within) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 18%, rgba(14,14,18,.24) 20%, rgba(9,9,11,.28) 100%);
  border-color: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  box-shadow:
    0 14px 30px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.site-header.is-scrolled:not(:hover):not(:focus-within)::after {
  opacity: .52;
}
.site-header.is-scrolled:hover,
.site-header.is-scrolled:focus-within {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07) 20%, rgba(18,18,24,.32) 21%, rgba(9,9,11,.36) 100%);
}

/* Capsules / légendes : même langage glass, plus subtil. */
.hero-visual-card figcaption,
.about-image figcaption,
.motion-card figcaption,
.photo-grid-caption,
.video-card-badge,
.project-meta li,
.photo-meta li {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 22%, rgba(12,12,16,.44) 100%);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

@media (max-width: 1100px) {
  .hero-visual-card img { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  .hero-visual-card img { aspect-ratio: 4 / 3; }

  .site-header {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}


/* ==============================================================
   V4.9 — HEADER DISCRET + SAFE AREA MOBILE
   ============================================================== */

/* Hero : le fichier est désormais réellement tourné à l'endroit. */
.hero-visual-card img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

/* En haut de page : header complet, mais moins démonstratif que V4.8. */
.site-header {
  overflow: hidden;
  background: rgba(10,10,13,.48);
  border-color: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 12px 34px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10);
}
.site-header::before {
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%);
  opacity: .65;
}
.site-header::after { opacity: 0; }

/* Desktop : après scroll, le header devient presque une présence fantôme. */
@media (min-width: 721px) {
  .site-header.is-scrolled:not(:hover):not(:focus-within) {
    width: 48px;
    height: 44px;
    grid-template-columns: 1fr;
    padding: 0;
    background: rgba(10,10,13,.06);
    border-color: rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    box-shadow: none;
    opacity: .38;
  }
  .site-header.is-scrolled:not(:hover):not(:focus-within) .brand {
    justify-self: center;
    width: 30px;
    height: 30px;
  }
  .site-header.is-scrolled:not(:hover):not(:focus-within) .brand-logo-icon {
    width: 26px;
    height: 26px;
    opacity: .72;
  }
  .site-header.is-scrolled:not(:hover):not(:focus-within) .main-nav,
  .site-header.is-scrolled:not(:hover):not(:focus-within) .header-cta {
    display: none;
  }

  /* Le pointeur sur le petit pictogramme redéploie tout le header. */
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within {
    width: min(1200px, calc(100% - 32px));
    height: 58px;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 14px 0 18px;
    background: rgba(10,10,13,.68);
    border-color: rgba(255,255,255,.13);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
    box-shadow: 0 14px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10);
    opacity: 1;
  }
  .site-header.is-scrolled:hover .main-nav,
  .site-header.is-scrolled:focus-within .main-nav {
    display: flex;
  }
  .site-header.is-scrolled:hover .header-cta,
  .site-header.is-scrolled:focus-within .header-cta {
    display: inline-flex;
  }
}

/* Mobile : ancrage réel en haut à gauche, dans la safe area. */
@media (max-width: 720px) {
  .site-header,
  .site-header:hover,
  .site-header:focus-within {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    right: auto;
    transform: none;
    width: 196px;
    max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 20px);
    height: 46px;
    grid-template-columns: 1fr auto;
    padding: 0 6px 0 10px;
    border-radius: 16px;
    background: rgba(10,10,13,.38);
    border-color: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08);
  }

  .site-header .brand-logo-full {
    display: block;
    height: 21px;
    max-width: 118px;
  }
  .site-header .brand-logo-icon { display: none; }
  .site-header .header-cta {
    min-width: 34px;
    min-height: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.10);
    box-shadow: none;
  }
  .site-header .cta-label-full,
  .site-header .cta-label-mobile { display: none; }
  .site-header .cta-arrow { font-size: 13px; }

  /* Après scroll : seulement le pictogramme, presque transparent. */
  .site-header.is-scrolled,
  .site-header.is-scrolled:not(:hover):not(:focus-within),
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    right: auto;
    transform: none;
    width: 42px;
    height: 42px;
    grid-template-columns: 1fr;
    padding: 0;
    border-radius: 14px;
    background: rgba(10,10,13,.045);
    border-color: rgba(255,255,255,.045);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    backdrop-filter: blur(8px) saturate(110%);
    box-shadow: none;
    opacity: .58;
  }
  .site-header.is-scrolled .brand,
  .site-header.is-scrolled:hover .brand,
  .site-header.is-scrolled:focus-within .brand {
    justify-self: center;
    width: 28px;
    height: 28px;
  }
  .site-header.is-scrolled .brand-logo-full,
  .site-header.is-scrolled:hover .brand-logo-full,
  .site-header.is-scrolled:focus-within .brand-logo-full { display: none; }
  .site-header.is-scrolled .brand-logo-icon,
  .site-header.is-scrolled:hover .brand-logo-icon,
  .site-header.is-scrolled:focus-within .brand-logo-icon {
    display: block;
    width: 25px;
    height: 25px;
    opacity: .78;
  }
  .site-header.is-scrolled .header-cta,
  .site-header.is-scrolled:hover .header-cta,
  .site-header.is-scrolled:focus-within .header-cta,
  .site-header.is-scrolled .main-nav { display: none; }

  /* Le contenu commence sous la safe area + header. */
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 82px);
  }
  .hero-visual-card img { aspect-ratio: 4 / 5; }
}

@media (max-width: 360px) {
  .site-header,
  .site-header:hover,
  .site-header:focus-within { width: 184px; }
  .site-header.is-scrolled,
  .site-header.is-scrolled:not(:hover):not(:focus-within),
  .site-header.is-scrolled:hover,
  .site-header.is-scrolled:focus-within { width: 40px; height: 40px; }
}


/* ==============================================================
   V4.10 — FORMAT SYSTEM / MOTION DESIGN
   ============================================================== */
.format-bridge {
  position: relative;
  padding-top: clamp(78px, 8vw, 118px);
  padding-bottom: clamp(78px, 9vw, 128px);
}
.format-copy {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,.42fr);
  column-gap: clamp(30px,6vw,90px);
  align-items: end;
}
.format-copy .eyebrow { grid-column: 1 / -1; }
.format-copy h2 { grid-column: 1; }
.format-intro {
  grid-column: 2;
  margin: 0 0 .25em;
  max-width: 36ch;
  line-height: 1.6;
  opacity: .62;
}

.format-system {
  --system-progress: 0;
  position: relative;
  width: min(1180px, 100%);
  height: clamp(520px, 47vw, 670px);
  margin: clamp(54px,7vw,90px) auto 0;
  isolation: isolate;
}
.format-system::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px,20vw,300px);
  aspect-ratio: 1;
  border: 1px solid rgba(16,16,20,.12);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(calc(.72 + var(--system-progress) * .28));
  opacity: calc(.18 + var(--system-progress) * .42);
}
.format-system::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  z-index: 6;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%,-50%) scale(calc(.75 + var(--system-progress) * .7));
  box-shadow: 0 0 0 calc(5px * var(--system-progress)) rgba(255,106,42,.10);
}
.format-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.format-network path {
  fill: none;
  stroke: rgba(16,16,20,.22);
  stroke-width: 1.3;
  stroke-dasharray: 7 10;
  vector-effect: non-scaling-stroke;
  animation: formatSignal 3.2s linear infinite;
}
.format-network path:nth-child(2) { animation-delay: -.8s; }
.format-network path:nth-child(3) { animation-delay: -1.6s; }
.format-network path:nth-child(4) { animation-delay: -2.4s; }

.format-source {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: clamp(128px,13vw,176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(16,16,20,.16);
  border-radius: 28px;
  background: rgba(233,230,223,.80);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 54px rgba(16,16,20,.10);
  transform: translate(-50%,-50%) rotate(calc((var(--system-progress) - .5) * 4deg)) scale(calc(1 - var(--system-progress) * .12));
}
.format-source img { width: 42px; height: 42px; object-fit: contain; }
.format-source span {
  font-size: 9px;
  letter-spacing: .17em;
  font-weight: 600;
}
.format-source strong {
  position: absolute;
  right: 13px;
  top: 11px;
  font: 500 10px/1 var(--display);
  opacity: .35;
}

.format-output {
  --card-p: var(--system-progress);
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(16,16,20,.14);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 22px 55px rgba(16,16,20,.09);
  opacity: calc(.18 + var(--card-p) * .82);
  will-change: transform, opacity;
}
.format-output-media { overflow: hidden; background: #d9d5ce; }
.format-output-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.10 - var(--card-p) * .08));
  transition: filter .4s ease;
}
.format-output figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 11px;
  border-top: 1px solid rgba(16,16,20,.10);
}
.format-output figcaption b {
  font: 600 12px/1 var(--display);
  letter-spacing: -.02em;
}
.format-output figcaption span {
  font-size: 9px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .55;
}
.format-output-landscape { width: min(30vw,330px); }
.format-output-landscape .format-output-media { aspect-ratio: 16/9; }
.format-output-square { width: min(17vw,190px); }
.format-output-square .format-output-media { aspect-ratio: 1; }
.format-output-portrait { width: min(16vw,178px); }
.format-output-portrait .format-output-media { aspect-ratio: 4/5; }
.format-output-vertical { width: min(14vw,154px); }
.format-output-vertical .format-output-media { aspect-ratio: 9/16; }

.format-system-label {
  position: absolute;
  left: 50%;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: calc(.30 + var(--system-progress) * .40);
}
.format-system-label i {
  display: block;
  width: clamp(44px,7vw,90px);
  height: 1px;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(var(--system-progress));
}

@keyframes formatSignal {
  to { stroke-dashoffset: -34; }
}

@media (hover:hover) and (pointer:fine) {
  .format-output:hover {
    z-index: 8;
    box-shadow: 0 28px 70px rgba(16,16,20,.16);
  }
  .format-output:hover .format-output-media img { filter: contrast(1.04) saturate(1.04); }
}

@media (max-width: 820px) {
  .format-copy { grid-template-columns: 1fr; }
  .format-copy h2,
  .format-intro { grid-column: 1; }
  .format-intro { margin-top: 20px; max-width: 44ch; }
  .format-system {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    margin-top: 40px;
  }
  .format-network,
  .format-system::before,
  .format-system::after,
  .format-system-label { display: none; }
  .format-source {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: auto;
    min-height: 96px;
    grid-template-columns: auto 1fr auto;
    place-items: center start;
    padding: 18px;
    border-radius: 18px;
    transform: none !important;
  }
  .format-source img { width: 32px; height: 32px; }
  .format-source strong { position: static; justify-self: end; }
  .format-output {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    opacity: 1;
    transform: none !important;
    border-radius: 16px;
  }
  .format-output-landscape { grid-column: 1 / -1; }
  .format-output-landscape .format-output-media { aspect-ratio: 16/9; }
  .format-output-square .format-output-media { aspect-ratio: 1; }
  .format-output-portrait .format-output-media { aspect-ratio: 4/5; }
  .format-output-vertical .format-output-media { aspect-ratio: 9/16; }
}

@media (max-width: 480px) {
  .format-bridge { padding-top: 58px; padding-bottom: 64px; }
  .format-copy h2 { font-size: clamp(42px,13vw,62px); }
  .format-system { grid-template-columns: 1fr 1fr; gap: 9px; }
  .format-output figcaption { padding: 9px 10px; }
  .format-output figcaption span { font-size: 7px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .format-network path { animation: none !important; }
}


/* ==============================================================
   V4.11 — ABOUT SANS IMAGE + OFFRES SANS TARIFS
   ============================================================== */
.principles {
  margin-top: 64px;
}

.offer-card summary {
  grid-template-columns: 64px minmax(0, 1fr) 34px;
}
.offer-toggle {
  grid-column: 3;
}

@media (max-width: 980px) {
  
  .offer-card summary {
    grid-template-columns: 50px minmax(0, 1fr) 34px;
  }
}

@media (max-width: 720px) {
  
  
  
  .principles {
    margin-top: 42px;
  }

  .offer-card summary {
    grid-template-columns: 38px minmax(0, 1fr) 32px;
  }

  .offer-toggle {
    grid-column: 3;
    grid-row: 1;
  }
}


/* ==============================================================
   V4.12 — VERTICAL SERIES : HIÉRARCHIE ÉGALE
   Les 4 vidéos NOCO ont exactement le même poids visuel.
   ============================================================== */
.vertical-video-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.vertical-video-card {
  min-width: 0;
}

.vertical-video-card .native-video-shell {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 20px;
  opacity: 1;
  box-shadow: 0 24px 55px rgba(0,0,0,.20);
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .vertical-video-card:hover .native-video-shell {
    transform: translateY(-4px);
    box-shadow: 0 30px 68px rgba(0,0,0,.26);
  }
}

.vertical-video-card .vertical-video-number {
  min-width: 30px;
  padding: 0 8px;
  background: rgba(9,9,11,.64);
  color: #fff;
  border-color: rgba(255,255,255,.15);
  font-weight: 400;
}

.vertical-video-card .vertical-video-caption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 3px 0;
}

.vertical-video-card .vertical-video-caption strong {
  font-family: var(--display);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}

.vertical-video-card .vertical-video-caption p {
  margin: 5px 0 0;
  max-width: 28ch;
  color: #8e8994;
  font-size: 10px;
  line-height: 1.45;
}

.vertical-video-card .vertical-video-caption > span {
  margin: 0;
  padding: 0;
  border: 0;
  color: #77727f;
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .vertical-video-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }
}

@media (max-width: 720px) {
  .vertical-video-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 0 18px 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .vertical-video-rail::-webkit-scrollbar {
    display: none;
  }

  .vertical-video-card {
    flex: 0 0 min(76vw, 330px);
    scroll-snap-align: start;
  }

  .vertical-video-card .native-video-shell {
    border-radius: 18px;
  }
}


/* ==============================================================
   V4.13 — PHOTO SERIES NOCO ALLÉGÉE
   4 images seulement : 2 compositions fortes par rangée.
   ============================================================== */
.photo-series-grid .photo-series-item.portrait {
  grid-column: span 6;
  aspect-ratio: 4 / 5;
}

@media (max-width: 980px) and (min-width: 721px) {
  .photo-series-grid .photo-series-item.portrait {
    grid-column: span 6;
  }
}


/* ==============================================================
   V4.17 — ABOUT ÉPURÉ / OFFER SUPPRIMÉ
   ============================================================== */
.about .principles {
  margin-top: 54px;
}

@media (max-width: 720px) {
  .about .principles {
    margin-top: 32px;
  }
}


/* ==============================================================
   V4.19 — HERO INTRO
   ============================================================== */
.hero-intro strong {
  color: var(--text);
  font-weight: 700;
}


/* ==============================================================
   V4.20 — ABOUT COPY
   ============================================================== */
.about .big-copy {
  max-width: 25ch;
}

@media (max-width: 720px) {
  .about .big-copy {
    max-width: none;
  }
}


/* ==============================================================
   V4.23 — ABOUT COPY PLUS COMPACT + MOTS-CLÉS
   ============================================================== */
.about .big-copy {
  max-width: 34ch;
  font-size: clamp(22px, 2.35vw, 38px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.about-highlight {
  color: var(--orange);
  font-weight: 700;
  font-style: italic;
}

@media (max-width: 720px) {
  .about .big-copy {
    max-width: none;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.25;
  }
}


/* ==============================================================
   V4.24 — ABOUT PLUS LÉGER
   ============================================================== */
.about .section-title {
  font-size: clamp(40px, 5.1vw, 78px);
  line-height: .94;
  letter-spacing: -.05em;
}

.about .big-copy {
  max-width: 42ch;
  font-size: clamp(18px, 1.75vw, 29px);
  line-height: 1.32;
  letter-spacing: -.015em;
}

.about-highlight {
  color: var(--orange);
  font-weight: 700;
  font-style: italic;
}

@media (max-width: 720px) {
  .about .section-title {
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: .96;
  }

  .about .big-copy {
    max-width: none;
    font-size: clamp(17px, 4.8vw, 22px);
    line-height: 1.38;
  }
}


/* ==============================================================
   V4.25 — ABOUT ALIGNÉ SUR LE BLOC METHOD
   ============================================================== */
.about.section-dark {
  background:
    radial-gradient(circle at 78% 88%, rgba(139,92,246,.08), transparent 28%),
    var(--bg);
  color: var(--text);
}

.about.section-dark .section-index {
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}

.about.section-dark .section-title {
  color: var(--text);
}

.about.section-dark .section-title span {
  -webkit-text-stroke-color: rgba(242,240,235,.58);
  opacity: .72;
}

.about.section-dark .big-copy {
  color: #aaa6b0;
}

.about.section-dark .about-highlight {
  color: var(--orange);
}

.about.section-dark .principles {
  border-color: rgba(255,255,255,.14);
}

.about.section-dark .principle {
  border-color: rgba(255,255,255,.14);
}

.about.section-dark .principle strong {
  color: var(--text);
  opacity: .46;
}

.about.section-dark .principle h3 {
  color: var(--text);
}

.about.section-dark .principle p {
  color: #aaa6b0;
  opacity: 1;
}

@media (max-width: 720px) {
  .about.section-dark .principle {
    border-bottom-color: rgba(255,255,255,.14);
  }
}


/* ==============================================================
   V4.26 — ABOUT DANS L'ANCIENNE STRUCTURE METHOD
   ============================================================== */
.about-method .method-heading h2 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,240,235,.58);
  opacity: .78;
}

.about-method .method-heading p {
  max-width: 56ch;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.5;
}

.about-method .about-highlight {
  color: var(--orange);
  font-weight: 700;
  font-style: italic;
}

.about-method .method-step h3 {
  color: var(--text);
}

.about-method .method-step p {
  color: #aaa6b0;
}

@media (max-width: 720px) {
  .about-method .method-heading p {
    font-size: 16px;
    line-height: 1.5;
  }
}


/* ==============================================================
   V4.27 — PERFORMANCE / STATISTICS
   Même structure et même motion system, nouveaux contenus.
   ============================================================== */
.stat-output .format-output-media {
  background: #040607;
  aspect-ratio: 6 / 5;
}

.stat-output .format-output-media img {
  object-fit: contain;
  background: #040607;
}

.format-output-landscape.stat-output { width: min(29vw, 320px); }
.format-output-square.stat-output { width: min(21vw, 230px); }
.format-output-portrait.stat-output { width: min(21vw, 230px); }
.format-output-vertical.stat-output { width: min(20vw, 220px); }

.format-output-square.stat-output .format-output-media,
.format-output-portrait.stat-output .format-output-media,
.format-output-vertical.stat-output .format-output-media {
  aspect-ratio: 6 / 5;
}

@media (max-width: 820px) {
  .stat-output .format-output-media,
  .format-output-square.stat-output .format-output-media,
  .format-output-portrait.stat-output .format-output-media,
  .format-output-vertical.stat-output .format-output-media {
    aspect-ratio: 6 / 5;
  }
}


/* ==============================================================
   V4.28 — PERFORMANCE COPY : PLUS LISIBLE, PAS DOMINANT
   ============================================================== */
.format-intro {
  position: relative;
  max-width: 39ch;
  padding-top: 18px;
  margin-bottom: .2em;
  color: rgba(16,16,20,.78);
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.62;
  opacity: 1;
}

.format-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: var(--orange);
}

.format-intro strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 820px) {
  .format-intro {
    max-width: 48ch;
    margin-top: 24px;
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.6;
  }
}


/* ==============================================================
   V4.30 — NOCO WORDMARK DANS LE CASE STUDY
   Ajout d'un wordmark discret mais assumé dans la colonne droite.
   ============================================================== */
.vertical-case-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(8px, 1.2vw, 20px);
}

.project-wordmark {
  margin: 0 0 clamp(26px, 3vw, 42px);
  font-family: "Montserrat", var(--display), sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 8vw, 140px);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 980px) {
  .project-wordmark {
    font-size: clamp(54px, 11vw, 96px);
    margin-bottom: 22px;
  }
}

@media (max-width: 720px) {
  .vertical-case-copy {
    padding-top: 0;
  }

  .project-wordmark {
    font-size: clamp(42px, 14vw, 74px);
    margin-bottom: 18px;
  }
}


/* ==============================================================
   V4.31 — HERO ANALYTICS MOTION
   Cartes 3D / pauses / reprises inspirées de la vidéo fournie.
   ============================================================== */
.hero-analytics {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 72% 18%, rgba(139,92,246,.16), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(255,106,42,.12), transparent 30%),
    #0b0b0f;
  box-shadow: 0 34px 90px rgba(0,0,0,.32);
  isolation: isolate;
}

.hero-analytics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 92%);
}






.hero-analytics-stage {
  position: absolute;
  inset: 48px 18px 42px;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.analytics-depth-grid {
  position: absolute;
  inset: 15% 7% 7%;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 28px;
  transform: perspective(700px) rotateX(63deg) translateY(34%);
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 32px 32px;
  opacity: .38;
}

.analytics-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74%, 380px);
  min-height: 58%;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02)),
    rgba(14,14,18,.92);
  box-shadow:
    0 28px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin: center;
  backface-visibility: hidden;
  transition:
    transform 860ms cubic-bezier(.18,.82,.16,1),
    opacity 650ms ease,
    filter 650ms ease,
    box-shadow 650ms ease;
  will-change: transform, opacity;
}

.analytics-card[data-slot="0"] {
  z-index: 8;
  opacity: 1;
  filter: saturate(1);
  transform: translate(-50%, -50%) translate3d(0, 0, 82px) rotateZ(0deg) scale(1);
  box-shadow:
    0 34px 85px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,106,42,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.analytics-card[data-slot="1"] {
  z-index: 6;
  opacity: .58;
  filter: saturate(.66);
  transform: translate(-50%, -50%) translate3d(34%, -17%, 6px) rotateZ(4.5deg) scale(.80);
}

.analytics-card[data-slot="2"] {
  z-index: 3;
  opacity: .22;
  filter: saturate(.3) blur(.2px);
  transform: translate(-50%, -50%) translate3d(3%, 17%, -70px) rotateZ(-1deg) scale(.66);
}

.analytics-card[data-slot="3"] {
  z-index: 5;
  opacity: .42;
  filter: saturate(.5);
  transform: translate(-50%, -50%) translate3d(-34%, 12%, -16px) rotateZ(-5deg) scale(.75);
}

.analytics-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #a6a2ac;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.analytics-card header b {
  color: #595561;
  font-weight: 500;
}

.analytics-card-body {
  position: relative;
  min-height: 250px;
  padding-top: 22px;
}

.analytics-metric {
  position: relative;
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(44px, 5.2vw, 74px);
  line-height: .86;
  letter-spacing: -.065em;
  color: var(--text);
  font-weight: 500;
}

.analytics-card-body > p {
  position: relative;
  z-index: 3;
  margin: 10px 0 0;
  color: #8f8b96;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.analytics-sparkline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 118px;
}

.analytics-sparkline svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.analytics-sparkline .grid-line {
  fill: none;
  stroke: rgba(255,255,255,.07);
  stroke-width: 1;
}

.analytics-sparkline .signal-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  filter: drop-shadow(0 0 8px rgba(255,106,42,.34));
}

.analytics-card.is-active .signal-line {
  animation: analyticsLine 1.15s .12s cubic-bezier(.2,.8,.2,1) forwards;
}

.signal-point {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  box-shadow: 0 0 14px rgba(255,106,42,.72);
}

.signal-point.p1 { left: 26%; top: 60%; }
.signal-point.p2 { left: 57%; top: 36%; }
.signal-point.p3 { right: 2%; top: 9%; }

.analytics-card.is-active .signal-point {
  animation: analyticsPoint .35s .7s ease forwards;
}
.analytics-card.is-active .signal-point.p2 { animation-delay: .87s; }
.analytics-card.is-active .signal-point.p3 { animation-delay: 1.03s; }

.analytics-donut {
  position: absolute;
  width: 154px;
  height: 154px;
  right: 2px;
  bottom: 4px;
  display: grid;
  place-items: center;
}

.donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--orange) 0 0%, var(--purple) 0 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53%);
  mask: radial-gradient(circle, transparent 0 52%, #000 53%);
  transform: rotate(-92deg) scale(.72);
  opacity: .35;
}

.analytics-card.is-active .donut-ring {
  animation: analyticsDonut 1s .08s cubic-bezier(.2,.8,.2,1) forwards;
}

.donut-core {
  position: absolute;
  inset: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: #77727f;
  font-size: 9px;
  letter-spacing: .13em;
}

.analytics-bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 126px;
  display: flex;
  gap: 10px;
  align-items: end;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.analytics-bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--purple), rgba(139,92,246,.38));
  transform: scaleY(.06);
  transform-origin: bottom;
  opacity: .35;
}

.analytics-card.is-active .analytics-bars i {
  animation: analyticsBar 720ms cubic-bezier(.16,.9,.22,1) forwards;
}
.analytics-card.is-active .analytics-bars i:nth-child(2) { animation-delay: 70ms; }
.analytics-card.is-active .analytics-bars i:nth-child(3) { animation-delay: 140ms; }
.analytics-card.is-active .analytics-bars i:nth-child(4) { animation-delay: 210ms; }
.analytics-card.is-active .analytics-bars i:nth-child(5) { animation-delay: 280ms; }
.analytics-card.is-active .analytics-bars i:nth-child(6) { animation-delay: 350ms; }
.analytics-card.is-active .analytics-bars i:nth-child(7) { animation-delay: 420ms; }

.audience-bars i.hot,
.traffic-bars i:nth-last-child(-n+2) {
  background: linear-gradient(180deg, var(--orange), rgba(255,106,42,.38));
}

.audience-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  display: flex;
  justify-content: space-around;
  color: #5d5964;
  font-size: 7px;
}

.analytics-pointer {
  position: absolute;
  z-index: 15;
  left: 18%;
  top: 24%;
  width: 28px;
  height: 28px;
  pointer-events: none;
  opacity: .8;
  animation: analyticsPointer 11s cubic-bezier(.42,0,.58,1) infinite;
}

.analytics-pointer::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 18px rgba(255,106,42,.48);
}

.analytics-pointer span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,106,42,.42);
  border-radius: 50%;
  animation: analyticsPointerPulse 1.4s ease-out infinite;
}

@keyframes analyticsPulse {
  0%,100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes analyticsLine {
  to { stroke-dashoffset: 0; }
}

@keyframes analyticsPoint {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes analyticsDonut {
  0% {
    opacity: .25;
    transform: rotate(-92deg) scale(.72);
    background: conic-gradient(var(--orange) 0 2%, rgba(255,255,255,.06) 2% 100%);
  }
  100% {
    opacity: 1;
    transform: rotate(-92deg) scale(1);
    background: conic-gradient(var(--orange) 0 47.3%, var(--purple) 47.3% 100%);
  }
}

@keyframes analyticsBar {
  from { transform: scaleY(.06); opacity: .25; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes analyticsPointer {
  0%, 17% { transform: translate3d(0,0,0); }
  24%, 42% { transform: translate3d(220px,62px,0); }
  49%, 67% { transform: translate3d(165px,250px,0); }
  74%, 91% { transform: translate3d(-38px,245px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes analyticsPointerPulse {
  from { opacity: .75; transform: scale(.45); }
  to { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 1100px) {
  .hero-analytics {
    min-height: 520px;
    aspect-ratio: 4 / 3;
  }

  .analytics-card {
    width: min(68%, 430px);
  }
}

@media (max-width: 720px) {
  .hero-analytics {
    min-height: 460px;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
  }

  .hero-analytics-stage {
    inset: 45px 10px 42px;
  }

  .analytics-card {
    width: 82%;
    min-height: 56%;
    padding: 15px;
    border-radius: 18px;
  }

  .analytics-card[data-slot="1"] {
    transform: translate(-50%, -50%) translate3d(22%, -17%, 0) rotateZ(4deg) scale(.82);
  }

  .analytics-card[data-slot="2"] {
    transform: translate(-50%, -50%) translate3d(0, 17%, -40px) rotateZ(-1deg) scale(.69);
  }

  .analytics-card[data-slot="3"] {
    transform: translate(-50%, -50%) translate3d(-22%, 12%, -10px) rotateZ(-4deg) scale(.78);
  }

  .analytics-card-body {
    min-height: 220px;
  }

  .analytics-metric {
    font-size: clamp(44px, 14vw, 64px);
  }

  
  
  .analytics-pointer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-analytics *,
  .hero-analytics *::before,
  .hero-analytics *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ==============================================================
   V4.32 — HERO ANALYTICS ÉPURÉ
   ============================================================== */
.hero-analytics-stage {
  inset: 24px 18px 24px;
}

@media (max-width: 720px) {
  .hero-analytics-stage {
    inset: 18px 10px 18px;
  }
}


/* ==============================================================
   V4.33 — PASSE DE FINITION GLOBALE
   ============================================================== */

/* Les anciens sur-titres ont été retirés : supprimer les marges
   qu'ils laissaient visuellement derrière eux. */
.about-method .method-heading h2,
.format-copy h2,
.contact-title {
  margin-top: 0;
}

.work-head {
  margin-top: 0;
}

/* Sans numéros, les trois piliers commencent plus directement. */
.method-step h3 {
  margin-top: 18px;
}

/* Analytics Hero : header sur une seule information, sans numéro. */
.analytics-card header {
  justify-content: flex-start;
}

/* Performance : les animations sont désormais des vidéos courtes
   en boucle, plus stables sur iOS / Android que les GIF. */
.format-stat-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #040607;
}

/* NOCO : légendes simplifiées, aucune description sous les vidéos. */
.vertical-video-card .vertical-video-caption {
  align-items: baseline;
}
.vertical-video-card .vertical-video-caption strong {
  min-width: 0;
}

/* --------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------- */
@media (max-width: 820px) {
  /* Les vidéos analytiques restent animées mais sont isolées dans
     leur propre layer pour éviter les glitchs de repaint mobiles. */
  .format-stat-video {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
  }
}

@media (max-width: 720px) {
  /* PERFORMANCE
     Une vraie grille stable. Aucun transform JS ne s'applique
     déjà sous 820px, et chaque animation est une boucle MP4. */
  .format-system {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .format-output {
    min-width: 0;
    max-width: 100%;
  }

  .format-output-media,
  .stat-output .format-output-media,
  .format-output-square.stat-output .format-output-media,
  .format-output-portrait.stat-output .format-output-media,
  .format-output-vertical.stat-output .format-output-media {
    aspect-ratio: 6 / 5;
  }

  /* NOCO
     Supprime les anciens débordements plein écran qui créaient
     la bande blanche à droite et recentre le case study. */
  .work {
    overflow-x: clip;
  }

  .work-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .work-grid > .project-card.series,
  .project-card.series {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px 26px;
    border-radius: 20px;
    box-sizing: border-box;
  }

  .vertical-case-head {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: center;
  }

  .vertical-client,
  .project-wordmark {
    text-align: center;
  }

  .project-wordmark {
    white-space: normal;
  }

  .vertical-case-head h3 {
    max-width: 11ch;
    margin-left: auto;
    margin-right: auto;
  }

  .vertical-case-copy > p {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .case-meta {
    justify-content: center;
  }

  .vertical-video-rail {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 14px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .vertical-video-card {
    flex: 0 0 min(78vw, 310px);
  }

  /* CONTACT + FOOTER
     Tout est réellement centré sur les petites largeurs. */
  .contact-statement {
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .footer-brand-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-statement #contact-signature {
    width: 100%;
    text-align: center;
  }

  .site-footer {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .site-footer > *,
  .site-footer > a {
    justify-self: center;
  }

  .footer-links {
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 18px;
  }
}


/* ==============================================================
   V4.34 — MOBILE HERO + PERFORMANCE NATIF
   ============================================================== */

/* La fin de la première phrase reste toujours solidaire. */
.hero-no-break {
  white-space: nowrap;
}

/* Performance : zéro dépendance aux GIF / autoplay vidéo. */
.native-stat {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(139,92,246,.12), transparent 35%),
    #09090d;
  color: #f2f0eb;
}

.native-stat-number {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 17px;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.055em;
}

.native-stat-visibility svg {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  height: 72%;
  overflow: visible;
}

.stat-grid {
  fill: none;
  stroke: rgba(255,255,255,.07);
  stroke-width: 1;
}

.stat-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: nativeLineLoop 3.8s cubic-bezier(.2,.8,.2,1) infinite;
}

.stat-dot {
  fill: var(--orange);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,106,42,.55));
  animation: nativeDotLoop 3.8s ease infinite;
}
.stat-dot.dot-a { animation-delay: .45s; }
.stat-dot.dot-b { animation-delay: .75s; }
.stat-dot.dot-c { animation-delay: 1.05s; }

.native-stat-engagement {
  display: grid;
  place-items: center;
}

.native-stat-engagement .native-stat-number {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-58%);
  font-size: clamp(32px, 4vw, 52px);
}

.native-donut {
  width: min(74%, 180px);
  height: min(74%, 180px);
  transform: rotate(-90deg);
}

.donut-base,
.donut-progress {
  fill: none;
  stroke-width: 20;
}

.donut-base {
  stroke: var(--purple);
  opacity: .78;
}

.donut-progress {
  stroke: var(--orange);
  stroke-linecap: butt;
  stroke-dasharray: 389.6;
  stroke-dashoffset: 389.6;
  animation: nativeDonutLoop 3.8s cubic-bezier(.2,.8,.2,1) infinite;
}

.native-stat-sub {
  position: absolute;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  color: #8e8994;
  font-size: 8px;
  letter-spacing: .12em;
}

.native-bars {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 34px;
  height: 62%;
  display: flex;
  align-items: end;
  gap: clamp(5px, 1vw, 10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.native-bars i {
  flex: 1;
  height: calc(var(--v) * 100%);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--purple), rgba(139,92,246,.35));
  transform-origin: bottom;
  transform: scaleY(.03);
  opacity: .25;
  animation: nativeBarLoop 3.8s cubic-bezier(.18,.88,.2,1) infinite;
}

.native-bars i:nth-child(2) { animation-delay: .08s; }
.native-bars i:nth-child(3) { animation-delay: .16s; }
.native-bars i:nth-child(4) { animation-delay: .24s; }
.native-bars i:nth-child(5) { animation-delay: .32s; }
.native-bars i:nth-child(6) { animation-delay: .40s; }
.native-bars i:nth-child(7) { animation-delay: .48s; }

.native-bars i.accent {
  background: linear-gradient(180deg, var(--orange), rgba(255,106,42,.38));
}

.native-axis {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  display: flex;
  justify-content: space-around;
  color: #706c78;
  font-size: 7px;
}

@keyframes nativeLineLoop {
  0%, 8% { stroke-dashoffset: 520; }
  38%, 78% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -30; opacity: .2; }
}

@keyframes nativeDotLoop {
  0%, 18% { opacity: 0; transform: scale(.35); }
  35%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.6); }
}

@keyframes nativeDonutLoop {
  0%, 8% { stroke-dashoffset: 389.6; }
  42%, 78% { stroke-dashoffset: 205; }
  100% { stroke-dashoffset: 389.6; }
}

@keyframes nativeBarLoop {
  0%, 8% { transform: scaleY(.03); opacity: .2; }
  38%, 78% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(.03); opacity: .2; }
}

/* Le media conserve exactement le ratio des anciennes animations. */
.stat-output .format-output-media {
  position: relative;
  overflow: hidden;
  background: #09090d;
}

/* Hero mobile : centré explicitement dans sa colonne. */
@media (max-width: 980px) {
  .hero-visual {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .hero-analytics {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 720px) {
  .hero-main {
    justify-items: center;
  }

  .hero-copy {
    width: 100%;
    justify-self: stretch;
  }

  .hero-visual {
    width: min(100%, 440px);
    max-width: 440px;
    margin: 0 auto;
    justify-self: center;
  }

  .hero-analytics {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .native-stat {
    min-height: 150px;
  }

  .native-stat-number {
    font-size: clamp(25px, 7vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-line,
  .stat-dot,
  .donut-progress,
  .native-bars i {
    animation-duration: 8s !important;
  }
}


/* ==============================================================
   V4.35 — PERFORMANCE MOBILE : ANIMATION JS ROBUSTE
   ============================================================== */

/* Les éléments sont désormais animés par requestAnimationFrame.
   On neutralise les anciennes keyframes CSS pour éviter les conflits
   sur Safari iOS / Chrome Android. */
.stat-line,
.stat-dot,
.donut-progress,
.native-bars i {
  animation: none !important;
}

.stat-line {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}

.donut-progress {
  stroke-dasharray: 389.6;
  stroke-dashoffset: 389.6;
}

.native-bars i {
  transform: scaleY(.035);
  transform-origin: bottom;
  opacity: .22;
  will-change: transform, opacity;
}

.stat-line,
.stat-dot,
.donut-progress {
  will-change: stroke-dashoffset, opacity, transform;
}

@media (max-width: 720px) {
  /* Le système mobile reste une grille stable pendant que
     les graphiques internes restent animés en continu. */
  .format-system {
    overflow: visible;
  }

  .format-output {
    contain: layout paint;
  }

  .native-stat {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .native-stat svg {
    overflow: visible;
  }
}


/* ==============================================================
   V4.36 — PERFORMANCE MOBILE SANS ANIMATION
   Desktop inchangé. Sur téléphone, seul le texte reste visible.
   ============================================================== */
@media (max-width: 720px) {
  .format-bridge .format-system {
    display: none !important;
  }

  .format-bridge {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .format-copy {
    margin-bottom: 0;
  }

  .format-intro {
    margin-bottom: 0;
  }
}