/* =========================================================
   ATHANA — Design tokens
   ========================================================= */
:root{
  --indigo: #1F2FE0;
  --indigo-dim: #161fa8;
  --sky: #508FFF;
  --cream: #F5F5F0;
  --cream-dim: #e7e6de;
  --ink: #0A0A0A;
  --ink-soft: #121218;
  --white: #ffffff;
  --blood: #C4121A;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;

  --container: 1360px;
  --pad: clamp(20px, 4vw, 64px);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  --nav-h: 92px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; background: var(--cream); }
html.no-scroll, body.no-scroll{ overflow: hidden; height: 100%; }

/* Mobile Safari/Chrome zoom the page on a double-tap by default, which a
   quick double-tap on a button (arrows, "voir la photo", nav links…) can
   trigger by mistake instead of registering as two taps on the control.
   `manipulation` drops just that gesture — pinch-zoom stays available for
   anyone who needs it, unlike disabling zoom globally in the viewport tag. */
button, a, input, select, textarea, [role="button"]{ touch-action: manipulation; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 860px), (hover: none){
  body{ cursor: auto; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; cursor: none; }
button{ font: inherit; background: none; border: none; color: inherit; cursor: none; }
@media (max-width: 860px), (hover: none){
  a, button{ cursor: pointer; }
}
ul{ margin:0; padding:0; list-style:none; }
sup{ font-size: .6em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.mono{
  font-family: var(--font-mono);
  letter-spacing: .04em;
  font-size: 12px;
  text-transform: uppercase;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  margin: 0;
  letter-spacing: -.01em;
}

::selection{ background: var(--indigo); color: var(--cream); }

/* =========================================================
   PERSISTENT BACKGROUND — shared by the whole site.
   Fixed behind every section; color + the living-logo eye
   are driven by scroll position in js/main.js (initBackgroundJourney).
   ========================================================= */
.bg-layer{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  z-index: 0;
  background: var(--ink);
  pointer-events: none;
}
/* 3D hero scene — opacity + pointer-events are driven by scroll
   (initBackgroundJourney), so it only lives inside the hero. */
.bg-layer__stage{
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
}
.bg-layer__stage canvas{ display: block; width: 100%; height: 100%; }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress-bar{
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10001;
  background: transparent;
}
.progress-bar__fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--indigo), var(--sky));
  transform-origin: left;
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{
  position: fixed; top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid var(--cream);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  display: flex; align-items: center; justify-content: center;
  transition: width .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
  will-change: transform;
}
.cursor__label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0;
  transition: opacity .25s var(--ease);
  white-space: nowrap;
}
.cursor-dot{
  position: fixed; top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--sky);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 0 12px 2px rgba(80,143,255,.7);
  transition: opacity .25s var(--ease);
  will-change: transform;
}
.cursor.is-active{
  width: 92px; height: 92px;
  background: var(--cream);
  border-color: transparent;
  animation: none;
}
.cursor.is-active .cursor__label{ opacity: 1; color: var(--cream); }
.cursor.is-hidden, .cursor-dot.is-hidden{ opacity: 0; }
@media (max-width: 860px), (hover: none){
  .cursor, .cursor-dot{ display: none; }
}

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{
  position: fixed; inset: 0;
  background: var(--cream);
  z-index: 20000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.loader__inner{
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.loader__mark{ width: 72px; height: 72px; animation: loaderPulse 1.8s ease-in-out infinite; }
@keyframes loaderPulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(.9); opacity: .75; }
}
.loader__bar{
  width: 160px; height: 4px;
  border-radius: 999px;
  background: rgba(10,10,10,.08);
  overflow: hidden;
}
.loader__bar-fill{
  height: 100%; width: 0%;
  border-radius: inherit;
  background: var(--sky);
  transition: width .1s linear;
}
.loader.is-done{
  animation: loaderOut .7s var(--ease) forwards;
  pointer-events: none;
}
@keyframes loaderOut{
  to{ transform: translateY(-100%); }
}

/* =========================================================
   LIVING LOGO BLOB — shared rings
   ========================================================= */
.logo-blob{ overflow: visible; }
.ring{ transform-box: fill-box; transform-origin: center; }
.ring--outer{ animation: spinCW 46s linear infinite; }
.ring--cream{ animation: spinCCW 38s linear infinite; }
.ring--blue{ animation: spinCW 26s linear infinite; }
.ring--pupil{ animation: pupilPulse 3.6s ease-in-out infinite; }
@keyframes spinCW{ to{ transform: rotate(360deg); } }
@keyframes spinCCW{ to{ transform: rotate(-360deg); } }
@keyframes pupilPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(.9); }
}

/* =========================================================
   NAV
   ========================================================= */
/* The blend that keeps nav text readable over any section lives on the text
   itself, not on the bar: a child cannot opt out of an ancestor's blending
   group, and blending the whole bar dragged the logo's brand colours with it. */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 5000;
}
.nav__brand{
  display: flex; align-items: center; gap: 12px;
  color: var(--white);
}
/* Never blended — the mark keeps its real colours on every section. */
.nav__mark{ width: 36px; height: 36px; display: block; }
.logo-blob--nav{ width: 100%; height: 100%; }
.nav__word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .04em;
  mix-blend-mode: difference;
}
.nav__links{
  display: flex; gap: 40px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav__links a{
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  mix-blend-mode: difference;
}
/* Per-letter weight ramp on hover: initNavLetters (main.js) splits each
   link into one span per character with a transition-delay staggered out
   from the middle letter, so the word "breathes" heavier from its centre
   rather than sweeping uniformly left to right. Needs Space Grotesk
   pulled as an actual variable range (index.html) — a static weight list
   can't interpolate font-variation-settings at all. */
.nav__links a .vf-letter{
  display: inline-block;
  font-variation-settings: "wght" 400;
  transition: font-variation-settings .35s var(--ease);
}
.nav__links a:hover .vf-letter, .nav__links a.is-hovering .vf-letter{ font-variation-settings: "wght" 700; }
.nav__links a::after{
  content: ''; position: absolute; left:0; right:0; bottom:0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__links a:hover::after{ transform: scaleX(1); transform-origin: left; }

.btn--nav{
  color: var(--white);
  border: 1px solid var(--white);
  mix-blend-mode: difference;
}
.burger{
  display: none;
  width: 40px; height: 40px;
  position: relative;
  color: var(--white);
  mix-blend-mode: difference;
}
.burger span{
  position: absolute; left: 8px; right: 8px; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.burger span:nth-child(1){ top: 15px; }
.burger span:nth-child(2){ top: 24px; }
.menu-overlay.is-open ~ .nav .burger span:nth-child(1){ transform: translateY(4.5px) rotate(45deg); }
.menu-overlay.is-open ~ .nav .burger span:nth-child(2){ transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 980px){
  .nav__links{ display: none; }
  .nav .btn--nav{ display: none; }
  .burger{ display: block; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-size: 14px; font-weight: 600;
  overflow: hidden;
  isolation: isolate;
}
.btn__label{ position: relative; z-index: 2; transition: color .4s var(--ease); }
.btn__icon{ position: relative; z-index: 2; display: inline-block; transition: transform .4s var(--ease), color .4s var(--ease); }
.btn--primary{
  background: var(--ink);
  color: var(--cream);
}
.btn--primary .btn__fill{
  position: absolute; inset: 0; background: var(--indigo);
  transform: translateY(101%); transition: transform .45s var(--ease); z-index: 1;
}
.btn--primary:hover .btn__fill{ transform: translateY(0); }
.btn--primary:hover .btn__icon{ transform: translate(3px,-3px); }

.btn--ghost{
  border: 1px solid currentColor;
  color: var(--ink);
  background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.btn--ghost:hover{ background: var(--ink); color: var(--cream); }

.btn--nav .btn__fill{
  position: absolute; inset: 0; background: var(--white); transform: translateY(101%);
  transition: transform .4s var(--ease); z-index: 1;
}
.btn--nav:hover .btn__fill{ transform: translateY(0); }
.btn--nav:hover .btn__label{ color: var(--ink); }
.btn--nav .btn__label{ position: relative; z-index: 2; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  z-index: 1;
  min-height: 100svh;
  color: var(--cream);
  overflow: hidden;
  display: flex; align-items: center;
}
.hero__vignette{
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(0,0,0,.65) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero__content{
  position: relative; z-index: 2;
  padding-top: var(--nav-h);
  width: 100%;
  /* Overrides .container's own max-width + auto margins: those centre the
     content once the viewport passes --container (1360px), which on a
     wide monitor shifts the title's left edge inward while .hero__scroll
     stays pinned to the true left edge (it's positioned against the
     full-bleed .hero, not this centred box) — the two drift apart the
     wider the screen gets. Pinning this to the same var(--pad) instead
     keeps them reading off the same line at any width. */
  max-width: none;
  margin: 0;
}
.hero__title{
  font-size: clamp(46px, 8vw, 126px);
  color: var(--cream);
}
/* Keeps the statement hugging the left edge instead of stretching across
   the whole container — the temple sits camera-centred in the 3D canvas
   behind it, so a narrower text column leaves it actually visible instead
   of buried under "PAS ENCORE." (the widest line). Mobile drops the 3D
   scene entirely (see hero-temple.js's `tooSmall`), so it's left full-width
   there — nothing behind it to reveal. */
@media (min-width: 761px){
  /* Capped in px too, not just vw: on a big monitor 42vw alone is still a
     lot of real pixels, growing in lockstep with the temple instead of
     leaving it more room. Past ~560px the column stops growing so the
     rest of a wide screen actually goes to the temple, not more overlap. */
  .hero__title{ max-width: min(40vw, 600px); }
}
.hero__title em{
  font-style: normal;
  color: var(--sky);
  -webkit-text-stroke: 1px var(--sky);
}
.split-line{ display: block; overflow: hidden; }
.split-inner{ display: inline-block; }

.hero__scroll{
  position: absolute; bottom: 78px; left: var(--pad);
  z-index: 2;
  display: flex; align-items: center; gap: 12px;
  color: var(--cream); opacity: .6;
}
.hero__scroll .mono{ writing-mode: vertical-rl; }
.hero__scroll-line{
  width: 1px; height: 46px;
  background: linear-gradient(var(--cream), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--sky);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ top: -100%; } 60%{ top: 100%; } 100%{ top: 100%; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  position: relative; z-index: 2;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(245,245,240,.15);
  padding: 18px 0;
}
.marquee--hero{ position: absolute; bottom: 0; left: 0; }
.marquee__track{
  display: flex; align-items: center; gap: 28px;
  width: max-content;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 22px);
  text-transform: uppercase;
  color: var(--cream);
}
.marquee--footer .marquee__track{ color: var(--cream); animation-duration: 22s; }
.marquee--footer{ border-top: none; border-bottom: 1px solid rgba(245,245,240,.15); }
.marquee__sep{ color: var(--sky); font-size: 14px; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee:hover .marquee__track{ animation-play-state: paused; }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{
  padding: clamp(90px, 14vw, 170px) 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: var(--ink);
}
.manifesto__container{ position: relative; z-index: 1; }

.manifesto__stage{ position: relative; padding-bottom: clamp(40px, 8vw, 90px); }

/* Full-section scroll-driven word carousel: the pinned viewport holds the
   scroll position while .word-scroll__list is scrubbed past it in lockstep
   with the page scroll, so the words "play" at exactly the speed the user
   scrolls — not on a timer. A corner-bracket frame tracks the width of
   whichever word is centered, like a viewfinder locking onto it. */
.word-scroll{
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.word-scroll__viewport{
  position: relative;
  height: clamp(90px, 15vw, 180px);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.word-scroll__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.word-scroll__item{
  height: clamp(90px, 15vw, 180px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(40px, 8vw, 108px);
  color: var(--ink);
}
.word-scroll__item.hl{ color: var(--indigo); }
.word-scroll__box{
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% + 28px);
  width: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.word-scroll__corner{
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--indigo);
}
.word-scroll__corner--tl{ top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.word-scroll__corner--tr{ top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.word-scroll__corner--bl{ bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.word-scroll__corner--br{ bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

.manifesto__pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid rgba(10,10,10,.15);
}
.pillar__num{ color: var(--indigo); display:block; margin-bottom: 14px; }
.pillar h3{
  font-family: var(--font-body);
  text-transform: none;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px;
  letter-spacing: 0;
  color: var(--ink);
}
.pillar p{ font-size: 14.5px; line-height: 1.6; opacity: .68; margin: 0; max-width: 320px; }

@media (max-width: 640px){
  .word-scroll{ height: 70vh; }
}

@media (max-width: 780px){
  .manifesto__pillars{ grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   SECTION HEAD (shared)
   ========================================================= */
.section-head{ margin-bottom: 56px; }
.section-head__eyebrow{
  color: var(--indigo);
  display: block;
  margin-bottom: 14px;
}
.section-head__title{
  font-size: clamp(40px, 7vw, 92px);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{
  padding: 60px 0 40px;
  position: relative;
  z-index: 1;
}
.services__list{ border-top: 1px solid rgba(10,10,10,.15); }
.service{
  border-bottom: 1px solid rgba(10,10,10,.15);
  padding: 0 var(--pad);
  cursor: none;
}
@media (max-width: 860px), (hover: none){ .service{ cursor: pointer; } }
.service__row{
  display: flex; align-items: center; gap: 28px;
  padding: 34px 0;
  position: relative;
  transition: padding-left .5s var(--ease);
}
.service__num{ color: var(--indigo); width: 40px; flex-shrink: 0; }
.service__title{
  font-size: clamp(28px, 5.4vw, 68px);
  flex: 1;
  transition: transform .5s var(--ease), color .5s var(--ease);
  transform-origin: left center;
}
.service__arrow{
  color: var(--indigo);
  transform: rotate(0deg) scale(.9);
  transition: transform .5s var(--ease);
  flex-shrink: 0;
  display: flex;
}
/* A real SVG rather than the "↗" glyph: iOS renders that character in its
   colourful emoji presentation instead of matching the desktop text glyph,
   which is the one thing this icon must never do. */
.service__arrow svg{
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.service__body{
  max-height: 0; overflow: hidden;
  /* padding-bottom stays constant (not transitioned): initServices measures
     scrollHeight the instant it adds .is-open, and an animated padding
     would still read its pre-transition value at that point, undershooting
     the target height by however much padding hadn't yet animated in. */
  padding-bottom: 34px;
  transition: max-height .55s var(--ease), opacity .5s var(--ease);
  opacity: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.service__info{ min-width: 0; }
.service__body p{ max-width: 560px; font-size: 15.5px; line-height: 1.65; opacity: .75; margin: 0 0 18px; }
.service__tags{ display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 18px; }
.service__tags span{
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid rgba(10,10,10,.25);
  border-radius: 100px; padding: 7px 14px;
}

/* Pagination dots under the text: each one tracks an image's identity
   (data-img-index), not its current position in the stack, so the active
   dot follows a photo around as the stack gets dragged through — and
   clicking a dot rotates the stack to bring that photo to the front. */
.service__dots{ display: flex; gap: 9px; }
.service__dot{
  width: 7px; height: 7px; padding: 0; border-radius: 50%;
  border: none; background: rgba(10,10,10,.22); cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.service__dot.is-active{ background: var(--indigo); transform: scale(1.4); }

/* Image slots the agency drops its own work into later: an <img> pointed at
   a not-yet-uploaded file, with a placeholder sitting behind it. The file
   404s quietly (initServiceShots removes the broken <img>), so visitors
   only ever see the clean empty state — never a broken-image icon. Drop a
   photo at the same path (e.g. assets/services/web-1.jpg) and it replaces
   the placeholder automatically, no code changes needed. */
/* A draggable stack of tilted cards (fanned out like real photos dropped on
   a desk) rather than a grid: the front card can be dragged aside, which
   sends it to the back of the pile and brings the next one forward. */
.service__stack-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 420px;
  justify-self: center;
  margin: 20px 0;
}
.service__stack{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
}
.service__stack-view{
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  color: var(--cream);
  background: var(--indigo);
  border: 1px solid var(--indigo);
  border-radius: 100px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(31,47,224,.25);
  transition: background .3s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.service__stack-view svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.service__stack-view:hover{ background: var(--ink); border-color: var(--ink); }
.service__stack-view:active{ transform: scale(.96); }

/* Prev/next arrows: touch's replacement for the mouse-drag gesture on the
   stack itself — shown only where a finger, not a cursor, is doing the
   pointing (see the .stack-card touch-action override below for why the
   drag can't just be left on for touch too). */
.service__stack-nav{ display: none; }
.service__stack-arrow{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(10,10,10,.25);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.service__stack-arrow svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service__stack-arrow:active{ transform: scale(.92); background: rgba(10,10,10,.08); }
@media (pointer: coarse){
  .service__stack-nav{ display: flex; justify-content: center; gap: 18px; }
}
.stack-card{
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-dim);
  box-shadow: 0 20px 40px -12px rgba(10,10,10,.3);
  transition: transform .5s var(--ease), box-shadow .2s var(--ease);
  touch-action: none;
  /* Promotes each card to its own GPU layer instead of repainting a
     rotated, shadowed, rounded-corner box against the scrolling page every
     frame — the combination that was behind the stutter on phones. (JS
     sets the actual transform value per card; this just hints the browser
     to keep it on the compositor.) */
  will-change: transform;
}
/* On a finger, drag-to-cycle is off (see initServiceStacks' isTouch guard) —
   the arrows above handle cycling instead — so the card must give vertical
   swipes back to the page. Left at touch-action:none, any touch that starts
   on the front card would be swallowed as a non-scroll gesture even though
   no JS is listening for it, trapping the user's scroll. `manipulation`
   also drops double-tap-to-zoom on the card itself, same as the buttons. */
@media (pointer: coarse){
  .stack-card{ touch-action: manipulation; }
}
.stack-card.is-front{ cursor: grab; }
.stack-card.is-front:active{ cursor: grabbing; }
.stack-card.is-dragging{ transition: box-shadow .2s var(--ease); }
.stack-card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.stack-card img.is-loaded{ opacity: 1; }
.stack-card img.is-loaded ~ .stack-card__empty{ display: none; }
.stack-card__empty{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed rgba(10,10,10,.22);
  color: rgba(10,10,10,.4);
  text-align: center;
  padding: 10px;
}
.stack-card__icon{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stack-card__empty span{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.4; }

/* Height itself is set inline by initServices (measured from the real
   content, which now varies a lot — 2 lines of copy vs. a photo grid), so
   the CSS side only owns the other open-state properties. */
.service.is-open .service__body{ opacity: 1; }
.service.is-open .service__arrow{ transform: rotate(135deg) scale(1); }

@media (max-width: 760px){
  .service__body{ grid-template-columns: 1fr; }
  .service__stack-wrap{ justify-self: center; margin: 8px 0 20px; }
}
.service:hover .service__row{ padding-left: 14px; }

/* Lightbox: one shared overlay for every "Voir la photo" button — opened
   with the currently front-facing stack photo, closed by the × button,
   the backdrop, or Escape. Body scroll is locked while it's open and
   restored on close, so the page picks up scrolling exactly where it
   left off. */
.lightbox{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: rgba(10,10,10,.9);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox__frame{
  position: relative;
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: scale(.94);
  transition: transform .35s var(--ease);
}
.lightbox.is-open .lightbox__frame{ transform: scale(1); }
.lightbox__frame img{
  display: block;
  max-width: 100%; max-height: calc(100vh - 160px);
  border-radius: 10px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
.lightbox__close{
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--cream);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform .25s var(--ease);
}
.lightbox__close:hover{ transform: scale(1.1); }
.service:hover .service__title{ color: var(--indigo); transform: translateX(6px); }

/* =========================================================
   PRICING
   ========================================================= */
.pricing{ padding: 60px 0 130px; position: relative; z-index: 1; }

.price-tabs{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.price-tab{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(10,10,10,.16);
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  opacity: .55;
  cursor: pointer;
  transition: opacity .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.price-tab__icon{ width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.price-tab:hover{ opacity: .85; }
.price-tab.is-active{ opacity: 1; border-color: var(--ink); background: var(--ink); color: var(--cream); }

.price-panel{ display: none; }
.price-panel.is-active{ display: block; animation: priceFadeIn .5s var(--ease); }
@keyframes priceFadeIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }

.price-panel__intro{ max-width: 640px; margin-bottom: 40px; }
.price-panel__tagline{
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.05; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.price-panel__desc{ font-size: 15.5px; line-height: 1.6; opacity: .72; max-width: 520px; }
.price-panel__note{ margin-top: 28px; font-size: 13.5px; opacity: .6; max-width: 560px; }

.price-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }

.price-card{
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(10,10,10,.14);
  border-radius: 20px;
  padding: 32px 28px 28px;
  background: var(--cream);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.price-card:hover{
  border-color: rgba(10,10,10,.32);
  /* !important: the entrance reveal (initReveals, GSAP) leaves an inline
     transform on this element after it animates in, which otherwise
     outranks any stylesheet rule — including this hover state. */
  transform: translateY(-14px) scale(1.025) !important;
  box-shadow: 0 34px 70px rgba(10,10,10,.16);
  z-index: 2;
}
.price-card--rec{ border-color: var(--indigo); box-shadow: 0 24px 60px rgba(31,47,224,.12); }
.price-card--rec:hover{ border-color: var(--indigo); box-shadow: 0 34px 80px rgba(31,47,224,.26); }
.price-card__badge{
  position: absolute; top: -13px; left: 28px;
  background: var(--indigo); color: var(--cream);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
}
.price-card__head{ margin-bottom: 22px; }
.price-card__name{ font-family: var(--font-display); font-weight: 700; text-transform: none; font-size: 22px; letter-spacing: 0; margin-bottom: 10px; color: var(--ink); }
.price-card__price{ display: flex; align-items: baseline; gap: 6px; }
.price-card__amount{ font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: -.01em; }
.price-card__period{ font-size: 13px; opacity: .6; }
.price-card__price--quote{
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -.005em; color: var(--indigo);
}
.price-card__cta{ justify-content: center; width: 100%; margin-bottom: 26px; padding: 13px 20px; font-size: 13.5px; }
.price-card__features{ display: flex; flex-direction: column; gap: 11px; margin: 0 0 22px; flex: 1; }
.price-card__features li{ display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.45; opacity: .82; }
.price-check{ width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-card__delay{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  opacity: .5; margin: 0; padding-top: 16px; border-top: 1px solid rgba(10,10,10,.1);
}

.pricing__legal{ margin-top: 56px; opacity: .4; }

@media (max-width: 980px){
  .price-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  /* A horizontally-scrolling row of tabs has the same problem the "Notre
     approche" steps had: nothing on screen hints that more sit off to the
     side, so people never find them. A 2-column grid puts all four in view
     at once — no gesture to discover. */
  .price-tabs{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .price-tab{
    justify-content: center;
    opacity: 1;
    background: var(--cream-dim);
    border-color: transparent;
  }
  .price-tab.is-active{ background: var(--ink); border-color: var(--ink); }
  .price-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   APPROACH — horizontal pinned scroll
   ========================================================= */
.approach{
  color: var(--cream);
  position: relative;
  z-index: 1;
}
.approach .section-head__eyebrow{ color: var(--sky); }
.approach__sticky{ padding-top: 100px; padding-bottom: 60px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.approach__track{
  display: flex; align-items: stretch; gap: 0;
  width: max-content;
}
.approach__spacer{ width: var(--pad); flex-shrink: 0; }
.approach-step{
  width: min(560px, 82vw);
  flex-shrink: 0;
  padding: 40px var(--pad) 0 0;
  border-left: 1px solid rgba(245,245,240,.2);
  padding-left: 40px;
  margin-right: 40px;
}
.approach-step__num{
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  color: var(--sky);
  display: block; margin-bottom: 20px;
}
.approach-step h3{ font-size: clamp(30px, 4vw, 48px); margin-bottom: 18px; }
.approach-step p{ font-size: 16px; line-height: 1.6; opacity: .72; max-width: 440px; text-transform: none; font-family: var(--font-body); }

/* On a phone, swiping sideways to find "step 2 of 4" isn't something people
   discover on their own — there's nothing on screen suggesting it. Stacking
   the steps in reading order below one another needs no gesture to find:
   scrolling down, which everyone already does, is all it takes. */
@media (max-width: 760px){
  .approach__sticky{ padding-top: 60px; overflow-x: visible; }
  .approach__track{ flex-direction: column; width: auto; gap: 48px; }
  .approach__spacer{ display: none; }
  .approach-step{
    width: auto;
    flex-shrink: initial;
    padding: 0 0 0 24px;
    margin-right: 0;
  }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{ position: relative; z-index: 1; padding: clamp(90px, 14vw, 170px) 0; }
.about__grid{
  display: flex; flex-direction: column; gap: 64px;
}
.about-card{
  position: relative;
  flex: 0 0 auto;
  width: min(420px, 46vw);
  aspect-ratio: 4/5;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px;
  transform-style: preserve-3d;
}
.about-card__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---- about-profile: overlapping card, avatar left + bio card to the
   right, overlapping sideways — same composition as the reference
   testimonial-carousel component (avatar + overlapping panel), just
   with our own founder instead of a rotating list of testimonials. ---- */
.about__visual{ position: relative; display: flex; align-items: center; }
.about-profile{
  position: relative;
  flex: 1 1 380px;
  margin-left: -70px;
  z-index: 2;
  background: var(--cream);
  color: var(--ink);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: 0 24px 50px rgba(10,10,10,.25);
}
.about-profile__name{
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; letter-spacing: -.005em;
  margin: 0 0 3px;
}
.about-profile__role{ font-family: var(--font-body); font-size: 12.5px; opacity: .6; margin: 0 0 16px; }
.about-profile__text{ font-size: 14px; line-height: 1.6; opacity: .82; margin: 0 0 12px; }
.about-profile__quote{
  font-family: var(--font-display); font-weight: 600; text-transform: none;
  font-size: 16px; color: var(--indigo);
  margin: 6px 0 18px; padding-left: 14px; border-left: 3px solid var(--indigo);
}
.about-profile__socials{ display: flex; gap: 10px; }
.about-profile__social{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.about-profile__social svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-profile__social:hover{ background: var(--indigo); transform: translateY(-2px); }

.about__title{ font-size: clamp(36px, 5.6vw, 64px); margin: 14px 0 26px; }
.about__text{ font-size: 16px; line-height: 1.7; opacity: .82; max-width: 560px; margin: 0 0 18px; }
.about__quote{
  font-family: var(--font-display); font-weight: 600; text-transform: none;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--indigo);
  margin: 30px 0; padding-left: 24px; border-left: 3px solid var(--indigo);
}
.timeline{ margin-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.timeline__item{ display: flex; gap: 18px; align-items: flex-start; }
.timeline__dot{
  width: 10px; height: 10px; border-radius: 50%; background: var(--indigo);
  margin-top: 6px; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(31,47,224,.15);
}
.timeline h4{ font-family: var(--font-body); text-transform: none; font-weight: 600; font-size: 16px; margin: 0 0 4px; letter-spacing: 0; }
.timeline p{ font-size: 14.5px; opacity: .7; margin: 0; max-width: 420px; }

@media (max-width: 900px){
  .about__visual{ flex-direction: column; align-items: stretch; }
  .about-card{ width: 100%; max-width: 400px; margin: 0 auto; }
  .about-profile{ margin: -46px 20px 0 20px; flex: none; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  position: relative;
  z-index: 1;
  color: var(--cream);
  padding: clamp(28px, 3.6vw, 48px) 0;
  overflow: hidden;
}
.contact__inner{ position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact .section-head__eyebrow{ color: var(--cream); opacity: .75; }
.contact__title{ font-size: clamp(40px, 7vw, 92px); color: var(--cream); }
.contact__desc{ font-size: 14px; opacity: .82; max-width: 420px; margin: 8px 0 16px; }
/* ---- contact form ---- */
.contact-form{
  width: 100%; max-width: 560px;
  text-align: left;
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-field{ display: flex; flex-direction: column; gap: 5px; }
.form-label{ color: var(--cream); opacity: .65; font-size: 12px; }
.form-input{
  width: 100%;
  background: rgba(245,245,240,.09);
  border: 1px solid rgba(245,245,240,.28);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form-input::placeholder{ color: rgba(245,245,240,.4); }
.form-input:focus{ outline: none; border-color: var(--cream); background: rgba(245,245,240,.15); }
.form-select{
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5F5F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.form-select option, .form-select optgroup{ color: var(--ink); }

/* ---- offer-select: animated custom dropdown over #cfOffer ----
   The native <select> stays in the DOM (real form field, no-JS fallback);
   JS hides it and layers this widget on top once it can drive it. */
.offer-select{ position: relative; }
.offer-select.is-enhanced .form-select{
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.offer-select__trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(245,245,240,.09);
  border: 1px solid rgba(245,245,240,.28);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.offer-select__trigger:hover{ border-color: rgba(245,245,240,.45); }
.offer-select.is-open .offer-select__trigger{ outline: none; border-color: var(--cream); background: rgba(245,245,240,.15); }
.offer-select__trigger-label{ opacity: .92; }
.offer-select__trigger-label.is-placeholder{ opacity: .4; }
.offer-select__chevron{ flex: none; width: 18px; height: 18px; transition: transform .25s var(--ease); }
.offer-select__chevron path{ stroke: var(--cream); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.offer-select.is-open .offer-select__chevron{ transform: rotate(180deg); }

.offer-select__panel{
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  max-height: 320px; overflow-y: auto;
  background: #101014;
  border: 1px solid rgba(245,245,240,.16);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.offer-select.is-open .offer-select__panel{
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.offer-select__group + .offer-select__group{ margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(245,245,240,.1); }
.offer-select__group-label{
  display: block; padding: 6px 10px 4px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sky);
}
.offer-select__option{
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px;
  background: transparent; color: var(--cream); font-size: 14px;
  cursor: pointer;
  opacity: 0; transform: translateX(-8px);
  transition: background .15s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}
.offer-select.is-open .offer-select__option{ opacity: 1; transform: translateX(0); }
.offer-select__option:hover, .offer-select__option:focus-visible{ background: rgba(245,245,240,.1); outline: none; }
.offer-select__option.is-selected{ color: var(--sky); }
.form-textarea{ resize: vertical; min-height: 56px; font-family: var(--font-body); }

.form-radios{ display: flex; flex-wrap: wrap; gap: 8px; }
.form-radio{ position: relative; cursor: pointer; }
.form-radio input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.form-radio span{
  display: inline-flex; align-items: center;
  padding: 7px 16px;
  border: 1px solid rgba(245,245,240,.28);
  border-radius: 100px;
  font-size: 13px; font-weight: 600;
  color: var(--cream); opacity: .65;
  transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.form-radio input:checked + span{
  background: var(--cream); color: var(--indigo); opacity: 1; border-color: var(--cream);
}
.form-radio input:focus-visible + span{ outline: 2px solid var(--cream); outline-offset: 2px; }

.contact-form__submit{ align-self: flex-start; padding: 12px 26px; font-size: 14px; }
.contact-form__submit:disabled{ opacity: .6; cursor: not-allowed; }
.contact-form__status{ color: var(--cream); opacity: .75; margin-top: -6px; min-height: 1.2em; font-size: 13px; }

.contact__meta{
  display: flex; gap: 70px; margin-top: 64px; flex-wrap: wrap; justify-content: center;
}
.contact__meta .mono{ opacity: .6; display: block; margin-bottom: 8px; }
.contact__meta p{ margin: 0; font-size: 15px; }
.link-underline{ border-bottom: 1px solid rgba(245,245,240,.5); transition: border-color .3s; }
.link-underline:hover{ border-color: var(--cream); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ position: relative; z-index: 1; color: var(--cream); padding-top: 10px; }
.footer__grid{
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 80px 0 60px;
  border-bottom: 1px solid rgba(245,245,240,.15);
}
.footer__brand{ display: flex; align-items: center; gap: 14px; }
.footer__mark{ width: 46px; height: 46px; }
.footer__word{ font-family: var(--font-display); font-weight: 800; font-size: 30px; }
.footer__col{ display: flex; flex-direction: column; gap: 12px; }
.footer__col-title{ color: var(--sky); margin-bottom: 6px; }
.footer__col a{ font-size: 14.5px; opacity: .78; transition: opacity .3s, transform .3s; display: inline-block; }
.footer__col a:hover{ opacity: 1; transform: translateX(4px); color: var(--sky); }
.footer__bottom{
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 0; font-size: 13px; opacity: .6;
}
.footer__top{ opacity: 1; border: 1px solid rgba(245,245,240,.3); border-radius: 100px; padding: 10px 18px; font-size: 12px; }
.footer__top:hover{ background: var(--cream); color: var(--ink); }

@media (max-width: 860px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .footer__brand{ grid-column: 1 / -1; margin-bottom: 20px; }
}

/* =========================================================
   MENU OVERLAY (mobile / all sizes fallback)
   ========================================================= */
.menu-overlay{
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--cream);
  z-index: 6000;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 20px) var(--pad) 50px;
  transform: translateY(-100%);
  transition: transform .7s var(--ease);
  overflow-y: auto;
}
.menu-overlay.is-open{ transform: translateY(0); }
.menu-overlay__links{ display: flex; flex-direction: column; gap: 6px; }
.menu-link{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 11vw, 90px);
  display: flex; align-items: baseline; gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245,245,240,.12);
  overflow: hidden;
}
.menu-link span{ font-family: var(--font-mono); font-size: 14px; color: var(--sky); }
.menu-link:hover{ color: var(--sky); padding-left: 16px; }
.menu-overlay__footer{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; }
.menu-overlay__social{ display: flex; gap: 20px; }
.menu-overlay__social a{ font-size: 14px; opacity: .7; }
.menu-overlay__social a:hover{ opacity: 1; }
.menu-overlay__mail{ font-family: var(--font-mono); font-size: 15px; border-bottom: 1px solid var(--cream); }

/* =========================================================
   OFFER MODAL — "Voir l'offre" on a pricing card
   ========================================================= */
.offer-modal{
  position: fixed; inset: 0;
  z-index: 15000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.offer-modal.is-open{
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease);
}
.offer-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,10,10,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.offer-modal__panel{
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: min(720px, 88vh);
  overflow-y: auto;
  background: var(--cream); color: var(--ink);
  border-radius: 26px;
  padding: 46px 42px 40px;
  box-shadow: 0 50px 110px rgba(10,10,10,.4);
  transform: translateY(26px) scale(.97);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .4s var(--ease);
}
.offer-modal.is-open .offer-modal__panel{ transform: translateY(0) scale(1); opacity: 1; }
.offer-modal__close{
  position: absolute; top: 22px; right: 22px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(10,10,10,.16);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-soft);
}
.offer-modal__close svg{ width: 15px; height: 15px; }
.offer-modal__close svg path{ stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.offer-modal__close:hover{ background: var(--ink); border-color: var(--ink); transform: rotate(90deg); }
.offer-modal__close:hover path{ stroke: var(--cream); }
.offer-modal__badge{
  display: none;
  background: var(--indigo); color: var(--cream);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  margin-bottom: 16px;
}
.offer-modal.has-badge .offer-modal__badge{ display: inline-block; }
.offer-modal__eyebrow{ color: var(--indigo); display: block; margin-bottom: 10px; }
.offer-modal__title{
  font-family: var(--font-display); font-weight: 800; text-transform: none;
  font-size: clamp(28px, 4.4vw, 38px); letter-spacing: -.01em; line-height: 1.02;
  margin-bottom: 14px;
}
.offer-modal__tagline{ font-size: 15px; line-height: 1.55; opacity: .72; margin-bottom: 26px; }
.offer-modal__features{ margin-bottom: 22px; }
.offer-modal__delay{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  opacity: .5; margin: 0 0 26px; padding-top: 16px; border-top: 1px solid rgba(10,10,10,.1);
}
.offer-modal__quote{ justify-content: center; width: 100%; padding: 15px 20px; }

@media (max-width: 640px){
  .offer-modal__panel{ padding: 40px 26px 32px; border-radius: 22px; }
}

/* =========================================================
   MAGNETIC (JS adds inline transform; this just enables transition fallback)
   ========================================================= */
.magnetic{ transition: transform .25s var(--ease-soft); will-change: transform; }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   RESPONSIVE — general
   ========================================================= */
@media (max-width: 640px){
  :root{ --nav-h: 76px; }
  .hero__scroll{ display: none; }
  .manifesto__pillars{ border-top: none; padding-top: 0; }
  .contact__meta{ gap: 36px; justify-content: flex-start; text-align: left; }
  .form-grid{ grid-template-columns: 1fr; }
}