/* ===========================================================
   Verrow Media — design tokens (from the brand book, verbatim)
   =========================================================== */
:root{
  --ink:#171717;
  --white:#FFFFFF;
  --cream:#F8F5EF;          /* off-white canvas, never pure #fff */
  --cream-2:#F1ECE2;        /* slightly deeper crème for alternating bands */
  --text-secondary:#8A857E;
  --hairline:#EBE8E3;

  --g-coral-1:#D6395A; --g-coral-2:#8A3FE0; --g-coral-3:#E88A55;
  --g-blue-1:#4A7BE8;  --g-blue-2:#7B5BE0;  --g-blue-3:#6FC9E8;
  --g-amber-1:#D89A2E; --g-amber-2:#4A9E6B; --g-amber-3:#C4D65E;
  --g-magenta-1:#C766E0; --g-magenta-2:#E8556B; --g-magenta-3:#5FA8E0;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .45s;
  --dur: .55s;
  --dur-slow: .8s;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 100px;

  --tshadow-on-gradient: 0 1px 3px rgba(10,8,20,.3), 0 10px 32px rgba(10,8,20,.16);

  /* Type scale — one set of sizes reused across every page, FR and EN alike.
     Letter-spacing stays per-selector (unchanged, per brand book). */
  --fs-h1: clamp(32px,4.4vw,52px);
  --fs-h2: clamp(28px,3.6vw,44px);
  --fs-h3: clamp(20px,2.2vw,24px);
  --fs-lede: clamp(18px,2vw,21px);
  --fs-body-lg: 17px;
  --fs-body: 16px;
  --fs-body-sm: 15.5px;
  --fs-small: 14.5px;
  --fs-meta: 13px;
  --fs-caption: 12.5px;
  --fs-label: 12px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
html{overflow-x:clip;scroll-behavior:smooth}
body{overflow-x:clip}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:var(--fs-body-lg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:1000;
  background:var(--ink);color:var(--white);padding:.8em 1.4em;border-radius:12px;
  transition:top var(--dur) var(--ease-out);
  text-decoration:none;font-weight:500;
}
.skip-link:focus{top:16px}

:focus-visible{outline:2px solid var(--g-coral-2);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{
  font-weight:500;
  letter-spacing:-0.10em;
  margin:0;
  text-transform:none;
}

.label{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:var(--fs-label);
  color:var(--text-secondary);
}
.label.on-gradient{color:rgba(255,255,255,.86)}

p{margin:0}

.container{
  max-width:1180px;
  margin:0 auto;
  padding-left:min(6vw,64px);
  padding-right:min(6vw,64px);
}

/* ---------- Grain texture (shared) ---------- */
.grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.13;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- Section rhythm — spacing only, no hairline separators ---------- */
.section{
  position:relative;
  padding:clamp(72px,11vw,150px) 0;
}
.section.on-cream-2{background:var(--cream-2)}

/* References page: the stats and testimonials panels read as one pair,
   so the gap between them is pulled in from the default section rhythm. */
.section.section--pair-top{padding-bottom:clamp(40px,6vw,84px)}
.section.section--pair-bottom{padding-top:clamp(40px,6vw,84px)}

.section-head{
  max-width:640px;
  margin-bottom:clamp(40px,6vw,72px);
}
.section-head h2{
  font-size:var(--fs-h2);
  line-height:1.15;
  margin-top:.5em;
}

/* ---------- Mesh-gradient bands (hero background, contained accent panels) ---------- */
.mesh{
  position:relative;
  overflow:hidden;
  color:var(--white);
  isolation:isolate;
}
.mesh .grain{opacity:.16}
.mesh-canvas{
  position:absolute;inset:-10%;
  width:120%;height:120%;
  filter:blur(46px) saturate(1.1);
  z-index:-1;
}
.mesh--coral .mesh-canvas{
  background:
    radial-gradient(38% 42% at 18% 24%, var(--g-coral-3) 0%, transparent 70%),
    radial-gradient(46% 50% at 78% 30%, var(--g-coral-2) 0%, transparent 72%),
    radial-gradient(55% 60% at 40% 82%, var(--g-coral-1) 0%, transparent 74%),
    linear-gradient(160deg,#B8355A,#7A3AD1 60%,#E08654);
  animation: drift-1 80s ease-in-out infinite alternate;
}
.mesh--blue .mesh-canvas{
  background:
    radial-gradient(40% 44% at 22% 26%, var(--g-blue-3) 0%, transparent 72%),
    radial-gradient(46% 50% at 80% 30%, var(--g-blue-2) 0%, transparent 72%),
    radial-gradient(56% 60% at 44% 86%, var(--g-blue-1) 0%, transparent 76%),
    linear-gradient(160deg,#3F6DD6,#6E4FCB 60%,#5FB6D6);
  animation: drift-1 72s ease-in-out infinite alternate;
}
.mesh--magenta .mesh-canvas{
  background:
    radial-gradient(40% 44% at 24% 28%, var(--g-magenta-3) 0%, transparent 72%),
    radial-gradient(46% 50% at 78% 28%, var(--g-magenta-1) 0%, transparent 72%),
    radial-gradient(56% 60% at 46% 86%, var(--g-magenta-2) 0%, transparent 76%),
    linear-gradient(160deg,#B85BD0,#D8506A 60%,#5498CE);
  animation: drift-2 78s ease-in-out infinite alternate;
}

@keyframes drift-1{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.06)}
}
@keyframes drift-2{
  0%{transform:translate3d(0,0,0) scale(1.02)}
  100%{transform:translate3d(3%,-2%,0) scale(1)}
}

/* A contained, rounded accent panel — color in a touch, never a full-bleed section (hero is the one exception) */
.panel-mesh{
  position:relative;overflow:hidden;color:var(--white);isolation:isolate;
  border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,64px);
}

/* ---------- Liquid glass — sober, Apple-like, never saturated or rainbow ---------- */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.46);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px) saturate(1.12);
  -webkit-backdrop-filter:blur(20px) saturate(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 24px 48px -28px rgba(20,15,30,.28);
}

/* glass on the plain crème canvas (no gradient behind it): a quieter, warmer variant */
.glass-on-cream{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 20px 40px -30px rgba(30,25,15,.22);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.95em 1.7em;
  border-radius:var(--radius-pill);
  font-weight:500;
  font-size:15px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:#000}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{border-color:var(--ink)}

.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:rgba(255,255,255,.85)}

.btn-glass{color:var(--white)}
.btn-glass:hover{background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.16))}

@media (pointer:coarse){
  .btn{min-height:44px}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,245,239,0);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}
.site-header.scrolled{
  background:rgba(248,245,239,.82);
  border-bottom-color:var(--hairline);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px min(6vw,64px);
}
.brand-lockup{
  display:flex;align-items:center;gap:13px;
  text-decoration:none;color:var(--ink);
  padding:8px;
}
.brand-lockup svg{width:27px;height:auto;display:block}
.brand-lockup span{font-weight:500;font-size:19px;letter-spacing:-.01em}

.main-nav{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.main-nav a{
  text-decoration:none;color:var(--ink);font-size:15px;font-weight:400;
  position:relative;padding:4px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);
  transition:right var(--dur) var(--ease-out);
}
.main-nav a:hover::after{right:0}
.main-nav a.btn{padding:.7em 1.4em}
.main-nav a.btn::after{display:none}

.nav-links{display:flex;align-items:center;gap:clamp(20px,3vw,36px)}
.nav-links a.is-active::after{right:0}

.lang-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;
}
.lang-toggle button{
  background:none;border:0;padding:2px 0;cursor:pointer;
  color:var(--text-secondary);
  transition:color var(--dur) var(--ease-out);
}
.lang-toggle button.active{color:var(--ink)}
.lang-toggle span{color:var(--text-secondary);opacity:.6}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:22px;height:1px;background:var(--ink);
  position:relative;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);
}
.nav-toggle span::before{position:absolute;top:-7px}
.nav-toggle span::after{position:absolute;top:7px}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;height:100vh;width:min(78vw,340px);
    background:var(--cream);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:28px;padding:0 40px;
    transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-out);
    border-left:1px solid var(--hairline);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:20px}
  .nav-toggle{display:block;z-index:110}
  body.nav-open{overflow:hidden}
}

/* ===========================================================
   Hero — one block, one continuous gradient. The mesh covers the
   full width of the stage, edge to edge, behind both columns;
   text and film both sit on top of that single shared layer, so
   shrinking the film can never expose crème or empty ground.
   =========================================================== */
.hero-stage{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch;
}
@media (max-width:960px){
  .hero-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr}
}

.hero-text-panel{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,5vw,64px);
}
.hero-text-panel-inner{max-width:560px}
.hero-text-panel h1{
  font-size:var(--fs-h1);
  line-height:1.14;
  color:var(--white);
  text-shadow:var(--tshadow-on-gradient);
  margin-top:22px;
}
.hero-sub{
  margin-top:26px;
  max-width:42ch;
  font-size:var(--fs-body-lg);
  line-height:1.65;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 12px rgba(10,8,20,.25);
}
.hero-actions{
  margin-top:38px;
  display:flex;flex-wrap:wrap;gap:14px;
}
.hero-reassurance{
  margin-top:24px;
  font-size:var(--fs-meta);
  color:rgba(255,255,255,.7);
}

.hero-media-col{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,40px);
}
.hero-media{
  position:relative;
  height:55vh;
  width:auto;
  aspect-ratio:9/16;
  max-width:100%;
  z-index:1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:
    0 50px 100px -32px rgba(138,63,224,.4),
    0 26px 56px -22px rgba(214,57,90,.24),
    0 10px 26px -12px rgba(20,15,30,.2);
}
@media (max-width:960px){
  .hero-media{height:min(42vh,40vw)}
}
.hero-media video{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

.hero-play-btn{
  position:absolute;inset:0;margin:auto;
  width:64px;height:64px;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);cursor:pointer;z-index:2;
  transition:transform var(--dur) var(--ease-out);
}
.hero-play-btn svg{width:22px;height:22px;margin-left:3px}
.hero-play-btn:hover{transform:scale(1.06)}

.hero-sound-btn{
  position:absolute;right:16px;bottom:16px;
  width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);cursor:pointer;z-index:2;
}
.hero-sound-btn svg{width:16px;height:16px}
.hero-sound-btn .icon-on{display:none}
.hero-sound-btn.is-on .icon-off{display:none}
.hero-sound-btn.is-on .icon-on{display:block}

.hero-play-btn,
.hero-sound-btn{border-radius:50%}
.hero-play-btn[hidden]{display:none}

/* ===========================================================
   Client logos — continuous marquee, cream band, edge fade
   =========================================================== */
.logos-strip{
  position:relative;
  background:var(--cream);
  overflow:hidden;
  padding:clamp(20px,2.4vw,28px) 0;
}
.logos-strip::before,
.logos-strip::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,10vw,160px);z-index:2;pointer-events:none;
}
.logos-strip::before{left:0;background:linear-gradient(90deg,var(--cream),rgba(248,245,239,0))}
.logos-strip::after{right:0;background:linear-gradient(270deg,var(--cream),rgba(248,245,239,0))}

.logos-track{
  display:flex;
  width:max-content;
  animation:logos-scroll 22s linear infinite;
}
.logos-set{
  display:flex;align-items:center;flex:none;
  gap:clamp(40px,5.5vw,88px);
  padding-right:clamp(40px,5.5vw,88px);
}
/* Chaque logo est rogné et dimensionné à surface visuelle égale (--h, en px) :
   les mots-logos larges sont plus bas, les logos compacts plus hauts, pour un
   poids visuel homogène. Rendu en aplat gris foncé, dévoilé en couleur au survol. */
.logos-track img{
  flex:none;
  height:calc(var(--h,22) * var(--logo-scale,1) * 1px);width:auto;
  object-fit:contain;
  filter:brightness(0) invert(.33);
  transition:filter var(--dur) var(--ease-out);
}
.logos-track img:hover{filter:none}

@keyframes logos-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (max-width:640px){
  .logos-track{--logo-scale:.74}
  .logos-set{gap:32px;padding-right:32px}
}

@media (prefers-reduced-motion: reduce){
  .logos-track{animation-play-state:paused}
}

/* ===========================================================
   Word-group headline reveal — the site's echo of the film's
   own word-by-word captions. Reserved for major headlines.
   =========================================================== */
.wg{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:calc(var(--gi,0) * 200ms);
  will-change:transform,opacity;
}
.title-groups.in .wg{opacity:1;transform:translateY(0)}

/* ===========================================================
   Positionnement
   =========================================================== */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,52px);
  margin-top:clamp(44px,5vw,60px);
}
.pillars > *{min-width:0}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}
.pillar h3{font-size:var(--fs-h3)}
.pillar p{margin-top:12px;color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.65}

.lede{
  font-size:var(--fs-lede);
  line-height:1.6;
  color:var(--ink);
  max-width:66ch;
}
.lede + .lede{margin-top:1.3em}

/* ===========================================================
   Services (own page)
   =========================================================== */
.services-list{margin-top:clamp(44px,5vw,60px);display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.service-row{
  display:grid;grid-template-columns:1fr 1.3fr;gap:40px;
  align-items:baseline;
}
.service-row > *{min-width:0}
@media (max-width:860px){
  .service-row{grid-template-columns:1fr;gap:14px}
}
.service-row h3{font-size:var(--fs-h3)}
.service-row p{color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.7;margin-top:10px}

/* ===========================================================
   Méthode (own page)
   =========================================================== */
.steps{
  margin-top:clamp(44px,5vw,60px);
  display:flex;flex-direction:column;gap:clamp(36px,4.6vw,52px);
}
.step{
  display:grid;grid-template-columns:1fr 1.3fr;gap:32px;
}
.step > *{min-width:0}
@media (max-width:760px){.step{grid-template-columns:1fr;gap:10px}}
.step h3{font-size:var(--fs-h3);margin-bottom:10px}
.step p{color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.7}

/* interactive profitability simulator — a bounded accent panel, not a section bleed */
.simulator-panel{margin-top:clamp(48px,6vw,64px)}
.simulator{color:#fff;max-width:820px}
.simulator-head{max-width:56ch}
.simulator-head .label.on-gradient{margin-bottom:10px;display:block}
.simulator-head p{color:rgba(255,255,255,.86);font-size:var(--fs-body-sm);line-height:1.65;margin-top:8px}

.simulator-inputs{
  margin-top:32px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.simulator-inputs > *{min-width:0}
@media (max-width:640px){.simulator-inputs{grid-template-columns:1fr}}

.sim-field{border-radius:var(--radius-md);padding:16px 20px}
.sim-field label{
  display:block;font-size:var(--fs-caption);color:rgba(255,255,255,.78);
  margin-bottom:8px;
}
.sim-field input{
  display:block;width:100%;background:transparent;border:0;outline:0;
  font-family:inherit;font-size:22px;font-weight:500;color:#fff;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.sim-field input::placeholder{color:rgba(255,255,255,.4)}
.sim-field input::-webkit-outer-spin-button,
.sim-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.simulator-results{
  margin-top:28px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
}
.simulator-results > *{min-width:0}
@media (max-width:640px){.simulator-results{grid-template-columns:1fr}}
.sim-result{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sim-result-label{font-size:var(--fs-caption);color:rgba(255,255,255,.78)}
.sim-result-value{font-size:19px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim-result--total{grid-column:1 / -1;padding-top:14px;margin-top:4px;border-top:1px solid rgba(255,255,255,.22)}
.sim-result--total .sim-result-label{color:rgba(255,255,255,.92);font-weight:500}
.sim-result--total .sim-result-value{font-size:24px}

.simulator-disclaimer{
  margin-top:24px;
  font-size:var(--fs-caption);line-height:1.6;
  color:rgba(255,255,255,.6);
  max-width:60ch;
}

/* ===========================================================
   Références (own page): testimonials + stats
   =========================================================== */
.refs-text{max-width:70ch}
.refs-text .lede{margin-top:18px}

.stats{
  margin-top:0;
  display:grid;grid-template-columns:1fr 1fr 1.15fr;grid-template-rows:auto auto;
  align-items:start;
  column-gap:clamp(20px,3vw,36px);
}
.stats > *{min-width:0}
@media (max-width:760px){
  .stats{grid-template-columns:1fr;row-gap:clamp(28px,4vw,44px)}
}
.stat{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;
  text-align:left;
}
.stat .value{
  grid-row:1;align-self:end; /* les trois valeurs reposent sur la même ligne de base */
  font-size:clamp(20px,2.5vw,30px);font-weight:500;letter-spacing:-0.10em;line-height:1.12;
  word-spacing:.16em; /* garde lisible l'espace des milliers malgré l'interlettrage serré */
  color:#fff;
  filter:drop-shadow(0 8px 20px rgba(10,8,20,.28));
}
@media (max-width:760px){
  .stat .value{font-size:26px}
}
.stat .badge{
  grid-row:2;align-self:start;
  display:inline-flex;margin-top:14px;
  padding:.45em 1.1em;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.stat .badge span{font-size:var(--fs-caption);color:rgba(255,255,255,.92);font-weight:500}
/* Description longue : même typographie que les pilules, arrondi adapté au multi-lignes */
.stat .badge--wide{
  display:flex;width:100%;
  border-radius:var(--radius-md);
  padding:.6em 1.1em;
}
.stat .badge--wide span{line-height:1.5}

.testimonials{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.testimonials > *{min-width:0}
@media (max-width:960px){.testimonials{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.testimonials{grid-template-columns:1fr}}

.testimonial{
  padding:26px;
  color:#fff;
  display:flex;flex-direction:column;
}
.testimonial .stars{display:flex;gap:3px}
.testimonial .stars svg{width:14px;height:14px;fill:#F0D27A}
.testimonial p{margin-top:16px;font-size:var(--fs-body-sm);line-height:1.65;color:rgba(255,255,255,.94);flex:1}
.testimonial .date{margin-top:18px;font-size:var(--fs-caption);color:#fff}

/* ===========================================================
   FAQ
   =========================================================== */
.faq-list{margin-top:clamp(36px,5vw,52px);max-width:820px}
.faq-item{border-top:1px solid var(--hairline)}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-size:var(--fs-body-lg);font-weight:500;color:var(--ink);
}
.faq-q .plus{
  flex:none;width:20px;height:20px;position:relative;
}
.faq-q .plus::before,.faq-q .plus::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transform:translate(-50%,-50%);
  transition:transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq-q .plus::before{width:14px;height:1px}
.faq-q .plus::after{width:1px;height:14px}
.faq-item.open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.faq-a{
  overflow:hidden;height:0;
  transition:height var(--dur-slow) var(--ease-in-out);
}
.faq-a p{padding-bottom:26px;color:var(--text-secondary);font-size:var(--fs-body-sm);line-height:1.7;max-width:64ch}

/* ===========================================================
   Simple page intro (Services / Méthode / Références headers)
   =========================================================== */
.page-intro{padding-top:clamp(64px,9vw,110px);padding-bottom:clamp(20px,3vw,32px)}
.page-intro .label{margin-bottom:18px;display:block}
.page-intro h1{
  font-size:var(--fs-h1);
  line-height:1.12;
  max-width:16ch;
}
.page-intro .lede{margin-top:24px}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.72);
  padding:clamp(48px,6vw,72px) 0 32px;
}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;
  padding-bottom:36px;
}
.footer-brand .brand-lockup{color:#fff;padding-left:0}
.footer-brand p{margin-top:14px;color:rgba(255,255,255,.55);font-size:var(--fs-small);max-width:32ch}
.footer-links{display:flex;gap:clamp(40px,6vw,88px);flex-wrap:wrap}
.footer-col h5{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:3px;color:rgba(255,255,255,.5);font-weight:500}
.footer-col a{
  display:block;margin-top:14px;color:rgba(255,255,255,.82);text-decoration:none;font-size:var(--fs-small);
}
.footer-col a:hover{color:#fff}
.footer-social{display:flex;align-items:center;gap:14px;margin-top:14px}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  transition:border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.footer-social a:hover{border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px;fill:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:24px;font-size:var(--fs-meta);color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:8px;
}
.footer-bottom a{color:rgba(255,255,255,.6);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* ===========================================================
   Entrance choreography (generic reveal system)
   =========================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}

.stagger > *{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
.stagger.in > *{opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(1){transition-delay:0s}
.stagger.in > *:nth-child(2){transition-delay:.1s}
.stagger.in > *:nth-child(3){transition-delay:.2s}
.stagger.in > *:nth-child(4){transition-delay:.3s}
.stagger.in > *:nth-child(5){transition-delay:.4s}
.stagger.in > *:nth-child(6){transition-delay:.5s}
.stagger.in.retired > *{transition-delay:0s!important}

body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused!important}

/* ===========================================================
   Legal pages (mentions légales, confidentialité, cookies, CGU)
   Sober and readable on purpose: no motion, no gradient, a
   narrow column, a plain hairline between sections.
   =========================================================== */
.page-intro.legal-intro h1{max-width:26ch}
.legal-updated{color:var(--text-secondary);font-size:var(--fs-small);margin-top:14px}

.legal-section{padding-top:0}
.legal-content{max-width:720px}
.legal-content > * + *{margin-top:1.3em}
.legal-content > p,
.legal-content > ul,
.legal-content > ol{font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.legal-content ul,
.legal-content ol{padding-left:1.3em}
.legal-content li + li{margin-top:.5em}
.legal-content strong{font-weight:500}
.legal-content a{color:var(--ink);text-decoration-color:var(--hairline);text-underline-offset:3px}
.legal-content a:hover{text-decoration-color:var(--ink)}

.legal-content h2{
  font-size:var(--fs-h3);
  line-height:1.3;
}
.legal-divider{border:0;border-top:1px solid var(--hairline);margin:2.8em 0 0}
.legal-divider + h2{margin-top:1.4em}

.legal-table{width:100%;border-collapse:collapse;font-size:var(--fs-body-sm);line-height:1.6}
.legal-table th,
.legal-table td{padding:12px 18px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline)}
.legal-table tr:first-child th,
.legal-table tr:first-child td{border-top:1px solid var(--hairline)}
.legal-table td:first-child,
.legal-table th:first-child{color:var(--text-secondary);width:30%}
.legal-table th{font-weight:500;color:var(--text-secondary)}

.legal-note{
  padding:16px 20px;
  border-left:2px solid var(--hairline);
  color:var(--text-secondary);
  font-size:var(--fs-small);
  line-height:1.7;
}
.legal-note + .legal-note{margin-top:.9em}
.legal-note strong{color:var(--ink)}

.legal-outro{margin-top:2.8em;padding-top:2.8em;border-top:1px solid var(--hairline)}

@media (max-width:760px){
  .legal-table td:first-child,
  .legal-table th:first-child{width:auto}
}

/* ===========================================================
   Reduced motion + overflow guard
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .wg{opacity:1!important;transform:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
  .mesh-canvas{animation:none!important}
}

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